fix(web-antdv-next): <Tabs.TabPane> 改成 Tabs :items="xxxTabItems"，使用 items 和 contentRender 迁移 MES 页签

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 v-model:active-key="activeTab" :items="calendarTabItems" type="card">
-        <Tabs.TabPane key="type" tab="按分类" force-render>
+        <template #contentRender="{ item }">
-          <TypeView />
+          <TypeView v-if="item.key === 'type'" />
-        </Tabs.TabPane>
+          <TeamView v-else-if="item.key === 'team'" />
-        <Tabs.TabPane key="team" tab="按班组" force-render>
+          <UserView v-else-if="item.key === 'user'" />
-          <TeamView />
+        </template>
-        </Tabs.TabPane>
-        <Tabs.TabPane key="user" tab="按个人" force-render>
-          <UserView />
-        </Tabs.TabPane>
       </Tabs>
     </div>
   </Page>

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="班次">
+      <template #contentRender="{ item }">
-        <ShiftList :form-type="formType" :plan-id="formData.id" />
+        <ShiftList
-      </Tabs.TabPane>
+          v-if="item.key === 'shift'"
-      <Tabs.TabPane key="team" tab="班组">
+          :form-type="formType"
-        <PlanTeamList :form-type="formType" :plan-id="formData.id" />
+          :plan-id="formData.id"
-      </Tabs.TabPane>
+        />
+        <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">

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="班组成员">
+      <template #contentRender="{ item }">
-        <MemberList :form-type="formType" :team-id="formData.id" />
+        <MemberList
-      </Tabs.TabPane>
+          v-if="item.key === 'member'"
+          :form-type="formType"
+          :team-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>

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="产品清单">
+      <template #contentRender="{ item }">
-        <ClientProductSalesLineList :client-id="formData.id" />
+        <ClientProductSalesLineList
-      </Tabs.TabPane>
+          v-if="item.key === 'productSalesLine'"
-      <Tabs.TabPane key="productSales" tab="销售记录">
+          :client-id="formData.id"
-        <ClientProductSalesList :client-id="formData.id" />
+        />
-      </Tabs.TabPane>
+        <ClientProductSalesList
+          v-else-if="item.key === 'productSales'"
+          :client-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>

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="物料清单">
+      <template #contentRender="{ item }">
-        <VendorItemReceiptLineList :vendor-id="formData.id" />
+        <VendorItemReceiptLineList
-      </Tabs.TabPane>
+          v-if="item.key === 'itemReceiptLine'"
-      <Tabs.TabPane key="itemReceipt" tab="采购记录">
+          :vendor-id="formData.id"
-        <VendorItemReceiptList :vendor-id="formData.id" />
+        />
-      </Tabs.TabPane>
+        <VendorItemReceiptList
+          v-else-if="item.key === 'itemReceipt'"
+          :vendor-id="formData.id"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>

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="向前追溯">
+      <template #contentRender="{ item }">
-        <TraceList :batch-code="detailData.code" direction="forward" />
+        <TraceList
-      </Tabs.TabPane>
+          v-if="item.key === 'forward'"
-      <Tabs.TabPane key="backward" tab="向后追溯">
+          :batch-code="detailData.code"
-        <TraceList :batch-code="detailData.code" direction="backward" />
+          direction="forward"
-      </Tabs.TabPane>
+        />
+        <TraceList
+          v-else-if="item.key === 'backward'"
+          :batch-code="detailData.code"
+          direction="backward"
+        />
+      </template>
     </Tabs>
   </Modal>
 </template>

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">

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">

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">

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">

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>