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

feat: crm contact detail

pull/128/head
xingyu4j 2025-06-04 22:30:25 +08:00
parent 070274de15
commit a0281ef742
10 changed files with 740 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/web-antd/src/views/crm/business/modules/detail-form.vue → apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
View File

@ -2,11 +2,12 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBusinessPageByCustomer } from '#/api/crm/business';
@ -28,6 +29,11 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
const checkedRows = ref<CrmBusinessApi.Business[]>([]);
function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
@ -50,22 +56,20 @@ function handleCustomerDetail(row: CrmBusinessApi.Business) {
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// const { valid } = await formApi.validate();
// if (!valid) {
// return;
// }
// modalApi.lock();
// // 提交表单
// const data = (await formApi.getValues()) as CrmBusinessApi.Business;
// try {
// await (formData.value?.id ? updateBusiness(data) : createBusiness(data));
// // 关闭并提示
// await modalApi.close();
emit('success');
// message.success($t('ui.actionMessage.operationSuccess'));
// } finally {
// modalApi.unlock();
// }
if (checkedRows.value.length === 0) {
message.error('请先选择商机后操作！');
return;
}
modalApi.lock();
// 提交表单
try {
const businessIds = checkedRows.value.map((item) => item.id);
// 关闭并提示
await modalApi.close();
emit('success', businessIds, checkedRows.value);
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -120,6 +124,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true,
},
} as VxeTableGridOptions<CrmBusinessApi.Business>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>

