This commit is contained in:
xingyu4j
2025-09-26 13:46:48 +08:00
19 changed files with 1613 additions and 348 deletions

View File

@@ -73,7 +73,7 @@ const routes: RouteRecordRaw[] = [
title: '联系人详情',
activePath: '/crm/contact',
},
component: () => import('#/views/crm/contact/modules/detail.vue'),
component: () => import('#/views/crm/contact/detail/index.vue'),
},
{
path: 'product/detail/:id',

View File

@@ -26,6 +26,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '线索名称',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入线索名称',
},
},
{
fieldName: 'source',
@@ -33,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
placeholder: '请选择客户来源',
},
rules: 'required',
},
@@ -40,6 +44,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'mobile',
label: '手机',
component: 'Input',
componentProps: {
placeholder: '请输入手机号',
},
},
{
fieldName: 'ownerUserId',
@@ -50,6 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
labelField: 'nickname',
valueField: 'id',
allowClear: true,
placeholder: '请选择负责人',
},
defaultValue: userStore.userInfo?.id,
rules: 'required',
@@ -58,21 +66,33 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'telephone',
label: '电话',
component: 'Input',
componentProps: {
placeholder: '请输入电话',
},
},
{
fieldName: 'email',
label: '邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入邮箱',
},
},
{
fieldName: 'wechat',
label: '微信',
component: 'Input',
componentProps: {
placeholder: '请输入微信',
},
},
{
fieldName: 'qq',
label: 'QQ',
component: 'Input',
componentProps: {
placeholder: '请输入 QQ',
},
},
{
fieldName: 'industryId',
@@ -80,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
placeholder: '请选择客户行业',
},
},
{
@@ -88,6 +109,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
placeholder: '请选择客户级别',
},
},
{
@@ -97,12 +119,16 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
placeholder: '请选择地址',
},
},
{
fieldName: 'detailAddress',
label: '详细地址',
component: 'Input',
componentProps: {
placeholder: '请输入详细地址',
},
},
{
fieldName: 'contactNextTime',
@@ -112,12 +138,16 @@ export function useFormSchema(): VbenFormSchema[] {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
placeholder: '请选择下次联系时间',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
@@ -129,6 +159,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '线索名称',
component: 'Input',
componentProps: {
placeholder: '请输入线索名称',
allowClear: true,
},
},
{
fieldName: 'transformStatus',
@@ -139,6 +173,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
{ label: '未转化', value: false },
{ label: '已转化', value: true },
],
placeholder: '请选择转化状态',
allowClear: true,
},
defaultValue: false,
},
@@ -146,11 +182,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'mobile',
label: '手机号',
component: 'Input',
componentProps: {
placeholder: '请输入手机号',
allowClear: true,
},
},
{
fieldName: 'telephone',
label: '电话',
component: 'Input',
componentProps: {
placeholder: '请输入电话',
allowClear: true,
},
},
{
fieldName: 'createTime',
@@ -159,6 +203,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
placeholder: ['开始日期', '结束日期'],
},
},
];

View File

