XW-AIOT/iot-device-management-frontend
4
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-25 21:39:06 +08:00
parent 7157254482
commit 655940bc4f
7 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,165 +0,0 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
/** 详情页的基础字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '客户名称',
},
{
field: 'post',
label: '职务',
},
{
field: 'mobile',
label: '手机',
},
{
field: 'createTime',
label: '下次联系时间',
content: (data) => formatDateTime(data?.createTime) as string,
},
];
}
/** 详情页的基础字段 */
export function useDetailBaseSchema(): DescriptionItemSchema[] {
return [
{
field: 'name',
label: '姓名',
},
{
field: 'customerName',
label: '客户名称',
},
{
field: 'mobile',
label: '手机',
},
{
field: 'telephone',
label: '电话',
},
{
field: 'email',
label: '邮箱',
},
{
field: 'qq',
label: 'QQ',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'areaName',
label: '地址',
},
{
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: '下次联系时间',
content: (data) => formatDateTime(data?.contactNextTime) as string,
},
{
field: 'remark',
label: '备注',
},
];
}
/** 详情列表的字段 */
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 },
},
},
];
}

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

@@ -1,42 +0,0 @@
<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 './detail-data';
defineProps<{
contact: CrmContactApi.Contact; // 联系人信息
}>();
const [BaseDescriptions] = useDescription({
componentProps: {
title: '基本信息',
bordered: false,
column: 4,
class: 'mx-4',
},
schema: useDetailBaseSchema(),
});
const [SystemDescriptions] = useDescription({
componentProps: {
title: '系统信息',
bordered: false,
column: 3,
class: 'mx-4',
},
schema: useFollowUpDetailSchema(),
});
</script>
<template>
<div class="p-4">
<BaseDescriptions :data="contact" />
<Divider />
<SystemDescriptions :data="contact" />
</div>
</template>

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

@@ -1,4 +1,5 @@
<script lang="ts" setup>
// TODO @芋艿：放在 modules 里，还是放在哪里？
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmContactApi } from '#/api/crm/contact';
@@ -13,7 +14,7 @@ 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 { useDetailListColumns } from '../detail/data';
import Form from './form.vue';
const props = defineProps<{

205
apps/web-antd/src/views/crm/contact/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 { useDetailListColumns } from './detail-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({
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>

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

@@ -1,149 +0,0 @@
<script setup lang="ts">
import type { CrmContactApi } from '#/api/crm/contact';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { 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 { AsyncOperateLog } 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 { useDetailSchema } from './detail-data';
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 [Descriptions] = 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(() => {
contactId.value = Number(route.params.id);
loadContactDetail();
});
</script>
<template>
<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%]">
<Descriptions :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">
<BusinessDetailsList
: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">
<AsyncOperateLog :log-list="contactLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
</Page>
</template>