yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

crm 客户管理界面优化

pull/853/head
wersd 2025-06-01 16:29:25 +08:00
parent fec9539f7b
commit d7aba16e37
11 changed files with 141 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/crm/customer/index.ts
View File

@ -74,7 +74,7 @@ export const updateCustomer = async (data: CustomerVO) => {
}
// 更新客户的成交状态
export const updateCustomerDealStatus = async (id: number, dealStatus: boolean) => {
export const updateCustomerDealStatus = async (id: number, dealStatus: number) => {
return await request.put({ url: `/crm/customer/update-deal-status`, params: { id, dealStatus } })
}

74
src/views/crm/contact/ContactForm.vue
View File

@ -13,41 +13,6 @@
<el-input v-model="formData.name" placeholder="请输入姓名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="ownerUserId">
<el-select
v-model="formData.ownerUserId"
:disabled="formType !== 'create'"
class="w-1/1"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.nickname"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="客户名称" prop="customerId">
<el-select
:disabled="formData.customerDefault"
v-model="formData.customerId"
placeholder="请选择客户"
class="w-1/1"
>
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机" />
@ -85,7 +50,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="关键决策人" prop="master" style="width: 400px">
<el-form-item label="主要联系人" prop="master" style="width: 400px">
<el-radio-group v-model="formData.master">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
@ -111,7 +76,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item label="直属上级" prop="parentId">
<el-select v-model="formData.parentId" placeholder="请选择直属上级" class="w-1/1">
<el-option
@ -123,41 +88,10 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-col> -->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地址" prop="areaId">
<el-cascader
v-model="formData.areaId"
:options="areaList"
:props="defaultProps"
class="w-1/1"
clearable
filterable
placeholder="请选择城市"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="详细地址" prop="detailAddress">
<el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="下次联系时间" prop="contactNextTime">
<el-date-picker
v-model="formData.contactNextTime"
placeholder="选择下次联系时间"
type="datetime"
value-format="x"
class="!w-1/1"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>

4
src/views/crm/contact/components/ContactList.vue
View File

@ -42,8 +42,8 @@
</el-table-column>
<el-table-column align="center" label="手机号" prop="mobile" />
<el-table-column align="center" label="职位" prop="post" />
<el-table-column align="center" label="直属上级" prop="parentName" />
<el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
<!-- <el-table-column align="center" label="直属上级" prop="parentName" /> -->
<el-table-column align="center" label="是否主要联系人" min-width="100" prop="master">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
</template>

8
src/views/crm/contract/components/ContractList.vue
View File

@ -1,12 +1,4 @@
<template>
<!-- 操作栏 -->
<el-row justify="end">
<el-button @click="openForm">
<Icon class="mr-5px" icon="clarity:contract-line" />
创建合同
</el-button>
</el-row>
<!-- 列表 -->
<ContentWrap class="mt-10px">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">

32
src/views/crm/customer/CustomerForm.vue
View File

@ -8,7 +8,7 @@
label-width="120px"
>
<el-row>
<el-col :span="14">
<el-col :span="12">
<el-form-item label="地区" prop="areaId">
<el-cascader
v-model="formData.areaId"
@ -21,15 +21,6 @@
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="客户名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="客户类别" prop="industryId">
<el-select v-model="formData.industryId" placeholder="请选择客户类别" class="w-1/1">
@ -43,6 +34,13 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="客户名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
@ -56,6 +54,18 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="成交状态" prop="dealStatus">
<el-select v-model="formData.dealStatus" placeholder="请选择成交状态" class="w-1/1">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_DEAL_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
@ -100,6 +110,7 @@ const formData = ref({
email: undefined,
areaId: undefined,
detailAddress: undefined,
dealStatus: undefined,
industryId: undefined,
level: undefined,
source: undefined,
@ -111,6 +122,7 @@ const formRules = reactive({
areaId: [{ required: true, message: '地区不能为空', trigger: 'change' }],
detailAddress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
industryId: [{ required: true, message: '客户类别不能为空', trigger: 'change' }],
dealStatus: [{ required: true, message: '成交状态不能为空', trigger: 'change' }],
})
const formRef = ref() // 表单 Ref

16
src/views/crm/customer/detail/CustomerDetailsHeader.vue
View File

@ -17,9 +17,6 @@
</div>
<ContentWrap class="mt-10px">
<el-descriptions :column="5" direction="vertical">
<el-descriptions-item label="客户级别">
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
</el-descriptions-item>
<el-descriptions-item label="成交状态">
{{ customer.dealStatus ? '已成交' : '未成交' }}
</el-descriptions-item>
@ -27,6 +24,19 @@
<el-descriptions-item label="创建时间">
{{ formatDate(customer.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="客户名称">
{{ customer.name }}
</el-descriptions-item>
<el-descriptions-item label="地址">
{{ customer.areaName }} {{ customer.detailAddress }}
</el-descriptions-item>
<el-descriptions-item label="客户类别">
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
</el-descriptions-item>
<el-descriptions-item label="下次联系时间">
{{ formatDate(customer.contactNextTime) }}
</el-descriptions-item>
<el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
</el-descriptions>
</ContentWrap>
</template>

4
src/views/crm/customer/detail/CustomerDetailsInfo.vue
View File

@ -33,9 +33,9 @@
</template>
<el-descriptions :column="4">
<el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
<el-descriptions-item label="最后跟进记录">
<!-- <el-descriptions-item label="最后跟进记录">
{{ customer.contactLastContent }}
</el-descriptions-item>
</el-descriptions-item> -->
<el-descriptions-item label="最后跟进时间">
{{ formatDate(customer.contactLastTime) }}
</el-descriptions-item>

14
src/views/crm/customer/detail/index.vue
View File

@ -11,9 +11,9 @@
<el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
转移
</el-button>
<el-button v-if="permissionListRef?.validateWrite" @click="handleUpdateDealStatus">
<!-- <el-button v-if="permissionListRef?.validateWrite" @click="handleUpdateDealStatus">
更改成交状态
</el-button>
</el-button> -->
<el-button
v-if="customer.lockStatus && permissionListRef?.validateOwnerUser"
@click="handleUnlock"
@ -40,7 +40,7 @@
<CustomerDetailsInfo :customer="customer" />
</el-tab-pane>
<el-tab-pane label="联系人" lazy>
<ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
<ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" :customer-id="customerId"/>
</el-tab-pane>
<el-tab-pane label="团队成员">
<PermissionList
@ -118,13 +118,13 @@ const openForm = () => {
/** 更新成交状态操作 */
const handleUpdateDealStatus = async () => {
const dealStatus = !customer.value.dealStatus
const dealStatus = customer.value.dealStatus
try {
// 更新状态的二次确认
await message.confirm(`确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`)
// // 更新状态的二次确认
// await message.confirm(`确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`)
// 发起更新
await CustomerApi.updateCustomerDealStatus(customerId.value, dealStatus)
message.success(`更新成交状态成功`)
// message.success(`更新成交状态成功`)
// 刷新数据
await getCustomer()
} catch {}

17
src/views/crm/customer/index.vue
View File

@ -116,8 +116,12 @@
<el-table-column align="center" label="主要联系人" prop="primaryContactName" width="150">
<template #default="scope">
<el-link :underline="false" type="primary" @click="openPrimaryContactDetail(scope.row.primaryContactId)">
{{ scope.row.primaryContactName }}
<el-link
:underline="false"
:type="scope.row.primaryContactName ? 'primary' : 'danger'"
@click="scopeRowIdForCustomerDetail = scope.row.id; openPrimaryContactDetail(scope.row.primaryContactId)"
>
{{ scope.row.primaryContactName || '暂无' }}
</el-link>
</template>
</el-table-column>
@ -260,8 +264,15 @@ const openDetail = (id: number) => {
/** 打开主要联系人详情 */
const openPrimaryContactDetail = (id: number) => {
push({ name: 'CrmContactDetail', params: { id } })
if (!id) {
// id 为空跳转客户详情
push({ name: 'CrmCustomerDetail', params: { id: scopeRowIdForCustomerDetail.value } })
} else {
push({ name: 'CrmContactDetail', params: { id } })
}
}
// 用于存储当前行客户id
const scopeRowIdForCustomerDetail = ref<number | null>(null)
/** 添加/修改操作 */
const formRef = ref()

119
src/views/crm/followup/FollowUpRecordForm.vue
View File

@ -1,4 +1,4 @@
<!-- 跟进记录的添加表单弹窗 -->
<!-- 跟进记录的添加表单 -->
<template>
<Dialog v-model="dialogVisible" title="添加跟进记录" width="50%">
<el-form
@ -10,8 +10,8 @@
>
<el-row>
<el-col :span="12">
<el-form-item label="跟进类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择跟进类型">
<el-form-item label="跟进方式" prop="type">
<el-select v-model="formData.type" placeholder="请选择跟进">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE)"
:key="dict.value"
@ -31,30 +31,28 @@
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="跟进内容" prop="content">
<el-input v-model="formData.content" :rows="3" type="textarea" />
<el-col :span="12" v-if="formData.bizType == BizTypeEnum.CRM_CUSTOMER">
<el-form-item label="关联联系人" prop="contactIds">
<el-select v-model="formData.contactIds" filterable placeholder="请选择联系人">
<el-option v-for="item in contactOptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-form-item label="跟进内容" prop="content">
<Editor v-model="formData.content" height="150px" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="图片" prop="picUrls">
<UploadImgs v-model="formData.picUrls" class="min-w-80px" />
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="12">
<el-form-item label="附件" prop="fileUrls">
<UploadFile v-model="formData.fileUrls" class="min-w-80px" />
</el-form-item>
</el-col>
<el-col :span="24" v-if="formData.bizType == BizTypeEnum.CRM_CUSTOMER">
<el-form-item label="关联联系人" prop="contactIds">
<el-button @click="handleOpenContact">
<Icon class="mr-5px" icon="ep:plus" />
关联联系人
</el-button>
<FollowUpRecordContactForm :contacts="formData.contacts" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
@ -62,18 +60,6 @@
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<!-- 弹窗 -->
<ContactListModal
ref="contactTableSelectRef"
:customer-id="formData.bizId"
@success="handleAddContact"
/>
<BusinessListModal
ref="businessTableSelectRef"
:customer-id="formData.bizId"
@success="handleAddBusiness"
/>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@ -94,19 +80,55 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
// 修正表单数据类型声明，允许动态赋值
interface FollowUpFormData {
bizType?: number;
bizId?: number;
type?: number;
content?: string;
nextTime?: any;
picUrls?: string[];
fileUrls?: string[];
businesses?: any[];
contacts?: any[];
contactIds?: number[];
}
const formData = ref<FollowUpFormData>({
bizType: undefined,
bizId: undefined,
type: undefined,
content: '',
nextTime: undefined,
picUrls: [],
fileUrls: [],
businesses: [],
contacts: []
contacts: [],
contactIds: []
})
const formRules = reactive({
type: [{ required: true, message: '跟进类型不能为空', trigger: 'change' }],
content: [{ required: true, message: '跟进内容不能为空', trigger: 'blur' }],
nextTime: [{ required: true, message: '下次联系时间不能为空', trigger: 'blur' }]
nextTime: [{ required: true, message: '下次联系时间不能为空', trigger: 'blur' }],
contactIds: [{ required: true, message: '联系人不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
const contactOptions = ref<ContactApi.ContactVO[]>([])
watch(
() => formData.value.bizId,
async (val) => {
if (formData.value.bizType === BizTypeEnum.CRM_CUSTOMER && val) {
// 获取客户下联系人
const res = await ContactApi.getContactPageByCustomer({ customerId: val, pageSize: 100 })
contactOptions.value = res.list || []
} else {
contactOptions.value = []
}
},
{ immediate: true }
)
/** 打开弹窗 */
const open = async (bizType: number, bizId: number) => {
@ -119,39 +141,30 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// 提交时contactIds直接提交
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
// 保证contactIds始终为数组
let contactIds = formData.value.contactIds
if (!Array.isArray(contactIds)) {
contactIds = contactIds !== undefined && contactIds !== null ? [contactIds] : []
}
const data = {
...formData.value,
contactIds: formData.value.contacts.map((item) => item.id),
businessIds: formData.value.businesses.map((item) => item.id)
contactIds,
businessIds: (formData.value.businesses || []).map((item: any) => item.id)
} as unknown as FollowUpRecordVO
await FollowUpRecordApi.createFollowUpRecord(data)
message.success(t('common.createSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 关联联系人 */
const contactTableSelectRef = ref<InstanceType<typeof ContactListModal>>()
const handleOpenContact = () => {
contactTableSelectRef.value?.open()
}
const handleAddContact = (contactId: [], newContacts: ContactApi.ContactVO[]) => {
if (newContacts.length > 0) {
// 只保留最新选择的一个联系人
formData.value.contacts = [newContacts[0]]
}
}
/** 关联商机 */
const businessTableSelectRef = ref<InstanceType<typeof BusinessListModal>>()
const handleOpenBusiness = () => {
@ -171,8 +184,14 @@ const resetForm = () => {
formData.value = {
bizId: undefined,
bizType: undefined,
type: undefined,
content: '',
nextTime: undefined,
picUrls: [],
fileUrls: [],
businesses: [],
contacts: []
contacts: [],
contactIds: []
}
}
</script>

10
src/views/crm/followup/index.vue
View File

@ -15,13 +15,17 @@
:timestamp="formatDate(item.createTime)"
placement="top"
>
<template #timestamp>
<div style="color:#999;font-size:13px;margin-bottom:2px;">跟进时间</div>
<span>{{ formatDate(item.createTime) }}</span>
</template>
<div class="el-timeline-right-content">
<div class="followup-meta mb-5px">
<span class="meta-label">跟进人：</span><el-tag class="mr-10px" type="success">{{ item.creatorName }}</el-tag>
<span class="meta-label">跟进类型：</span><dict-tag :type="DICT_TYPE.CRM_FOLLOW_UP_TYPE" :value="item.type" class="mr-10px" />
<span class="meta-label">跟进方式：</span><dict-tag :type="DICT_TYPE.CRM_FOLLOW_UP_TYPE" :value="item.type" class="mr-10px" />
</div>
<span class="follow-row">跟进内容：{{ item.content }}</span>
<span v-if="item.nextTime" class="mb-5px follow-row text-gray-500">下次联系：{{ formatDate(item.nextTime) }}</span>
<span class="follow-row" v-if="!/<[a-z][\s\S]*>/i.test(item.content)">跟进内容：{{ item.content }}</span>
<div class="follow-row" v-else v-html="'跟进内容：' + item.content"></div>
<!-- <span v-if="bizType === BizTypeEnum.CRM_CUSTOMER && item.contacts && item.contacts.length" class="ml-10px">
关联联系人：
<el-link