32
apps/web-antd/src/views/crm/business/modules/detail-list.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
@ -10,13 +11,16 @@ import { confirm, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBusinessPage } from '#/api/crm/business';
import {
getBusinessPageByContact,
getBusinessPageByCustomer,
} from '#/api/crm/business';
import { createContactBusinessList } from '#/api/crm/contact';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from '../data';
import DetailForm from './detail-form.vue';
import ListModal from './detail-list-modal.vue';
import Form from './form.vue';
const props = defineProps<{
@ -33,8 +37,8 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
const [DetailFormModal, detailFormModalApi] = useVbenModal({
connectedComponent: DetailForm,
const [DetailListModal, detailListModalApi] = useVbenModal({
connectedComponent: ListModal,
destroyOnClose: true,
});
@ -56,7 +60,7 @@ function handleCreate() {
}
function handleCreateBusiness() {
detailFormModalApi.setData({ customerId: props.customerId }).open();
detailListModalApi.setData({ customerId: props.customerId }).open();
}
async function handleDeleteContactBusinessList() {
@ -98,6 +102,15 @@ function handleCustomerDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
async function handleCreateContactBusinessList(businessIds: number[]) {
const data = {
contactId: props.bizId,
businessIds,
} as CrmContactApi.ContactBusinessReq;
await createContactBusinessList(data);
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
@ -107,14 +120,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
ajax: {
query: async ({ page }, formValues) => {
if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
return await getBusinessPage({
return await getBusinessPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_CONTACT) {
return await getBusinessPage({
return await getBusinessPageByContact({
page: page.currentPage,
pageSize: page.pageSize,
contactId: props.contactId,
@ -144,7 +157,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<div>
<FormModal @success="onRefresh" />
<DetailFormModal :customer-id="customerId" @success="onRefresh" />
<DetailListModal
:customer-id="customerId"
@success="handleCreateContactBusinessList"
/>
<Grid>
<template #toolbar-tools>
<TableAction

11
apps/web-antd/src/views/crm/business/modules/detail.vue
View File

@ -21,6 +21,10 @@ const BusinessDetailsInfo = defineAsyncComponent(
() => import('./detail-info.vue'),
);
const ContactDetailsList = defineAsyncComponent(
() => import('#/views/crm/contact/modules/detail-list.vue'),
);
const FollowUp = defineAsyncComponent(
() => import('#/views/crm/followup/index.vue'),
);
@ -162,7 +166,12 @@ onMounted(async () => {
<FollowUp :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3" :force-render="true">
<div>联系人</div>
<ContactDetailsList
:biz-id="businessId"
:biz-type="BizTypeEnum.CRM_BUSINESS"
:business-id="business.id"
:customer-id="business.customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="产品" key="4" :force-render="true">
<div>产品</div>

2
apps/web-antd/src/views/crm/clue/modules/detail.vue
View File

@ -168,7 +168,7 @@ onMounted(async () => {
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="基本信息" key="1" :force-render="true">
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ClueDetailsInfo :clue="clue" />
</Tabs.TabPane>
<Tabs.TabPane tab="线索跟进" key="2" :force-render="true">

135
apps/web-antd/src/views/crm/contact/data.ts
View File

@ -279,9 +279,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
];
}
/** 详情页的字段 */
/** 详情页的基础字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
return [
{
field: 'name',
label: '客户名称',
},
{
field: 'post',
label: '职务',
},
{
field: 'mobile',
label: '手机',
},
{
field: 'createTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
];
}
/** 详情页的基础字段 */
@ -289,16 +307,11 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '客户名称',
label: '姓名',
},
{
field: 'source',
label: '客户来源',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
value: data?.source,
}),
field: 'customerName',
label: '客户名称',
},
{
field: 'mobile',
@ -312,28 +325,13 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
field: 'email',
label: '邮箱',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'qq',
label: 'QQ',
},
{
field: 'industryId',
label: '客户行业',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
value: data?.industryId,
}),
},
{
field: 'level',
label: '客户级别',
content: (data) =>
h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
field: 'wechat',
label: '微信',
},
{
field: 'areaName',
@ -343,6 +341,29 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
field: 'detailAddress',
label: '详细地址',
},
{
field: 'post',
label: '职务',
},
{
field: 'parentName',
label: '直属上级',
},
{
field: 'master',
label: '关键决策人',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.master,
}),
},
{
field: 'sex',
label: '性别',
content: (data) =>
h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: data?.sex }),
},
{
field: 'contactNextTime',
label: '下次联系时间',
@ -355,31 +376,61 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
];
}
/** 详情页的系统字段 */
export function useDetailSystemSchema(): DescriptionItemSchema[] {
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'ownerUserName',
label: '负责人',
type: 'checkbox',
width: 50,
fixed: 'left',
},
{
field: 'ownerUserDeptName',
label: '所属部门',
field: 'name',
title: '姓名',
fixed: 'left',
slots: { default: 'name' },
},
{
field: 'contactLastTime',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastTime) as string,
field: 'customerName',
title: '客户名称',
fixed: 'left',
slots: { default: 'customerName' },
},
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime) as string,
field: 'sex',
title: '性别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
field: 'updateTime',
label: '更新时间',
content: (data) => formatDateTime(data?.updateTime) as string,
field: 'mobile',
title: '手机',
},
{
field: 'telephone',
title: '电话',
},
{
field: 'email',
title: '邮箱',
},
{
field: 'post',
title: '职位',
},
{
field: 'detailAddress',
title: '地址',
},
{
field: 'master',
title: '关键决策人',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
},
},
];
}

44
apps/web-antd/src/views/crm/contact/modules/detail-info.vue
View File

