feat：【antd】【crm】contact 详情的优化

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

@@ -2,7 +2,7 @@
 import type { CrmClueApi } from '#/api/crm/clue';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
@@ -33,12 +33,6 @@ const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue); // 线索详情
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-/** 校验负责人权限和编辑权限 */
-const validateOwnerUser = computed(
-  () => permissionListRef.value?.validateOwnerUser,
-);
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -129,18 +123,22 @@ onMounted(() => {
           返回
         </Button>
         <Button
-          v-if="validateWrite"
+          v-if="permissionListRef?.validateWrite"
           type="primary"
           @click="handleEdit"
           v-access:code="['crm:clue:update']"
         >
           {{ $t('ui.actionTitle.edit') }}
         </Button>
-        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="handleTransfer"
+        >
           转移
         </Button>
         <Button
-          v-if="validateOwnerUser && !clue?.transformStatus"
+          v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
           type="primary"
           @click="handleTransform"
         >

apps/web-antd/src/views/crm/contact/detail/data.ts

@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -104,62 +103,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      type: 'checkbox',
-      width: 50,
-      fixed: 'left',
-    },
-    {
-      field: 'name',
-      title: '姓名',
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      fixed: 'left',
-      slots: { default: 'customerName' },
-    },
-    {
-      field: 'sex',
-      title: '性别',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-    },
-    {
-      field: 'post',
-      title: '职位',
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-    },
-    {
-      field: 'master',
-      title: '关键决策人',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-  ];
-}

apps/web-antd/src/views/crm/contact/detail/index.vue

@@ -14,24 +14,23 @@ import { getContact } from '#/api/crm/contact';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
 import { BusinessDetailsList } from '#/views/crm/business';
-import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
+import Form from '../modules/form.vue';
 import { useDetailSchema } from './data';
