From 454f9c5c3bc17132cd506379e7ad774196c136f5 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 2 Jun 2025 20:52:10 +0800
Subject: [PATCH] feat: crm todo

---
 .../crm/business/modules/detail-info.vue      |   4 +
 .../crm/business/modules/detail-list.vue      |   4 +
 .../views/crm/contact/modules/detail-info.vue |   4 +
 .../views/crm/contact/modules/detail-list.vue |   4 +
 apps/web-antd/src/views/crm/contract/data.ts  |  40 ++--
 .../crm/contract/modules/detail-info.vue      |   4 +
 .../crm/contract/modules/detail-list.vue      |   4 +
 .../crm/customer/modules/detail-list.vue      |   4 +
 .../src/views/crm/customer/pool/data.ts       |  30 +--
 .../web-antd/src/views/crm/followup/index.vue | 205 ++++++++++++++++++
 .../src/views/crm/followup/modules/form.vue   |  87 ++++++++
 .../views/crm/product/modules/detail-info.vue |   4 +
 .../views/crm/product/modules/detail-list.vue |   4 +
 .../web-antd/src/views/crm/receivable/data.ts |  28 +--
 .../crm/receivable/modules/detail-info.vue    |   4 +
 .../crm/receivable/modules/detail-list.vue    |   4 +
 .../src/views/crm/receivable/plan/data.ts     |  31 +--
 .../receivable/plan/modules/detail-info.vue   |   4 +
 .../receivable/plan/modules/detail-list.vue   |   4 +
 19 files changed, 409 insertions(+), 64 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/business/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/business/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/contact/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/contact/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/contract/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/contract/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/customer/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/followup/index.vue
 create mode 100644 apps/web-antd/src/views/crm/followup/modules/form.vue
 create mode 100644 apps/web-antd/src/views/crm/product/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/product/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue

