aiotagro/admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat：【antd】【crm】contact 详情的优化

Browse Source
This commit is contained in:
YunaiV
2025-09-27 15:25:09 +08:00
parent af291928ad
commit 84bb8331c2
8 changed files with 48 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web-antd/src/views/crm/clue/detail/index.vue
View File

@@ -2,7 +2,7 @@
import type { CrmClueApi } from '#/api/crm/clue';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { computed, onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
@@ -33,12 +33,6 @@ const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue); // 线索详情
const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
/** 校验负责人权限和编辑权限 */
const validateOwnerUser = computed(
() => permissionListRef.value?.validateOwnerUser,
);
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Descriptions] = useDescription({
componentProps: {
bordered: false,
@@ -129,18 +123,22 @@ onMounted(() => {
返回
</Button>
<Button
v-if="validateWrite"
v-if="permissionListRef?.validateWrite"
type="primary"
@click="handleEdit"
v-access:code="['crm:clue:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
<Button
v-if="permissionListRef?.validateOwnerUser"
type="primary"
@click="handleTransfer"
>
转移
</Button>
<Button
v-if="validateOwnerUser && !clue?.transformStatus"
v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
type="primary"
@click="handleTransform"
>

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

@@ -1,4 +1,3 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@@ -104,62 +103,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
},
];
}
/** 详情列表的字段 */
export function useDetailListColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 50,
fixed: 'left',
},
{
field: 'name',
title: '姓名',
fixed: 'left',
slots: { default: 'name' },
},
{
field: 'customerName',
title: '客户名称',
fixed: 'left',
slots: { default: 'customerName' },
},
{
field: 'sex',
title: '性别',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
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 },
},
},
];
}

69
apps/web-antd/src/views/crm/contact/detail/index.vue
View File

@@ -14,24 +14,23 @@ import { getContact } from '#/api/crm/contact';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { OperateLog } from '#/components/operate-log';
import { BusinessDetailsList } from '#/views/crm/business';
import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import Form from '../modules/form.vue';
import { useDetailSchema } from './data';
const loading = ref(false);
import Info from './modules/info.vue';
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 loading = ref(false); // 加载中
const contactId = ref(0); // 联系人编号
const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact); // 联系人详情
const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
const [Descriptions] = useDescription({
@@ -44,7 +43,7 @@ const [Descriptions] = useDescription({
});
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ContactForm,
connectedComponent: Form,
destroyOnClose: true,
});
@@ -53,18 +52,20 @@ const [TransferModal, transferModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 加载详情 */
async function loadContactDetail() {
/** 加载联系人详情 */
async function getContactDetail() {
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;
try {
contact.value = await getContact(contactId.value);
// 操作日志
const res = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CONTACT,
bizId: contactId.value,
});
logList.value = res.list;
} finally {
loading.value = false;
}
}
/** 返回列表页 */
@@ -73,29 +74,33 @@ function handleBack() {
router.push('/crm/contact');
}
/** 编辑 */
/** 编辑联系人 */
function handleEdit() {
formModalApi.setData({ id: contactId.value }).open();
}
/** 转移线索 */
/** 转移联系人 */
function handleTransfer() {
transferModalApi.setData({ id: contactId.value }).open();
}
// 加载数据
/** 加载数据 */
onMounted(() => {
contactId.value = Number(route.params.id);
loadContactDetail();
contactId.value = route.params.id as number;
getContactDetail();
});
</script>
<template>
<Page auto-content-height :title="contact?.name" :loading="loading">
<FormModal @success="loadContactDetail" />
<TransferModal @success="loadContactDetail" />
<FormModal @success="getContactDetail" />
<TransferModal @success="getContactDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button @click="handleBack">
<IconifyIcon icon="lucide:arrow-left" />
返回
</Button>
<Button
v-if="permissionListRef?.validateWrite"
type="primary"
@@ -117,12 +122,12 @@ onMounted(() => {
</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">
<Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
<FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
</Tabs.TabPane>
<Tabs.TabPane tab="详细资料" key="2" :force-render="true">
<Info :contact="contact" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<PermissionList
ref="permissionListRef"
@@ -141,7 +146,7 @@ onMounted(() => {
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="5" :force-render="true">
<AsyncOperateLog :log-list="contactLogList" />
<OperateLog :log-list="logList" />
</Tabs.TabPane>
</Tabs>
</Card>

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

@@ -1,205 +0,0 @@
<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 ListModal from '../../modules/detail-list-modal.vue';
import Form from '../../modules/form.vue';
import { useDetailListColumns } from '../data';
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({
pageNo: page.currentPage,
pageSize: page.pageSize,
customerId: props.bizId,
...formValues,
});
} else if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
return await getContactPageByBusiness({
pageNo: page.currentPage,
pageSize: page.pageSize,
businessId: props.bizId,
...formValues,
});
} else {
return [];
}
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<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>

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

@@ -9,7 +9,7 @@ import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from '../data';
defineProps<{
contact: CrmContactApi.Contact; // 联系人信息
contact: CrmContactApi.Contact;
}>();
const [BaseDescriptions] = useDescription({

10
apps/web-antd/src/views/crm/contact/index.ts
View File

@@ -1,13 +1,5 @@
import { defineAsyncComponent } from 'vue';
export const ContactDetailsInfo = defineAsyncComponent(
() => import('./detail/modules/detail-info.vue'),
);
export const ContactForm = defineAsyncComponent(
() => import('./modules/form.vue'),
);
export const ContactDetailsList = defineAsyncComponent(
() => import('./detail/modules/detail-list.vue'),
() => import('./components/detail-list.vue'),
);

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

@@ -1,164 +0,0 @@
<script lang="ts" setup>
// TODO @芋艿：放在 modules 里，还是放在哪里？
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 '../detail/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({
pageNo: page.currentPage,
pageSize: page.pageSize,
customerId: props.customerId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
gridEvents: {
checkboxAll: setCheckedRows,
checkboxChange: setCheckedRows,
},
});
</script>
<template>
<Modal title="关联联系人" class="w-2/5">
<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>

2
apps/web-antd/src/views/crm/followup/modules/form.vue
View File

@@ -60,7 +60,7 @@ const [Form, formApi] = useVbenForm({
label: '下次联系时间',
component: 'DatePicker',
componentProps: {
showTime: false,
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
},