feat：【ele】【crm】contact 的迁移初始化
This commit is contained in:
YunaiV
106
apps/web-ele/src/views/crm/contact/detail/data.ts
Normal file
106
apps/web-ele/src/views/crm/contact/detail/data.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
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: 'customerName',
|
||||
label: '客户名称',
|
||||
},
|
||||
{
|
||||
field: 'post',
|
||||
label: '职务',
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
label: '手机',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
label: '创建时间',
|
||||
render: (val) => formatDateTime(val) as string,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 详情页的基础字段 */
|
||||
export function useDetailBaseSchema(): DescriptionItemSchema[] {
|
||||
return [
|
||||
{
|
||||
field: 'name',
|
||||
label: '姓名',
|
||||
},
|
||||
{
|
||||
field: 'customerName',
|
||||
label: '客户名称',
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
label: '手机',
|
||||
},
|
||||
{
|
||||
field: 'telephone',
|
||||
label: '电话',
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
label: '邮箱',
|
||||
},
|
||||
{
|
||||
field: 'qq',
|
||||
label: 'QQ',
|
||||
},
|
||||
{
|
||||
field: 'wechat',
|
||||
label: '微信',
|
||||
},
|
||||
{
|
||||
field: 'areaName',
|
||||
label: '地址',
|
||||
render: (val, data) => {
|
||||
const areaName = val ?? '';
|
||||
const detailAddress = data?.detailAddress ?? '';
|
||||
return [areaName, detailAddress].filter((item) => !!item).join(' ');
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'post',
|
||||
label: '职务',
|
||||
},
|
||||
{
|
||||
field: 'parentName',
|
||||
label: '直属上级',
|
||||
},
|
||||
{
|
||||
field: 'master',
|
||||
label: '关键决策人',
|
||||
render: (val) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
|
||||
value: val,
|
||||
}),
|
||||
},
|
||||
{
|
||||
field: 'sex',
|
||||
label: '性别',
|
||||
render: (val) =>
|
||||
h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: val }),
|
||||
},
|
||||
{
|
||||
field: 'contactNextTime',
|
||||
label: '下次联系时间',
|
||||
render: (val) => formatDateTime(val) as string,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: '备注',
|
||||
},
|
||||
];
|
||||
}
|
||||
159
apps/web-ele/src/views/crm/contact/detail/index.vue
Normal file
159
apps/web-ele/src/views/crm/contact/detail/index.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import type { CrmContactApi } from '#/api/crm/contact';
|
||||
import type { SystemOperateLogApi } from '#/api/system/operate-log';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
|
||||
import { ElCard, ElTabPane, ElTabs } from 'element-plus';
|
||||
|
||||
import { getContact } from '#/api/crm/contact';
|
||||
import { getOperateLogPage } from '#/api/crm/operateLog';
|
||||
import { BizTypeEnum } from '#/api/crm/permission';
|
||||
import { useDescription } from '#/components/description';
|
||||
import { OperateLog } from '#/components/operate-log';
|
||||
import { ACTION_ICON, TableAction } from '#/components/table-action';
|
||||
import { $t } from '#/locales';
|
||||
import { BusinessDetailsList } from '#/views/crm/business/components';
|
||||
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 route = useRoute();
|
||||
const router = useRouter();
|
||||
const tabs = useTabs();
|
||||
|
||||
const loading = ref(false); // 加载中
|
||||
const contactId = ref(0); // 联系人编号
|
||||
const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact); // 联系人详情
|
||||
const activeTabName = ref('1'); // 选中 Tab 名
|
||||
const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
|
||||
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
|
||||
|
||||
const [Descriptions] = useDescription({
|
||||
border: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [TransferModal, transferModalApi] = useVbenModal({
|
||||
connectedComponent: TransferForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 加载联系人详情 */
|
||||
async function getContactDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
contact.value = await getContact(contactId.value);
|
||||
// 操作日志
|
||||
const res = await getOperateLogPage({
|
||||
bizType: BizTypeEnum.CRM_CONTACT,
|
||||
bizId: contactId.value,
|
||||
});
|
||||
logList.value = res.list;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回列表页 */
|
||||
function handleBack() {
|
||||
tabs.closeCurrentTab();
|
||||
router.push({ name: 'CrmContact' });
|
||||
}
|
||||
|
||||
/** 编辑联系人 */
|
||||
function handleEdit() {
|
||||
formModalApi.setData({ id: contactId.value }).open();
|
||||
}
|
||||
|
||||
/** 转移联系人 */
|
||||
function handleTransfer() {
|
||||
transferModalApi.setData({ id: contactId.value }).open();
|
||||
}
|
||||
|
||||
/** 加载数据 */
|
||||
onMounted(() => {
|
||||
contactId.value = Number(route.params.id);
|
||||
getContactDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height :title="contact?.name" :loading="loading">
|
||||
<FormModal @success="getContactDetail" />
|
||||
<TransferModal @success="getContactDetail" />
|
||||
<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:contact:update'],
|
||||
ifShow: permissionListRef?.validateWrite,
|
||||
onClick: handleEdit,
|
||||
},
|
||||
{
|
||||
label: '转移',
|
||||
type: 'primary',
|
||||
ifShow: permissionListRef?.validateOwnerUser,
|
||||
onClick: handleTransfer,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<ElCard class="min-h-[10%]">
|
||||
<Descriptions :data="contact" />
|
||||
</ElCard>
|
||||
<ElCard class="mt-4 min-h-[60%]">
|
||||
<ElTabs v-model:model-value="activeTabName">
|
||||
<ElTabPane label="跟进记录" name="1">
|
||||
<FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
|
||||
</ElTabPane>
|
||||
<ElTabPane label="详细资料" name="2">
|
||||
<Info :contact="contact" />
|
||||
</ElTabPane>
|
||||
<ElTabPane label="操作日志" name="3">
|
||||
<OperateLog :log-list="logList" />
|
||||
</ElTabPane>
|
||||
<ElTabPane label="团队成员" name="4">
|
||||
<PermissionList
|
||||
ref="permissionListRef"
|
||||
:biz-id="contactId"
|
||||
:biz-type="BizTypeEnum.CRM_CONTACT"
|
||||
:show-action="true"
|
||||
@quit-team="handleBack"
|
||||
/>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="商机" name="5">
|
||||
<BusinessDetailsList
|
||||
:biz-id="contactId"
|
||||
:biz-type="BizTypeEnum.CRM_CONTACT"
|
||||
:contact-id="contactId"
|
||||
:customer-id="contact.customerId"
|
||||
/>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</ElCard>
|
||||
</Page>
|
||||
</template>
|
||||
38
apps/web-ele/src/views/crm/contact/detail/modules/info.vue
Normal file
38
apps/web-ele/src/views/crm/contact/detail/modules/info.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CrmContactApi } from '#/api/crm/contact';
|
||||
|
||||
import { ElDivider } from 'element-plus';
|
||||
|
||||
import { useDescription } from '#/components/description';
|
||||
import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
|
||||
|
||||
import { useDetailBaseSchema } from '../data';
|
||||
|
||||
defineProps<{
|
||||
contact: CrmContactApi.Contact;
|
||||
}>();
|
||||
|
||||
const [BaseDescriptions] = useDescription({
|
||||
title: '基本信息',
|
||||
border: false,
|
||||
column: 4,
|
||||
class: 'mx-4',
|
||||
schema: useDetailBaseSchema(),
|
||||
});
|
||||
|
||||
const [SystemDescriptions] = useDescription({
|
||||
title: '系统信息',
|
||||
border: false,
|
||||
column: 3,
|
||||
class: 'mx-4',
|
||||
schema: useFollowUpDetailSchema(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<BaseDescriptions :data="contact" />
|
||||
<ElDivider />
|
||||
<SystemDescriptions :data="contact" />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user