feat: 备货订单左侧状态树和查询条件开发

src/api/outOfStockStis.ts

 import axios from './axios'
 import { BasePaginationData, BaseRespData } from '@/types/api'
-import { SearchForm, OutOfStockItem } from '@/types/api/outOfStockStatistics'
+import { SearchForm, OutOfStockItem } from '@/types/api/supply/outOfStockStatistics'
 export function getOutOfStockStatisticsListApi(
   data: SearchForm,
   currentPage: number,

src/router/index.ts

@@ -170,6 +170,13 @@ const router = createRouter({
           component: () => import('@/views/supply/OutOfStockStatistics.vue')
         },
         {
+          path: '/supply/stocking-order',
+          meta: {
+            title: '备货订单',
+          },
+          component: () => import('@/views/supply/stockingOrder/index.vue'),
+        },
+        {
           path: '/system/delivery-note',
           meta: {
             title: '定制发货单',

src/router/menu.ts

@@ -11,11 +11,6 @@ const menu: MenuItem[] = [
     id: 1,
     label: '概览',
   },
-  // {
-  //   index: '/product',
-  //   id: 11,
-  //   label: '商品',
-  // },
   {
     index: '4',
     id: 7,
@@ -159,8 +154,13 @@ const menu: MenuItem[] = [
         id: 1,
       },
       {
-        index: '/supply/supplierManagement',
+        label: '备货订单',
+        index:'/supply/stocking-order',
         id: 2,
+      },
+      {
+        index: '/supply/supplierManagement',
+        id: 3,
         label: '供应商管理',
       },
     ],
@@ -238,17 +238,5 @@ const menu: MenuItem[] = [
       },
     ],
   },
-  // {
-  //   index: '',
-  //   id: 3,
-  //   label: '生产管理',
-  //   children: [
-  //     {
-  //       index: '/production/complete',
-  //       id: 4,
-  //       label: '生产完成',
-  //     }
-  //   ]
-  // },
 ]
 export default menu

src/styles/common.scss

@@ -116,4 +116,4 @@ img {
 }
 .mb-10 {
   margin-bottom: 10px;
-}
+}
\ No newline at end of file

src/styles/element.scss

@@ -32,6 +32,10 @@
     color: #409eff !important;
   }
 }
+.el-form-item {
+  margin-right: 10px !important;
+  margin-bottom: 10px !important;
+}
 :root {
   --el-menu-icon-width: 0px;
 }

src/types/api/supply/stockingOrder.ts

+export interface TreeData {
+  statusName: string
+  statusCode: string
+  children?: TreeData[]
+  quantity?: number
+}
+export interface SearchForm {
+  pageSize: number
+  currentPage: number
+  sku: string
+}
\ No newline at end of file

src/views/supply/stockingOrder/index.vue

