From 13acbdd556df0b080f09d3cbb024495413f9437d Mon Sep 17 00:00:00 2001
From: XuZhiqiang <xzq710675281@163.com>
Date: Sat, 6 Jun 2026 22:12:19 +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=E9=A1=B5=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mes/cal/calendar/index.vue      | 21 +++++++++--------
 .../src/views/mes/cal/plan/modules/form.vue   | 23 ++++++++++++++-----
 .../src/views/mes/cal/team/modules/form.vue   | 12 +++++++---
 .../src/views/mes/md/client/modules/form.vue  | 21 ++++++++++++-----
 .../src/views/mes/md/vendor/modules/form.vue  | 21 ++++++++++++-----
 .../qc/batchtrace/modules/trace-detail.vue    | 23 ++++++++++++++-----
 .../src/views/mes/qc/ipqc/modules/form.vue    | 13 +++++++----
 .../src/views/mes/qc/iqc/modules/form.vue     | 13 +++++++----
 .../src/views/mes/qc/oqc/modules/form.vue     | 13 +++++++----
 .../src/views/mes/qc/rqc/modules/form.vue     | 13 +++++++----
 .../views/mes/qc/template/modules/form.vue    | 13 +++++++----
 11 files changed, 129 insertions(+), 57 deletions(-)

diff --git a/apps/web-antdv-next/src/views/mes/cal/calendar/index.vue b/apps/web-antdv-next/src/views/mes/cal/calendar/index.vue
index 643b890cc..1cc0a01a2 100644
--- a/apps/web-antdv-next/src/views/mes/cal/calendar/index.vue
+++ b/apps/web-antdv-next/src/views/mes/cal/calendar/index.vue
@@ -15,6 +15,11 @@ import 'dayjs/locale/zh-cn';
 dayjs.locale('zh-cn');
 
 const activeTab = ref<string>('type');
+const calendarTabItems = [
+  { key: 'type', label: '按分类', forceRender: true },
+  { key: 'team', label: '按班组', forceRender: true },
+  { key: 'user', label: '按个人', forceRender: true },
+];
 </script>
 
 <template>
@@ -26,16 +31,12 @@ const activeTab = ref<string>('type');
       />
     </template>
     <div class="bg-card rounded-md p-3">
-      <Tabs v-model:active-key="activeTab" type="card">
-        <Tabs.TabPane key="type" tab="按分类" force-render>
-          <TypeView />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="team" tab="按班组" force-render>
-          <TeamView />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="user" tab="按个人" force-render>
-          <UserView />
-        </Tabs.TabPane>
+      <Tabs v-model:active-key="activeTab" :items="calendarTabItems" type="card">
+        <template #contentRender="{ item }">
+          <TypeView v-if="item.key === 'type'" />
+          <TeamView v-else-if="item.key === 'team'" />
+          <UserView v-else-if="item.key === 'user'" />
+        </template>
       </Tabs>
     </div>
   </Page>
