yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/359/head
XuZhiqiang 2026-06-06 22:29:15 +08:00
parent 1900c051fc
commit 08a246d472
3 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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.TabPane tab="跟进记录" key="1" :force-render="true">
<FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
</Tabs.TabPane>
<Tabs.TabPane tab="基本信息" key="2" :force-render="true">
<Info :clue="clue" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<Tabs :items="clueTabItems" :tab-bar-gutter="16">
<template #contentRender="{ item }">
<FollowUp
v-if="item.key === '1'"
:biz-id="clueId"
:biz-type="BizTypeEnum.CRM_CLUE"
/>
<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>
<Tabs.TabPane tab="操作日志" key="4" :force-render="true">
<OperateLog :log-list="logList" />
</Tabs.TabPane>
<OperateLog v-else-if="item.key === '4'" :log-list="logList" />
</template>
</Tabs>
</Card>
</Page>

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

@ -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.TabPane tab="跟进记录" key="1" :force-render="true">
<FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</Tabs.TabPane>
<Tabs.TabPane tab="基本信息" key="2" :force-render="true">
<Info :customer="customer" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3" :force-render="true">
<Tabs :items="customerTabItems">
<template #contentRender="{ item }">
<FollowUp
v-if="item.key === '1'"
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
/>
<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>
<Tabs.TabPane tab="回款" key="7" :force-render="true">
<ReceivablePlanDetailsList :customer-id="customerId" />
<ReceivableDetailsList :customer-id="customerId" />
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="8" :force-render="true">
<OperateLog :log-list="logList" />
</Tabs.TabPane>
<template v-else-if="item.key === '7'">
<ReceivablePlanDetailsList :customer-id="customerId" />
<ReceivableDetailsList :customer-id="customerId" />
</template>
<OperateLog v-else-if="item.key === '8'" :log-list="logList" />
</template>
</Tabs>
</Card>
</Page>

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

@ -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.TabPane
v-for="item in tabsData"
:key="item.type"
:tab="`${item.name} (${item.count})`"
/>
</Tabs>
<Tabs :items="spuTabItems" @change="onChangeTab" class="w-full" />
</template>
<template #toolbar-tools>
<TableAction