From ec05ee98d0ca4c88d5b9709e3a82049afc094897 Mon Sep 17 00:00:00 2001
From: zhouz <>
Date: Wed, 22 Jul 2026 11:27:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=20=E2=80=94=20VxeTable=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=81MaterialSelectModal=E8=B7=AF=E5=BE=84=E3=80=81dayjs?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 明细表改用 VxeTable + VxeColumn（项目标准模式）
- MaterialSelectModal 导入路径从 ../../ 改为 ../../../
- ref 类型简化为 any，去掉 InstanceType<typeof>
- dayjs 导入用于业务日期默认当天
---
 .../src/views/wms/iostorinv/modules/form.vue  | 79 +++++++------------
 .../wms/iostorinv/modules/manual-detail.vue   |  2 +-
 2 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/form.vue b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/form.vue
index 66005e0c..b9fa52c6 100644
--- a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/form.vue
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/form.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { WmsIostorInvApi } from '#/api/wms/iostorinv';
-
 import { computed, ref, watch } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -9,6 +7,7 @@ import dayjs from 'dayjs';
 import { message } from 'antdv-next';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   type OutboundCreateReq,
   type OutboundDetail,
@@ -24,9 +23,7 @@ import ManualDetailModalComponent from './manual-detail.vue';
 const emit = defineEmits(['success']);
 
 // ========== 仓库选项 ==========
-const storOptions = ref<
-  { label: string; value: string; storCode: string; storName: string }[]
->([]);
+const storOptions = ref<any[]>([]);
 async function loadStorOptions() {
   const list = await getBsrealStorAttrSimpleList();
   storOptions.value = (list || []).map((item: any) => ({
@@ -38,7 +35,7 @@ async function loadStorOptions() {
 }
 
 // ========== 业务类型选项 ==========
-const billTypeOptions = ref<{ label: string; value: string }[]>([]);
+const billTypeOptions = ref<any[]>([]);
 async function loadBillTypeOptions() {
   const list = await getSimpleDictDataList();
   billTypeOptions.value = (list || [])
@@ -125,16 +122,13 @@ const [Form, formApi] = useVbenForm({
 });
 
 // ========== 明细数据 ==========
-type DetailRow = OutboundDetail & { vehicleCode?: string; materialName?: string };
-const detailList = ref<DetailRow[]>([]);
+const detailList = ref<any[]>([]);
 
 function updateSummary() {
-  const totalWeight = detailList.value
-    .reduce((sum, d) => sum + (Number(d.planQty) || 0), 0)
-    .toFixed(3);
+  const total = detailList.value.reduce((sum, d) => sum + (Number(d.planQty) || 0), 0);
   formApi.setValues({
     detailCount: detailList.value.length,
-    totalWeight: String(totalWeight),
+    totalWeight: total.toFixed(3),
   });
 }
 
@@ -147,34 +141,13 @@ watch(
   },
 );
 
-// ========== 明细表格 ==========
-const vxeGridRef = ref();
-const gridOptions = computed(() => ({
-  columns: [
-    { type: 'seq', title: '序号', width: 50 },
-    { field: 'vehicleCode', title: '箱号', width: 100 },
-    { field: 'materialCode', title: '物料编码', width: 120 },
-    { field: 'materialName', title: '物料名称', width: 150 },
-    { field: 'pcsn', title: '子卷号', width: 100 },
-    { field: 'planQty', title: '出库重量', width: 100 },
-    { field: 'qtyUnitName', title: '单位', width: 60 },
-    { field: 'remark', title: '备注', width: 120 },
-    { title: '操作', width: 80, slots: { default: 'actions' } },
-  ],
-  data: detailList.value,
-  height: 'auto',
-  rowConfig: { keyField: 'materialCode', isHover: true },
-  toolbarConfig: false,
-  pagerConfig: false,
-}));
-
 function handleDeleteDetail(index: number) {
   detailList.value.splice(index, 1);
   updateSummary();
 }
 
-// ========== 库存选择弹窗（子组件自带 Modal，用 ref 调用 open） ==========
-const inventorySelectRef = ref<InstanceType<typeof InventorySelectModalComponent>>();
+// ========== 库存选择弹窗 ==========
+const inventorySelectRef = ref<any>();
 
 function handleSelectFromInventory() {
   const storId = formApi.getValues().storId;
@@ -204,8 +177,8 @@ function onInventorySelected(rows: any[]) {
   updateSummary();
 }
 
-// ========== 手动新增弹窗（子组件自带 Modal，用 ref 调用 open） ==========
-const manualDetailRef = ref<InstanceType<typeof ManualDetailModalComponent>>();
+// ========== 手动新增弹窗 ==========
+const manualDetailRef = ref<any>();
 
 function handleManualAdd() {
   manualDetailRef.value?.open();
@@ -247,7 +220,7 @@ const [Modal, modalApi] = useVbenModal({
         storName: stor?.storName,
         bizDate: masterValues.bizDate,
         remark: masterValues.remark,
-        details: detailList.value.map((d) => ({
+        details: detailList.value.map((d: any) => ({
           materialCode: d.materialCode,
           materialId: d.materialId,
           pcsn: d.pcsn,
@@ -274,10 +247,7 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       await loadStorOptions();
       await loadBillTypeOptions();
-      // 业务日期默认当天
-      formApi.setValues({
-        bizDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-      });
+      formApi.setValues({ bizDate: dayjs().format('YYYY-MM-DD HH:mm:ss') });
     }
     if (!isOpen) {
       detailList.value = [];
@@ -303,17 +273,26 @@ const [Modal, modalApi] = useVbenModal({
           </div>
         </div>
 
-        <vxe-grid ref="vxeGridRef" v-bind="gridOptions">
-          <template #actions="{ rowIndex }">
-            <a-button type="link" danger @click="handleDeleteDetail(rowIndex)">
-              删除
-            </a-button>
-          </template>
-        </vxe-grid>
+        <VxeTable :data="detailList" show-overflow>
+          <VxeColumn type="seq" title="序号" width="50" align="center" />
+          <VxeColumn field="vehicleCode" title="箱号" width="100" />
+          <VxeColumn field="materialCode" title="物料编码" width="120" />
+          <VxeColumn field="materialName" title="物料名称" width="150" />
+          <VxeColumn field="pcsn" title="子卷号" width="100" />
+          <VxeColumn field="planQty" title="出库重量" width="100" />
+          <VxeColumn field="qtyUnitName" title="单位" width="60" />
+          <VxeColumn field="remark" title="备注" min-width="120" />
+          <VxeColumn title="操作" width="80" align="center" fixed="right">
+            <template #default="{ rowIndex }">
+              <a-button type="link" danger size="small" @click="handleDeleteDetail(rowIndex)">
+                删除
+              </a-button>
+            </template>
+          </VxeColumn>
+        </VxeTable>
       </div>
     </div>
 
-    <!-- 子弹窗：不通过 connectedComponent，而是通过 ref 调用 -->
     <InventorySelectModalComponent
       ref="inventorySelectRef"
       @select="onInventorySelected"
diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/manual-detail.vue b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/manual-detail.vue
index 39bb8305..70c70660 100644
--- a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/manual-detail.vue
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/wms/iostorinv/modules/manual-detail.vue
@@ -5,7 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { useVbenForm } from '#/adapter/form';
 
-import MaterialSelectModalComponent from '../../base/materialbase/components/MaterialSelectModal.vue';
+import MaterialSelectModalComponent from '../../../base/materialbase/components/MaterialSelectModal.vue';
 
 const emit = defineEmits(['confirm']);