From 2650d8da364409b9b285e56a762e4e0fe201e2fe Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 29 Apr 2025 22:52:15 +0800
Subject: [PATCH] feat: crm backlog

---
 apps/web-antd/src/views/crm/backlog/data.ts   | 895 ++++++++++++++++++
 apps/web-antd/src/views/crm/backlog/index.vue | 137 ++-
 .../crm/backlog/modules/ClueFollowList.vue    |  58 ++
 .../crm/backlog/modules/ContractAuditList.vue | 111 +++
 .../backlog/modules/ContractRemindList.vue    | 111 +++
 .../backlog/modules/CustomerFollowList.vue    |  58 ++
 .../modules/CustomerPutPoolRemindList.vue     |  58 ++
 .../modules/CustomerTodayContactList.vue      |  58 ++
 .../backlog/modules/ReceivableAuditList.vue   | 104 ++
 .../modules/ReceivablePlanRemindList.vue      |  90 ++
 10 files changed, 1655 insertions(+), 25 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/backlog/data.ts
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue

diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
new file mode 100644
index 00000000..d42be580
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -0,0 +1,895 @@
+import type { Ref } from 'vue';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { useAccess } from '@vben/access';
+
+import { DICT_TYPE } from '#/utils/dict';
+
+const { hasAccessByCodes } = useAccess();
+
+export interface LeftSideItem {
+  name: string;
+  menu: string;
+  count: Ref<number>;
+}
+
+/** 跟进状态 */
+export const FOLLOWUP_STATUS = [
+  { label: '待跟进', value: false },
+  { label: '已跟进', value: true },
+];
+
+/** 归属范围 */
+export const SCENE_TYPES = [
+  { label: '我负责的', value: 1 },
+  { label: '我参与的', value: 2 },
+  { label: '下属负责的', value: 3 },
+];
+
+/** 联系状态 */
+export const CONTACT_STATUS = [
+  { label: '今日需联系', value: 1 },
+  { label: '已逾期', value: 2 },
+  { label: '已联系', value: 3 },
+];
+
+/** 审批状态 */
+export const AUDIT_STATUS = [
+  { label: '待审批', value: 10 },
+  { label: '审核通过', value: 20 },
+  { label: '审核不通过', value: 30 },
+];
+
+/** 回款提醒类型 */
+export const RECEIVABLE_REMIND_TYPE = [
+  { label: '待回款', value: 1 },
+  { label: '已逾期', value: 2 },
+  { label: '已回款', value: 3 },
+];
+
+/** 合同过期状态 */
+export const CONTRACT_EXPIRY_TYPE = [
+  { label: '即将过期', value: 1 },
+  { label: '已过期', value: 2 },
+];
+
+export const useLeftSides = (
+  customerTodayContactCount: Ref<number>,
+  clueFollowCount: Ref<number>,
+  customerFollowCount: Ref<number>,
+  customerPutPoolRemindCount: Ref<number>,
+  contractAuditCount: Ref<number>,
+  contractRemindCount: Ref<number>,
+  receivableAuditCount: Ref<number>,
+  receivablePlanRemindCount: Ref<number>,
+): LeftSideItem[] => {
+  return [
+    {
+      name: '今日需联系客户',
+      menu: 'customerTodayContact',
+      count: customerTodayContactCount,
+    },
+    {
+      name: '分配给我的线索',
+      menu: 'clueFollow',
+      count: clueFollowCount,
+    },
+    {
+      name: '分配给我的客户',
+      menu: 'customerFollow',
+      count: customerFollowCount,
+    },
+    {
+      name: '待进入公海的客户',
+      menu: 'customerPutPoolRemind',
+      count: customerPutPoolRemindCount,
+    },
+    {
+      name: '待审核合同',
+      menu: 'contractAudit',
+      count: contractAuditCount,
+    },
+    {
+      name: '待审核回款',
+      menu: 'receivableAudit',
+      count: receivableAuditCount,
+    },
+    {
+      name: '待回款提醒',
+      menu: 'receivablePlanRemind',
+      count: receivablePlanRemindCount,
+    },
+    {
+      name: '即将到期的合同',
+      menu: 'contractRemind',
+      count: contractRemindCount,
+    },
+  ];
+};
+
+/** 分配给我的线索 列表的搜索表单 */
+export function useClueFollowFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'followUpStatus',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: FOLLOWUP_STATUS,
+      },
+      defaultValue: false,
+    },
+  ];
+}
+
+/** 分配给我的线索 列表的字段 */
+export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '线索名称',
+      minWidth: 160,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'source',
+      title: '线索来源',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机',
+      minWidth: 120,
+    },
+    {
+      field: 'telephone',
+      title: '电话',
+      minWidth: 130,
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+      minWidth: 180,
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+      minWidth: 180,
+    },
+    {
+      field: 'industryId',
+      title: '客户行业',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
+      },
+    },
+    {
+      field: 'level',
+      title: '客户级别',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
+      },
+    },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'contactLastContent',
+      title: '最后跟进记录',
+      minWidth: 200,
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 100,
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+      minWidth: 100,
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+  ];
+}
+
+/** 合同审核列表的搜索表单 */
+export function useContractAuditFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'auditStatus',
+      label: '合同状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: AUDIT_STATUS,
+      },
+      defaultValue: 10,
+    },
+  ];
+}
+
+/** 合同提醒列表的搜索表单 */
+export function useContractRemindFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'expiryType',
+      label: '到期状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: CONTRACT_EXPIRY_TYPE,
+      },
+      defaultValue: 1,
+    },
+  ];
+}
+
+/** 合同审核列表的字段 */
+export function useContractColumns<T = CrmContractApi.Contract>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'no',
+      title: '合同编号',
+      minWidth: 160,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '合同名称',
+      minWidth: 160,
+      slots: {
+        default: 'name',
+      },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      minWidth: 160,
+      slots: {
+        default: 'customerName',
+      },
+    },
+    {
+      field: 'businessName',
+      title: '商机名称',
+      minWidth: 160,
+      slots: {
+        default: 'businessName',
+      },
+    },
+    {
+      field: 'price',
+      title: '合同金额（元）',
+      minWidth: 120,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'orderDate',
+      title: '下单时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'startTime',
+      title: '合同开始时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '合同结束时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'contactName',
+      title: '客户签约人',
+      minWidth: 130,
+      slots: {
+        default: 'contactName',
+      },
+    },
+    {
+      field: 'signUserName',
+      title: '公司签约人',
+      minWidth: 130,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'totalReceivablePrice',
+      title: '已回款金额（元）',
+      minWidth: 140,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'noReceivablePrice',
+      title: '未回款金额（元）',
+      minWidth: 120,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 120,
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+      minWidth: 100,
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+    {
+      field: 'auditStatus',
+      title: '合同状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 130,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'no',
+          nameTitle: '合同编号',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'processDetail',
+            show: hasAccessByCodes(['crm:contract:update']),
+          },
+        ],
+      },
+    },
+  ];
+}
+
+/** 客户跟进列表的搜索表单 */
+export function useCustomerFollowFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'followUpStatus',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: FOLLOWUP_STATUS,
+      },
+      defaultValue: false,
+    },
+  ];
+}
+
+/** 待进入公海客户列表的搜索表单 */
+export function useCustomerPutPoolFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'sceneType',
+      label: '归属',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: SCENE_TYPES,
+      },
+      defaultValue: 1,
+    },
+  ];
+}
+
+/** 今日需联系客户列表的搜索表单 */
+export function useCustomerTodayContactFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      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,
+    },
+  ];
+}
+
+/** 客户列表的字段 */
+export function useCustomerColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '客户名称',
+      minWidth: 160,
+      slots: {
+        default: 'name',
+      },
+    },
+    {
+      field: 'source',
+      title: '客户来源',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机',
+      minWidth: 120,
+    },
+    {
+      field: 'telephone',
+      title: '电话',
+      minWidth: 130,
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+      minWidth: 180,
+    },
+    {
+      field: 'level',
+      title: '客户级别',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
+      },
+    },
+    {
+      field: 'industryId',
+      title: '客户行业',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
+      },
+    },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'lockStatus',
+      title: '锁定状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'dealStatus',
+      title: '成交状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'contactLastContent',
+      title: '最后跟进记录',
+      minWidth: 200,
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+      minWidth: 200,
+    },
+    {
+      field: 'poolDay',
+      title: '距离进入公海天数',
+      minWidth: 180,
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 100,
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+      minWidth: 100,
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+  ];
+}
+
+/** 回款审核列表的搜索表单 */
+export function useReceivableAuditFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'auditStatus',
+      label: '合同状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: AUDIT_STATUS,
+      },
+      defaultValue: 10,
+    },
+  ];
+}
+
+/** 回款审核列表的字段 */
+export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'no',
+      title: '回款编号',
+      minWidth: 180,
+      fixed: 'left',
+      slots: {
+        default: 'no',
+      },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      minWidth: 120,
+      slots: {
+        default: 'customerName',
+      },
+    },
+    {
+      field: 'contractNo',
+      title: '合同编号',
+      minWidth: 180,
+      slots: {
+        default: 'contractNo',
+      },
+    },
+    {
+      field: 'returnTime',
+      title: '回款日期',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'price',
+      title: '回款金额(元)',
+      minWidth: 140,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'returnType',
+      title: '回款方式',
+      minWidth: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'contract.totalPrice',
+      title: '合同金额（元）',
+      minWidth: 140,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 120,
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+      minWidth: 100,
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
+    },
+    {
+      field: 'auditStatus',
+      title: '回款状态',
+      minWidth: 120,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '角色',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'processDetail',
+            text: '查看审批',
+            show: hasAccessByCodes(['crm:receivable:update']),
+          },
+        ],
+      },
+    },
+  ];
+}
+
+/** 回款计划提醒列表的搜索表单 */
+export function useReceivablePlanRemindFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'remindType',
+      label: '合同状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: RECEIVABLE_REMIND_TYPE,
+      },
+      defaultValue: 1,
+    },
+  ];
+}
+
+/** 回款计划提醒列表的字段 */
+export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'customerName',
+      title: '客户名称',
+      minWidth: 160,
+      fixed: 'left',
+      slots: {
+        default: 'customerName',
+      },
+    },
+    {
+      field: 'contractNo',
+      title: '合同编号',
+      minWidth: 200,
+    },
+    {
+      field: 'period',
+      title: '期数',
+      minWidth: 160,
+      slots: {
+        default: 'period',
+      },
+    },
+    {
+      field: 'price',
+      title: '计划回款金额（元）',
+      minWidth: 120,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'returnTime',
+      title: '计划回款日期',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remindDays',
+      title: '提前几天提醒',
+      minWidth: 150,
+    },
+    {
+      field: 'remindTime',
+      title: '提醒日期',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'returnType',
+      title: '回款方式',
+      minWidth: 120,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 100,
+    },
+    {
+      field: 'receivable.price',
+      title: '实际回款金额（元）',
+      minWidth: 160,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'receivable.returnTime',
+      title: '实际回款日期',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'customerName',
+          nameTitle: '客户名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'receivableForm',
+            text: '创建回款',
+            show: hasAccessByCodes(['crm:receivable:create']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 2c8749d5..971814f5 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -1,34 +1,121 @@
 <script lang="ts" setup>
+import { computed, onActivated, onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Badge, Card, List } from 'ant-design-vue';
 
+import * as ClueApi from '#/api/crm/clue';
+import * as ContractApi from '#/api/crm/contract';
+import * as CustomerApi from '#/api/crm/customer';
+import * as ReceivableApi from '#/api/crm/receivable';
+import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
 import { DocAlert } from '#/components/doc-alert';
-</script>
 
+import { useLeftSides } from './data';
+import ClueFollowList from './modules/ClueFollowList.vue';
+import ContractAuditList from './modules/ContractAuditList.vue';
+import ContractRemindList from './modules/ContractRemindList.vue';
+import CustomerFollowList from './modules/CustomerFollowList.vue';
+import CustomerPutPoolRemindList from './modules/CustomerPutPoolRemindList.vue';
+import CustomerTodayContactList from './modules/CustomerTodayContactList.vue';
+import ReceivableAuditList from './modules/ReceivableAuditList.vue';
+import ReceivablePlanRemindList from './modules/ReceivablePlanRemindList.vue';
+
+defineOptions({ name: 'CrmBacklog' });
+
+const leftMenu = ref('customerTodayContact');
+
+const clueFollowCount = ref(0);
+const customerFollowCount = ref(0);
+const customerPutPoolRemindCount = ref(0);
+const customerTodayContactCount = ref(0);
+const contractAuditCount = ref(0);
+const contractRemindCount = ref(0);
+const receivableAuditCount = ref(0);
+const receivablePlanRemindCount = ref(0);
+
+const leftSides = useLeftSides(
+  customerTodayContactCount,
+  clueFollowCount,
+  customerFollowCount,
+  customerPutPoolRemindCount,
+  contractAuditCount,
+  contractRemindCount,
+  receivableAuditCount,
+  receivablePlanRemindCount,
+);
+
+const currentComponent = computed(() => {
+  const components = {
+    customerTodayContact: CustomerTodayContactList,
+    clueFollow: ClueFollowList,
+    contractAudit: ContractAuditList,
+    receivableAudit: ReceivableAuditList,
+    contractRemind: ContractRemindList,
+    customerFollow: CustomerFollowList,
+    customerPutPoolRemind: CustomerPutPoolRemindList,
+    receivablePlanRemind: ReceivablePlanRemindList,
+  } as const;
+  return components[leftMenu.value as keyof typeof components];
+});
+
+/** 侧边点击 */
+function sideClick(item: { menu: string }) {
+  leftMenu.value = item.menu;
+}
+
+/** 获取数量 */
+async function getCount() {
+  customerTodayContactCount.value =
+    await CustomerApi.getTodayContactCustomerCount();
+  customerPutPoolRemindCount.value =
+    await CustomerApi.getPutPoolRemindCustomerCount();
+  customerFollowCount.value = await CustomerApi.getFollowCustomerCount();
+  clueFollowCount.value = await ClueApi.getFollowClueCount();
+  contractAuditCount.value = await ContractApi.getAuditContractCount();
+  contractRemindCount.value = await ContractApi.getRemindContractCount();
+  receivableAuditCount.value = await ReceivableApi.getAuditReceivableCount();
+  receivablePlanRemindCount.value =
+    await ReceivablePlanApi.getReceivablePlanRemindCount();
+}
+
+/** 激活时 */
+onActivated(async () => {
+  getCount();
+});
+
+/** 初始化 */
+onMounted(async () => {
+  getCount();
+});
+</script>
 <template>
-  <Page>
-    <DocAlert
-      title="【通用】跟进记录、待办事项"
-      url="https://doc.iocoder.cn/crm/follow-up/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/backlog/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/backlog/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【通用】跟进记录、待办事项"
+        url="https://doc.iocoder.cn/crm/follow-up/"
+      />
+    </template>
+    <div class="flex h-full w-full">
+      <Card class="w-1/5">
+        <List item-layout="horizontal" :data-source="leftSides">
+          <template #renderItem="{ item }">
+            <List.Item>
+              <List.Item.Meta>
+                <template #title>
+                  <a @click="sideClick(item)"> {{ item.name }} </a>
+                </template>
+              </List.Item.Meta>
+              <template #extra v-if="item.count.value && item.count.value > 0">
+                <Badge :count="item.count.value" />
+              </template>
+            </List.Item>
+          </template>
+        </List>
+      </Card>
+      <component class="ml-4 w-4/5" :is="currentComponent" />
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
new file mode 100644
index 00000000..23d109c9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
@@ -0,0 +1,58 @@
+<!-- 分配给我的线索 -->
+<script lang="ts" setup>
+import type { CrmClueApi } from '#/api/crm/clue';
+
+import { useRouter } from 'vue-router';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCluePage } from '#/api/crm/clue';
+
+import { useClueFollowColumns, useClueFollowFormSchema } from '../data';
+
+const { push } = useRouter();
+
+/** 打开线索详情 */
+function onDetail(row: CrmClueApi.Clue) {
+  push({ name: 'CrmClueDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useClueFollowFormSchema(),
+  },
+  gridOptions: {
+    columns: useClueFollowColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCluePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            transformStatus: false,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="分配给我的线索">
+    <template #name="{ row }">
+      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
new file mode 100644
index 00000000..a243bfe5
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
@@ -0,0 +1,111 @@
+<!-- 待审核合同 -->
+<script lang="ts" setup>
+import type { OnActionClickParams } 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 { getContractPage } from '#/api/crm/contract';
+
+import { useContractAuditFormSchema, useContractColumns } from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function openProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开合同详情 */
+function openContractDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+/** 打开客户详情 */
+function openCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+/** 打开联系人详情 */
+function openContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(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: useContractAuditFormSchema(),
+  },
+  gridOptions: {
+    columns: useContractColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1, // 我负责的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="待审核合同">
+    <template #name="{ row }">
+      <Button type="link" @click="openContractDetail(row)">
+        {{ row.name }}
+      </Button>
+    </template>
+    <template #customerName="{ row }">
+      <Button type="link" @click="openCustomerDetail(row)">
+        {{ row.customerName }}
+      </Button>
+    </template>
+    <template #businessName="{ row }">
+      <Button type="link" @click="openBusinessDetail(row)">
+        {{ row.businessName }}
+      </Button>
+    </template>
+    <template #contactName="{ row }">
+      <Button type="link" @click="openContactDetail(row)">
+        {{ row.contactName }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
new file mode 100644
index 00000000..c8ac2965
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
@@ -0,0 +1,111 @@
+<!-- 即将到期的合同 -->
+<script lang="ts" setup>
+import type { OnActionClickParams } 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 { getContractPage } from '#/api/crm/contract';
+
+import { useContractColumns, useContractRemindFormSchema } from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function openProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开合同详情 */
+function openContractDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+/** 打开客户详情 */
+function openCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+/** 打开联系人详情 */
+function openContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(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(),
+  },
+  gridOptions: {
+    columns: useContractColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1, // 自己负责的
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="即将到期的合同">
+    <template #name="{ row }">
+      <Button type="link" @click="openContractDetail(row)">
+        {{ row.name }}
+      </Button>
+    </template>
+    <template #customerName="{ row }">
+      <Button type="link" @click="openCustomerDetail(row)">
+        {{ row.customerName }}
+      </Button>
+    </template>
+    <template #businessName="{ row }">
+      <Button type="link" @click="openBusinessDetail(row)">
+        {{ row.businessName }}
+      </Button>
+    </template>
+    <template #contactName="{ row }">
+      <Button type="link" @click="openContactDetail(row)">
+        {{ row.contactName }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
new file mode 100644
index 00000000..10e427dc
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
@@ -0,0 +1,58 @@
+<!-- 分配给我的客户 -->
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+
+import { useCustomerColumns, useCustomerFollowFormSchema } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function onDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useCustomerFollowFormSchema(),
+  },
+  gridOptions: {
+    columns: useCustomerColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: 1,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="分配给我的客户">
+    <template #name="{ row }">
+      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
new file mode 100644
index 00000000..11899ace
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
@@ -0,0 +1,58 @@
+<!-- 待进入公海的客户 -->
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+
+import { useCustomerColumns, useCustomerPutPoolFormSchema } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function onDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useCustomerPutPoolFormSchema(),
+  },
+  gridOptions: {
+    columns: useCustomerColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            pool: true, // 固定 公海参数为 true
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="待进入公海的客户">
+    <template #name="{ row }">
+      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue b/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
new file mode 100644
index 00000000..8298f90e
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
@@ -0,0 +1,58 @@
+<!-- 今日需联系客户 -->
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCustomerPage } from '#/api/crm/customer';
+
+import { useCustomerColumns, useCustomerTodayContactFormSchema } from '../data';
+
+const { push } = useRouter();
+
+/** 打开客户详情 */
+function onDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useCustomerTodayContactFormSchema(),
+  },
+  gridOptions: {
+    columns: useCustomerColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            pool: null, // 是否公海数据
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  },
+});
+</script>
+
+<template>
+  <Grid table-title="今日需联系客户">
+    <template #name="{ row }">
+      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
new file mode 100644
index 00000000..710c8584
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
@@ -0,0 +1,104 @@
+<!-- 待审核回款 -->
+<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 {
+  useReceivableAuditColumns,
+  useReceivableAuditFormSchema,
+} from '../data';
+
+const { push } = useRouter();
+
+/** 查看审批 */
+function openProcessDetail(row: CrmReceivableApi.Receivable) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+/** 打开回款详情 */
+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 openContractDetail(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(),
+  },
+  gridOptions: {
+    columns: useReceivableAuditColumns(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 #no="{ row }">
+      <Button type="link" @click="openDetail(row)">
+        {{ row.no }}
+      </Button>
+    </template>
+    <template #customerName="{ row }">
+      <Button type="link" @click="openCustomerDetail(row)">
+        {{ row.customerName }}
+      </Button>
+    </template>
+    <template #contractNo="{ row }">
+      <Button type="link" @click="openContractDetail(row)">
+        {{ row.contractNo }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
new file mode 100644
index 00000000..e0137593
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
@@ -0,0 +1,90 @@
+<!-- 待回款提醒 -->
+<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>