-
+import Info from './modules/info.vue';
-const loading = ref(false);
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const contactId = ref(0);
+const loading = ref(false); // 加载中
-
+const contactId = ref(0); // 联系人编号
-const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
+const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact); // 联系人详情
-const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
@@ -44,7 +43,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ContactForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -53,18 +52,20 @@ const [TransferModal, transferModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 加载详情 */
+/** 加载联系人详情 */
-async function loadContactDetail() {
+async function getContactDetail() {
   loading.value = true;
-  contactId.value = Number(route.params.id);
+  try {
-  const data = await getContact(contactId.value);
+    contact.value = await getContact(contactId.value);
-  const logList = await getOperateLogPage({
+    // 操作日志
-    bizType: BizTypeEnum.CRM_CONTACT,
+    const res = await getOperateLogPage({
-    bizId: contactId.value,
+      bizType: BizTypeEnum.CRM_CONTACT,
-  });
+      bizId: contactId.value,
-  contactLogList.value = logList.list;
+    });
-  contact.value = data;
+    logList.value = res.list;
-  loading.value = false;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -73,29 +74,33 @@ function handleBack() {
   router.push('/crm/contact');
 }
 
-/** 编辑 */
+/** 编辑联系人 */
 function handleEdit() {
   formModalApi.setData({ id: contactId.value }).open();
 }
 
-/** 转移线索 */
+/** 转移联系人 */
 function handleTransfer() {
   transferModalApi.setData({ id: contactId.value }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
-  contactId.value = Number(route.params.id);
+  contactId.value = route.params.id as number;
-  loadContactDetail();
+  getContactDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="contact?.name" :loading="loading">
-    <FormModal @success="loadContactDetail" />
+    <FormModal @success="getContactDetail" />
-    <TransferModal @success="loadContactDetail" />
+    <TransferModal @success="getContactDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
+        <Button @click="handleBack">
+          <IconifyIcon icon="lucide:arrow-left" />
+          返回
+        </Button>
         <Button
           v-if="permissionListRef?.validateWrite"
           type="primary"
@@ -117,12 +122,12 @@ onMounted(() => {
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
-          <ContactDetailsInfo :contact="contact" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
           <FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <Info :contact="contact" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
@@ -141,7 +146,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="5" :force-render="true">
-          <AsyncOperateLog :log-list="contactLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>

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

@@ -1,205 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmContactApi } from '#/api/crm/contact';
-
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { confirm, useVbenModal } from '@vben/common-ui';
-
-import { Button, message } from 'ant-design-vue';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  createBusinessContactList,
-  deleteBusinessContactList,
-  getContactPageByBusiness,
-  getContactPageByCustomer,
-} from '#/api/crm/contact';
-import { BizTypeEnum } from '#/api/crm/permission';
-import { $t } from '#/locales';
-
-import ListModal from '../../modules/detail-list-modal.vue';
-import Form from '../../modules/form.vue';
-import { useDetailListColumns } from '../data';
-
-const props = defineProps<{
-  bizId: number; // 业务编号
-  bizType: number; // 业务类型
-  businessId?: number; // 特殊：商机编号；在【商机】详情中，可以传递商机编号，默认新建的联系人关联到该商机
-  customerId?: number; // 特殊：客户编号；在【商机】详情中，可以传递客户编号，默认新建的联系人关联到该客户
-}>();
-
-const { push } = useRouter();
-
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
-  destroyOnClose: true,
-});
-
-const [DetailListModal, detailListModalApi] = useVbenModal({
-  connectedComponent: ListModal,
-  destroyOnClose: true,
-});
-
-const checkedRows = ref<CrmContactApi.Contact[]>([]);
-function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
-  checkedRows.value = records;
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建联系人 */
-function handleCreate() {
-  formModalApi
-    .setData({ customerId: props.customerId, businessId: props.businessId })
-    .open();
-}
-
-function handleCreateContact() {
-  detailListModalApi.setData({ customerId: props.customerId }).open();
-}
-
-async function handleDeleteContactBusinessList() {
-  if (checkedRows.value.length === 0) {
-    message.error('请先选择联系人后操作！');
-    return;
-  }
-  return new Promise((resolve, reject) => {
-    confirm({
-      content: `确定要将${checkedRows.value.map((item) => item.name).join(',')}解除关联吗？`,
-    })
-      .then(async () => {
-        const res = await deleteBusinessContactList({
-          businessId: props.bizId,
-          contactIds: checkedRows.value.map((item) => item.id),
-        });
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          onRefresh();
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
-      })
-      .catch(() => {
-        reject(new Error('取消操作'));
-      });
-  });
-}
-
-/** 查看联系人详情 */
-function handleDetail(row: CrmContactApi.Contact) {
-  push({ name: 'CrmContactDetail', params: { id: row.id } });
-}
-
-/** 查看客户详情 */
-function handleCustomerDetail(row: CrmContactApi.Contact) {
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-async function handleCreateBusinessContactList(contactIds: number[]) {
-  const data = {
-    businessId: props.bizId,
-    contactIds,
-  } as CrmContactApi.BusinessContactReq;
-  await createBusinessContactList(data);
-  onRefresh();
-}
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    columns: useDetailListColumns(),
-    height: 600,
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          if (props.bizType === BizTypeEnum.CRM_CUSTOMER) {
-            return await getContactPageByCustomer({
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              customerId: props.bizId,
-              ...formValues,
-            });
-          } else if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
-            return await getContactPageByBusiness({
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              businessId: props.bizId,
-              ...formValues,
-            });
-          } else {
-            return [];
-          }
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<CrmContactApi.Contact>,
-  gridEvents: {
-    checkboxAll: setCheckedRows,
-    checkboxChange: setCheckedRows,
-  },
-});
-</script>
-
-<template>
-  <div>
-    <FormModal @success="onRefresh" />
-    <DetailListModal
-      :customer-id="customerId"
-      @success="handleCreateBusinessContactList"
-    />
-    <Grid>
-      <template #toolbar-tools>
-        <TableAction
-          :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['联系人']),
-              type: 'primary',
-              icon: ACTION_ICON.ADD,
-              onClick: handleCreate,
-            },
-            {
-              label: '关联',
-              icon: ACTION_ICON.ADD,
-              type: 'default',
-              auth: ['crm:contact:create-business'],
-              ifShow: () => !!businessId,
-              onClick: handleCreateContact,
-            },
-            {
-              label: '解除关联',
-              icon: ACTION_ICON.ADD,
-              type: 'default',
-              auth: ['crm:contact:create-business'],
-              ifShow: () => !!businessId,
-              onClick: handleDeleteContactBusinessList,
-            },
-          ]"
-        />
-      </template>
-      <template #name="{ row }">
-        <Button type="link" @click="handleDetail(row)">
-          {{ row.name }}
-        </Button>
-      </template>
-      <template #customerName="{ row }">
-        <Button type="link" @click="handleCustomerDetail(row)">
-          {{ row.customerName }}
-        </Button>
-      </template>
-    </Grid>
-  </div>
-</template>

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

