feat：【antd】【crm】优化 receivable 的整体代码风格

apps/web-antd/src/router/routes/modules/crm.ts

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

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

@@ -0,0 +1,73 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contract.no',
+      minWidth: 150,
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      minWidth: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -13,8 +13,8 @@ import {
 } from '#/api/crm/receivable';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
+import { useDetailListColumns } from './data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
 
 const props = defineProps<{
   contractId?: number; // 合同编号

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

@@ -198,7 +198,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '回款编号',
       field: 'no',
-      minWidth: 150,
+      minWidth: 160,
       fixed: 'left',
       slots: { default: 'no' },
     },
@@ -211,7 +211,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '合同编号',
       field: 'contract',
-      minWidth: 150,
+      minWidth: 160,
       slots: { default: 'contractNo' },
     },
     {
@@ -286,7 +286,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '操作',
       field: 'actions',
-      width: 130,
+      minWidth: 130,
       fixed: 'right',
       slots: { default: 'actions' },
     },

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

@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -78,73 +77,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      title: '回款编号',
-      field: 'no',
-      minWidth: 150,
-      fixed: 'left',
-    },
-    {
-      title: '客户名称',
-      field: 'customerName',
-      minWidth: 150,
-    },
-    {
-      title: '合同编号',
-      field: 'contract.no',
-      minWidth: 150,
-    },
-    {
-      title: '回款日期',
-      field: 'returnTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '回款金额（元）',
-      field: 'price',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '回款方式',
-      field: 'returnType',
-      minWidth: 150,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      title: '负责人',
-      field: 'ownerUserName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
-    },
-    {
-      title: '回款状态',
-      field: 'auditStatus',
-      minWidth: 100,
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      title: '操作',
-      field: 'actions',
-      width: 130,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}

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

@@ -17,10 +17,10 @@ import { getReceivable } from '#/api/crm/receivable';
 import { useDescription } from '#/components/description';
 import { AsyncOperateLog } from '#/components/operate-log';
 import { PermissionList } from '#/views/crm/permission';
-import { ReceivableDetailsInfo } from '#/views/crm/receivable';
 
-import { useDetailSchema } from './detail-data';
+import ReceivableForm from '../modules/form.vue';
-import ReceivableForm from './form.vue';
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
 const loading = ref(false);
 
@@ -110,7 +110,7 @@ onMounted(() => {
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
         <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ReceivableDetailsInfo :receivable="receivable" />
+          <Info :receivable="receivable" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
           <PermissionList

apps/web-antd/src/views/crm/receivable/detail/modules/info.vue

@@ -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<{
   receivable: CrmReceivableApi.Receivable; // 收款信息

apps/web-antd/src/views/crm/receivable/index.ts

@@ -1,19 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 
-export const ReceivableDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ReceivableForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ReceivableDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
 export const ReceivableDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
+  () => import('./components/detail-list.vue'),
 );
 
 export const ReceivablePlanDetailsInfo = defineAsyncComponent(
@@ -23,7 +11,3 @@ export const ReceivablePlanDetailsInfo = defineAsyncComponent(
 export const ReceivablePlanDetailsList = defineAsyncComponent(
   () => import('./plan/modules/detail-list.vue'),
 );
-
-export const ReceivablePlanDetails = defineAsyncComponent(
-  () => import('./plan/modules/detail.vue'),
-);

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

@@ -31,12 +31,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
+  // TODO @AI：缺少了 sceneType 参考，参考下别的模块？
   const data = await exportReceivable(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
 }
@@ -59,10 +66,8 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
   });
   try {
     await deleteReceivable(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+    handleRefresh();
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
@@ -76,10 +81,8 @@ async function handleSubmit(row: CrmReceivableApi.Receivable) {
   });
   try {
     await submitReceivable(row.id!);
-    message.success({
+    message.success('提交审核成功');
-      content: '提交审核成功',
+    handleRefresh();
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
@@ -130,6 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -137,11 +141,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -157,10 +156,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" />
@@ -217,8 +216,6 @@ function onChangeSceneType(key: number | string) {
               onClick: handleEdit.bind(null, row),
               ifShow: row.auditStatus === 0,
             },
-          ]"
-          :drop-down-actions="[
             {
               label: '提交审核',
               type: 'link',
@@ -250,3 +247,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>