feat: clue detail

apps/web-antd/src/api/crm/clue/index.ts

@@ -77,7 +77,7 @@ export function transferClue(data: CrmPermissionApi.TransferReq) {
 
 /** 线索转化为客户 */
 export function transformClue(id: number) {
-  return requestClient.put('/crm/clue/transform', { id });
+  return requestClient.put(`/crm/clue/transform?id=${id}`);
 }
 
 /** 获得分配给我的、待跟进的线索数量 */

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',
+      field: 'areaName',
-      label: '微信',
+      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() {
+async function handleTransform(): Promise<boolean | undefined> {
-  try {
+  return new Promise((resolve, reject) => {
-    await Modal.confirm({
+    confirm({
-      title: '提示',
       content: '确定将该线索转化为客户吗？',
-    });
+    })
-    await transformClue(clueId.value);
+      .then(async () => {
-    Modal.success({
+        const res = await transformClue(clueId.value);
-      title: '成功',
+        if (res) {
-      content: '转化客户成功',
+          // 提示并返回成功
-    });
+          message.success('转化客户成功');
-    await loadClueDetail();
+          resolve(true);
-  } catch {
+        } 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
+        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-          v-access:code="['crm:clue:update']"
-        >
           转移
         </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">
+        <Tabs.TabPane tab="基本信息" key="1" :force-render="true">
-          <div>线索跟进</div>
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="基本信息" key="2">
           <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">
+        <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
-          <div>操作日志</div>
+          <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>

apps/web-antd/src/views/crm/followup/index.vue

@@ -1,18 +1,22 @@
 <script lang="ts" setup>
-import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
-
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmFollowUpApi } from '#/api/crm/followup';
 
+import { watch } from 'vue';
 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 {
+  deleteFollowUpRecord,
+  getFollowUpRecordPage,
+} from '#/api/crm/followup';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils';
 
 import FollowUpRecordForm from './modules/form.vue';
 
@@ -33,17 +37,17 @@ function onRefresh() {
 
 /** 添加跟进记录 */
 function handleCreate() {
-  formModalApi.setData(null).open();
+  formModalApi.setData({ bizId: props.bizId, bizType: props.bizType }).open();
 }
 
 /** 删除跟进记录 */
-async function handleDelete(row: FollowUpRecordVO) {
+async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     key: 'action_key_msg',
   });
   try {
-    await FollowUpRecordApi.deleteFollowUpRecord(row.id);
+    await deleteFollowUpRecord(row.id);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_key_msg',
@@ -98,37 +102,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
         field: 'contacts',
         title: '关联联系人',
         visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
-        slots: {
+        slots: { default: 'contacts' },
-          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: {
+        slots: { default: 'businesses' },
-          default: ({ row }) =>
-            row.businesses?.map((business) =>
-              h(
-                Button,
-                {
-                  type: 'link',
-                  onClick: () => openBusinessDetail(business.id),
-                },
-                () => business.name,
-              ),
-            ),
-        },
       },
       {
         field: 'actions',
@@ -142,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }) => {
-          return await FollowUpRecordApi.getFollowUpRecordPage({
+          return await getFollowUpRecordPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             bizType: props.bizType,
@@ -157,7 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: { code: 'query' },
     },
-  } as VxeTableGridOptions<FollowUpRecordVO>,
+  } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
 });
 
 watch(
@@ -170,7 +150,8 @@ watch(
 
 <template>
   <Page auto-content-height>
-    <Grid table-title="跟进记录列表">
+    <FormModal @success="onRefresh" />
+    <Grid>
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -183,6 +164,16 @@ watch(
           ]"
         />
       </template>
+      <template #contacts="{ row }">
+        <Button type="link" @click="openContactDetail(row.id)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #businesses="{ row }">
+        <Button type="link" @click="openBusinessDetail(row.id)">
+          {{ row.name }}
+        </Button>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -200,6 +191,5 @@ watch(
         />
       </template>
     </Grid>
-    <FormModal @success="onRefresh" />
   </Page>
 </template>

apps/web-antd/src/views/crm/followup/modules/form.vue

@@ -1,27 +1,23 @@
 <script lang="ts" setup>
-import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
+import type { CrmFollowUpApi } from '#/api/crm/followup';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
+import { getBusinessPageByCustomer } from '#/api/crm/business';
-  createFollowUpRecord,
+import { getContactPageByCustomer } from '#/api/crm/contact';
-  getFollowUpRecord,
+import { createFollowUpRecord } from '#/api/crm/followup';
-  updateFollowUpRecord,
-} from '#/api/crm/followup';
 import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
+
-const getTitle = computed(() => {
+const bizId = ref<number>();
-  return formData.value?.id
+const bizType = ref<number>();
-    ? $t('ui.actionTitle.edit', ['跟进记录'])
-    : $t('ui.actionTitle.create', ['跟进记录']);
-});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -32,7 +28,94 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'bizId',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'bizType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '跟进类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nextTime',
+      label: '下次联系时间',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: false,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '跟进内容',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrls',
+      label: '图片',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'fileUrls',
+      label: '附件',
+      component: 'FileUpload',
+    },
+    {
+      fieldName: 'contactIds',
+      label: '关联联系人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const res = await getContactPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      fieldName: 'businessIds',
+      label: '关联商机',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const res = await getBusinessPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+  ],
   showDefaultActions: false,
 });
 
@@ -44,12 +127,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const data = (await formApi.getValues()) as CrmFollowUpApi.FollowUpRecord;
-      (await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
     try {
-      await (formData.value?.id
+      await createFollowUpRecord(data);
-        ? updateFollowUpRecord(data)
-        : createFollowUpRecord(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -60,19 +140,20 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
-    const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
+    const data = modalApi.getData<CrmFollowUpApi.FollowUpRecord>();
-    if (!data || !data.id) {
+    if (!data) {
       return;
     }
+    if (data.bizId && data.bizType) {
+      bizId.value = data.bizId;
+      bizType.value = data.bizType;
+    }
     modalApi.lock();
     try {
-      formData.value = await getFollowUpRecord(data.id as number);
+      await formApi.setValues(data);
-      // 设置到 values
-      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -81,7 +162,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
+  <Modal title="添加跟进记录" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/crm/permission/modules/data.ts

@@ -17,7 +17,7 @@ export function useTransferFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'ownerUserId',
+      fieldName: 'newOwnerUserId',
       label: '选择新负责人',
       component: 'ApiSelect',
       componentProps: {

apps/web-antd/src/views/crm/permission/modules/permission-list.vue

@@ -109,6 +109,7 @@ function handleDelete() {
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
+          onRefresh();
           resolve(true);
         } else {
           reject(new Error('移出失败'));