@ -1,4 +1,44 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { CrmContactApi } from '#/api/crm/contact';
import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from '../data';
defineOptions({ name: 'CrmContactDetailsInfo' });
defineProps<{
contact: CrmContactApi.Contact; // 联系人信息
}>();
const [BaseDescription] = useDescription({
componentProps: {
title: '基本信息',
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailBaseSchema(),
});
const [SystemDescription] = useDescription({
componentProps: {
title: '系统信息',
bordered: false,
column: 3,
class: 'mx-4',
},
schema: useFollowUpDetailSchema(),
});
</script>
<template>
<div>contactInfo</div>
<div class="p-4">
<BaseDescription :data="contact" />
<Divider />
<SystemDescription :data="contact" />
</div>
</template>

163
apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue Normal file
View File

@ -0,0 +1,163 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getContactPageByCustomer } from '#/api/crm/contact';
import { $t } from '#/locales';
import { useDetailListColumns } from '../data';
import Form from './form.vue';
const props = defineProps<{
customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
}>();
const emit = defineEmits(['success']);
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const checkedRows = ref<CrmContactApi.Contact[]>([]);
function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建商机 */
function handleCreate() {
formModalApi.setData({ customerId: props.customerId }).open();
}
/** 查看商机详情 */
function handleDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmContactDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (checkedRows.value.length === 0) {
message.error('请先选择联系人后操作！');
return;
}
modalApi.lock();
// 提交表单
try {
const contactIds = checkedRows.value.map((item) => item.id);
// 关闭并提示
await modalApi.close();
emit('success', contactIds, checkedRows.value);
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<any>();
if (!data) {
return;
}
modalApi.lock();
try {
// 设置到 values
// await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'name',
label: '联系人名称',
component: 'Input',
},
],
},
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getContactPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<Modal title="关联联系人" class="w-[40%]">
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['联系人']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['crm:contact:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</Modal>
</template>

205
apps/web-antd/src/views/crm/contact/modules/detail-list.vue
View File

@ -1,4 +1,205 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContactApi } from '#/api/crm/contact';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { confirm, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
createBusinessContactList,
deleteBusinessContactList,
getContactPageByBusiness,
getContactPageByCustomer,
} from '#/api/crm/contact';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from '../data';
import ListModal from './detail-list-modal.vue';
import Form from './form.vue';
const props = defineProps<{
bizId: number; // 业务编号
bizType: number; // 业务类型
businessId?: number; // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
customerId?: number; // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
}>();
const { push } = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [DetailListModal, detailListModalApi] = useVbenModal({
connectedComponent: ListModal,
destroyOnClose: true,
});
const checkedRows = ref<CrmContactApi.Contact[]>([]);
function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建联系人 */
function handleCreate() {
formModalApi
.setData({ customerId: props.customerId, businessId: props.businessId })
.open();
}
function handleCreateContact() {
detailListModalApi.setData({ customerId: props.customerId }).open();
}
async function handleDeleteContactBusinessList() {
if (checkedRows.value.length === 0) {
message.error('请先选择联系人后操作！');
return;
}
return new Promise((resolve, reject) => {
confirm({
content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
})
.then(async () => {
const res = await deleteBusinessContactList({
businessId: props.bizId,
contactIds: checkedRows.value.map((item) => item.id),
});
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
resolve(true);
} else {
reject(new Error($t('ui.actionMessage.operationFailed')));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
/** 查看联系人详情 */
function handleDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmContactDetail', params: { id: row.id } });
}
/** 查看客户详情 */
function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
async function handleCreateBusinessContactList(contactIds: number[]) {
const data = {
businessId: props.bizId,
contactIds,
} as CrmContactApi.BusinessContactReq;
await createBusinessContactList(data);
onRefresh();
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
return await getContactPageByCustomer({
page: page.currentPage,
pageSize: page.pageSize,
customerId: props.bizId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
return await getContactPageByBusiness({
page: page.currentPage,
pageSize: page.pageSize,
businessId: props.bizId,
...formValues,
});
} else {
return [];
}
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<div>contactList</div>
<div>
<FormModal @success="onRefresh" />
<DetailListModal
:customer-id="customerId"
@success="handleCreateBusinessContactList"
/>
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['联系人']),
type: 'primary',
icon: ACTION_ICON.ADD,
onClick: handleCreate,
},
{
label: '关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!businessId,
onClick: handleCreateContact,
},
{
label: '解除关联',
icon: ACTION_ICON.ADD,
type: 'default',
auth: ['crm:contact:create-business'],
ifShow: () => !!businessId,
onClick: handleDeleteContactBusinessList,
},
]"
/>
</template>
<template #name="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.name }}
</Button>
</template>
<template #customerName="{ row }">
<Button type="link" @click="handleCustomerDetail(row)">
{{ row.customerName }}
</Button>
</template>
</Grid>
</div>
</template>

173
apps/web-antd/src/views/crm/contact/modules/detail.vue
View File

@ -1,7 +1,172 @@
<script lang="ts" setup></script>
<script setup lang="ts">
import type { CrmContactApi } from '#/api/crm/contact';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Tabs } from 'ant-design-vue';
import { getContact } from '#/api/crm/contact';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const ContactDetailsInfo = defineAsyncComponent(
() => import('./detail-info.vue'),
);
const ContactForm = defineAsyncComponent(
() => import('#/views/crm/contact/modules/form.vue'),
);
const BusinessList = defineAsyncComponent(
() => import('#/views/crm/business/modules/detail-list.vue'),
);
const FollowUp = defineAsyncComponent(
() => import('#/views/crm/followup/index.vue'),
);
const PermissionList = defineAsyncComponent(
() => import('#/views/crm/permission/modules/permission-list.vue'),
);
const TransferForm = defineAsyncComponent(
() => import('#/views/crm/permission/modules/transfer-form.vue'),
);
const OperateLog = defineAsyncComponent(
() => import('#/components/operate-log'),
);
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const tabs = useTabs();
const contactId = ref(0);
const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ContactForm,
destroyOnClose: true,
});
const [TransferModal, transferModalApi] = useVbenModal({
connectedComponent: TransferForm,
destroyOnClose: true,
});
/** 加载详情 */
async function loadContactDetail() {
loading.value = true;
contactId.value = Number(route.params.id);
const data = await getContact(contactId.value);
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CONTACT,
bizId: contactId.value,
});
contactLogList.value = logList.list;
contact.value = data;
loading.value = false;
}
/** 返回列表页 */
function handleBack() {
tabs.closeCurrentTab();
router.push('/crm/contact');
}
/** 编辑 */
function handleEdit() {
formModalApi.setData({ id: contactId.value }).open();
}
/** 转移线索 */
function handleTransfer() {
transferModalApi.setData({ id: contactId.value }).open();
}
// 加载数据
onMounted(async () => {
contactId.value = Number(route.params.id);
await loadContactDetail();
});
</script>
<template>
<div>
<p>待完成</p>
</div>
<Page auto-content-height :title="contact?.name" :loading="loading">
<FormModal @success="loadContactDetail" />
<TransferModal @success="loadContactDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button
v-if="permissionListRef?.validateWrite"
type="primary"
@click="handleEdit"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser"
type="primary"
@click="handleTransfer"
>
转移
</Button>
</div>
</template>
<Card class="min-h-[10%]">
<Description :data="contact" />
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<ContactDetailsInfo :contact="contact" />
</Tabs.TabPane>
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="contactId"
:biz-type="BizTypeEnum.CRM_CONTACT"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="商机" key="4" :force-render="true">
<BusinessList
:biz-id="contactId"
:biz-type="BizTypeEnum.CRM_CONTACT"
:contact-id="contactId"
:customer-id="contact.customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="5" :force-render="true">
<OperateLog :log-list="contactLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>

12
apps/web-antd/src/views/crm/customer/modules/detail.vue
View File

@ -21,6 +21,10 @@ const CustomerDetailsInfo = defineAsyncComponent(
() => import('./detail-info.vue'),
);
const ContactDetailsList = defineAsyncComponent(
() => import('#/views/crm/contact/modules/detail-list.vue'),
);
const CustomerForm = defineAsyncComponent(
() => import('#/views/crm/customer/modules/form.vue'),
);
@ -221,14 +225,18 @@ onMounted(async () => {
</Card>
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="基本信息" key="1" :force-render="true">
<Tabs.TabPane tab="详细资料" key="1" :force-render="true">
<CustomerDetailsInfo :customer="customer" />
</Tabs.TabPane>
<Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
<FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</Tabs.TabPane>
<Tabs.TabPane tab="联系人" key="3" :force-render="true">
<div>联系人</div>
<ContactDetailsList
:biz-id="customerId"
:biz-type="BizTypeEnum.CRM_CUSTOMER"
:customer-id="customerId"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="4" :force-render="true">
<PermissionList