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

feat：【antd】【crm】商机的整体代码结构优化

Browse Source
This commit is contained in:
YunaiV
2025-09-28 22:46:00 +08:00
parent 1a3441b662
commit 9c564ea3af
12 changed files with 125 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/web-antd/src/views/crm/business/components/data.ts Normal file
View File

@@ -0,0 +1,52 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
/** 商机关联列表列定义 */
export function useBusinessDetailListColumns(): 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: 'totalPrice',
title: '商机金额（元）',
formatter: 'formatAmount2',
},
{
field: 'dealTime',
title: '预计成交日期',
formatter: 'formatDate',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'statusTypeName',
title: '商机状态组',
fixed: 'right',
},
{
field: 'statusName',
title: '商机阶段',
fixed: 'right',
},
];
}

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

@@ -1,3 +1,4 @@
<!-- 商机选择对话框：用于联系人详情中关联已有商机 -->
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
@@ -13,8 +14,8 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBusinessPageByCustomer } from '#/api/crm/business';
import { $t } from '#/locales';
import { useDetailListColumns } from '../detail/data';
import Form from './form.vue';
import Form from '../modules/form.vue';
import { useBusinessDetailListColumns } from './data';
const props = defineProps<{
customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
@@ -29,13 +30,14 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 已选择的商机 */
const checkedRows = ref<CrmBusinessApi.Business[]>([]);
function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -54,6 +56,7 @@ function handleCustomerDetail(row: CrmBusinessApi.Business) {
push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
}
/** 商机关联弹窗 */
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (checkedRows.value.length === 0) {
@@ -71,25 +74,9 @@ const [Modal, modalApi] = useVbenModal({
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: [
@@ -101,7 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
],
},
gridOptions: {
columns: useDetailListColumns(),
columns: useBusinessDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
@@ -133,7 +120,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Modal title="关联商机" class="w-2/5">
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid>
<template #toolbar-tools>
<TableAction

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

@@ -1,3 +1,4 @@
<!-- 商机列表：用于【客户】【联系人】详情中，展示其关联的商机列表 -->
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmBusinessApi } from '#/api/crm/business';
@@ -22,9 +23,9 @@ import {
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { useDetailListColumns } from '../detail/data';
import Form from '../modules/form.vue';
import { useBusinessDetailListColumns } from './data';
import ListModal from './detail-list-modal.vue';
import Form from './form.vue';
const props = defineProps<{
bizId: number; // 业务编号
@@ -45,13 +46,14 @@ const [DetailListModal, detailListModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 已选择的商机 */
const checkedRows = ref<CrmBusinessApi.Business[]>([]);
function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
checkedRows.value = records;
}
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -62,10 +64,12 @@ function handleCreate() {
.open();
}
/** 关联商机 */
function handleCreateBusiness() {
detailListModalApi.setData({ customerId: props.customerId }).open();
}
/** 解除商机关联 */
async function handleDeleteContactBusinessList() {
if (checkedRows.value.length === 0) {
message.error('请先选择商机后操作！');
@@ -83,7 +87,7 @@ async function handleDeleteContactBusinessList() {
if (res) {
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
onRefresh();
handleRefresh();
resolve(true);
} else {
reject(new Error($t('ui.actionMessage.operationFailed')));
@@ -105,18 +109,20 @@ 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();
handleRefresh();
}
/** 商机关联表格 */
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailListColumns(),
columns: useBusinessDetailListColumns(),
height: 600,
keepSource: true,
proxyConfig: {
@@ -144,6 +150,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -159,7 +166,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<div>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<DetailListModal
:customer-id="customerId"
@success="handleCreateContactBusinessList"

2
apps/web-antd/src/views/crm/business/index.ts → apps/web-antd/src/views/crm/business/components/index.ts
View File

@@ -1,5 +1,5 @@
import { defineAsyncComponent } from 'vue';
export const BusinessDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
() => import('./detail-list.vue'),
);

66
apps/web-antd/src/views/crm/business/data.ts
View File

@@ -26,6 +26,10 @@ export function useFormSchema(): VbenFormSchema[] {
label: '商机名称',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入商机名称',
allowClear: true,
},
},
{
fieldName: 'ownerUserId',
@@ -37,6 +41,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: 'nickname',
value: 'id',
},
placeholder: '请选择负责人',
allowClear: true,
},
defaultValue: userStore.userInfo?.id,
rules: 'required',
@@ -51,6 +57,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: 'name',
value: 'id',
},
placeholder: '请选择客户',
allowClear: true,
},
dependencies: {
triggerFields: ['id'],
@@ -77,6 +85,8 @@ export function useFormSchema(): VbenFormSchema[] {
label: 'name',
value: 'id',
},
placeholder: '请选择商机状态组',
allowClear: true,
},
dependencies: {
triggerFields: ['id'],
@@ -93,6 +103,7 @@ export function useFormSchema(): VbenFormSchema[] {
showTime: false,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'x',
placeholder: '请选择预计成交日期',
},
},
{
@@ -100,6 +111,10 @@ export function useFormSchema(): VbenFormSchema[] {
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
componentProps: {
placeholder: '请输入产品清单',
allowClear: true,
},
},
{
fieldName: 'totalProductPrice',
@@ -108,6 +123,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
min: 0,
precision: 2,
placeholder: '请输入产品总金额',
},
rules: z.number().min(0).optional().default(0),
},
@@ -118,6 +134,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
min: 0,
precision: 2,
placeholder: '请输入整单折扣',
},
rules: z.number().min(0).max(100).optional().default(0),
},
@@ -129,6 +146,7 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
precision: 2,
disabled: true,
placeholder: '请输入折扣后金额',
},
dependencies: {
triggerFields: ['totalProductPrice', 'discountPercent'],
@@ -170,83 +188,83 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'name',
title: '商机名称',
fixed: 'left',
minWidth: 240,
width: 160,
slots: { default: 'name' },
},
{
field: 'customerName',
title: '客户名称',
fixed: 'left',
minWidth: 240,
width: 120,
slots: { default: 'customerName' },
},
{
field: 'totalPrice',
title: '商机金额（元）',
minWidth: 140,
width: 140,
formatter: 'formatAmount2',
},
{
field: 'dealTime',
title: '预计成交日期',
formatter: 'formatDate',
minWidth: 180,
width: 180,
},
{
field: 'remark',
title: '备注',
minWidth: 200,
width: 200,
},
{
field: 'contactNextTime',
title: '下次联系时间',
formatter: 'formatDate',
minWidth: 180,
formatter: 'formatDateTime',
width: 180,
},
{
field: 'ownerUserName',
title: '负责人',
minWidth: 120,
width: 100,
},
{
field: 'ownerUserDeptName',
title: '所属部门',
minWidth: 120,
width: 100,
},
{
field: 'contactLastTime',
title: '最后跟进时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'creatorName',
title: '创建人',
minWidth: 120,
width: 180,
},
{
field: 'updateTime',
title: '更新时间',
formatter: 'formatDateTime',
minWidth: 180,
width: 180,
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
width: 180,
},
{
field: 'creatorName',
title: '创建人',
width: 100,
},
{
field: 'statusTypeName',
title: '商机状态组',
fixed: 'right',
minWidth: 120,
width: 140,
},
{
field: 'statusName',
title: '商机阶段',
fixed: 'right',
minWidth: 120,
width: 120,
},
{
title: '操作',

53
apps/web-antd/src/views/crm/business/detail/data.ts
View File

@@ -1,4 +1,3 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import type { Ref } from 'vue';
import type { CrmBusinessApi } from '#/api/crm/business';
@@ -136,55 +135,3 @@ export function useStatusFormSchema(
},
];
}
/** 详情列表的字段 */
// TODO @AI：放在 components 的 data.ts 下，更合适
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: 'totalPrice',
title: '商机金额（元）',
formatter: 'formatAmount2',
},
{
field: 'dealTime',
title: '预计成交日期',
formatter: 'formatDate',
},
{
field: 'ownerUserName',
title: '负责人',
},
{
field: 'ownerUserDeptName',
title: '所属部门',
},
{
field: 'statusTypeName',
title: '商机状态组',
fixed: 'right',
},
{
field: 'statusName',
title: '商机阶段',
fixed: 'right',
},
];
}

