root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

!335 crm联系人review修改

Browse Source 
Merge pull request !335 from zyna/master
This commit is contained in:
芋道源码 2023-11-27 12:30:20 +00:00 committed by Gitee
commit 038f3d6ab0
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 170 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/crm/contact/index.ts
View File

@ -1,7 +1,7 @@
/*
* @Author: zyna
* @Date: 2023-11-05 13:34:41
* @LastEditTime: 2023-11-11 16:20:19
* @LastEditTime: 2023-11-26 20:47:04
* @FilePath: \yudao-ui-admin-vue3\src\api\crm\contact\index.ts
* @Description:
*/
@ -22,13 +22,15 @@ export interface ContactVO {
id: number
parentId: number
qq: number
webchat: string
wechat: string
sex: number
policyMakers: boolean
master: boolean
creatorName: string
updateTime?: Date
createTime?: Date
customerName: string
customerName: string,
areaName: string,
ownerUserName: string
}
// 查询crm联系人列表
@ -60,6 +62,6 @@ export const deleteContact = async (id: number) => {
export const exportContact = async (params) => {
return await request.download({ url: `/crm/contact/export-excel`, params })
}
export const simpleAlllist = async () => {
return await request.get({ url: `/crm/contact/simpleAlllist` })
export const simpleAllList = async () => {
return await request.get({ url: `/crm/contact/simple-all-list` })
}

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

@ -62,3 +62,7 @@ export const deleteCustomer = async (id: number) => {
export const exportCustomer = async (params) => {
return await request.download({ url: `/crm/customer/export-excel`, params })
}
//客户列表
export const queryAllList = async () => {
return await request.get({ url: `/crm/customer/query-all-list` })
}

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

@ -1,170 +1,131 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="800">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="130px"
v-loading="formLoading"
:inline="true"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="负责人" prop="ownerUserId">
<el-select
v-model="ownerUserList"
placeholder="请选择负责人"
multiple
value-key="id"
lable-key="nickname"
@click="openOwerForm('open')"
>
<el-option
v-for="item in ownerUserList"
:key="item.id"
:label="item.nickname"
:value="item"
/>
</el-select>
</el-form-item>
<!-- TODO 芋艿：封装成一个组件 -->
<el-form-item label="客户名称" prop="customerName">
<el-popover
placement="bottom"
:width="600"
trigger="click"
:teleported="false"
:visible="showCustomer"
:offset="10"
>
<template #reference>
<el-input
placeholder="请选择"
@click="openCustomerSelect"
v-model="formData.customerName"
/>
</template>
<el-table :data="list" ref="multipleTableRef" @select="handleSelectionChange">
<el-table-column label="选择" type="selection" width="55" />
<el-table-column width="100" property="id" label="编号" />
<el-table-column width="150" property="name" label="客户名称" />
<el-table-column label="客户来源" align="center" prop="source" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
</template>
</el-table-column>
<el-table-column label="客户等级" align="center" prop="level" width="120">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-row :gutter="20">
<el-col>
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
layout="sizes, prev, pager, next"
/>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10" :offset="13">
<el-button @click="selectCustomer">确认</el-button>
<el-button @click="showCustomer = false">取消</el-button>
</el-col>
</el-row>
</el-popover>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="formData.sex" placeholder="请选择">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="座机" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入座机" style="width: 215px" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 215px" />
</el-form-item>
<el-form-item label="微信" prop="webchat">
<el-input v-model="formData.webchat" placeholder="请输入微信" />
</el-form-item>
<el-form-item label="下次联系时间" prop="nextTime">
<el-date-picker
v-model="formData.nextTime"
type="date"
value-format="x"
placeholder="选择下次联系时间"
/>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="formData.address" placeholder="请输入地址" />
</el-form-item>
<el-form-item label="直属上级" prop="parentId">
<el-select v-model="formData.parentId" placeholder="请选择">
<el-option
v-for="item in allContactList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.id == formData.id"
/>
</el-select>
</el-form-item>
<el-form-item label="职位" prop="post">
<el-input v-model="formData.post" placeholder="请输入职位" />
</el-form-item>
<el-form-item label="是否关键决策人" prop="policyMakers" style="width: 400px">
<el-radio-group v-model="formData.policyMakers">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="820">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input input-style="width:190px;" 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" placeholder="请选择负责人" value-key="id" lable-key="nickname">
<el-option v-for="item in userList" :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="customerName">
<el-select v-model="formData.customerId" placeholder="请选择客户" value-key="id" lable-key="name">
<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="sex">
<el-select v-model="formData.sex" placeholder="请选择">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号" prop="mobile">
<el-input input-style="width:190px;" v-model="formData.mobile" placeholder="请输入手机号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="座机" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入座机" style="width: 215px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input input-style="width:190px;" v-model="formData.email" placeholder="请输入邮箱" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="QQ" prop="qq">
<el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 215px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="微信" prop="wechat">
<el-input input-style="width:190px;" v-model="formData.wechat" placeholder="请输入微信" />
</el-form-item>
</el-col>
<el-col :span="12"> <el-form-item label="下次联系时间" prop="nextTime">
<el-date-picker v-model="formData.nextTime" type="date" value-format="x" placeholder="选择下次联系时间" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="所在地" prop="areaId">
<el-tree-select
v-model="formData.areaId" :data="areaList" :props="defaultProps"
:render-after-expand="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地址" prop="address">
<el-input input-style="width:190px;" v-model="formData.address" placeholder="请输入地址" />
</el-form-item>
</el-col>
</el-row><el-row>
<el-col :span="12">
<el-form-item label="直属上级" prop="parentId">
<el-select v-model="formData.parentId" placeholder="请选择">
<el-option
v-for="item in allContactList" :key="item.id" :label="item.name" :value="item.id"
:disabled="item.id == formData.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12"> <el-form-item label="职位" prop="post">
<el-input input-style="width:190px;" v-model="formData.post" placeholder="请输入职位" />
</el-form-item>
</el-col>
</el-row><el-row>
<el-col :span="12"><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)" :key="dict.value"
:label="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24"><el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<OwerSelect
ref="owerRef"
@confirmOwerSelect="owerSelectValue"
:initOwerUser="formData.ownerUserId"
/>
</template>
<script setup lang="ts">
import * as ContactApi from '@/api/crm/contact'
import { DICT_TYPE, getIntDictOptions, getBoolDictOptions } from '@/utils/dict'
import OwerSelect from './OwerSelect.vue'
import * as UserApi from '@/api/system/user'
import * as CustomerApi from '@/api/crm/customer'
import { ElTable } from 'element-plus'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -172,6 +133,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const areaList = ref([]) // 地区列表
const formData = ref({
nextTime: undefined,
mobile: undefined,
@ -188,21 +150,10 @@ const formData = ref({
name: undefined,
post: undefined,
qq: undefined,
webchat: undefined,
wechat: undefined,
sex: undefined,
policyMakers: undefined
})
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
mobile: null,
industryId: null,
level: null,
source: null
master: false,
areaId: undefined
})
const formRules = reactive({
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
@ -212,56 +163,33 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
const ownerUserList = ref<any[]>([])
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
const allContactList = ref([]) // 所有联系人列表
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
allContactList.value = await ContactApi.simpleAlllist()
resetForm()
allContactList.value = await ContactApi.simpleAllList()
userList.value = await UserApi.getSimpleUserList()
customerList.value = await CustomerApi.queryAllList()
areaList.value = await AreaApi.getAreaTree()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ContactApi.getContact(id)
userList.value = await UserApi.getSimpleUserList()
await gotOwnerUser(formData.value.ownerUserId)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CustomerApi.getCustomerPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
const gotOwnerUser = (owerUserId: any) => {
if (owerUserId !== null) {
owerUserId.split(',').forEach((item: string) => {
userList.value.find((user: { id: any }) => {
if (user.id == item) {
ownerUserList.value.push(user)
}
})
})
}
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
owerSelectValue(ownerUserList)
// owerSelectValue(ownerUserList)
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
@ -302,52 +230,11 @@ const resetForm = () => {
name: undefined,
post: undefined,
qq: undefined,
webchat: undefined,
wechat: undefined,
sex: undefined,
policyMakers: undefined
master: false
}
formRef.value?.resetFields()
ownerUserList.value = []
}
/** 添加/修改操作 */
// TODO @zyna：owner？拼写要注意哈；
const owerRef = ref()
const openOwerForm = (type: string) => {
owerRef.value.open(type, ownerUserList.value)
}
const owerSelectValue = (value) => {
ownerUserList.value = value.value
formData.value.ownerUserId = undefined
value.value.forEach((item, index) => {
if (index != 0) {
formData.value.ownerUserId = formData.value.ownerUserId + ',' + item.id
} else {
formData.value.ownerUserId = item.id
}
})
}
// 选择客户
const showCustomer = ref(false)
const openCustomerSelect = () => {
showCustomer.value = !showCustomer.value
queryParams.pageNo = 1
getList()
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref()
const handleSelectionChange = ({}, row) => {
multipleSelection.value = row
multipleTableRef.value!.clearSelection()
multipleTableRef.value!.toggleRowSelection(row, undefined)
}
const selectCustomer = () => {
formData.value.customerId = multipleSelection.value.id
formData.value.customerName = multipleSelection.value.name
showCustomer.value = !showCustomer.value
}
const allContactList = ref([]) // 所有联系人列表
onMounted(async () => {
allContactList.value = await ContactApi.simpleAlllist()
})
</script>

40
src/views/crm/contact/detail/ContactDetails.vue
View File

@ -1,3 +1,10 @@
<!--
* @Author: zyna
* @Date: 2023-11-26 10:39:46
* @LastEditTime: 2023-11-26 20:43:43
* @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactDetails.vue
* @Description:
-->
<template>
<el-collapse v-model="activeNames">
<el-collapse-item name="basicInfo">
@ -24,14 +31,17 @@
{{ contact.qq }}
</el-descriptions-item>
<el-descriptions-item label="微信">
{{ contact.webchat }}
</el-descriptions-item>
<el-descriptions-item label="详细地址">
{{ contact.address }}
{{ contact.wechat }}
</el-descriptions-item>
<el-descriptions-item label="下次联系时间">
{{ contact.nextTime ? formatDate(contact.nextTime) : '空' }}
</el-descriptions-item>
<el-descriptions-item label="所在地">
{{ contact.areaName }}
</el-descriptions-item>
<el-descriptions-item label="详细地址">
{{ contact.address }}
</el-descriptions-item>
<el-descriptions-item label="性别">
<dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="contact.sex" />
</el-descriptions-item>
@ -46,7 +56,7 @@
</template>
<el-descriptions :column="2">
<el-descriptions-item label="负责人">
{{ gotOwnerUser(contact.ownerUserId) }}
{{ contact.ownerUserName }}
</el-descriptions-item>
<el-descriptions-item label="创建人">
{{ contact.creatorName }}
@ -66,29 +76,9 @@
import * as ContactApi from '@/api/crm/contact'
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/system/user'
const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
// 展示的折叠面板
const activeNames = ref(['basicInfo', 'systemInfo'])
const gotOwnerUser = (owerUserId: string) => {
let ownerName = ''
if (owerUserId !== null && owerUserId != undefined) {
owerUserId.split(',').forEach((item: string, index: number) => {
if (index != 0) {
ownerName =
ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
} else {
ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
}
})
}
return ownerName
}
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 初始化 **/
onMounted(async () => {
userList.value = await UserApi.getSimpleUserList()
})
</script>
<style scoped lang="scss"></style>

29
src/views/crm/contact/detail/index.vue
View File

@ -63,33 +63,18 @@
<!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
<el-col :span="18">
<el-tabs>
<el-tab-pane label="详细资料">
<el-tab-pane label="基本信息">
<!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
<ContactDetails class="ml-2" :contact="contact" />
</el-tab-pane>
<el-tab-pane label="活动" lazy> 活动</el-tab-pane>
<el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
<el-tab-pane label="工商信息" lazy> 工商信息</el-tab-pane>
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
<el-tab-pane label="客户" lazy>
<template #label> 客户<el-badge :value="12" class="item" type="primary" /> </template>
客户
</el-tab-pane>
<el-tab-pane label="团队成员" lazy>
<template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
团队成员
</el-tab-pane>
<el-tab-pane label="跟进记录" lazy> 跟进记录</el-tab-pane>
<el-tab-pane label="商机" lazy> 商机</el-tab-pane>
<el-tab-pane label="合同" lazy>
<template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
合同
<el-tab-pane label="附件" lazy> 附件</el-tab-pane>
<!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
<el-tab-pane label="操作记录" lazy>
<template #label> 操作记录<el-badge :value="12" class="item" type="primary" /> </template>
操作记录
</el-tab-pane>
<el-tab-pane label="回款" lazy>
<template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
回款
</el-tab-pane>
<el-tab-pane label="回访" lazy> 回访</el-tab-pane>
<el-tab-pane label="发票" lazy> 发票</el-tab-pane>
</el-tabs>
</el-col>

43
src/views/crm/contact/index.vue
View File

@ -55,9 +55,9 @@
class="!w-240px"
/>
</el-form-item>
<el-form-item label="微信" prop="webchat">
<el-form-item label="微信" prop="wechat">
<el-input
v-model="queryParams.webchat"
v-model="queryParams.wechat"
placeholder="请输入微信"
clearable
@keyup.enter="handleQuery"
@ -109,20 +109,16 @@
</template>
</el-table-column>
<el-table-column label="职位" align="center" prop="post" />
<el-table-column label="是否关键决策人" align="center" prop="policyMakers">
<el-table-column label="是否关键决策人" align="center" prop="master">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.policyMakers" />
</template>
</el-table-column>
<el-table-column label="直属上级" align="center" prop="parentId">
<template #default="scope">
{{ allContactList.find((contact) => contact.id === scope.row.parentId)?.name }}
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
</template>
</el-table-column>
<el-table-column label="直属上级" align="center" prop="parentName"/>
<el-table-column label="手机号" align="center" prop="mobile" />
<el-table-column label="座机" align="center" prop="telephone" />
<el-table-column label="QQ" align="center" prop="qq" />
<el-table-column label="微信" align="center" prop="webchat" />
<el-table-column label="微信" align="center" prop="wechat" />
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column
@ -142,7 +138,7 @@
/>
<el-table-column label="负责人" align="center" prop="ownerUserId">
<template #default="scope">
{{ gotOwnerUser(scope.row.ownerUserId) }}
{{ scope.row.ownerUserName}}
</template>
</el-table-column>
<!-- <el-table-column label="所属部门" align="center" prop="ownerUserId" /> -->
@ -239,13 +235,12 @@ const queryParams = reactive({
name: null,
post: null,
qq: null,
webchat: null,
wechat: null,
sex: null,
policyMakers: null
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
/** 查询列表 */
const getList = async () => {
@ -305,35 +300,15 @@ const handleExport = async () => {
}
}
// TODO @zyna：这个负责人的读取，放在后端好点
const gotOwnerUser = (owerUserId: string) => {
let ownerName = ''
if (owerUserId !== null) {
owerUserId.split(',').forEach((item: string, index: number) => {
if (index != 0) {
ownerName =
ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
} else {
ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
}
})
}
return ownerName
}
/** 打开客户详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmContactDetail', params: { id } })
}
// TODO @zyna：这个上级的读取，放在后端读取，更合适；因为可能数据量比较大
const allContactList = ref([]) //所有联系人列表
const allCustomerList = ref([]) //客户列表
/** 初始化 **/
onMounted(async () => {
await getList()
userList.value = await UserApi.getSimpleUserList()
allContactList.value = await ContactApi.simpleAlllist()
})
</script>