feat: crm customer detail

apps/web-antd/src/views/crm/customer/modules/detail.vue

@@ -5,15 +5,15 @@ import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import { defineAsyncComponent, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 
-import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+import { Button, Card, message, Tabs } from 'ant-design-vue';
 
 import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { OperateLog } from '#/components/operate-log';
 
 import { useDetailSchema } from '../data';
 
@@ -21,15 +21,37 @@ const CustomerDetailsInfo = defineAsyncComponent(
   () => import('./detail-info.vue'),
 );
 
+const FollowUp = defineAsyncComponent(
+  () => import('#/views/crm/followup/index.vue'),
+);
+
+const PermissionList = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/permission-list.vue'),
+);
+
+const TransferForm = defineAsyncComponent(
+  () => import('#/views/crm/permission/modules/transfer-form.vue'),
+);
+
+const OperateLog = defineAsyncComponent(
+  () => import('#/components/operate-log'),
+);
+
+const CustomerForm = defineAsyncComponent(
+  () => import('#/views/crm/customer/modules/form.vue'),
+);
+
 const loading = ref(false);
 
 const route = useRoute();
 const router = useRouter();
+const tabs = useTabs();
 
 const customerId = ref(0);
 
 const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
-const permissionListRef = ref(); // 团队成员列表 Ref
+const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Description] = useDescription({
   componentProps: {
@@ -40,91 +62,107 @@ const [Description] = useDescription({
   schema: useDetailSchema(),
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CustomerForm,
+  destroyOnClose: true,
+});
+
+const [TransferModal, transferModalApi] = useVbenModal({
+  connectedComponent: TransferForm,
+  destroyOnClose: true,
+});
+
 /** 加载详情 */
 async function loadCustomerDetail() {
   loading.value = true;
   customerId.value = Number(route.params.id);
   const data = await getCustomer(customerId.value);
-  await getOperateLog();
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CUSTOMER,
+    bizId: customerId.value,
+  });
+  customerLogList.value = logList.list;
   customer.value = data;
   loading.value = false;
 }
 
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push('/crm/customer');
+}
+
 /** 编辑 */
 function handleEdit() {
-  // formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 转移线索 */
 function handleTransfer() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 锁定客户 */
 function handleLock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 解锁客户 */
 function handleUnlock() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 领取客户 */
 function handleReceive() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 分配客户 */
 function handleDistributeForm() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 客户放入公海 */
 function handlePutPool() {
-  // transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ id: customerId.value }).open();
 }
 
 /** 更新成交状态操作 */
-async function handleUpdateDealStatus() {
-  const dealStatus = !customer.value.dealStatus;
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleUpdateDealStatus(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const dealStatus = !customer.value.dealStatus;
+    confirm({
       content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
-    });
-    await updateCustomerDealStatus(customerId.value, dealStatus);
-    Modal.success({
-      title: '成功',
-      content: '更新成交状态成功',
-    });
-    await loadCustomerDetail();
-  } catch {
-    // 用户取消操作
-  }
-}
-
-/** 获取操作日志 */
-const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
-async function getOperateLog() {
-  if (!customerId.value) {
-    return;
-  }
-  const data = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CUSTOMER,
-    bizId: customerId.value,
+    })
+      .then(async () => {
+        const res = await updateCustomerDealStatus(
+          customerId.value,
+          dealStatus,
+        );
+        if (res) {
+          message.success('更新成交状态成功');
+          resolve(true);
+        } else {
+          reject(new Error('更新成交状态失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
   });
-  logList.value = data.list;
 }
 
 // 加载数据
 onMounted(async () => {
+  customerId.value = Number(route.params.id);
   await loadCustomerDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="customer?.name" :loading="loading">
+    <FormModal @success="loadCustomerDetail" />
+    <TransferModal @success="loadCustomerDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button
@@ -179,17 +217,23 @@ onMounted(async () => {
     </Card>
     <Card class="mt-4">
       <Tabs>
-        <Tabs.TabPane tab="跟进记录" key="1">
-          <div>跟进记录</div>
+        <Tabs.TabPane tab="基本信息" key="1">
+          <CustomerDetailsInfo :customer="customer" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
-          <CustomerDetailsInfo />
+        <Tabs.TabPane tab="跟进记录" key="2">
+          <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="联系人" key="3">
           <div>联系人</div>
         </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="4">
-          <div>团队成员</div>
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="customerId"
+            :biz-type="BizTypeEnum.CRM_CUSTOMER"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
         </Tabs.TabPane>
         <Tabs.TabPane tab="商机" key="5">
           <div>商机</div>
@@ -201,7 +245,7 @@ onMounted(async () => {
           <div>回款</div>
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="8">
-          <OperateLog :log-list="logList" />
+          <OperateLog :log-list="customerLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>