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

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

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

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

@@ -0,0 +1,92 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '合同编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '合同名称',
+      field: 'name',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '合同金额（元）',
+      field: 'totalPrice',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '合同开始时间',
+      field: 'startTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同结束时间',
+      field: 'endTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '已回款金额（元）',
+      field: 'totalReceivablePrice',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(
+          row.totalPrice - row.totalReceivablePrice,
+        );
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      minWidth: 150,
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同状态',
+      field: 'auditStatus',
+      fixed: 'right',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+  ];
+}

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessApi } from '#/api/crm/business';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { ref } from 'vue';
@@ -18,8 +17,8 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import { useDetailListColumns } from './data';
+import Form from '../modules/form.vue';
 
 const props = defineProps<{
   bizId: number; // 业务编号
@@ -33,7 +32,7 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const checkedRows = ref<CrmContractApi.Contract[]>([]);
+const checkedRows = ref<CrmContractApi.Contract[]>();
 function setCheckedRows({ records }: { records: CrmContractApi.Contract[] }) {
   checkedRows.value = records;
 }
@@ -96,7 +95,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<CrmBusinessApi.Business>,
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
   gridEvents: {
     checkboxAll: setCheckedRows,
     checkboxChange: setCheckedRows,

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

@@ -16,7 +16,8 @@ import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { AsyncOperateLog } from '#/components/operate-log';
-import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
+import ContractDetailsInfo from './modules/info.vue';
+import ContractForm from '../modules/form.vue';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
@@ -25,7 +26,7 @@ import {
   ReceivablePlanDetailsList,
 } from '#/views/crm/receivable';
 
-import { useDetailSchema } from './detail-data';
+import { useDetailSchema } from './data';
 
 const loading = ref(false);
 

apps/web-antd/src/views/crm/contract/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<{
   contract: CrmContractApi.Contract; // 合同信息

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

@@ -1,17 +1,5 @@
 import { defineAsyncComponent } from 'vue';
 
-export const ContractDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ContractForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ContractDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
 export const ContractDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
+  () => import('./components/detail-list.vue'),
 );

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

@@ -170,7 +170,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="handleChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -265,3 +265,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>