+<template>
+  <div class="stocking-order-page card h-100 flex overflow-hidden">
+    <div class="order-status">
+      <ElTree
+        ref="treeRef"
+        default-expand-all
+        :expand-on-click-node="false"
+        :default-expanded-keys="[]"
+        :highlight-current="true"
+        node-key="statusCode"
+        :data="treeData"
+        :props="{ children: 'children', label: 'statusName' }"
+        @node-click="nodeClick"
+      >
+        <template #default="{ data }">
+          <div class="tree-node">
+            <div class="tree-node-label">{{ data.statusName }}</div>
+            <div
+              v-if="data.quantity || data.quantity === 0"
+              class="tree-node-count"
+            >
+              {{ `(${data.quantity})` }}
+            </div>
+          </div>
+        </template>
+      </ElTree>
+    </div>
+    <div class="order-content flex-1 flex-column overflow-hidden">
+      <div class="header">
+        <div class="header-search-form">
+          <ElForm
+            ref="searchFormRef"
+            :model="searchForm"
+            inline
+            label-width="70px"
+            class="search-form"
+          >
+            <ElFormItem label="备货仓库" prop="orderNumber">
+              <ElInput
+                v-model="searchForm.orderNumber"
+                placeholder="订单号"
+                class="form-input"
+              />
+            </ElFormItem>
+            <ElFormItem label="制单时间" prop="orderCreateTime">
+              <ElDatePicker
+                v-model="searchForm.orderCreateTime"
+                type="datetimerange"
+                clearable
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                class="form-input"
+              />
+            </ElFormItem>
+            <ElFormItem label="备货单号" prop="inNo">
+              <ElInput
+                v-model="searchForm.inNo"
+                clearable
+                placeholder="备货单号"
+                class="form-input"
+              />
+            </ElFormItem>
+            <ElFormItem label="供应商" prop="sku">
+              <ElInput class="form-input"></ElInput>
+            </ElFormItem>
+            <ElFormItem label="发货状态" prop="sku">
+              <ElInput class="form-input"></ElInput>
+            </ElFormItem>
+            <ElFormItem label="备货员" prop="sku">
+              <ElInput class="form-input"></ElInput>
+            </ElFormItem>
+            <ElFormItem label="库存SKU" prop="sku">
+              <ElInput class="form-input"></ElInput>
+            </ElFormItem>
+            <ElFormItem label="商品名称" prop="sku">
+              <ElInput
+                v-model="searchForm.skuName"
+                clearable
+                placeholder="请输入商品名称"
+                class="form-input"
+              ></ElInput>
+            </ElFormItem>
+            <ElFormItem label="备注" prop="sku">
+              <ElInput class="form-input"></ElInput>
+            </ElFormItem>
+
+            <ElFormItem class="form-item-buttons">
+              <ElButton type="primary">查询</ElButton>
+              <ElButton>重置</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </div>
+        <div class="header-operation"></div>
+      </div>
+      <div class="table-content">
+        <SplitDiv size="50">
+          <template #top></template>
+          <template #bottom></template>
+        </SplitDiv>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="tsx">
+import { TreeData, SearchForm } from '@/types/api/supply/stockingOrder'
+import { useValue } from '@/utils/hooks/useValue'
+import { ref } from 'vue'
+const treeData = ref<TreeData[]>([
+  {
+    children: [
+      {
+        statusCode: '0',
+        statusName: '待提交',
+        quantity: 0,
+      },
+      {
+        statusCode: '1',
+        statusName: '待审核',
+        quantity: 0,
+      },
+      {
+        statusCode: '2',
+        statusName: '备货中',
+        quantity: 0,
+      },
+      {
+        statusCode: '3',
+        statusName: '备货完成',
+        quantity: 0,
+      },
+      {
+        statusCode: '4',
+        statusName: '已取消',
+        quantity: 0,
+      },
+    ],
+    statusCode: '-1',
+    statusName: '全部',
+  },
+])
+const treeRef = ref()
+const statusCode = ref<string>('-1')
+const [searchForm] = useValue<SearchForm>({
+  pageSize: 20,
+  currentPage: 1,
+  sku: '',
+})
+const nodeClick = (data: TreeData) => {
+  statusCode.value = data.statusCode
+}
+</script>
+<style lang="scss" scoped>
+.order-status {
+  width: 160px;
+  :deep(.el-tree-node__content) {
+    height: 30px;
+    line-height: 30px;
+  }
+  :deep(.el-tree-node__label) {
+    font-size: 13px;
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    color: black !important;
+
+    padding: 3px 7px;
+  }
+
+  :deep(.el-tree-node__expand-icon) {
+    display: none;
+  }
+
+  :deep(.is-current) {
+    .tree-node-label,
+    .tree-node-count {
+      background-color: #ecf5ff;
+      color: #409eff !important;
+    }
+
+    .el-tree-node__children {
+      .tree-node-label,
+      .tree-node-count {
+        background-color: transparent !important;
+        color: black !important;
+      }
+    }
+  }
+  :deep(.el-tree-node__label) {
+    font-size: 13px;
+    color: rgb(96, 98, 102);
+    cursor: pointer;
+  }
+
+  :deep(.el-tree-node__expand-icon) {
+    display: none;
+  }
+
+  :deep(.el-tree-node__label) {
+    display: inline-block;
+    width: 100%;
+    color: black !important;
+
+    padding: 3px 7px;
+  }
+
+  :deep(.is-current) {
+    .el-tree-node__label {
+      background-color: #ecf5ff;
+      color: #409eff !important;
+    }
+
+    .el-tree-node__children {
+      .el-tree-node__label {
+        background-color: transparent !important;
+        color: black !important;
+      }
+    }
+  }
+}
+.tree-node {
+  display: flex;
+  color: #333;
+  font-weight: 500;
+}
+.table-content {
+  flex: 1;
+}
+
+.search-form {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: flex-start;
+}
+</style>