fix(web-antdv-next): CRM 和 Mall 模块使用 Tabs items 和 contentRender 适配 antdv-next

apps/web-antdv-next/src/views/crm/clue/detail/index.vue

@@ -32,6 +32,12 @@ const clueId = ref(0); // 线索编号
 const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue); // 线索详情
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+const clueTabItems = [
+  { key: '1', label: '跟进记录', forceRender: true },
+  { key: '2', label: '基本信息', forceRender: true },
+  { key: '3', label: '团队成员', forceRender: true },
+  { key: '4', label: '操作日志', forceRender: true },
+];
 
 const [Descriptions] = useDescription({
   bordered: false,
@@ -143,25 +149,24 @@ onMounted(() => {
       <Descriptions :data="clue" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
-      <Tabs :tab-bar-gutter="16">
+      <Tabs :items="clueTabItems" :tab-bar-gutter="16">
-        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
+        <template #contentRender="{ item }">
-          <FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
+          <FollowUp
-        </Tabs.TabPane>
+            v-if="item.key === '1'"
-        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
+            :biz-id="clueId"
-          <Info :clue="clue" />
+            :biz-type="BizTypeEnum.CRM_CLUE"
-        </Tabs.TabPane>
+          />
-        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
+          <Info v-else-if="item.key === '2'" :clue="clue" />
           <PermissionList
+            v-else-if="item.key === '3'"
             ref="permissionListRef"
             :biz-id="clueId"
             :biz-type="BizTypeEnum.CRM_CLUE"
             :show-action="true"
             @quit-team="handleBack"
           />
-        </Tabs.TabPane>
+          <OperateLog v-else-if="item.key === '4'" :log-list="logList" />
-        <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
+        </template>
-          <OperateLog :log-list="logList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>

apps/web-antdv-next/src/views/crm/customer/detail/index.vue

@@ -45,6 +45,16 @@ const customerId = ref(0); // 客户编号
 const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer); // 客户详情
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+const customerTabItems = [
+  { key: '1', label: '跟进记录', forceRender: true },
+  { key: '2', label: '基本信息', forceRender: true },
+  { key: '3', label: '联系人', forceRender: true },
+  { key: '4', label: '团队成员', forceRender: true },
+  { key: '5', label: '商机', forceRender: true },
+  { key: '6', label: '合同', forceRender: true },
+  { key: '7', label: '回款', forceRender: true },
+  { key: '8', label: '操作日志', forceRender: true },
+];
 
 const [Descriptions] = useDescription({
   bordered: false,
@@ -241,49 +251,45 @@ onMounted(() => {
       <Descriptions :data="customer" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
-      <Tabs>
+      <Tabs :items="customerTabItems">
-        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
+        <template #contentRender="{ item }">
-          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
+          <FollowUp
-        </Tabs.TabPane>
+            v-if="item.key === '1'"
-        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
+            :biz-id="customerId"
-          <Info :customer="customer" />
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
-        </Tabs.TabPane>
+          />
-        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <Info v-else-if="item.key === '2'" :customer="customer" />
           <ContactDetailsList
+            v-else-if="item.key === '3'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :customer-id="customerId"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
           <PermissionList
+            v-else-if="item.key === '4'"
             ref="permissionListRef"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :show-action="true"
             @quit-team="handleBack"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="商机" key="5" :force-render="true">
           <BusinessDetailsList
+            v-else-if="item.key === '5'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
             :customer-id="customerId"
           />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="合同" key="6" :force-render="true">
           <ContractDetailsList
+            v-else-if="item.key === '6'"
             :biz-id="customerId"
             :biz-type="BizTypeEnum.CRM_CUSTOMER"
           />
-        </Tabs.TabPane>
+          <template v-else-if="item.key === '7'">
-        <Tabs.TabPane tab="回款" key="7" :force-render="true">
+            <ReceivablePlanDetailsList :customer-id="customerId" />
-          <ReceivablePlanDetailsList :customer-id="customerId" />
+            <ReceivableDetailsList :customer-id="customerId" />
-          <ReceivableDetailsList :customer-id="customerId" />
+          </template>
-        </Tabs.TabPane>
+          <OperateLog v-else-if="item.key === '8'" :log-list="logList" />
-        <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
+        </template>
-          <OperateLog :log-list="logList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>

apps/web-antdv-next/src/views/mall/product/spu/index.vue

@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
@@ -53,6 +53,12 @@ const tabsData = ref([
     count: 0,
   },
 ]);
+const spuTabItems = computed(() =>
+  tabsData.value.map((item) => ({
+    key: String(item.type),
+    label: `${item.name} (${item.count})`,
+  })),
+);
 
 /** 刷新表格 */
 async function handleRefresh() {
@@ -208,13 +214,7 @@ onMounted(async () => {
 
     <Grid>
       <template #toolbar-actions>
-        <Tabs @change="onChangeTab" class="w-full">
+        <Tabs :items="spuTabItems" @change="onChangeTab" class="w-full" />
-          <Tabs.TabPane
-            v-for="item in tabsData"
-            :key="item.type"
-            :tab="`${item.name} (${item.count})`"
-          />
-        </Tabs>
       </template>
       <template #toolbar-tools>
         <TableAction