@@ -9,7 +9,7 @@ import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 import { useDetailBaseSchema } from '../data';
 
 defineProps<{
-  contact: CrmContactApi.Contact; // 联系人信息
+  contact: CrmContactApi.Contact;
 }>();
 
 const [BaseDescriptions] = useDescription({

apps/web-antd/src/views/crm/contact/index.ts

@@ -1,13 +1,5 @@
 import { defineAsyncComponent } from 'vue';
 
-export const ContactDetailsInfo = defineAsyncComponent(
-  () => import('./detail/modules/detail-info.vue'),
-);
-
-export const ContactForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
 export const ContactDetailsList = defineAsyncComponent(
-  () => import('./detail/modules/detail-list.vue'),
+  () => import('./components/detail-list.vue'),
 );

apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue

@@ -1,164 +0,0 @@
-<script lang="ts" setup>
-// TODO @芋艿：放在 modules 里，还是放在哪里？
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmContactApi } from '#/api/crm/contact';
-
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { Button, message } from 'ant-design-vue';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getContactPageByCustomer } from '#/api/crm/contact';
-import { $t } from '#/locales';
-
-import { useDetailListColumns } from '../detail/data';
-import Form from './form.vue';
-
-const props = defineProps<{
-  customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
-}>();
-
-const emit = defineEmits(['success']);
-
-const { push } = useRouter();
-
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
-  destroyOnClose: true,
-});
-
-const checkedRows = ref<CrmContactApi.Contact[]>([]);
-function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
-  checkedRows.value = records;
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建商机 */
-function handleCreate() {
-  formModalApi.setData({ customerId: props.customerId }).open();
-}
-
-/** 查看商机详情 */
-function handleDetail(row: CrmContactApi.Contact) {
-  push({ name: 'CrmContactDetail', params: { id: row.id } });
-}
-
-/** 查看客户详情 */
-function handleCustomerDetail(row: CrmContactApi.Contact) {
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    if (checkedRows.value.length === 0) {
-      message.error('请先选择联系人后操作！');
-      return;
-    }
-    modalApi.lock();
-    // 提交表单
-    try {
-      const contactIds = checkedRows.value.map((item) => item.id);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success', contactIds, checkedRows.value);
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<any>();
-    if (!data) {
-      return;
-    }
-    modalApi.lock();
-    try {
-      // 设置到 values
-      // await formApi.setValues(formData.value);
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'name',
-        label: '联系人名称',
-        component: 'Input',
-      },
-    ],
-  },
-  gridOptions: {
-    columns: useDetailListColumns(),
-    height: 600,
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getContactPageByCustomer({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            customerId: props.customerId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<CrmContactApi.Contact>,
-  gridEvents: {
-    checkboxAll: setCheckedRows,
-    checkboxChange: setCheckedRows,
-  },
-});
-</script>
-
-<template>
-  <Modal title="关联联系人" class="w-2/5">
-    <FormModal @success="onRefresh" />
-    <Grid>
-      <template #toolbar-tools>
-        <TableAction
-          :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['联系人']),
-              type: 'primary',
-              icon: ACTION_ICON.ADD,
-              auth: ['crm:contact:create'],
-              onClick: handleCreate,
-            },
-          ]"
-        />
-      </template>
-      <template #name="{ row }">
-        <Button type="link" @click="handleDetail(row)">
-          {{ row.name }}
-        </Button>
-      </template>
-      <template #customerName="{ row }">
-        <Button type="link" @click="handleCustomerDetail(row)">
-          {{ row.customerName }}
-        </Button>
-      </template>
-    </Grid>
-  </Modal>
-</template>

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

@@ -60,7 +60,7 @@ const [Form, formApi] = useVbenForm({
       label: '下次联系时间',
       component: 'DatePicker',
       componentProps: {
-        showTime: false,
+        showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
       },