3
apps/web-antd/src/views/crm/business/index.vue
View File

@@ -65,13 +65,12 @@ async function handleDelete(row: CrmBusinessApi.Business) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteBusiness(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} catch {
} finally {
hideLoading();
}
}

3
apps/web-antd/src/views/crm/business/modules/form.vue
View File

@@ -56,7 +56,6 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 120,
},
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
@@ -90,7 +89,7 @@ const [Modal, modalApi] = useVbenModal({
}
// 加载数据
const data = modalApi.getData<CrmBusinessApi.Business>();
if (!data) {
if (!data || !data.id) {
return;
}
modalApi.lock();

6
apps/web-antd/src/views/crm/business/status/index.vue
View File

@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -41,7 +41,7 @@ async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
try {
await deleteBusinessStatus(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} catch {
hideLoading();
}
@@ -92,7 +92,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<FormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<Grid table-title="商机状态列表">
<template #toolbar-tools>
<TableAction

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

@@ -17,7 +17,7 @@ import { useDescription } from '#/components/description';
import { OperateLog } from '#/components/operate-log';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { BusinessDetailsList } from '#/views/crm/business';
import { BusinessDetailsList } from '#/views/crm/business/components';
import { FollowUp } from '#/views/crm/followup';
import { PermissionList, TransferForm } from '#/views/crm/permission';

1
apps/web-antd/src/views/crm/contract/modules/form.vue
View File

@@ -55,7 +55,6 @@ const [Form, formApi] = useVbenForm({
},
labelWidth: 120,
},
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),

2
apps/web-antd/src/views/crm/customer/detail/index.vue
View File

@@ -23,7 +23,7 @@ import { useDescription } from '#/components/description';
import { AsyncOperateLog } from '#/components/operate-log';
import { ACTION_ICON, TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import { BusinessDetailsList } from '#/views/crm/business';
import { BusinessDetailsList } from '#/views/crm/business/components';
import { ContactDetailsList } from '#/views/crm/contact/components';
import { ContractDetailsList } from '#/views/crm/contract';
import { FollowUp } from '#/views/crm/followup';