From 10018fcc85f07ccc6149a226e675b197e630dfca Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 27 Sep 2025 16:56:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90crm?=
 =?UTF-8?q?=E3=80=91=E5=AE=A2=E6=88=B7=E7=9A=84=E8=AF=A6=E6=83=85=E7=9A=84?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/customer/detail/data.ts     | 101 ++++++
 .../src/views/crm/customer/detail/index.vue   | 325 ++++++++++++++++++
 .../crm/customer/detail/modules/info.vue      |  42 +++
 3 files changed, 468 insertions(+)
 create mode 100644 apps/web-antd/src/views/crm/customer/detail/data.ts
 create mode 100644 apps/web-antd/src/views/crm/customer/detail/index.vue
 create mode 100644 apps/web-antd/src/views/crm/customer/detail/modules/info.vue

diff --git a/apps/web-antd/src/views/crm/customer/detail/data.ts b/apps/web-antd/src/views/crm/customer/detail/data.ts
new file mode 100644
index 00000000..e718e5a1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/detail/data.ts
@@ -0,0 +1,101 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'level',
+      label: '客户级别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+    },
+    {
+      field: 'dealStatus',
+      label: '成交状态',
+      content: (data) => (data.dealStatus ? '已成交' : '未成交'),
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'source',
+      label: '客户来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      field: 'detailAddress',
+      label: '详细地址',
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      field: 'industryId',
+      label: '客户行业',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
+          value: data?.industryId,
+        }),
+    },
+    {
+      field: 'level',
+      label: '客户级别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+    },
+    {
+      field: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/customer/detail/index.vue b/apps/web-antd/src/views/crm/customer/detail/index.vue
new file mode 100644
index 00000000..06c3083e
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import type { CrmCustomerApi } from '#/api/crm/customer';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Card, message, Tabs } from 'ant-design-vue';
+
+import {
+  getCustomer,
+  lockCustomer,
+  putCustomerPool,
+  receiveCustomer,
+  updateCustomerDealStatus,
+} from '#/api/crm/customer';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+import { AsyncOperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { BusinessDetailsList } from '#/views/crm/business';
+import { ContactDetailsList } from '#/views/crm/contact/components';
+import { ContractDetailsList } from '#/views/crm/contract';
+import { DistributeForm } from '#/views/crm/customer';
+import { FollowUp } from '#/views/crm/followup';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
+import {
+  ReceivableDetailsList,
+  ReceivablePlanDetailsList,
+} from '#/views/crm/receivable';
+
+import Form from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
+
+const route = useRoute();
+const router = useRouter();
+const tabs = useTabs();
+
+const loading = ref(false); // 加载中
+const customerId = ref(0); // 客户编号
+const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer); // 客户详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+const [Descriptions] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
+const [DistributeModal, distributeModalApi] = useVbenModal({
+  connectedComponent: DistributeForm,
+  destroyOnClose: true,
+});
+
+/** 加载客户详情 */
+async function loadCustomerDetail() {
+  loading.value = true;
+  try {
+    customer.value = await getCustomer(customerId.value);
+    // 操作日志
+    const logList = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CUSTOMER,
+      bizId: customerId.value,
+    });
+    logList.value = logList.list;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/customer');
+}
+
+/** 编辑客户 */
+function handleEdit() {
+  formModalApi.setData({ id: customerId.value }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  transferModalApi.setData({ id: customerId.value }).open();
+}
+
+/** 锁定客户 */
+function handleLock(lockStatus: boolean): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确定锁定客户【${customer.value.name}】吗？`,
+    })
+      .then(async () => {
+        const res = await lockCustomer(customerId.value, lockStatus);
+        if (res) {
+          message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
+          resolve(true);
+        } else {
+          reject(new Error(lockStatus ? '锁定客户失败' : '解锁客户失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 领取客户 */
+function handleReceive(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确定领取客户【${customer.value.name}】吗？`,
+    })
+      .then(async () => {
+        const res = await receiveCustomer([customerId.value]);
+        if (res) {
+          message.success('领取客户成功');
+          resolve(true);
+        } else {
+          reject(new Error('领取客户失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 分配客户 */
+function handleDistributeForm() {
+  distributeModalApi.setData({ id: customerId.value }).open();
+}
+
+/** 客户放入公海 */
+function handlePutPool(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确定将客户【${customer.value.name}】放入公海吗？`,
+    })
+      .then(async () => {
+        const res = await putCustomerPool(customerId.value);
+        if (res) {
+          message.success('放入公海成功');
+          resolve(true);
+        } else {
+          reject(new Error('放入公海失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 更新成交状态操作 */
+async function handleUpdateDealStatus(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const dealStatus = !customer.value.dealStatus;
+    confirm({
+      content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
+    })
+      .then(async () => {
+        const res = await updateCustomerDealStatus(
+          customerId.value,
+          dealStatus,
+        );
+        if (res) {
+          message.success('更新成交状态成功');
+          resolve(true);
+        } else {
+          reject(new Error('更新成交状态失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+/** 加载数据 */
+onMounted(() => {
+  customerId.value = route.params.id as number;
+  loadCustomerDetail();
+});
+</script>
+
+<template>
+  <Page auto-content-height :title="customer?.name" :loading="loading">
+    <FormModal @success="loadCustomerDetail" />
+    <TransferModal @success="loadCustomerDetail" />
+    <DistributeModal @success="loadCustomerDetail" />
+    <template #extra>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:customer:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+          {
+            label: '更改成交状态',
+            type: 'default',
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleUpdateDealStatus,
+          },
+          {
+            label: '锁定',
+            type: 'default',
+            ifShow:
+              !customer.lockStatus && permissionListRef?.validateOwnerUser,
+            onClick: handleLock.bind(null, true),
+          },
+          {
+            label: '解锁',
+            type: 'default',
+            ifShow: customer.lockStatus && permissionListRef?.validateOwnerUser,
+            onClick: handleLock.bind(null, false),
+          },
+          {
+            label: '领取',
+            type: 'primary',
+            ifShow: !customer.ownerUserId,
+            onClick: handleReceive,
+          },
+          {
+            label: '分配',
+            type: 'default',
+            ifShow: !customer.ownerUserId,
+            onClick: handleDistributeForm,
+          },
+          {
+            label: '放入公海',
+            type: 'default',
+            ifShow:
+              !!customer.ownerUserId && permissionListRef?.validateOwnerUser,
+            onClick: handlePutPool,
+          },
+        ]"
+      />
+    </template>
+    <Card class="min-h-[10%]">
+      <Descriptions :data="customer" />
+    </Card>
+    <Card class="mt-4 min-h-[60%]">
+      <Tabs>
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
+          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <Info :customer="customer" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="联系人" key="3" :force-render="true">
+          <ContactDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商机" key="5" :force-render="true">
+          <BusinessDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :customer-id="customerId"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同" key="6" :force-render="true">
+          <ContractDetailsList
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="回款" key="7" :force-render="true">
+          <ReceivablePlanDetailsList :customer-id="customerId" />
+          <ReceivableDetailsList :customer-id="customerId" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
+          <AsyncOperateLog :log-list="logList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/detail/modules/info.vue b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
new file mode 100644
index 00000000..fb832274
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { Divider } from 'ant-design-vue';
+
+import { useDescription } from '#/components/description';
+import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
+
+import { useDetailBaseSchema } from '../data';
+
+defineProps<{
+  customer: CrmCustomerApi.Customer; // 客户信息
+}>();
+
+const [BaseDescriptions] = useDescription({
+  componentProps: {
+    title: '基本信息',
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailBaseSchema(),
+});
+
+const [SystemDescriptions] = useDescription({
+  componentProps: {
+    title: '系统信息',
+    bordered: false,
+    column: 3,
+    class: 'mx-4',
+  },
+  schema: useFollowUpDetailSchema(),
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <BaseDescriptions :data="customer" />
+    <Divider />
+    <SystemDescriptions :data="customer" />
+  </div>
+</template>