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: clue detail

pull/128/head
xingyu4j 2025-06-04 16:46:46 +08:00
parent 5990386498
commit 17889fce66
9 changed files with 214 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/crm/clue/index.ts
View File

@ -77,7 +77,7 @@ export function transferClue(data: CrmPermissionApi.TransferReq) {
/** 线索转化为客户 */
export function transformClue(id: number) {
return requestClient.put('/crm/clue/transform', { id });
return requestClient.put(`/crm/clue/transform?id=${id}`);
}
/** 获得分配给我的、待跟进的线索数量 */

39
apps/web-antd/src/views/crm/clue/data.ts
View File

@ -7,6 +7,7 @@ import { h } from 'vue';
import { formatDateTime } from '@vben/utils';
import { getAreaTree } from '#/api/system/area';
import { getSimpleUserList } from '#/api/system/user';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
@ -32,7 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户来源',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
},
rules: 'required',
},
@ -44,9 +45,12 @@ export function useFormSchema(): VbenFormSchema[] {
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'Select',
component: 'ApiSelect',
componentProps: {
api: 'getSimpleUserList',
api: getSimpleUserList,
labelField: 'nickname',
valueField: 'id',
allowClear: true,
},
rules: 'required',
},
@ -75,7 +79,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户行业',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
},
},
{
@ -83,7 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: '客户级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL),
options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
},
},
{
@ -299,10 +303,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
field: 'mobile',
label: '手机',
},
{
field: 'ownerUserName',
label: '负责人',
},
{
field: 'telephone',
label: '电话',
@ -312,13 +312,18 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
label: '邮箱',
},
{
field: 'wechat',
label: '微信',
field: 'areaName',
label: '地址',
content: (data) => data?.areaName + data?.detailAddress,
},
{
field: 'qq',
label: 'QQ',
},
{
field: 'wechat',
label: '微信',
},
{
field: 'industryId',
label: '客户行业',
@ -337,14 +342,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
value: data?.level,
}),
},
{
field: 'areaId',
label: '地址',
},
{
field: 'detailAddress',
label: '详细地址',
},
{
field: 'contactNextTime',
label: '下次联系时间',
@ -369,9 +366,9 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
label: '最后跟进记录',
},
{
field: 'contactLastContent',
field: 'contactLastTime',
label: '最后跟进时间',
content: (data) => formatDateTime(data?.contactLastContent) as string,
content: (data) => formatDateTime(data?.contactLastTime) as string,
},
{
field: 'creatorName',

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

@ -9,7 +9,7 @@ import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
defineOptions({ name: 'CrmClueDetailsInfo' });
const { clue } = defineProps<{
defineProps<{
clue: CrmClueApi.Clue; // 线索信息
}>();
@ -21,7 +21,6 @@ const [BaseDescription] = useDescription({
class: 'mx-4',
},
schema: useDetailBaseSchema(),
data: clue,
});
const [SystemDescription] = useDescription({
@ -32,14 +31,13 @@ const [SystemDescription] = useDescription({
class: 'mx-4',
},
schema: useDetailSystemSchema(),
data: clue,
});
</script>
<template>
<div class="p-4">
<BaseDescription />
<BaseDescription :data="clue" />
<Divider />
<SystemDescription />
<SystemDescription :data="clue" />
</div>
</template>

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

@ -1,18 +1,22 @@
<script setup lang="ts">
import type { CrmClueApi } from '#/api/crm/clue';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ArrowLeft } from '@vben/icons';
import { Button, Card, Modal, Tabs } from 'ant-design-vue';
import { Button, Card, message, Tabs } from 'ant-design-vue';
import { getClue, transformClue } from '#/api/crm/clue';
import { getOperateLogPage } from '#/api/crm/operateLog';
import { BizTypeEnum } from '#/api/crm/permission';
import { useDescription } from '#/components/description';
import { OperateLog } from '#/components/operate-log';
import FollowUp from '#/views/crm/followup/index.vue';
import { PermissionList, TransferForm } from '#/views/crm/permission';
import { useDetailSchema } from '../data';
@ -29,7 +33,14 @@ const tabs = useTabs();
const clueId = ref(0);
const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
const permissionListRef = ref(); // 团队成员列表 Ref
const clueLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
// 校验负责人权限和编辑权限
const validateOwnerUser = computed(
() => permissionListRef.value?.validateOwnerUser,
);
const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({
componentProps: {
@ -53,9 +64,14 @@ const [TransferModal, transferModalApi] = useVbenModal({
/** 加载线索详情 */
async function loadClueDetail() {
loading.value = true;
clueId.value = Number(route.params.id);
const data = await getClue(clueId.value);
clue.value = data;
// 操作日志
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CLUE,
bizId: clueId.value,
});
clueLogList.value = logList.list;
loading.value = false;
}
@ -67,7 +83,7 @@ function handleBack() {
/** 编辑线索 */
function handleEdit() {
formModalApi.setData({ id: clueId }).open();
formModalApi.setData({ id: clueId.value }).open();
}
/** 转移线索 */
@ -76,31 +92,38 @@ function handleTransfer() {
}
/** 转化为客户 */
async function handleTransform() {
try {
await Modal.confirm({
title: '提示',
async function handleTransform(): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
confirm({
content: '确定将该线索转化为客户吗？',
});
await transformClue(clueId.value);
Modal.success({
title: '成功',
content: '转化客户成功',
});
await loadClueDetail();
} catch {
// 用户取消操作
}
})
.then(async () => {
const res = await transformClue(clueId.value);
if (res) {
// 提示并返回成功
message.success('转化客户成功');
resolve(true);
} else {
reject(new Error('转化失败'));
}
})
.catch(() => {
reject(new Error('取消操作'));
});
});
}
// 加载数据
onMounted(async () => {
clueId.value = Number(route.params.id);
await loadClueDetail();
});
</script>
<template>
<Page auto-content-height :title="clue?.name" :loading="loading">
<FormModal @success="loadClueDetail" />
<TransferModal @success="loadClueDetail" />
<template #extra>
<div class="flex items-center gap-2">
<Button @click="handleBack">
@ -108,58 +131,49 @@ onMounted(async () => {
返回
</Button>
<Button
v-if="permissionListRef?.validateWrite"
v-if="validateWrite"
type="primary"
@click="handleEdit"
v-access:code="['crm:clue:update']"
>
{{ $t('ui.actionTitle.edit') }}
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser"
type="primary"
@click="handleTransfer"
v-access:code="['crm:clue:update']"
>
<Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
转移
</Button>
<Button
v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
v-if="validateOwnerUser && !clue?.transformStatus"
type="primary"
@click="handleTransform"
v-access:code="['crm:clue:update']"
>
转化为客户
</Button>
</div>
</template>
<Card>
<Card class="min-h-[10%]">
<Description :data="clue" />
</Card>
<Card class="mt-4">
<Card class="mt-4 min-h-[60%]">
<Tabs>
<Tabs.TabPane tab="线索跟进" key="1">
<div>线索跟进</div>
</Tabs.TabPane>
<Tabs.TabPane tab="基本信息" key="2">
<Tabs.TabPane tab="基本信息" key="1" :force-render="true">
<ClueDetailsInfo :clue="clue" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3">
<Tabs.TabPane tab="线索跟进" key="2" :force-render="true">
<FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
</Tabs.TabPane>
<Tabs.TabPane tab="团队成员" key="3" :force-render="true">
<PermissionList
ref="permissionListRef"
:biz-id="clue.id!"
:biz-id="clueId"
:biz-type="BizTypeEnum.CRM_CLUE"
:show-action="true"
@quit-team="handleBack"
/>
</Tabs.TabPane>
<Tabs.TabPane tab="操作日志" key="4">
<div>操作日志</div>
<Tabs.TabPane tab="操作日志" key="4" :force-render="true">
<OperateLog :log-list="clueLogList" />
</Tabs.TabPane>
</Tabs>
</Card>
<FormModal @success="loadClueDetail" />
<TransferModal @success="loadClueDetail" />
</Page>
</template>

78
apps/web-antd/src/views/crm/clue/modules/transfer.vue
View File

@ -1,78 +0,0 @@
<script lang="ts" setup>
import type { CrmPermissionApi } from '#/api/crm/permission';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { transferClue } from '#/api/crm/clue';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<{ id: number }>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: [
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'Select',
componentProps: {
api: 'getSimpleUserList',
},
rules: 'required',
},
],
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
try {
await transferClue(data);
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<{ id: number }>();
if (!data || !data.id) {
return;
}
formData.value = data;
},
});
</script>
<template>
<Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>

64
apps/web-antd/src/views/crm/followup/index.vue
View File

@ -1,18 +1,22 @@
<script lang="ts" setup>
import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmFollowUpApi } from '#/api/crm/followup';
import { watch } from 'vue';
import { useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { BizTypeEnum } from '@/api/crm/permission';
import { DICT_TYPE } from '@/utils/dict';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteFollowUpRecord,
getFollowUpRecordPage,
} from '#/api/crm/followup';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { DICT_TYPE } from '#/utils';
import FollowUpRecordForm from './modules/form.vue';
@ -33,17 +37,17 @@ function onRefresh() {
/** 添加跟进记录 */
function handleCreate() {
formModalApi.setData(null).open();
formModalApi.setData({ bizId: props.bizId, bizType: props.bizType }).open();
}
/** 删除跟进记录 */
async function handleDelete(row: FollowUpRecordVO) {
async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]),
key: 'action_key_msg',
});
try {
await FollowUpRecordApi.deleteFollowUpRecord(row.id);
await deleteFollowUpRecord(row.id);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_key_msg',
@ -98,37 +102,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
field: 'contacts',
title: '关联联系人',
visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
slots: {
default: ({ row }) =>
row.contacts?.map((contact) =>
h(
Button,
{
type: 'link',
onClick: () => openContactDetail(contact.id),
},
() => contact.name,
),
),
},
slots: { default: 'contacts' },
},
{
field: 'businesses',
title: '关联商机',
visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
slots: {
default: ({ row }) =>
row.businesses?.map((business) =>
h(
Button,
{
type: 'link',
onClick: () => openBusinessDetail(business.id),
},
() => business.name,
),
),
},
slots: { default: 'businesses' },
},
{
field: 'actions',
@ -142,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await FollowUpRecordApi.getFollowUpRecordPage({
return await getFollowUpRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
bizType: props.bizType,
@ -157,7 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
refresh: { code: 'query' },
},
} as VxeTableGridOptions<FollowUpRecordVO>,
} as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
});
watch(
@ -170,7 +150,8 @@ watch(
<template>
<Page auto-content-height>
<Grid table-title="跟进记录列表">
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction
:actions="[
@ -183,6 +164,16 @@ watch(
]"
/>
</template>
<template #contacts="{ row }">
<Button type="link" @click="openContactDetail(row.id)">
{{ row.name }}
</Button>
</template>
<template #businesses="{ row }">
<Button type="link" @click="openBusinessDetail(row.id)">
{{ row.name }}
</Button>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
@ -200,6 +191,5 @@ watch(
/>
</template>
</Grid>
<FormModal @success="onRefresh" />
</Page>
</template>

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

@ -1,27 +1,23 @@
<script lang="ts" setup>
import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
import type { CrmFollowUpApi } from '#/api/crm/followup';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createFollowUpRecord,
getFollowUpRecord,
updateFollowUpRecord,
} from '#/api/crm/followup';
import { getBusinessPageByCustomer } from '#/api/crm/business';
import { getContactPageByCustomer } from '#/api/crm/contact';
import { createFollowUpRecord } from '#/api/crm/followup';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils';
const emit = defineEmits(['success']);
const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['跟进记录'])
: $t('ui.actionTitle.create', ['跟进记录']);
});
const bizId = ref<number>();
const bizType = ref<number>();
const [Form, formApi] = useVbenForm({
commonConfig: {
@ -32,7 +28,94 @@ const [Form, formApi] = useVbenForm({
labelWidth: 120,
},
layout: 'horizontal',
schema: [],
schema: [
{
component: 'Input',
fieldName: 'bizId',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'bizType',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'type',
label: '跟进类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
},
rules: 'required',
},
{
fieldName: 'nextTime',
label: '下次联系时间',
component: 'DatePicker',
componentProps: {
showTime: false,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
},
rules: 'required',
},
{
fieldName: 'content',
label: '跟进内容',
component: 'Textarea',
rules: 'required',
},
{
fieldName: 'picUrls',
label: '图片',
component: 'ImageUpload',
},
{
fieldName: 'fileUrls',
label: '附件',
component: 'FileUpload',
},
{
fieldName: 'contactIds',
label: '关联联系人',
component: 'ApiSelect',
componentProps: {
api: async () => {
const res = await getContactPageByCustomer({
pageNo: 1,
pageSize: 100,
customerId: bizId.value,
});
return res.list;
},
mode: 'multiple',
fieldNames: { label: 'name', value: 'id' },
},
},
{
fieldName: 'businessIds',
label: '关联商机',
component: 'ApiSelect',
componentProps: {
api: async () => {
const res = await getBusinessPageByCustomer({
pageNo: 1,
pageSize: 100,
customerId: bizId.value,
});
return res.list;
},
mode: 'multiple',
fieldNames: { label: 'name', value: 'id' },
},
},
],
showDefaultActions: false,
});
@ -44,12 +127,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
const data = (await formApi.getValues()) as CrmFollowUpApi.FollowUpRecord;
try {
await (formData.value?.id
? updateFollowUpRecord(data)
: createFollowUpRecord(data));
await createFollowUpRecord(data);
// 关闭并提示
await modalApi.close();
emit('success');
@ -60,19 +140,20 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
if (!data || !data.id) {
const data = modalApi.getData<CrmFollowUpApi.FollowUpRecord>();
if (!data) {
return;
}
if (data.bizId && data.bizType) {
bizId.value = data.bizId;
bizType.value = data.bizType;
}
modalApi.lock();
try {
formData.value = await getFollowUpRecord(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
await formApi.setValues(data);
} finally {
modalApi.unlock();
}
@ -81,7 +162,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Modal title="添加跟进记录" class="w-[40%]">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/crm/permission/modules/data.ts
View File

@ -17,7 +17,7 @@ export function useTransferFormSchema(): VbenFormSchema[] {
},
},
{
fieldName: 'ownerUserId',
fieldName: 'newOwnerUserId',
label: '选择新负责人',
component: 'ApiSelect',
componentProps: {

1
apps/web-antd/src/views/crm/permission/modules/permission-list.vue
View File

@ -109,6 +109,7 @@ function handleDelete() {
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
resolve(true);
} else {
reject(new Error('移出失败'));