diff --git a/apps/web-antdv-next/src/views/mes/cal/plan/modules/form.vue b/apps/web-antdv-next/src/views/mes/cal/plan/modules/form.vue
index 37e8d1174..4c06191aa 100644
--- a/apps/web-antdv-next/src/views/mes/cal/plan/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/cal/plan/modules/form.vue
@@ -21,6 +21,10 @@ import PlanTeamList from './team-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('shift'); // 当前资源页签
+const planTabItems = [
+  { key: 'shift', label: '班次' },
+  { key: 'team', label: '班组' },
+];
 const formData = ref<MesCalPlanApi.Plan>();
 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
 const canConfirm = computed(
@@ -131,14 +135,21 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="planTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="shift" tab="班次">
-        <ShiftList :form-type="formType" :plan-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="team" tab="班组">
-        <PlanTeamList :form-type="formType" :plan-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <ShiftList
+          v-if="item.key === 'shift'"
+          :form-type="formType"
+          :plan-id="formData.id"
+        />
+        <PlanTeamList
+          v-else-if="item.key === 'team'"
+          :form-type="formType"
+          :plan-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/cal/team/modules/form.vue b/apps/web-antdv-next/src/views/mes/cal/team/modules/form.vue
index eb8959106..d65c32d6e 100644
--- a/apps/web-antdv-next/src/views/mes/cal/team/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/cal/team/modules/form.vue
@@ -20,6 +20,7 @@ import MemberList from './member-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('member'); // 当前资源页签
+const teamTabItems = [{ key: 'member', label: '班组成员' }];
 const formData = ref<MesCalTeamApi.Team>();
 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
 const getTitle = computed(() => {
@@ -107,11 +108,16 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="teamTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="member" tab="班组成员">
-        <MemberList :form-type="formType" :team-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <MemberList
+          v-if="item.key === 'member'"
+          :form-type="formType"
+          :team-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>
diff --git a/apps/web-antdv-next/src/views/mes/md/client/modules/form.vue b/apps/web-antdv-next/src/views/mes/md/client/modules/form.vue
index c511c8dc8..f4cde3686 100644
--- a/apps/web-antdv-next/src/views/mes/md/client/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/md/client/modules/form.vue
@@ -20,6 +20,10 @@ import ClientProductSalesList from './product-sales-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('productSalesLine'); // 当前子表页签
+const clientTabItems = [
+  { key: 'productSalesLine', label: '产品清单' },
+  { key: 'productSales', label: '销售记录' },
+];
 const formData = ref<MesMdClientApi.Client>();
 
 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@@ -100,14 +104,19 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="clientTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="productSalesLine" tab="产品清单">
-        <ClientProductSalesLineList :client-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="productSales" tab="销售记录">
-        <ClientProductSalesList :client-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <ClientProductSalesLineList
+          v-if="item.key === 'productSalesLine'"
+          :client-id="formData.id"
+        />
+        <ClientProductSalesList
+          v-else-if="item.key === 'productSales'"
+          :client-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>
diff --git a/apps/web-antdv-next/src/views/mes/md/vendor/modules/form.vue b/apps/web-antdv-next/src/views/mes/md/vendor/modules/form.vue
index 813372ec5..1031d2282 100644
--- a/apps/web-antdv-next/src/views/mes/md/vendor/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/md/vendor/modules/form.vue
@@ -20,6 +20,10 @@ import VendorItemReceiptList from './item-receipt-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 表单模式
 const subTabsName = ref('itemReceiptLine'); // 当前子表页签
+const vendorTabItems = [
+  { key: 'itemReceiptLine', label: '物料清单' },
+  { key: 'itemReceipt', label: '采购记录' },
+];
 const formData = ref<MesMdVendorApi.Vendor>();
 
 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@@ -102,14 +106,19 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="vendorTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="itemReceiptLine" tab="物料清单">
-        <VendorItemReceiptLineList :vendor-id="formData.id" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="itemReceipt" tab="采购记录">
-        <VendorItemReceiptList :vendor-id="formData.id" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <VendorItemReceiptLineList
+          v-if="item.key === 'itemReceiptLine'"
+          :vendor-id="formData.id"
+        />
+        <VendorItemReceiptList
+          v-else-if="item.key === 'itemReceipt'"
+          :vendor-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>
diff --git a/apps/web-antdv-next/src/views/mes/qc/batchtrace/modules/trace-detail.vue b/apps/web-antdv-next/src/views/mes/qc/batchtrace/modules/trace-detail.vue
index 8d82676dc..7cbd7ebda 100644
--- a/apps/web-antdv-next/src/views/mes/qc/batchtrace/modules/trace-detail.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/batchtrace/modules/trace-detail.vue
@@ -14,6 +14,10 @@ import TraceList from './trace-list.vue';
 
 const detailData = ref<MesWmBatchApi.Batch>(); // 当前批次详情
 const subTabsName = ref<'backward' | 'forward'>('forward'); // 当前激活的追溯方向
+const traceTabItems = [
+  { key: 'forward', label: '向前追溯' },
+  { key: 'backward', label: '向后追溯' },
+];
 
 const [Descriptions] = useDescription({
   bordered: true,
@@ -44,15 +48,22 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="detailData?.code"
       v-model:active-key="subTabsName"
+      :items="traceTabItems"
       class="mx-4 mt-4"
       type="card"
     >
-      <Tabs.TabPane key="forward" tab="向前追溯">
-        <TraceList :batch-code="detailData.code" direction="forward" />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="backward" tab="向后追溯">
-        <TraceList :batch-code="detailData.code" direction="backward" />
-      </Tabs.TabPane>
+      <template #contentRender="{ item }">
+        <TraceList
+          v-if="item.key === 'forward'"
+          :batch-code="detailData.code"
+          direction="forward"
+        />
+        <TraceList
+          v-else-if="item.key === 'backward'"
+          :batch-code="detailData.code"
+          direction="backward"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>
diff --git a/apps/web-antdv-next/src/views/mes/qc/ipqc/modules/form.vue b/apps/web-antdv-next/src/views/mes/qc/ipqc/modules/form.vue
index fcf77c263..3debd2d2c 100644
--- a/apps/web-antdv-next/src/views/mes/qc/ipqc/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/ipqc/modules/form.vue
@@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const formData = ref<MesQcIpqcApi.Ipqc>();
 const subTabsName = ref('line');
+const qcTabItems = [
+  { key: 'line', label: '检验项' },
+  { key: 'result', label: '检测结果' },
+];
 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
 const isDetail = computed(() => formType.value === 'detail');
 const canFinish = computed(
@@ -211,22 +215,23 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="qcTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="line" tab="检验项">
+      <template #contentRender="{ item }">
         <LineList
+          v-if="item.key === 'line'"
           :form-type="formType"
           :ipqc-id="formData.id"
           @refresh="handleRefresh"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="result" tab="检测结果">
         <QcIndicatorResultList
+          v-else-if="item.key === 'result'"
           :qc-id="formData.id"
           :qc-type="MesQcTypeEnum.IPQC"
           :readonly="isDetail"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/qc/iqc/modules/form.vue b/apps/web-antdv-next/src/views/mes/qc/iqc/modules/form.vue
index 87d547aa2..1fa2b0439 100644
--- a/apps/web-antdv-next/src/views/mes/qc/iqc/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/iqc/modules/form.vue
@@ -28,6 +28,10 @@ const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const formData = ref<MesQcIqcApi.Iqc>();
 const subTabsName = ref('line');
+const qcTabItems = [
+  { key: 'line', label: '检验项' },
+  { key: 'result', label: '检测结果' },
+];
 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
 const isDetail = computed(() => formType.value === 'detail');
 const canFinish = computed(
@@ -213,22 +217,23 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="qcTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="line" tab="检验项">
+      <template #contentRender="{ item }">
         <LineList
+          v-if="item.key === 'line'"
           :form-type="formType"
           :iqc-id="formData.id"
           @refresh="handleRefresh"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="result" tab="检测结果">
         <QcIndicatorResultList
+          v-else-if="item.key === 'result'"
           :qc-id="formData.id"
           :qc-type="MesQcTypeEnum.IQC"
           :readonly="isDetail"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/qc/oqc/modules/form.vue b/apps/web-antdv-next/src/views/mes/qc/oqc/modules/form.vue
index 42792a646..7cbf93965 100644
--- a/apps/web-antdv-next/src/views/mes/qc/oqc/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/oqc/modules/form.vue
@@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const formData = ref<MesQcOqcApi.Oqc>();
 const subTabsName = ref('line');
+const qcTabItems = [
+  { key: 'line', label: '检验项' },
+  { key: 'result', label: '检测结果' },
+];
 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
 const isDetail = computed(() => formType.value === 'detail');
 const canFinish = computed(
@@ -215,22 +219,23 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="qcTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="line" tab="检验项">
+      <template #contentRender="{ item }">
         <LineList
+          v-if="item.key === 'line'"
           :form-type="formType"
           :oqc-id="formData.id"
           @refresh="handleRefresh"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="result" tab="检测结果">
         <QcIndicatorResultList
+          v-else-if="item.key === 'result'"
           :qc-id="formData.id"
           :qc-type="MesQcTypeEnum.OQC"
           :readonly="isDetail"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/qc/rqc/modules/form.vue b/apps/web-antdv-next/src/views/mes/qc/rqc/modules/form.vue
index 5a2064957..b0fb8ee42 100644
--- a/apps/web-antdv-next/src/views/mes/qc/rqc/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/rqc/modules/form.vue
@@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
 const formType = ref<FormType>('create');
 const formData = ref<MesQcRqcApi.Rqc>();
 const subTabsName = ref('line');
+const qcTabItems = [
+  { key: 'line', label: '检验项' },
+  { key: 'result', label: '检测结果' },
+];
 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
 const isDetail = computed(() => formType.value === 'detail');
 const canFinish = computed(
@@ -211,22 +215,23 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formData?.id"
       v-model:active-key="subTabsName"
+      :items="qcTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="line" tab="检验项">
+      <template #contentRender="{ item }">
         <LineList
+          v-if="item.key === 'line'"
           :form-type="formType"
           :rqc-id="formData.id"
           @refresh="handleRefresh"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="result" tab="检测结果">
         <QcIndicatorResultList
+          v-else-if="item.key === 'result'"
           :qc-id="formData.id"
           :qc-type="MesQcTypeEnum.RQC"
           :readonly="isDetail"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
     <template #prepend-footer>
       <div class="flex flex-auto items-center gap-2">
diff --git a/apps/web-antdv-next/src/views/mes/qc/template/modules/form.vue b/apps/web-antdv-next/src/views/mes/qc/template/modules/form.vue
index db63befd0..f525ee264 100644
--- a/apps/web-antdv-next/src/views/mes/qc/template/modules/form.vue
+++ b/apps/web-antdv-next/src/views/mes/qc/template/modules/form.vue
@@ -24,6 +24,10 @@ import ItemList from './item-list.vue';
 const emit = defineEmits(['success']);
 const formType = ref<FormType>('create'); // 弹窗形态：新增/编辑/详情
 const subTabsName = ref('indicator'); // 当前激活的子表 tab
+const templateTabItems = [
+  { key: 'indicator', label: '检测指标项' },
+  { key: 'item', label: '产品关联' },
+];
 const formData = ref<MesQcTemplateApi.Template>();
 
 const getTitle = computed(() => {
@@ -105,20 +109,21 @@ const [Modal, modalApi] = useVbenModal({
     <Tabs
       v-if="formType !== 'create' && formData?.id"
       v-model:active-key="subTabsName"
+      :items="templateTabItems"
       class="mx-4 mt-4"
     >
-      <Tabs.TabPane key="indicator" tab="检测指标项">
+      <template #contentRender="{ item }">
         <IndicatorList
+          v-if="item.key === 'indicator'"
           :readonly="formType === 'detail'"
           :template-id="formData.id"
         />
-      </Tabs.TabPane>
-      <Tabs.TabPane key="item" tab="产品关联">
         <ItemList
+          v-else-if="item.key === 'item'"
           :readonly="formType === 'detail'"
           :template-id="formData.id"
         />
-      </Tabs.TabPane>
+      </template>
     </Tabs>
   </Modal>
 </template>