@@ -27,17 +27,22 @@ export function useFormSchema(): VbenFormSchema[] {
label: '联系人姓名',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入联系人姓名',
},
},
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
placeholder: '请选择负责人',
},
defaultValue: userStore.userInfo?.id,
},
@@ -45,51 +50,75 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'customerId',
label: '客户名称',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: () => getCustomerSimpleList(),
fieldNames: {
label: 'name',
value: 'id',
},
placeholder: '请选择客户',
},
},
{
fieldName: 'mobile',
label: '手机',
component: 'Input',
componentProps: {
placeholder: '请输入手机号',
},
},
{
fieldName: 'telephone',
label: '电话',
component: 'Input',
componentProps: {
placeholder: '请输入电话',
},
},
{
fieldName: 'email',
label: '邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入邮箱',
},
},
{
fieldName: 'wechat',
label: '微信',
component: 'Input',
componentProps: {
placeholder: '请输入微信',
},
},
{
fieldName: 'qq',
label: 'QQ',
component: 'Input',
componentProps: {
placeholder: '请输入QQ',
},
},
{
fieldName: 'post',
label: '职位',
component: 'Input',
componentProps: {
placeholder: '请输入职位',
},
},
{
fieldName: 'master',
label: '关键决策人',
component: 'Select',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
placeholder: '请选择是否关键决策人',
buttonStyle: 'solid',
optionType: 'button',
},
defaultValue: false,
},
{
fieldName: 'sex',
@@ -97,6 +126,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
placeholder: '请选择性别',
},
},
{
@@ -109,6 +139,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: 'name',
value: 'id',
},
placeholder: '请选择直属上级',
},
},
{
@@ -118,12 +149,16 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
placeholder: '请选择地址',
},
},
{
fieldName: 'detailAddress',
label: '详细地址',
component: 'Input',
componentProps: {
placeholder: '请输入详细地址',
},
},
{
fieldName: 'contactNextTime',
@@ -133,12 +168,16 @@ export function useFormSchema(): VbenFormSchema[] {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
placeholder: '请选择下次联系时间',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
@@ -147,7 +186,7 @@ export function useFormSchema(): VbenFormSchema[] {
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
fieldName: 'customerId',
label: '客户',
component: 'ApiSelect',
componentProps: {
@@ -156,32 +195,54 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: 'name',
value: 'id',
},
placeholder: '请选择客户',
allowClear: true,
},
},
{
fieldName: 'name',
label: '姓名',
component: 'Input',
componentProps: {
placeholder: '请输入联系人姓名',
allowClear: true,
},
},
{
fieldName: 'mobile',
label: '手机号',
component: 'Input',
componentProps: {
placeholder: '请输入手机号',
allowClear: true,
},
},
{
fieldName: 'telephone',
label: '电话',
component: 'Input',
componentProps: {
placeholder: '请输入电话',
allowClear: true,
},
},
{
fieldName: 'wechat',
label: '微信',
component: 'Input',
componentProps: {
placeholder: '请输入微信',
allowClear: true,
},
},
{
fieldName: 'email',
label: '电子邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入电子邮箱',
allowClear: true,
},
},
];
}
@@ -203,15 +264,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 240,
slots: { default: 'customerName' },
},
{
field: 'sex',
title: '性别',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
field: 'mobile',
title: '手机',
@@ -220,12 +272,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'telephone',
title: '电话',
minWidth: 120,
minWidth: 130,
},
{
field: 'email',
title: '邮箱',
minWidth: 120,
minWidth: 180,
},
{
field: 'post',
@@ -233,10 +285,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 120,
},
{
field: 'detailAddress',
field: 'areaName',
title: '地址',
minWidth: 120,
},
{
field: 'detailAddress',
title: '详细地址',
minWidth: 180,
},
{
field: 'master',
title: '关键决策人',
@@ -252,6 +309,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 120,
slots: { default: 'parentId' },
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'sex',
title: '性别',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_USER_SEX },
},
},
{
field: 'remark',
title: '备注',
minWidth: 200,
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'ownerUserName',
title: '负责人',
@@ -263,16 +346,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 120,
},
{
field: 'contactNextTime',
title: '下次联系时间',
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'remark',
title: '备注',
minWidth: 200,
},
{
field: 'createTime',
title: '创建时间',
@@ -280,10 +358,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 180,
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
minWidth: 180,
field: 'creatorName',
title: '创建人',
minWidth: 120,
},
{
title: '操作',

View File

@@ -20,7 +20,7 @@ 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';
import { useDetailSchema } from './data';
const loading = ref(false);

View File

@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
import { useDescription } from '#/components/description';
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
import { useDetailBaseSchema } from './detail-data';
import { useDetailBaseSchema } from '../data';
defineProps<{
contact: CrmContactApi.Contact; //

View File

@@ -19,9 +19,9 @@ import {
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';
import ListModal from '../../modules/detail-list-modal.vue';
import Form from '../../modules/form.vue';
import { useDetailListColumns } from '../data';
const props = defineProps<{
bizId: number; //

View File

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

View File

@@ -30,13 +30,17 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
async function handleExport() {
const data = await exportContact(await gridApi.formApi.getValues());
const formValues = await gridApi.formApi.getValues();
const data = await exportContact({
sceneType: sceneType.value,
...formValues,
});
downloadFileFromBlobPart({ fileName: '联系人.xls', source: data });
}
@@ -58,10 +62,8 @@ async function handleDelete(row: CrmContactApi.Contact) {
});
try {
await deleteContact(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
onRefresh();
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
}
@@ -77,6 +79,12 @@ function handleCustomerDetail(row: CrmContactApi.Contact) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 处理场景类型的切换 */
function handleChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@@ -99,6 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -106,11 +115,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<CrmContactApi.Contact>,
});
function onChangeSceneType(key: number | string) {
sceneType.value = key.toString();
gridApi.query();
}
</script>
<template>
@@ -126,10 +130,10 @@ function onChangeSceneType(key: number | string) {
/>
</template>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid>
<template #top>
<Tabs class="border-none" @change="onChangeSceneType">
<Tabs class="-mt-11" @change="handleChangeSceneType">
<Tabs.TabPane tab="我负责的" key="1" />
<Tabs.TabPane tab="我参与的" key="2" />
<Tabs.TabPane tab="下属负责的" key="3" />
@@ -167,7 +171,7 @@ function onChangeSceneType(key: number | string) {
</template>
<template #parentId="{ row }">
<Button type="link" @click="handleDetail(row)">
{{ row.parentId }}
{{ row.parentName }}
</Button>
</template>
<template #actions="{ row }">
@@ -180,12 +184,6 @@ function onChangeSceneType(key: number | string) {
auth: ['crm:contact:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
onClick: handleDetail.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
@@ -203,3 +201,8 @@ function onChangeSceneType(key: number | string) {
</Grid>
</Page>
</template>
<style scoped>
:deep(.vxe-toolbar div) {
z-index: 1;
}
</style>

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<{

View File

@@ -59,8 +59,6 @@ const [Modal, modalApi] = useVbenModal({
// 加载数据
const data = modalApi.getData<CrmContactApi.Contact>();
if (!data || !data.id) {
// 设置到 values
await formApi.setValues(data);
return;
}
modalApi.lock();