feat: clue detail

apps/web-antd/src/views/crm/clue/data.ts

@@ -7,6 +7,7 @@ import { h } from 'vue';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -32,7 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户来源',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
       },
       rules: 'required',
     },
@@ -44,9 +45,12 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        allowClear: true,
       },
       rules: 'required',
     },
@@ -75,7 +79,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户行业',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
       },
     },
     {
@@ -83,7 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户级别',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL),
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
       },
     },
     {
@@ -299,10 +303,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       field: 'mobile',
       label: '手机',
     },
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
     {
       field: 'telephone',
       label: '电话',
@@ -312,13 +312,18 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
       label: '邮箱',
     },
     {
-      field: 'wechat',
-      label: '微信',
+      field: 'areaName',
+      label: '地址',
+      content: (data) => data?.areaName + data?.detailAddress,
     },
     {
       field: 'qq',
       label: 'QQ',
     },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
     {
       field: 'industryId',
       label: '客户行业',
@@ -337,14 +342,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
           value: data?.level,
         }),
     },
-    {
-      field: 'areaId',
-      label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
-    },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
@@ -369,9 +366,9 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
       label: '最后跟进记录',
     },
     {
-      field: 'contactLastContent',
+      field: 'contactLastTime',
       label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastContent) as string,
+      content: (data) => formatDateTime(data?.contactLastTime) as string,
     },
     {
       field: 'creatorName',

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

@@ -9,7 +9,7 @@ import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
 
 defineOptions({ name: 'CrmClueDetailsInfo' });
 
-const { clue } = defineProps<{
+defineProps<{
   clue: CrmClueApi.Clue; // 线索信息
 }>();
 
@@ -21,7 +21,6 @@ const [BaseDescription] = useDescription({
     class: 'mx-4',
   },
   schema: useDetailBaseSchema(),
-  data: clue,
 });
 
 const [SystemDescription] = useDescription({
@@ -32,14 +31,13 @@ const [SystemDescription] = useDescription({
     class: 'mx-4',
   },
   schema: useDetailSystemSchema(),
-  data: clue,
 });
 </script>
 
 <template>
   <div class="p-4">
-    <BaseDescription />
+    <BaseDescription :data="clue" />
     <Divider />
-    <SystemDescription />
+    <SystemDescription :data="clue" />
   </div>
 </template>

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

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import type { CrmClueApi } from '#/api/crm/clue';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+import { Button, Card, message, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
+import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { OperateLog } from '#/components/operate-log';
+import FollowUp from '#/views/crm/followup/index.vue';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from '../data';
@@ -29,7 +33,14 @@ const tabs = useTabs();
 const clueId = ref(0);
 
 const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
-const permissionListRef = ref(); // 团队成员列表 Ref
+const clueLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = computed(
+  () => permissionListRef.value?.validateOwnerUser,
+);
+const validateWrite = computed(() => permissionListRef.value?.validateWrite);
 
 const [Description] = useDescription({
   componentProps: {
@@ -53,9 +64,14 @@ const [TransferModal, transferModalApi] = useVbenModal({
 /** 加载线索详情 */
 async function loadClueDetail() {
   loading.value = true;
-  clueId.value = Number(route.params.id);
   const data = await getClue(clueId.value);
   clue.value = data;
+  // 操作日志
+  const logList = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CLUE,
+    bizId: clueId.value,
+  });
+  clueLogList.value = logList.list;
   loading.value = false;
 }
 
@@ -67,7 +83,7 @@ function handleBack() {
 
 /** 编辑线索 */
 function handleEdit() {
-  formModalApi.setData({ id: clueId }).open();
+  formModalApi.setData({ id: clueId.value }).open();
 }
 
 /** 转移线索 */
@@ -76,31 +92,38 @@ function handleTransfer() {
 }
 
 /** 转化为客户 */
-async function handleTransform() {
-  try {
-    await Modal.confirm({
-      title: '提示',
+async function handleTransform(): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
       content: '确定将该线索转化为客户吗？',
-    });
-    await transformClue(clueId.value);
-    Modal.success({
-      title: '成功',
-      content: '转化客户成功',
-    });
-    await loadClueDetail();
-  } catch {
-    // 用户取消操作
-  }
+    })
+      .then(async () => {
+        const res = await transformClue(clueId.value);
+        if (res) {
+          // 提示并返回成功
+          message.success('转化客户成功');
+          resolve(true);
+        } else {
+          reject(new Error('转化失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
 }
 
 // 加载数据
 onMounted(async () => {
+  clueId.value = Number(route.params.id);
   await loadClueDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="clue?.name" :loading="loading">
+    <FormModal @success="loadClueDetail" />
+    <TransferModal @success="loadClueDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button @click="handleBack">
@@ -108,58 +131,49 @@ onMounted(async () => {
           返回
         </Button>
         <Button
-          v-if="permissionListRef?.validateWrite"
+          v-if="validateWrite"
           type="primary"
           @click="handleEdit"
           v-access:code="['crm:clue:update']"
         >
           {{ $t('ui.actionTitle.edit') }}
         </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-          v-access:code="['crm:clue:update']"
-        >
+        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
           转移
         </Button>
         <Button
-          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
+          v-if="validateOwnerUser && !clue?.transformStatus"
           type="primary"
           @click="handleTransform"
-          v-access:code="['crm:clue:update']"
         >
           转化为客户
         </Button>
       </div>
     </template>
-    <Card>
+    <Card class="min-h-[10%]">
       <Description :data="clue" />
     </Card>
-    <Card class="mt-4">
+    <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="线索跟进" key="1">
-          <div>线索跟进</div>
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
+        <Tabs.TabPane tab="基本信息" key="1" :force-render="true">
           <ClueDetailsInfo :clue="clue" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="3">
+        <Tabs.TabPane tab="线索跟进" key="2" :force-render="true">
+          <FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
-            :biz-id="clue.id!"
+            :biz-id="clueId"
             :biz-type="BizTypeEnum.CRM_CLUE"
             :show-action="true"
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="4">
-          <div>操作日志</div>
+        <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
+          <OperateLog :log-list="clueLogList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
-
-    <FormModal @success="loadClueDetail" />
-    <TransferModal @success="loadClueDetail" />
   </Page>
 </template>

apps/web-antd/src/views/crm/clue/modules/transfer.vue

@@ -1,78 +0,0 @@
-<script lang="ts" setup>
-import type { CrmPermissionApi } from '#/api/crm/permission';
-
-import { ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import { transferClue } from '#/api/crm/clue';
-import { $t } from '#/locales';
-
-const emit = defineEmits(['success']);
-const formData = ref<{ id: number }>();
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'Select',
-      componentProps: {
-        api: 'getSimpleUserList',
-      },
-      rules: 'required',
-    },
-  ],
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
-    try {
-      await transferClue(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<{ id: number }>();
-    if (!data || !data.id) {
-      return;
-    }
-    formData.value = data;
-  },
-});
-</script>
-
-<template>
-  <Modal :title="$t('ui.actionTitle.transfer')" class="w-[40%]">
-    <Form class="mx-4" />
-  </Modal>
-</template>