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

!334 feat: 客户配置 review 修改

Browse Source 
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
* feat: 客户配置 review 修改
This commit is contained in:
wanwan 2023-11-26 12:02:08 +00:00 committed by YunaiV
parent 3c19cb1a85
commit e1f9e16a77
12 changed files with 181 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,20 @@ export interface CustomerLimitConfigVO {
dealCountEnabled?: boolean
}
/**
* 客户限制配置类型
*/
export enum LimitConfType {
/**
* 拥有客户数限制
*/
CUSTOMER_QUANTITY_LIMIT = 1,
/**
* 锁定客户数限制
*/
CUSTOMER_LOCK_LIMIT = 2
}
// 查询客户限制配置列表
export const getCustomerLimitConfigPage = async (params) => {
return await request.get({ url: `/crm/customer-limit-config/page`, params })

5
src/api/crm/customerPoolConf/index.ts → src/api/crm/customerPoolConfig/index.ts
View File

@ -1,4 +1,5 @@
import request from '@/config/axios'
import { ConfigVO } from '@/api/infra/config'
export interface CustomerPoolConfigVO {
enabled?: boolean
@ -14,6 +15,6 @@ export const getCustomerPoolConfig = async () => {
}
// 更新客户公海规则设置
export const updateCustomerPoolConfig = async (data: ConfigVO) => {
return await request.put({ url: `/crm/customer-pool-config/update`, data })
export const saveCustomerPoolConfig = async (data: ConfigVO) => {
return await request.put({ url: `/crm/customer-pool-config/save`, data })
}

18
src/views/crm/clue/ClueForm.vue
View File

@ -10,9 +10,15 @@
<el-form-item label="线索名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入线索名称" />
</el-form-item>
<!-- TODO wanwan 客户选择 -->
<el-form-item label="客户" prop="customerId">
<el-input v-model="formData.customerId" placeholder="请选择客户" />
<el-select v-model="formData.customerId" clearable placeholder="请选择客户">
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="下次联系时间" prop="contactNextTime">
<el-date-picker
@ -47,6 +53,7 @@
</template>
<script setup lang="ts">
import * as ClueApi from '@/api/crm/clue'
import * as CustomerApi from '@/api/crm/customer'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -55,6 +62,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const customerList = ref([]) // 客户列表
const formData = ref({
id: undefined,
name: undefined,
@ -79,6 +87,12 @@ const open = async (type: string, id?: number) => {
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
const customerData = await CustomerApi.getCustomerPage({
pageNo: 1,
pageSize: 100,
pool: false
})
customerList.value = customerData.list
// 修改时，设置数据
if (id) {
formLoading.value = true

2
src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue → src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
View File

@ -57,11 +57,11 @@
</template>
<script setup lang="ts">
import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'
import * as UserApi from '@/api/system/user'
import { cloneDeep } from 'lodash-es'
import { LimitConfType } from '@/api/crm/customerLimitConfig'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

18
src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue → src/views/crm/config/customerLimitConfig/CustomerLimitConfigList.vue
View File

@ -19,8 +19,16 @@
>
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="规则类型" align="center" prop="type" />
<el-table-column label="规则适用人群" align="center" prop="userNames" />
<el-table-column label="规则适用部门" align="center" prop="deptNames" />
<el-table-column
label="规则适用人群"
align="center"
:formatter="(row) => row.users?.map((user: any) => user.nickname).join('，')"
/>
<el-table-column
label="规则适用部门"
align="center"
:formatter="(row) => row.depts?.map((dept: any) => dept.name).join('，')"
/>
<el-table-column
:label="
confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT ? '拥有客户数上限' : '锁定客户数上限'
@ -80,11 +88,11 @@
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
import CustomerLimitConfigForm from '@/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue'
import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
import CustomerLimitConfigForm from '@/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue'
import { DICT_TYPE } from '@/utils/dict'
import { LimitConfType } from '@/api/crm/customerLimitConfig'
defineOptions({ name: 'CustomerLimitConfDetails' })
defineOptions({ name: 'CustomerLimitConfigList' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

4
src/views/crm/config/customerLimitConfig/customerLimitConfig.ts Normal file
View File

@ -0,0 +1,4 @@
// TODO 可以挪到它对应的 api.ts 文件里哈
/**
* 客户限制配置类型
*/

19
src/views/crm/config/customerLimitConfig/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<!-- 列表 -->
<ContentWrap>
<el-tabs>
<el-tab-pane label="拥有客户数限制">
<CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
</el-tab-pane>
<el-tab-pane label="锁定客户数限制">
<CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import CustomerLimitConfigList from '@/views/crm/config/customerLimitConfig/CustomerLimitConfigList.vue'
import { LimitConfType } from '@/api/crm/customerLimitConfig'
defineOptions({ name: 'CrmCustomerLimitConfig' })
</script>

42
src/views/crm/customerPoolConf/index.vue → src/views/crm/config/customerPoolConfig/index.vue
View File

@ -23,7 +23,7 @@
</template>
<!-- 表单 -->
<el-form-item label="客户公海规则设置" prop="enabled">
<el-radio-group v-model="formData.enabled" class="ml-4">
<el-radio-group v-model="formData.enabled" @change="changeEnable" class="ml-4">
<el-radio :label="false" size="large">不启用</el-radio>
<el-radio :label="true" size="large">启用</el-radio>
</el-radio-group>
@ -36,7 +36,11 @@
天未成交
</el-form-item>
<el-form-item label="提前提醒设置" prop="notifyEnabled">
<el-radio-group v-model="formData.notifyEnabled" class="ml-4">
<el-radio-group
v-model="formData.notifyEnabled"
@change="changeNotifyEnable"
class="ml-4"
>
<el-radio :label="false" size="large">不提醒</el-radio>
<el-radio :label="true" size="large">提醒</el-radio>
</el-radio-group>
@ -52,11 +56,10 @@
</ContentWrap>
</template>
<script setup lang="ts">
import * as CustomerPoolConfApi from '@/api/crm/customerPoolConf'
import * as CustomerPoolConfigApi from '@/api/crm/customerPoolConfig'
import { CardTitle } from '@/components/Card'
// TODO @wanwan：CustomerPoolConf =》 CustomerPoolConfig；另外，我们在 crm 目录下，新建一个 config 目录，然后把 customerPoolConfig 和 customerLimitConfig 都挪进
defineOptions({ name: 'CustomerPoolConf' })
defineOptions({ name: 'CrmCustomerPoolConfig' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
@ -78,7 +81,7 @@ const formRef = ref() // 表单 Ref
const getConfig = async () => {
try {
formLoading.value = true
const data = await CustomerPoolConfApi.getCustomerPoolConfig()
const data = await CustomerPoolConfigApi.getCustomerPoolConfig()
if (data === null) {
return
}
@ -97,8 +100,8 @@ const onSubmit = async () => {
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as CustomerPoolConfApi.CustomerPoolConfigVO
await CustomerPoolConfApi.updateCustomerPoolConfig(data)
const data = formData.value as unknown as CustomerPoolConfigApi.CustomerPoolConfigVO
await CustomerPoolConfigApi.saveCustomerPoolConfig(data)
message.success(t('common.updateSuccess'))
await getConfig()
formLoading.value = false
@ -107,27 +110,22 @@ const onSubmit = async () => {
}
}
// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
watch(
() => formData.value.enabled,
(val: boolean) => {
if (!val) {
/** 更改客户公海规则设置 */
const changeEnable = () => {
if (!formData.value.enabled) {
formData.value.contactExpireDays = undefined
formData.value.dealExpireDays = undefined
formData.value.notifyEnabled = false
formData.value.notifyDays = undefined
}
}
)
// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
watch(
() => formData.value.notifyEnabled,
(val: boolean) => {
if (!val) {
}
/** 更改提前提醒设置 */
const changeNotifyEnable = () => {
if (!formData.value.notifyEnabled) {
formData.value.notifyDays = undefined
}
}
)
}
onMounted(() => {
getConfig()

85
src/views/crm/customer/detail/CustomerDetailsTop.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div v-loading="loading">
<div class="flex items-start justify-between">
<div>
<!-- 左上：客户基本信息 -->
<CustomerBasicInfo :customer="customer" />
</div>
<div>
<!-- 右上：按钮 -->
<el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
编辑
</el-button>
<el-button>更改成交状态</el-button>
</div>
</div>
<el-row class="mt-10px">
<el-button>
<Icon class="mr-5px" icon="ph:calendar-fill" />
创建任务
</el-button>
<el-button>
<Icon class="mr-5px" icon="carbon:email" />
发送邮件
</el-button>
<el-button>
<Icon class="mr-5px" icon="system-uicons:contacts" />
创建联系人
</el-button>
<el-button>
<Icon class="mr-5px" icon="ep:opportunity" />
创建商机
</el-button>
<el-button>
<Icon class="mr-5px" icon="clarity:contract-line" />
创建合同
</el-button>
<el-button>
<Icon class="mr-5px" icon="icon-park:income-one" />
创建回款
</el-button>
<el-button>
<Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
添加团队成员
</el-button>
</el-row>
</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>
<el-descriptions-item label="负责人">
{{ customer.ownerUserName }}
</el-descriptions-item>
<!-- TODO wanwan 首要联系人? -->
<el-descriptions-item label="首要联系人" />
<!-- TODO wanwan 首要联系人电话? -->
<el-descriptions-item label="首要联系人电话">
{{ customer.mobile }}
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="emit('refresh')" />
</template>
<script setup lang="ts">
import * as CustomerApi from '@/api/crm/customer'
import { DICT_TYPE } from '@/utils/dict'
import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
const { customer, loading } = defineProps<{ customer: CustomerApi.CustomerVO; loading: boolean }>()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
const formRef = ref()
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
</script>

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

@ -1,69 +1,5 @@
<template>
<!-- TODO @wanwan：要不要把上面这一整块，搞成一个组件，就是把 下面 + Details + BasitcInfo 合并成一个 -->
<div v-loading="loading">
<div class="flex items-start justify-between">
<div>
<!-- 左上：客户基本信息 -->
<CustomerBasicInfo :customer="customer" />
</div>
<div>
<!-- 右上：按钮 -->
<el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
编辑
</el-button>
<el-button>更改成交状态</el-button>
</div>
</div>
<el-row class="mt-10px">
<el-button>
<Icon class="mr-5px" icon="ph:calendar-fill" />
创建任务
</el-button>
<el-button>
<Icon class="mr-5px" icon="carbon:email" />
发送邮件
</el-button>
<el-button>
<Icon class="mr-5px" icon="system-uicons:contacts" />
创建联系人
</el-button>
<el-button>
<Icon class="mr-5px" icon="ep:opportunity" />
创建商机
</el-button>
<el-button>
<Icon class="mr-5px" icon="clarity:contract-line" />
创建合同
</el-button>
<el-button>
<Icon class="mr-5px" icon="icon-park:income-one" />
创建回款
</el-button>
<el-button>
<Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
添加团队成员
</el-button>
</el-row>
</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>
<el-descriptions-item label="负责人">
{{ customer.ownerUserName }}
</el-descriptions-item>
<!-- TODO wanwan 首要联系人? -->
<el-descriptions-item label="首要联系人" />
<!-- TODO wanwan 首要联系人电话? -->
<el-descriptions-item label="首要联系人电话">
{{ customer.mobile }}
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<CustomerDetailsTop :customer="customer" :loading="loading" @refresh="getCustomerData(id)" />
<el-col>
<el-tabs>
<el-tab-pane label="详细资料">
@ -107,9 +43,6 @@
<el-tab-pane label="发票" lazy> 发票</el-tab-pane>
</el-tabs>
</el-col>
<!-- 表单弹窗：添加/修改 -->
<CustomerForm ref="formRef" @success="getCustomerData(id)" />
</template>
<script lang="ts" setup>
@ -145,11 +78,6 @@ const getCustomerData = async (id: number) => {
}
}
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/**
* 初始化
*/

14
src/views/crm/customerLimitConfig/customerLimitConf.ts
View File

@ -1,14 +0,0 @@
// TODO 可以挪到它对应的 api.ts 文件里哈
/**
* 客户限制配置类型
*/
export enum LimitConfType {
/**
* 拥有客户数限制
*/
CUSTOMER_QUANTITY_LIMIT = 1,
/**
* 锁定客户数限制
*/
CUSTOMER_LOCK_LIMIT = 2
}

20
src/views/crm/customerLimitConfig/index.vue
View File

@ -1,20 +0,0 @@
<template>
<!-- 列表 -->
<ContentWrap>
<el-tabs>
<el-tab-pane label="拥有客户数限制">
<!-- TODO @wanwan：CustomerLimitConfigList，因为它是列表哈 -->
<CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
</el-tab-pane>
<el-tab-pane label="锁定客户数限制">
<CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import CustomerLimitConfDetails from '@/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue'
import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
defineOptions({ name: 'CrmCustomerLimitConfig' })
</script>