feat: 主表和底部明细页面开发

80481a71 · qinjianhui · dbcacf03 · 80481a71 · 80481a71 · 80481a71
Commit 80481a71 authored Jan 15, 2026 by qinjianhui
14 changed files
--- a/components.d.ts
+++ b/components.d.ts
@@ -54,7 +54,6 @@ declare module 'vue' {
    ElTag: typeof import('element-plus/es')['ElTag']
    ElTimeline: typeof import('element-plus/es')['ElTimeline']
    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ElTree: typeof import('element-plus/es')['ElTree']
    ElUpload: typeof import('element-plus/es')['ElUpload']

--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -5,6 +5,7 @@ import { LogisticBill } from '@/types/api/podMakeOrder'
 import { userData } from '@/types/api/user'
 import { VersionImageList } from '@/types/api/typesetting'
+import { WarehouseListData } from '@/types'
 // 获取物流公司
 export function getLogisticsCompanyList() {
@@ -49,3 +50,14 @@ export function getLogisticCNApi(content: string) {
    `factory/podJomallOrder/getOrderByThirdSubOrderNumber?thirdSubOrderNumber=${content}`,
  )
 }
+// 获取仓库列表
+export function loadWarehouseListApi() {
+  return axios.get<never, BaseRespData<WarehouseListData[]>>(
+    'factoryWarehouseInfo/getAll',
+  )
+}
+// 获取用户列表
+export function getEmployeeListApi() {
+  return axios.get<never, BaseRespData<userData[]>>(`/factory/factoryUser/list`)
+}
--- a/src/api/podCnOrder.ts
+++ b/src/api/podCnOrder.ts
@@ -5,7 +5,6 @@ import {
  SearchForm,
  Tab,
  LogListData,
-  WarehouseListData,
  LogisticsData,
  ExportParams,
  IconfirmSubmit,
@@ -39,10 +38,6 @@ export function syncReceiverAddress(data: number[]) {
  )
 }
-export function getEmployeeListApi() {
-  return axios.get(`/factory/factoryUser/list`)
-}
 // 播种墙配货 扫码放入箱子
 export function getPackingCnDataApi(
  code: string,
@@ -419,11 +414,7 @@ export function getLogisticsCalculation(id: number) {
    { params: { id } },
  )
 }
-export function loadWarehouseListApi() {
-  return axios.get<never, BaseRespData<WarehouseListData[]>>(
-    'factoryWarehouseInfo/getAll',
-  )
-}
 export function refreshMaterialApi(data: {
  orderIds?: string
  productIds?: string

--- a/src/api/podUsOrder.ts
+++ b/src/api/podUsOrder.ts
@@ -6,7 +6,6 @@ import {
  Tab,
  LogListData,
  ProductionClient,
-  WarehouseListData,
  LogisticsData,
  ExportParams,
  InterceptStateGroupData,
@@ -310,11 +309,6 @@ export function getLogisticsCalculation(id: number) {
    { params: { id } },
  )
 }
-export function loadWarehouseListApi() {
-  return axios.get<never, BaseRespData<WarehouseListData[]>>(
-    'factoryWarehouseInfo/getAll',
-  )
-}
 export function refreshMaterialApi(data: {
  orderIds?: string
  productIds?: string
@@ -640,11 +634,6 @@ export function getAccountCodeByFactoryIdApi(params: { token: string }) {
 export function getLogisticsWayApi() {
  return axios.get(`logisticsWay/usableAllList`)
 }
-export function getEmployeeListApi() {
-  return axios.get(`/factory/factoryUser/list`)
-}
 // 打印拣货单item
 export function printPickPdfByBatchNumberApi(params: {
  batchArrangeNumber: string

--- a/src/api/stockingOrder.ts
+++ b/src/api/stockingOrder.ts
+import axios from './axios'
+import { BasePaginationData, BaseRespData } from '@/types/api'
+import { SearchForm, TableData, TreeData } from '@/types/api/supply/stockingOrder'
+export function getStockingOrderListApi(
+  data: SearchForm,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<TableData>>(
+    'factory/supply/stockingUpManage/list_page',
+    { ...data, currentPage, pageSize },
+  )
+}
+export function getStockingOrderStatusTreeApi() {
+  return axios.get<never, BaseRespData<TreeData[]>>(
+    'factory/supply/stockingUpManage/getStatusTree',
+  )
+}
\ No newline at end of file
--- a/src/types/api/podUsOrder.ts
+++ b/src/types/api/podUsOrder.ts
@@ -194,16 +194,7 @@ export interface PodOrderRes extends ProductList {
  note?: Array<{ prop: string | number; value: string | number }>
  imgList: cardImages[]
 }
-export interface WarehouseListData {
-  code?: string
-  defaulted?: number
-  factoryCode?: string
-  factoryId?: number
-  id: number
-  name?: string
-  remarks?: string
-  sort?: number
-}
 export interface LogisticsData {
  logisticsWayName: string // 物流名称
  warehouseName: string // 发货仓库

--- a/src/types/api/supply/stockingOrder.ts
+++ b/src/types/api/supply/stockingOrder.ts
 export interface TreeData {
-  statusName: string
+  name: string
-  statusCode: string
+  code: string
  children?: TreeData[]
-  quantity?: number
+  countQuantity?: number
+  id?: number
 }
 export interface SearchForm {
-  pageSize: number
  currentPage: number
-  sku: string
+  endDate?: string
+  pageSize: number
+  shippingStatus?: string
+  startDate?: string
+  status?: string
+  stockingUpManageNo?: string
+  stockingUpUserId?: string
+  supplierId?: string
+  warehouseId?: string | number[]
+  warehouseSku?: string | number[]
+  warehouseSkuName?: string
+  remark?: string
+}
+export interface TableData {}
+export interface StockProduct {
+  skuImage?: string
+  productName?: string
+  styleNumber?: string
+  warehouseSku?: string
+  stockQuantity?: number
+  stockUnitPrice?: number
+  stockAmount?: number
+  unshippedQuantity?: number
+  shippedQuantity?: number
+  inWarehouseQuantity?: number
+  defectiveQuantity?: number
 }
+export interface supplierData {}
--- a/src/types/index.ts
+++ b/src/types/index.ts
+// 放系统中公共类型
+export interface WarehouseListData {
+  code?: string
+  defaulted?: number
+  factoryCode?: string
+  factoryId?: number
+  id: number
+  name?: string
+  remarks?: string
+  sort?: number
+}
\ No newline at end of file
--- a/src/views/logistics/logisticsMethod.vue
+++ b/src/views/logistics/logisticsMethod.vue
@@ -86,10 +86,10 @@ import {
  getTiktokCarrier,
 } from '@/api/logistics'
 import type { FormItemRule } from 'element-plus'
-import { WarehouseListData } from '@/types/api/podUsOrder'
+import { WarehouseListData } from '@/types'
 import { ISeachFormConfig } from '@/types/searchType'
 import { TableColumn } from '@/components/VxeTable'
-import { loadWarehouseListApi } from '@/api/podUsOrder'
+import { loadWarehouseListApi } from '@/api/common'
 import type {
  LogisticsMethod,
  platformObj,

--- a/src/views/order/podCN/index.vue
+++ b/src/views/order/podCN/index.vue
@@ -2812,7 +2812,6 @@ import {
  printPrintOrderApi,
  stockOutCheckApi,
  toBePickingApi,
-  loadWarehouseListApi,
  getLogisticsCalculation,
  refreshProductInformationApi,
  composingDesignImages,
@@ -2849,10 +2848,11 @@ import {
  getCustomTagListCnApi,
  printNormalPdf,
  changeLogisticsApi,
-  getEmployeeListApi,
  allErpCodeListApi,
  updateProductOutOfStockApi,
 } from '@/api/podCnOrder'
+import { loadWarehouseListApi, getEmployeeListApi } from '@/api/common'
 // import { logisticsCompanyAllCodelist } from '@/api/logistics.ts'
 import { BaseRespData } from '@/types/api'
@@ -2870,7 +2870,6 @@ import {
  ProductionClient,
  SearchForm,
  Tab,
-  WarehouseListData,
  cardImages,
  AddressInfo,
  LogisticsData,
@@ -2878,6 +2877,7 @@ import {
  CraftListData,
  ExportParams,
 } from '@/types/api/podCnOrder'
+import { WarehouseListData } from '@/types'
 import usePageList from '@/utils/hooks/usePageList'
 import { useValue } from '@/utils/hooks/useValue'
 import { showConfirm } from '@/utils/ui'
@@ -2904,6 +2904,7 @@ import {
  type RouteLocationNormalized,
 } from 'vue-router'
 import UpdateCustomDeclarationInfoDialog from './components/UpdateCustomDeclarationInfoDialog.vue'
+import { userData } from '@/types/api/user.ts'
 declare global {
  interface Window {
@@ -2977,7 +2978,7 @@ const sourceList = [
  },
 ]
 const sizes = ['FS', 'XS', 'S', 'M', 'L', 'XL', 'XXL', '3XL', '4XL', '5XL']
-const employeeList = ref<{ account: string; id: number }[]>([])
+const employeeList = ref<userData[]>([])
 const exportData = () => {
  exportVisible.value = true

--- a/src/views/order/podUs/index.vue
+++ b/src/views/order/podUs/index.vue
@@ -3147,7 +3147,7 @@
 </template>
 <script setup lang="tsx">
 import LogisticsWaySelect from '../../logistics/components/LogisticsWaySelect.tsx'
-import { getUserMarkList } from '@/api/common'
+import { getUserMarkList, loadWarehouseListApi } from '@/api/common'
 // import { AnyObject } from '@/types/api/warehouse'
 import uploadBox from '@/components/uploadBox.vue'
 import { convertToChinaTime } from '@/utils/index'
@@ -3180,7 +3180,6 @@ import {
  printPrintOrderApi,
  stockOutCheckApi,
  toBePickingApi,
-  loadWarehouseListApi,
  getLogisticsCalculation,
  refreshMaterialApi,
  getTrackingNumberApi,
@@ -3226,7 +3225,6 @@ import {
  getLogisticsWayApi,
  printNormalPickPdfApi,
  updatePRNDownloadStatus,
-  getEmployeeListApi,
  updateProductOutOfStockApi,
 } from '@/api/podUsOrder'
 import { BaseRespData } from '@/types/api'
@@ -3234,7 +3232,7 @@ import { BaseRespData } from '@/types/api'
 import UpdateAddress from './components/updateAddress.vue'
 import { getAllCountryApi } from '@/api/logistics.ts'
+import { getEmployeeListApi } from '@/api/common'
 import TableView from '@/components/TableView.vue'
 import {
  LogListData,
@@ -3243,7 +3241,6 @@ import {
  ProductionClient,
  SearchForm,
  Tab,
-  WarehouseListData,
  cardImages,
  AddressInfo,
  LogisticsData,
@@ -3279,6 +3276,7 @@ import platformJson from '../../../json/platform.json'
 import { getToken } from '@/api/axios'
 import usePermissionBtnStore from '@/store/permission'
 import ReissueOrderComponent from './components/ReissueOrder.vue'
+import { WarehouseListData } from '@/types'
 const permissionBtns = usePermissionBtnStore()
@@ -3288,6 +3286,7 @@ import {
  type RouteLocationNormalized,
 } from 'vue-router'
 import PrintWarehouseSkuTag from '@/views/order/components/printWarehouseSkuTag.vue'
+import { userData } from '@/types/api/user.ts'
 declare global {
  interface Window {
@@ -3325,7 +3324,7 @@ const printWarehouseSkuDialogRef = ref()
 const isAuto = ref(true)
 const countryList = ref([])
 const logisticsWayList = ref<{ name: string; id: number }[]>([])
-const employeeList = ref<{ account: string; id: number }[]>([])
+const employeeList = ref<userData[]>([])
 const currentRow = ref<AddressInfo>({
  receiverName: '',
  receiverPhone: '',

--- a/src/views/supply/OutOfStockStatistics.vue
+++ b/src/views/supply/OutOfStockStatistics.vue
@@ -107,9 +107,9 @@
 import { computed, ref, onMounted } from 'vue'
 import TableView from '@/components/TableView.vue'
 import usePageList from '@/utils/hooks/usePageList'
-import { loadWarehouseListApi } from '@/api/podCnOrder'
+import { loadWarehouseListApi } from '@/api/common'
-import type { WarehouseListData } from '@/types/api/podCnOrder'
+import { WarehouseListData } from '@/types'
-import { SearchForm, OutOfStockItem } from '@/types/api/outOfStockStatistics'
+import { SearchForm, OutOfStockItem } from '@/types/api/supply/outOfStockStatistics'
 import {
  getOutOfStockStatisticsListApi,
  exportOutOfStockStatisticsListApi,

--- a/src/views/supply/stockingOrder/StockingOrderDetailTabs.vue
+++ b/src/views/supply/stockingOrder/StockingOrderDetailTabs.vue
+<template>
+  <ElTabs v-model="activeTab" class="detail-tabs">
+    <ElTabPane name="stockProducts" label="备货商品">
+      <div class="detail-table-content">
+        <TableView
+          :serial-numberable="true"
+          :columns="stockProductsColumns"
+          :paginated-data="stockProductsData"
+        />
+      </div>
+    </ElTabPane>
+    <ElTabPane name="relatedDocuments" label="关联单据">
+      <div class="detail-table-content">
+        <div class="empty-content">暂无数据</div>
+      </div>
+    </ElTabPane>
+    <ElTabPane name="internalMemo" label="内部便签">
+      <div class="detail-table-content">
+        <div class="empty-content">暂无数据</div>
+      </div>
+    </ElTabPane>
+    <ElTabPane name="operationLog" label="操作日志">
+      <div class="detail-table-content">
+        <div class="empty-content">暂无数据</div>
+      </div>
+    </ElTabPane>
+  </ElTabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import TableView from '@/components/TableView.vue'
+import { StockProduct } from '@/types/api/supply/stockingOrder'
+const stockProductsColumns = computed(() => {
+  return [
+    {
+      label: 'SKU图片',
+      prop: 'skuImage',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '商品名称',
+      prop: 'productName',
+      minWidth: 200,
+      align: 'left',
+    },
+    {
+      label: '款号',
+      prop: 'styleNumber',
+      width: 120,
+      align: 'center',
+    },
+    {
+      label: '库存SKU',
+      prop: 'warehouseSku',
+      width: 150,
+      align: 'center',
+    },
+    {
+      label: '备货数量',
+      prop: 'stockQuantity',
+      width: 100,
+      align: 'right',
+    },
+    {
+      label: '备货单价',
+      prop: 'stockUnitPrice',
+      width: 100,
+      align: 'right',
+    },
+    {
+      label: '备货金额',
+      prop: 'stockAmount',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '未发货数量',
+      prop: 'unshippedQuantity',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '已发货数量',
+      prop: 'shippedQuantity',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '已入库数量',
+      prop: 'inWarehouseQuantity',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '不良品数量',
+      prop: 'defectiveQuantity',
+      width: 120,
+      align: 'right',
+    },
+  ]
+})
+defineProps<{
+  stockProductsData: StockProduct[]
+}>()
+const activeTab = ref('stockProducts')
+</script>
+<style lang="scss" scoped>
+.detail-tabs {
+  height: 100%;
+  display: flex;
+  :deep(.el-tab-pane) {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.detail-table-content {
+  height: 100%;
+  overflow: hidden;
+}
+.empty-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
+</style>
--- a/src/views/supply/stockingOrder/index.vue
+++ b/src/views/supply/stockingOrder/index.vue
@@ -7,19 +7,19 @@
        :expand-on-click-node="false"
        :default-expanded-keys="[]"
        :highlight-current="true"
-        node-key="statusCode"
+        node-key="code"
        :data="treeData"
-        :props="{ children: 'children', label: 'statusName' }"
+        :props="{ children: 'children', label: 'name' }"
        @node-click="nodeClick"
      >
        <template #default="{ data }">
          <div class="tree-node">
-            <div class="tree-node-label">{{ data.statusName }}</div>
+            <div class="tree-node-label">{{ data.name }}</div>
            <div
-              v-if="data.quantity || data.quantity === 0"
+              v-if="data.countQuantity || data.countQuantity === 0"
              class="tree-node-count"
            >
-              {{ `(${data.quantity})` }}
+              {{ `(${data.countQuantity})` }}
            </div>
          </div>
        </template>
@@ -35,119 +35,451 @@
            label-width="70px"
            class="search-form"
          >
-            <ElFormItem label="备货仓库" prop="orderNumber">
+            <ElFormItem label="备货仓库" prop="warehouseId">
-              <ElInput
+              <ElSelect
-                v-model="searchForm.orderNumber"
+                v-model="searchForm.warehouseId"
-                placeholder="订单号"
+                placeholder="请选择"
-                class="form-input"
+                filterable
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                clearable
+              >
+                <ElOption
+                  v-for="item in warehouseList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
                />
+              </ElSelect>
            </ElFormItem>
-            <ElFormItem label="制单时间" prop="orderCreateTime">
+            <ElFormItem label="订单时间" prop="orderTime">
              <ElDatePicker
-                v-model="searchForm.orderCreateTime"
+                v-model="rangeTime"
                type="datetimerange"
                clearable
                start-placeholder="开始时间"
                end-placeholder="结束时间"
-                class="form-input"
              />
            </ElFormItem>
-            <ElFormItem label="备货单号" prop="inNo">
+            <ElFormItem label="备货单号" prop="stockingUpManageNo">
              <ElInput
-                v-model="searchForm.inNo"
+                v-model="searchForm.stockingUpManageNo"
                clearable
                placeholder="备货单号"
-                class="form-input"
              />
            </ElFormItem>
-            <ElFormItem label="供应商" prop="sku">
+            <ElFormItem label="供应商" prop="supplierId">
-              <ElInput class="form-input"></ElInput>
+              <ElSelect
+                v-model="searchForm.supplierId"
+                placeholder="请选择"
+                filterable
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                clearable
+              >
+                <ElOption
+                  v-for="item in supplierList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </ElSelect>
            </ElFormItem>
-            <ElFormItem label="发货状态" prop="sku">
+            <ElFormItem label="发货状态" prop="shippingStatus">
-              <ElInput class="form-input"></ElInput>
+              <ElSelect
+                v-model="searchForm.shippingStatus"
+                placeholder="请选择"
+                filterable
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                clearable
+              >
+                <ElOption
+                  v-for="item in deliveryStatusList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </ElSelect>
            </ElFormItem>
-            <ElFormItem label="备货员" prop="sku">
+            <ElFormItem label="库存SKU" prop="warehouseSku">
-              <ElInput class="form-input"></ElInput>
+              <ElInput
+                v-model="searchForm.warehouseSku"
+                clearable
+                placeholder="库存SKU"
+              />
            </ElFormItem>
-            <ElFormItem label="库存SKU" prop="sku">
-              <ElInput class="form-input"></ElInput>
+            <ElFormItem label="备货员" prop="stockingUpUserId">
+              <ElSelect
+                v-model="searchForm.stockingUpUserId"
+                placeholder="请选择"
+                filterable
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                clearable
+              >
+                <ElOption
+                  v-for="item in stockKeeperList"
+                  :key="item.id"
+                  :label="item.account"
+                  :value="item.id"
+                />
+              </ElSelect>
            </ElFormItem>
-            <ElFormItem label="商品名称" prop="sku">
+            <ElFormItem label="商品名称" prop="warehouseSkuName">
              <ElInput
-                v-model="searchForm.skuName"
+                v-model="searchForm.warehouseSkuName"
                clearable
-                placeholder="请输入商品名称"
+                placeholder="商品名称"
-                class="form-input"
+              />
-              ></ElInput>
            </ElFormItem>
-            <ElFormItem label="备注" prop="sku">
+            <ElFormItem label="备注" prop="remark">
-              <ElInput class="form-input"></ElInput>
+              <ElInput
+                v-model="searchForm.remark"
+                clearable
+                placeholder="备注或内部便签"
+              />
            </ElFormItem>
            <ElFormItem class="form-item-buttons">
-              <ElButton type="primary">查询</ElButton>
+              <ElButton type="primary" @click="search">查询</ElButton>
-              <ElButton>重置</ElButton>
+              <ElButton @click="resetSearchForm">重置</ElButton>
            </ElFormItem>
          </ElForm>
        </div>
-        <div class="header-operation"></div>
+        <div class="header-operation">
+          <span class="item">
+            <ElButton type="success">新增</ElButton>
+          </span>
+          <span class="item">
+            <ElButton type="primary">提交审核</ElButton>
+          </span>
+          <span class="item">
+            <ElButton type="success">添加内部便签</ElButton>
+          </span>
+          <span class="item">
+            <ElButton type="warning">取消</ElButton>
+          </span>
+          <span class="item">
+            <ElButton type="danger">删除</ElButton>
+          </span>
+        </div>
      </div>
      <div class="table-content">
-        <SplitDiv size="50">
+        <SplitDiv size="60">
-          <template #top></template>
+          <template #top>
-          <template #bottom></template>
+            <div class="table-list flex-1 overflow-hidden">
+              <TableView
+                :selectionable="true"
+                :serial-numberable="true"
+                :columns="tableColumns"
+                :paginated-data="tableData"
+                @row-click="handleRowClick"
+              />
+            </div>
+            <ElPagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[50, 100, 200, 300, 500]"
+              background
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              style="margin: 10px auto 0; text-align: right"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            ></ElPagination>
+          </template>
+          <template #bottom>
+            <StockingOrderDetailTabs :stock-products-data="stockProductsData" />
+          </template>
        </SplitDiv>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="tsx">
-import { TreeData, SearchForm } from '@/types/api/supply/stockingOrder'
+import { computed, ref } from 'vue'
+import { getStockingOrderListApi } from '@/api/stockingOrder'
+import TableView from '@/components/TableView.vue'
+import StockingOrderDetailTabs from './StockingOrderDetailTabs.vue'
+import {
+  TreeData,
+  SearchForm,
+  TableData,
+  supplierData,
+} from '@/types/api/supply/stockingOrder'
+import usePageList from '@/utils/hooks/usePageList'
 import { useValue } from '@/utils/hooks/useValue'
-import { ref } from 'vue'
+import { StockProduct } from '@/types/api/supply/stockingOrder'
+import { WarehouseListData } from '@/types'
+import { getEmployeeListApi, loadWarehouseListApi } from '@/api/common'
+import { getStockingOrderStatusTreeApi } from '@/api/stockingOrder'
+import { userData } from '@/types/api/user'
+const tableColumns = computed(() => {
+  return [
+    {
+      label: '备货单号',
+      prop: 'stockingOrderNo',
+      minWidth: 150,
+      align: 'center',
+    },
+    {
+      label: '备货仓库',
+      prop: 'warehouseName',
+      width: 120,
+      align: 'center',
+    },
+    {
+      label: '供应商',
+      prop: 'supplierName',
+      width: 120,
+      align: 'center',
+    },
+    {
+      label: '订单状态',
+      prop: 'orderStatus',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '期望交货日期',
+      prop: 'expectedDeliveryDate',
+      width: 130,
+      align: 'center',
+    },
+    {
+      label: 'SKU个数',
+      prop: 'skuCount',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '备货总数',
+      prop: 'totalStockQuantity',
+      width: 100,
+      align: 'right',
+    },
+    {
+      label: '备货总额',
+      prop: 'totalStockAmount',
+      width: 120,
+      align: 'right',
+    },
+    {
+      label: '币种',
+      prop: 'currency',
+      width: 80,
+      align: 'center',
+    },
+    {
+      label: '发货状态',
+      prop: 'deliveryStatus',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '备货员',
+      prop: 'stockKeeperName',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '最后交货日期',
+      prop: 'lastDeliveryDate',
+      width: 130,
+      align: 'center',
+    },
+    {
+      label: '订单完成日期',
+      prop: 'orderCompletionDate',
+      width: 130,
+      align: 'center',
+    },
+    {
+      label: '延误天数',
+      prop: 'delayDays',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '制单人',
+      prop: 'creatorName',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '审核人',
+      prop: 'approverName',
+      width: 100,
+      align: 'center',
+    },
+    {
+      label: '制单时间',
+      prop: 'createTime',
+      width: 160,
+      align: 'center',
+      sortable: true,
+    },
+    {
+      label: '审核时间',
+      prop: 'approvalTime',
+      width: 160,
+      align: 'center',
+      sortable: true,
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      minWidth: 150,
+      align: 'left',
+      showOverflowTooltip: true,
+    },
+    {
+      label: '操作',
+      prop: 'operation',
+      width: 100,
+      align: 'center',
+      fixed: 'right',
+    },
+  ]
+})
 const treeData = ref<TreeData[]>([
  {
    children: [
      {
-        statusCode: '0',
+        status: '0',
        statusName: '待提交',
        quantity: 0,
      },
      {
-        statusCode: '1',
+        status: '1',
        statusName: '待审核',
        quantity: 0,
      },
      {
-        statusCode: '2',
+        status: '2',
        statusName: '备货中',
        quantity: 0,
      },
      {
-        statusCode: '3',
+        status: '3',
        statusName: '备货完成',
        quantity: 0,
      },
      {
-        statusCode: '4',
+        status: '4',
        statusName: '已取消',
        quantity: 0,
      },
    ],
-    statusCode: '-1',
+    status: '-1',
    statusName: '全部',
  },
 ])
+const status = ref<string>('-1')
+const selectedRow = ref<TableData | null>(null)
+const warehouseList = ref<WarehouseListData[]>([])
+const supplierList = ref<supplierData[]>([])
+const stockKeeperList = ref<userData[]>([])
+const deliveryStatusList = ref([
+  { label: '待发货', value: 'pending' },
+  { label: '部分发货', value: 'partial' },
+  { label: '全部发货', value: 'completed' },
+])
+const rangeTime = ref<string[]>([])
+const [searchForm, resetSearchForm] = useValue<SearchForm>({} as SearchForm)
 const treeRef = ref()
-const statusCode = ref<string>('-1')
+const loadWarehouseList = async () => {
-const [searchForm] = useValue<SearchForm>({
+  try {
-  pageSize: 20,
+    const res = await loadWarehouseListApi()
-  currentPage: 1,
+    if (res.code !== 200) return
-  sku: '',
+    warehouseList.value = res.data || []
-})
+  } catch (e) {
+    console.error(e)
+  }
+}
+const loadEmployeeList = async () => {
+  try {
+    const res = await getEmployeeListApi()
+    if (res.code !== 200) return
+    stockKeeperList.value = res.data || []
+  } catch (e) {
+    console.error(e)
+  }
+}
+const loadSupplierList = async () => {}
+const loadTreeData = async () => {
+  try {
+    const res = await getStockingOrderStatusTreeApi()
+    if (res.code !== 200) return
+    treeData.value = [{ code: '-1', name: '全部', children: res.data }]
+    await nextTick(() => {
+      treeRef.value!.setCurrentKey(status.value, true)
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}
 const nodeClick = (data: TreeData) => {
-  statusCode.value = data.statusCode
+  status.value = data.code
+  search()
 }
+const {
+  currentPage,
+  pageSize,
+  total,
+  data: tableData,
+  refresh: search,
+  onCurrentPageChange: handleCurrentChange,
+  onPageSizeChange: handleSizeChange,
+} = usePageList<TableData>({
+  query: (page, pageSize) =>
+    getStockingOrderListApi(
+      {
+        ...searchForm.value,
+        warehouseId: Array.isArray(searchForm.value.warehouseId)
+          ? searchForm.value.warehouseId.join(',')
+          : (searchForm.value.warehouseId as string | undefined),
+        supplierId: Array.isArray(searchForm.value.supplierId)
+          ? searchForm.value.supplierId.join(',')
+          : (searchForm.value.supplierId as string | undefined),
+        startDate: rangeTime.value?.[0],
+        endDate: rangeTime.value?.[1],
+        status: status.value,
+      },
+      page,
+      pageSize,
+    ).then((res) => res.data),
+  initLoad: true,
+})
+// 备货商品数据
+const stockProductsData = ref<StockProduct[]>([])
+const handleRowClick = (row: TableData) => {
+  selectedRow.value = row
+  loadStockProducts(row)
+}
+const loadStockProducts = (_row: TableData) => {
+  stockProductsData.value = []
+}
+const handleEdit = (_row: TableData) => {
+  ElMessage.info('编辑功能待实现')
+}
+onMounted(() => {
+  loadWarehouseList()
+  loadEmployeeList()
+  loadSupplierList()
+  loadTreeData()
+})
 </script>
 <style lang="scss" scoped>
 .order-status {
@@ -224,6 +556,11 @@ const nodeClick = (data: TreeData) => {
 }
 .table-content {
  flex: 1;
+  margin-top: 10px;
+  overflow: hidden;
+  :deep(#top) {
+    height: 100%;
+  }
 }
 .search-form {