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

apps/web-antd/src/views/crm/business/components/data.ts

@@ -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',
+    },
+  ];
+}

apps/web-antd/src/views/crm/business/components/detail-list-modal.vue

@@ -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 '../modules/form.vue';
-import Form from './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

apps/web-antd/src/views/crm/business/components/detail-list.vue

@@ -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"

apps/web-antd/src/views/crm/business/components/index.ts

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

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

@@ -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',
+      formatter: 'formatDateTime',
-      minWidth: 180,
+      width: 180,
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 120,
+      width: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 120,
+      width: 100,
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
       formatter: 'formatDateTime',
-      minWidth: 180,
+      width: 180,
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-      minWidth: 180,
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 120,
     },
     {
       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: '操作',

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

@@ -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',
-    },
-  ];
-}

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

@@ -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();
   }
 }

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

@@ -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();

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

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

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

@@ -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';
 

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

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

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

@@ -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';