feat:客户管理模块-字段调整

main
黄伟杰 5 days ago
parent 943a2c5a3a
commit c3e8288b52

@ -3,6 +3,9 @@ import request from '@/config/axios'
export interface CustomerVO {
id: number // 编号
name: string // 客户名称
customerCode?: string // 客户编码
isCode?: boolean // 是否自动生成客户编码
contactName?: string // 联系人
followUpStatus: boolean // 跟进状态
contactLastTime: Date // 最后跟进时间
contactLastContent: string // 最后跟进内容

@ -28,8 +28,31 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机" />
<el-form-item label="客户编码" prop="customerCode">
<div class="customer-code-field">
<el-input
v-model="formData.customerCode"
placeholder="请输入客户编码"
:disabled="Boolean(formData.isCode) || formType === 'update'"
/>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
@change="handleCodeAutoChange"
/>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" prop="contactName">
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系人手机" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入联系人手机" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -51,13 +74,13 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="电话" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入电话" />
<el-form-item label="联系人电话" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入联系人电话" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" />
<el-form-item label="联系人邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入联系人邮箱" />
</el-form-item>
</el-col>
</el-row>
@ -164,6 +187,9 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const formData = ref({
id: undefined,
name: undefined,
customerCode: undefined,
isCode: true,
contactName: undefined,
contactNextTime: undefined,
ownerUserId: 0,
mobile: undefined,
@ -178,8 +204,21 @@ const formData = ref({
source: undefined,
remark: undefined
})
const validateCustomerCode = (_rule, value, callback) => {
if (Boolean(formData.value.isCode)) {
callback()
return
}
if (value === undefined || value === null || String(value).trim() === '') {
callback(new Error('客户编码不能为空'))
return
}
callback()
}
const formRules = reactive({
name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
customerCode: [{ validator: validateCustomerCode, trigger: ['blur', 'change'] }],
ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
@ -194,7 +233,11 @@ const open = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await CustomerApi.getCustomer(id)
const data = await CustomerApi.getCustomer(id)
formData.value = {
...data,
isCode: (data as any)?.isCode ?? false
} as any
} finally {
formLoading.value = false
}
@ -208,6 +251,13 @@ const open = async (type: string, id?: number) => {
formData.value.ownerUserId = useUserStore().getUser.id
}
}
const handleCodeAutoChange = (value: boolean) => {
if (value) {
formData.value.customerCode = undefined
}
formRef.value?.clearValidate('customerCode')
}
defineExpose({ open }) // open
/** 提交表单 */
@ -241,6 +291,9 @@ const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
customerCode: undefined,
isCode: true,
contactName: undefined,
contactNextTime: undefined,
ownerUserId: 0,
mobile: undefined,
@ -258,3 +311,20 @@ const resetForm = () => {
formRef.value?.resetFields()
}
</script>
<style scoped>
.customer-code-field {
display: flex;
align-items: center;
width: 100%;
gap: 30px;
}
.customer-code-field :deep(.el-input) {
flex: 1;
}
.customer-code-field :deep(.el-switch) {
flex: 0 0 auto;
}
</style>

@ -9,7 +9,7 @@
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
min-label-width="68px"
>
<el-form-item label="客户名称" prop="name">
<el-input
@ -20,12 +20,12 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-form-item label="联系人手机" prop="mobile">
<el-input
v-model="queryParams.mobile"
class="!w-240px"
clearable
placeholder="请输入手机"
placeholder="请输入联系人手机"
@keyup.enter="handleQuery"
/>
</el-form-item>
@ -87,10 +87,10 @@
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button v-hasPermi="['mes:customer:import']" plain type="warning" @click="handleImport">
<!-- <el-button v-hasPermi="['mes:customer:import']" plain type="warning" @click="handleImport">
<Icon icon="ep:upload" />
导入
</el-button>
</el-button> -->
<el-button
v-hasPermi="['mes:customer:export']"
:loading="exportLoading"
@ -107,27 +107,27 @@
<!-- 列表 -->
<ContentWrap>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- <el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="我负责的" name="1" />
<el-tab-pane label="我参与的" name="2" />
<el-tab-pane label="下属负责的" name="3" />
</el-tabs>
</el-tabs> -->
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" fixed="left" label="客户名称" prop="name" width="160" sortable>
<template #default="scope">
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" fixed="left" label="客户编码" prop="customerCode" width="140" sortable />
<el-table-column align="center" label="联系人" prop="contactName" width="120" />
<el-table-column align="center" label="客户来源" 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 align="center" label="手机" prop="mobile" width="120" />
<el-table-column align="center" label="电话" prop="telephone" width="130" />
<el-table-column align="center" label="邮箱" prop="email" width="180" />
<el-table-column align="center" label="联系人手机" prop="mobile" width="120" />
<el-table-column align="center" label="联系人电话" prop="telephone" width="130" />
<el-table-column align="center" label="联系人邮箱" prop="email" width="180" />
<el-table-column align="center" label="客户级别" prop="level" width="135">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
@ -227,7 +227,7 @@ import download from '@/utils/download'
import * as CustomerApi from '@/api/mes/customer'
import CustomerForm from './CustomerForm.vue'
import CustomerImportForm from './CustomerImportForm.vue'
import { TabsPaneContext } from 'element-plus'
// import { TabsPaneContext } from 'element-plus'
defineOptions({ name: 'MesCustomer' })
@ -250,13 +250,13 @@ const queryParams = reactive({
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
const activeName = ref('1') // tab
// const activeName = ref('1') // tab
/** tab 切换 */
const handleTabClick = (tab: TabsPaneContext) => {
queryParams.sceneType = tab.paneName as string
handleQuery()
}
// const handleTabClick = (tab: TabsPaneContext) => {
// queryParams.sceneType = tab.paneName as string
// handleQuery()
// }
/** 查询列表 */
const getList = async () => {
@ -283,10 +283,10 @@ const resetQuery = () => {
}
/** 打开客户详情 */
const { currentRoute, push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'MesCustomerDetail', params: { id } })
}
const { currentRoute } = useRouter()
// const openDetail = (id: number) => {
// push({ name: 'MesCustomerDetail', params: { id } })
// }
/** 添加/修改操作 */
const formRef = ref()
@ -309,9 +309,9 @@ const handleDelete = async (id: number) => {
/** 导入按钮操作 */
const importFormRef = ref<InstanceType<typeof CustomerImportForm>>()
const handleImport = () => {
importFormRef.value?.open()
}
// const handleImport = () => {
// importFormRef.value?.open()
// }
/** 导出按钮操作 */
const handleExport = async () => {

Loading…
Cancel
Save