feat: crm backlog

apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue

@@ -1,90 +0,0 @@
-<!-- 待回款提醒 -->
-<script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
-
-import { useRouter } from 'vue-router';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getReceivablePage } from '#/api/crm/receivable';
-
-import {
-  useReceivablePlanRemindColumns,
-  useReceivablePlanRemindFormSchema,
-} from '../data';
-
-const { push } = useRouter();
-
-/** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
-}
-
-/** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 创建回款 */
-function openReceivableForm(row: CrmReceivableApi.Receivable) {
-  // Todo: 打开创建回款
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'receivableForm': {
-      openReceivableForm(row);
-      break;
-    }
-  }
-}
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: useReceivablePlanRemindFormSchema(),
-  },
-  gridOptions: {
-    columns: useReceivablePlanRemindColumns(onActionClick),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getReceivablePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-  },
-});
-</script>
-
-<template>
-  <Grid table-title="待回款提醒">
-    <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
-        {{ row.customerName }}
-      </Button>
-    </template>
-    <template #period="{ row }">
-      <Button type="link" @click="openDetail(row)">{{ row.period }}</Button>
-    </template>
-  </Grid>
-</template>

apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue

@@ -1,5 +1,6 @@
 <!-- 分配给我的线索 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
@@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCluePage } from '#/api/crm/clue';
+import { useGridColumns } from '#/views/crm/clue/data';
 
-import { useClueFollowColumns, useClueFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
@@ -20,10 +22,21 @@ function handleDetail(row: CrmClueApi.Clue) {
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useClueFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useClueFollowColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmClueApi.Clue>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的线索">
+  <Grid>
     <template #name="{ row }">
       <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
     </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
+    </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue

@@ -1,5 +1,6 @@
 <!-- 待审核合同 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
@@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractAuditFormSchema, useContractColumns } from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
@@ -42,10 +44,21 @@ function handleBusinessDetail(row: CrmContractApi.Contract) {
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -67,12 +80,12 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核合同">
+  <Grid>
     <template #name="{ row }">
       <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}

apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue

@@ -1,21 +1,22 @@
 <!-- 即将到期的合同 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
 
 import { Button } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractColumns, useContractRemindFormSchema } from '../data';
+import { CONTRACT_EXPIRY_TYPE } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmContractApi.Contract) {
+function handleProcessDetail(row: CrmContractApi.Contract) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -23,43 +24,41 @@ function openProcessDetail(row: CrmContractApi.Contract) {
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmContractApi.Contract) {
+function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmContractApi.Contract) {
+function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 /** 打开联系人详情 */
-function openContactDetail(row: CrmContractApi.Contract) {
+function handleContactDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
 }
 
 /** 打开商机详情 */
-function openBusinessDetail(row: CrmContractApi.Contract) {
+function handleBusinessDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmContractApi.Contract>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractRemindFormSchema(),
+    schema: [
+      {
+        fieldName: 'expiryType',
+        label: '到期状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTRACT_EXPIRY_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -81,31 +80,43 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="即将到期的合同">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #businessName="{ row }">
-      <Button type="link" @click="openBusinessDetail(row)">
+      <Button type="link" @click="handleBusinessDetail(row)">
         {{ row.businessName }}
       </Button>
     </template>
-    <template #contactName="{ row }">
-      <Button type="link" @click="openContactDetail(row)">
-        {{ row.contactName }}
+    <template #signContactName="{ row }">
+      <Button type="link" @click="handleContactDetail(row)">
+        {{ row.signContactName }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'link',
+            auth: ['crm:contract:update'],
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue

@@ -1,5 +1,6 @@
 <!-- 分配给我的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue

@@ -1,5 +1,6 @@
 <!-- 待进入公海的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerPutPoolFormSchema } from '../data';
+import { SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerPutPoolFormSchema(),
+    schema: [
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="待进入公海的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue

@@ -1,5 +1,6 @@
 <!-- 今日需联系客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,44 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerTodayContactFormSchema } from '../data';
+import { CONTACT_STATUS, SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerTodayContactFormSchema(),
+    schema: [
+      {
+        fieldName: 'contactStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTACT_STATUS,
+        },
+        defaultValue: 1,
+      },
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +68,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="今日需联系客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue

@@ -1,6 +1,6 @@
 <!-- 待审核回款 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 
 import { useRouter } from 'vue-router';
@@ -9,16 +9,14 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getReceivablePage } from '#/api/crm/receivable';
+import { useGridColumns } from '#/views/crm/receivable/data';
 
-import {
-  useReceivableAuditColumns,
-  useReceivableAuditFormSchema,
-} from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmReceivableApi.Receivable) {
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -26,39 +24,37 @@ function openProcessDetail(row: CrmReceivableApi.Receivable) {
 }
 
 /** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
+function handleDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmReceivableDetail', params: { id: row.id } });
 }
 
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmReceivableApi.Receivable) {
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmContractDetail', params: { id: row.contractId } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useReceivableAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useReceivableAuditColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -79,26 +75,29 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核回款">
+  <Grid>
     <template #no="{ row }">
-      <Button type="link" @click="openDetail(row)">
+      <Button type="link" @click="handleDetail(row)">
         {{ row.no }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #contractNo="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.contractNo }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleProcessDetail(row)">查看审批</Button>
+    </template>
   </Grid>
 </template>

apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue

@@ -0,0 +1,101 @@
+<!-- 待回款提醒 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getReceivablePlanPage } from '#/api/crm/receivable/plan';
+import Form from '#/views/crm/receivable/modules/form.vue';
+import { useGridColumns } from '#/views/crm/receivable/plan/data';
+
+import { RECEIVABLE_REMIND_TYPE } from '../data';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 打开回款详情 */
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ plan: row }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'remindType',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: RECEIVABLE_REMIND_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+});
+</script>
+
+<template>
+  <div>
+    <FormModal />
+    <Grid>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #period="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.period }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <Button type="link" @click="handleCreateReceivable(row)">
+          创建回款
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>