From 4646900de1a6b5edbc85843e1a5572dc0be108c2 Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Sat, 6 Jun 2026 22:16:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(web-antdv-next):=20<Tabs.TabPane>=20?=
 =?UTF-8?q?=E6=94=B9=E6=88=90=20Tabs=20:items=3D"xxxTabItems"=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20items=20=E5=92=8C=20contentRender=20?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=20MES=20=E5=89=A9=E4=BD=99=E9=A1=B5=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/mes/dv/checkplan/modules/form.vue   | 24 +++++++---
 .../views/mes/dv/machinery/modules/form.vue   | 29 ++++++++----
 .../src/views/mes/md/item/modules/form.vue    | 44 +++++++++++++------
 .../views/mes/md/workstation/modules/form.vue | 32 ++++++++++----
 .../views/mes/pro/feedback/modules/form.vue   | 21 ++++++---
 .../views/mes/pro/workorder/modules/form.vue  | 22 +++++++---
 .../views/mes/wm/packages/modules/form.vue    | 23 +++++++---
 .../mes/wm/stocktaking/task/modules/form.vue  | 18 +++++---
 8 files changed, 152 insertions(+), 61 deletions(-)

diff --git a/apps/web-antdv-next/src/views/mes/dv/checkplan/modules/form.vue b/apps/web-antdv-next/src/views/mes/dv/checkplan/modules/form.vue
index 16ede736f..2ab5c80c2 100644
--- a/apps/web-antdv-next/src/views/mes/dv/checkplan/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/dv/checkplan/modules/form.vue
@@ -21,6 +21,10 @@ import SubjectList from './subject-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const subTabsName = ref('machinery');
+const checkPlanTabItems = [
+  { key: 'machinery', label: '设备' },
+  { key: 'subject', label: '项目' },
+];
 const formData = ref<MesDvCheckPlanApi.CheckPlan>();
 const isDetail = computed(() => formType.value === 'detail');
 const getTitle = computed(() => {
@@ -105,14 +109,22 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="checkPlanTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="machinery" tab="设备">
-        <MachineryList :form-type="formType" :plan-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="subject" tab="项目">
-        <SubjectList :form-type="formType" :plan-id="formData.id" :plan-type="formData.type" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <MachineryList
+          v-if="item.key === 'machinery'"
+          :form-type="formType"
+          :plan-id="formData.id"
+        />
+        <SubjectList
+          v-else-if="item.key === 'subject'"
+          :form-type="formType"
+          :plan-id="formData.id"
+          :plan-type="formData.type"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>
diff --git a/apps/web-antdv-next/src/views/mes/dv/machinery/modules/form.vue b/apps/web-antdv-next/src/views/mes/dv/machinery/modules/form.vue
index acee35717..792ed069a 100644
--- a/apps/web-antdv-next/src/views/mes/dv/machinery/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/dv/machinery/modules/form.vue
@@ -23,6 +23,11 @@ import RepairList from './repair-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('check'); // 当前资源页签
+const machineryTabItems = [
+  { key: 'check', label: '点检记录' },
+  { key: 'mainten', label: '保养记录' },
+  { key: 'repair', label: '维修记录' },
+];
 const formData = ref<MesDvMachineryApi.Machinery>();
 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@@ -116,17 +121,23 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="machineryTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="check" tab="点检记录">
-        <CheckRecordList :machinery-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="mainten" tab="保养记录">
-        <MaintenRecordList :machinery-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="repair" tab="维修记录">
-        <RepairList :machinery-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <CheckRecordList
+          v-if="item.key === 'check'"
+          :machinery-id="formData.id"
+        />
+        <MaintenRecordList
+          v-else-if="item.key === 'mainten'"
+          :machinery-id="formData.id"
+        />
+        <RepairList
+          v-else-if="item.key === 'repair'"
+          :machinery-id="formData.id"
+        />
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center">
diff --git a/apps/web-antdv-next/src/views/mes/md/item/modules/form.vue b/apps/web-antdv-next/src/views/mes/md/item/modules/form.vue
index 538fd8d03..aa8e38fe1 100644
--- a/apps/web-antdv-next/src/views/mes/md/item/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/md/item/modules/form.vue
@@ -37,6 +37,13 @@ const getTitle = computed(() => {
 const currentItemOrProduct = computed(
   () => formData.value?.itemOrProduct || '',
 ); // 当前物料/产品标识
+const itemTabItems = computed(() => [
+  { key: 'bom', label: 'BOM 组成' },
+  ...(formData.value?.batchFlag ? [{ key: 'batch', label: '批次属性' }] : []),
+  { key: 'substitute', label: '替代品' },
+  { key: 'sip', label: 'SIP' },
+  { key: 'sop', label: 'SOP' },
+]);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -128,27 +135,36 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="itemTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="bom" tab="BOM 组成">
-        <ProductBomForm :form-type="formType" :item-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane v-if="formData.batchFlag" key="batch" tab="批次属性">
+      <template #contentRender="{ item }">
+        <ProductBomForm
+          v-if="item.key === 'bom'"
+          :form-type="formType"
+          :item-id="formData.id"
+        />
         <ItemBatchConfigForm
+          v-else-if="item.key === 'batch'"
           :form-type="formType"
           :item-id="formData.id"
           :item-or-product="currentItemOrProduct"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="substitute" tab="替代品">
-        <Empty description="替代品（待实现）" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="sip" tab="SIP">
-        <ProductSipForm :form-type="formType" :item-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="sop" tab="SOP">
-        <ProductSopForm :form-type="formType" :item-id="formData.id" />
-      </Tabs.TabPane>
+        <Empty
+          v-else-if="item.key === 'substitute'"
+          description="替代品（待实现）"
+        />
+        <ProductSipForm
+          v-else-if="item.key === 'sip'"
+          :form-type="formType"
+          :item-id="formData.id"
+        />
+        <ProductSopForm
+          v-else-if="item.key === 'sop'"
+          :form-type="formType"
+          :item-id="formData.id"
+        />
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center">
diff --git a/apps/web-antdv-next/src/views/mes/md/workstation/modules/form.vue b/apps/web-antdv-next/src/views/mes/md/workstation/modules/form.vue
index 7180a677d..845d24890 100644
--- a/apps/web-antdv-next/src/views/mes/md/workstation/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/md/workstation/modules/form.vue
@@ -27,6 +27,11 @@ import WorkerList from './worker-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('machine'); // 当前资源页签
+const workstationTabItems = [
+  { key: 'machine', label: '设备资源' },
+  { key: 'tool', label: '工装夹具' },
+  { key: 'worker', label: '人力资源' },
+];
 const formData = ref<MesMdWorkstationApi.Workstation>();
 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
 
@@ -127,17 +132,26 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="workstationTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="machine" tab="设备资源">
-        <MachineList :form-type="formType" :workstation-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="tool" tab="工装夹具">
-        <ToolList :form-type="formType" :workstation-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="worker" tab="人力资源">
-        <WorkerList :form-type="formType" :workstation-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <MachineList
+          v-if="item.key === 'machine'"
+          :form-type="formType"
+          :workstation-id="formData.id"
+        />
+        <ToolList
+          v-else-if="item.key === 'tool'"
+          :form-type="formType"
+          :workstation-id="formData.id"
+        />
+        <WorkerList
+          v-else-if="item.key === 'worker'"
+          :form-type="formType"
+          :workstation-id="formData.id"
+        />
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center">
diff --git a/apps/web-antdv-next/src/views/mes/pro/feedback/modules/form.vue b/apps/web-antdv-next/src/views/mes/pro/feedback/modules/form.vue
index 6cb17e30b..9d3219cd4 100644
--- a/apps/web-antdv-next/src/views/mes/pro/feedback/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/pro/feedback/modules/form.vue
@@ -53,6 +53,10 @@ const showSubTabs = computed(
     formData.value?.status !== MesProFeedbackStatusEnum.PREPARE &&
     formData.value?.status !== MesProFeedbackStatusEnum.APPROVING,
 );
+const feedbackTabItems = [
+  { key: 'itemConsume', label: 'BOM 物资消耗' },
+  { key: 'productProduce', label: '产品产出' },
+];
 const getTitle = computed(() => {
   if (formType.value === 'detail') {
     return $t('ui.actionTitle.view', ['生产报工']);
@@ -274,15 +278,20 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="showSubTabs"
       v-model:active-key="subTabsName"
+      :items="feedbackTabItems"
       type="card"
       class="mx-4 mt-2"
     >
-      <Tabs.TabPane key="itemConsume" tab="BOM 物资消耗">
-        <ItemConsumeList :feedback-id="formData!.id!" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="productProduce" tab="产品产出">
-        <ProductProduceList :feedback-id="formData!.id!" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <ItemConsumeList
+          v-if="item.key === 'itemConsume'"
+          :feedback-id="formData!.id!"
+        />
+        <ProductProduceList
+          v-else-if="item.key === 'productProduce'"
+          :feedback-id="formData!.id!"
+        />
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center justify-end gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/pro/workorder/modules/form.vue b/apps/web-antdv-next/src/views/mes/pro/workorder/modules/form.vue
index dca7f971a..4abd303e9 100644
--- a/apps/web-antdv-next/src/views/mes/pro/workorder/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/pro/workorder/modules/form.vue
@@ -34,6 +34,10 @@ const formType = ref<FormType>('create');
 const formData = ref<MesProWorkOrderApi.WorkOrder>();
 const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求
 const subTabsName = ref('bom'); // 当前选中的子表 Tab
+const workOrderTabItems = [
+  { key: 'bom', label: '工单 BOM' },
+  { key: 'item', label: '物料需求' },
+];
 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
 
 const isEditable = computed(() => // 是否为编辑模式（可保存）
@@ -252,18 +256,24 @@ const [Modal, modalApi] = useVbenModal({
     <Form class="mx-4" />
     <!-- BOM / 物料需求 Tab：非新建态展示 -->
     <template v-if="formData?.id">
-      <Tabs v-model:active-key="subTabsName" class="mx-4">
-        <Tabs.TabPane key="bom" tab="工单 BOM">
+      <Tabs
+        v-model:active-key="subTabsName"
+        :items="workOrderTabItems"
+        class="mx-4"
+      >
+        <template #contentRender="{ item }">
           <BomList
+            v-if="item.key === 'bom'"
             :form-type="formType"
             :work-order="formData"
             :work-order-id="formData.id"
             @generate-work-order="handleGenerateWorkOrder"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="item" tab="物料需求">
-          <ItemList :work-order-id="formData.id" />
-        </Tabs.TabPane>
+          <ItemList
+            v-else-if="item.key === 'item'"
+            :work-order-id="formData.id"
+          />
+        </template>
       </Tabs>
     </template>
     <template #prepend-footer>
diff --git a/apps/web-antdv-next/src/views/mes/wm/packages/modules/form.vue b/apps/web-antdv-next/src/views/mes/wm/packages/modules/form.vue
index 461acacc0..47e3061a9 100644
--- a/apps/web-antdv-next/src/views/mes/wm/packages/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/wm/packages/modules/form.vue
@@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const formData = ref<MesWmPackageApi.Package>();
 const subTabsName = ref('subPackage'); // 子表当前 tab
+const packageTabItems = [
+  { key: 'subPackage', label: '子箱' },
+  { key: 'packageLine', label: '装箱清单' },
+];
 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
 
 const isEditable = computed(() =>
@@ -173,14 +177,21 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="packageTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="subPackage" tab="子箱">
-        <SubPackageList :editable="isEditable" :package-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="packageLine" tab="装箱清单">
-        <PackageLineList :editable="isEditable" :package-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <SubPackageList
+          v-if="item.key === 'subPackage'"
+          :editable="isEditable"
+          :package-id="formData.id"
+        />
+        <PackageLineList
+          v-else-if="item.key === 'packageLine'"
+          :editable="isEditable"
+          :package-id="formData.id"
+        />
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/wm/stocktaking/task/modules/form.vue b/apps/web-antdv-next/src/views/mes/wm/stocktaking/task/modules/form.vue
index 0b8ed5a6b..a49c7f5d6 100644
--- a/apps/web-antdv-next/src/views/mes/wm/stocktaking/task/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/wm/stocktaking/task/modules/form.vue
@@ -49,6 +49,10 @@ const showResultTab = computed(
     (!!formData.value?.status &&
       formData.value.status !== MesWmStockTakingTaskStatusEnum.PREPARE),
 );
+const stockTakingTabItems = computed(() => [
+  ...(showLineTab.value ? [{ key: 'lines', label: '盘点清单' }] : []),
+  ...(showResultTab.value ? [{ key: 'results', label: '盘点结果' }] : []),
+]);
 const getTitle = computed(() => {
   if (formType.value === 'detail') {
     return $t('ui.actionTitle.view', ['盘点任务']);
@@ -191,18 +195,22 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="stockTakingTabItems"
       class="mx-4 mt-4"
       type="card"
     >
-      <Tabs.TabPane v-if="showLineTab" key="lines" tab="盘点清单">
-        <LineList :form-type="formType" :task-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane v-if="showResultTab" key="results" tab="盘点结果">
+      <template #contentRender="{ item }">
+        <LineList
+          v-if="item.key === 'lines'"
+          :form-type="formType"
+          :task-id="formData.id"
+        />
         <ResultList
+          v-else-if="item.key === 'results'"
           :form-type="isExecute ? 'execute' : 'detail'"
           :task-id="formData.id"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">