diff --git a/apps/web-antd/src/views/crm/business/modules/detail-info.vue b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
new file mode 100644
index 000000000..da6c78661
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>businessInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
new file mode 100644
index 000000000..b6466c322
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>businessList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
new file mode 100644
index 000000000..a9a8f4cb1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
new file mode 100644
index 000000000..1f5fe358f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 32847eb3b..79118dd3f 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -146,73 +146,73 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '合同编号',
       field: 'no',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
     },
     {
       title: '合同名称',
       field: 'name',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'customerName' },
     },
     {
       title: '商机名称',
       field: 'businessName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'businessName' },
     },
     {
       title: '合同金额（元）',
       field: 'totalPrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '下单时间',
       field: 'orderDate',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '合同开始时间',
       field: 'startTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '合同结束时间',
       field: 'endTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '客户签约人',
       field: 'signContactName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'signContactName' },
     },
     {
       title: '公司签约人',
       field: 'signUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '已回款金额（元）',
       field: 'totalReceivablePrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '未回款金额（元）',
       field: 'unpaidPrice',
-      width: 150,
+      minWidth: 150,
       formatter: ({ row }) => {
         return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
       },
@@ -220,46 +220,46 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '最后跟进时间',
       field: 'contactLastTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '所属部门',
       field: 'ownerUserDeptName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '备注',
       field: 'remark',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '合同状态',
       field: 'auditStatus',
       fixed: 'right',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
new file mode 100644
index 000000000..f952e7f2f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
new file mode 100644
index 000000000..3114fe4bc
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
new file mode 100644
index 000000000..8e6c73393
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>customerList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/pool/data.ts b/apps/web-antd/src/views/crm/customer/pool/data.ts
index b0909b004..177742ea4 100644
--- a/apps/web-antd/src/views/crm/customer/pool/data.ts
+++ b/apps/web-antd/src/views/crm/customer/pool/data.ts
@@ -57,14 +57,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户名称',
       field: 'name',
-      width: 160,
+      minWidth: 160,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       title: '客户来源',
       field: 'source',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -73,22 +73,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '手机',
       field: 'mobile',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '电话',
       field: 'telephone',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '邮箱',
       field: 'email',
-      width: 140,
+      minWidth: 140,
     },
     {
       title: '客户级别',
       field: 'level',
-      width: 135,
+      minWidth: 135,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -97,7 +97,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户行业',
       field: 'industryId',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -106,18 +106,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '下次联系时间',
       field: 'contactNextTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '备注',
       field: 'remark',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '成交状态',
       field: 'dealStatus',
-      width: 80,
+      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -126,30 +126,30 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '最后跟进时间',
       field: 'contactLastTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '最后跟进记录',
       field: 'contactLastContent',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 100,
+      minWidth: 100,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
new file mode 100644
index 000000000..410e10c13
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { BizTypeEnum } from '@/api/crm/permission';
+import { DICT_TYPE } from '@/utils/dict';
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { $t } from '#/locales';
+
+import FollowUpRecordForm from './modules/form.vue';
+
+/** 跟进记录列表 */
+defineOptions({ name: 'FollowUpRecord' });
+
+const props = defineProps<{
+  bizId: number;
+  bizType: number;
+}>();
+
+const { push } = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加跟进记录 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 删除跟进记录 */
+async function handleDelete(row: FollowUpRecordVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await FollowUpRecordApi.deleteFollowUpRecord(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 打开联系人详情 */
+function openContactDetail(id: number) {
+  push({ name: 'CrmContactDetail', params: { id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(id: number) {
+  push({ name: 'CrmBusinessDetail', params: { id } });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FollowUpRecordForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'createTime',
+        title: '创建时间',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      { field: 'creatorName', title: '跟进人' },
+      {
+        field: 'type',
+        title: '跟进类型',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
+        },
+      },
+      { field: 'content', title: '跟进内容' },
+      {
+        field: 'nextTime',
+        title: '下次联系时间',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'contacts',
+        title: '关联联系人',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.contacts?.map((contact) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openContactDetail(contact.id),
+                },
+                () => contact.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'businesses',
+        title: '关联商机',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.businesses?.map((business) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openBusinessDetail(business.id),
+                },
+                () => business.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'actions',
+        title: '操作',
+        width: 100,
+        slots: { default: 'actions' },
+      },
+    ],
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await FollowUpRecordApi.getFollowUpRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bizType: props.bizType,
+            bizId: props.bizId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions<FollowUpRecordVO>,
+});
+
+watch(
+  () => props.bizId,
+  () => {
+    gridApi.query();
+  },
+);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="跟进记录列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '写跟进',
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <FormModal @success="onRefresh" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/crm/followup/modules/form.vue b/apps/web-antd/src/views/crm/followup/modules/form.vue
new file mode 100644
index 000000000..40cddb4cd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createFollowUpRecord,
+  getFollowUpRecord,
+  updateFollowUpRecord,
+} from '#/api/crm/followup';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['跟进记录'])
+    : $t('ui.actionTitle.create', ['跟进记录']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
+    try {
+      await (formData.value?.id
+        ? updateFollowUpRecord(data)
+        : createFollowUpRecord(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFollowUpRecord(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
new file mode 100644
index 000000000..c6bcbfbcd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
new file mode 100644
index 000000000..4a0fbfd34
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index cbbc5c25f..1c33d1aec 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -173,38 +173,38 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '回款编号',
       field: 'no',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'no' },
     },
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'customerName' },
     },
     {
       title: '合同编号',
       field: 'contract',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'contractNo' },
     },
     {
       title: '回款日期',
       field: 'returnTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '回款金额（元）',
       field: 'price',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '回款方式',
       field: 'returnType',
-      width: 150,
+      minWidth: 150,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
@@ -213,45 +213,45 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '备注',
       field: 'remark',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '合同金额（元）',
       field: 'contract.totalPrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '所属部门',
       field: 'ownerUserDeptName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '回款状态',
       field: 'auditStatus',
-      width: 100,
+      minWidth: 100,
       fixed: 'right',
       cellRender: {
         name: 'CellDict',
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
new file mode 100644
index 000000000..bac747f62
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
new file mode 100644
index 000000000..d9444469c
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index cc76b1eeb..519c41f13 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -122,48 +122,48 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'customerName' },
     },
     {
       title: '合同编号',
       field: 'contractNo',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '期数',
       field: 'period',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'period' },
     },
     {
       title: '计划回款金额（元）',
       field: 'price',
-      width: 160,
+      minWidth: 160,
       formatter: 'formatNumber',
     },
     {
       title: '计划回款日期',
       field: 'returnTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '提前几天提醒',
       field: 'remindDays',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '提醒日期',
       field: 'remindTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '回款方式',
       field: 'returnType',
-      width: 130,
+      minWidth: 130,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
@@ -172,28 +172,29 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '备注',
       field: 'remark',
+      minWidth: 120,
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '实际回款金额（元）',
       field: 'receivable.price',
-      width: 160,
+      minWidth: 160,
       formatter: 'formatNumber',
     },
     {
       title: '实际回款日期',
       field: 'receivable.returnTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '未回款金额（元）',
       field: 'unpaidPrice',
-      width: 160,
+      minWidth: 160,
       formatter: ({ row }) => {
         if (row.receivable) {
           return row.price - row.receivable.price;
@@ -204,19 +205,19 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 100,
+      minWidth: 100,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
new file mode 100644
index 000000000..d94b1e3b9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
new file mode 100644
index 000000000..bec4aa4b6
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanList</div>
+</template>