362 lines
12 KiB
Vue
362 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 对话框(添加 / 修改) -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
|
||
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
|
||
label-width="100px">
|
||
<el-collapse v-model="activeNames" >
|
||
<!--客户基本信息面板-->
|
||
<el-collapse-item title="客户基本信息" name="1">
|
||
<el-row :gutter="2">
|
||
<el-col :span="11">
|
||
<el-form-item label="客户名称" prop="cusName">
|
||
<el-input v-model="formData.cusName" placeholder="请输入客户名称"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item label="客户类型" prop="typeCode">
|
||
<el-select v-model="formData.typeCode" placeholder="请选择客户类型">
|
||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)"
|
||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="11">
|
||
<el-form-item v-if="formData.typeCode !=='03'" label="身份证号" prop="idCard">
|
||
<el-input v-model="formData.idCard" placeholder="请输入客户身份证号"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item v-if="formData.typeCode !=='03'" label="性别" prop="sex">
|
||
<el-radio-group v-model="formData.sex">
|
||
<el-radio v-for="dict in sexDictDatas" :key="dict.value" :label="dict.value">
|
||
{{ dict.label }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="11">
|
||
<el-form-item v-if="formData.typeCode !=='03'" label="生日" prop="birthday">
|
||
<el-date-picker
|
||
v-model="formData.birthday"
|
||
type="date"
|
||
placeholder="选择日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item label="联系方式" prop="phoneNumber">
|
||
<el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="11">
|
||
<el-form-item label="客户来源" prop="dataFrom">
|
||
<el-select v-model="formData.dataFrom" placeholder="请选择客户来源">
|
||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)"
|
||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item label="注册方式" prop="inviterType">
|
||
<el-select v-model="formData.inviterType" placeholder="请选择注册方式">
|
||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)"
|
||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="22">
|
||
<el-form-item label="联系地址" prop="address">
|
||
<el-input type="textarea" v-model="formData.address" placeholder="请输入客户联系地址"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-collapse-item>
|
||
<!--服务内容折叠面板面板-->
|
||
<el-collapse-item v-if="formData.typeCode=='03'" title="服务内容" name="2">
|
||
<el-table
|
||
:data="formData.itemList"
|
||
border
|
||
size="small"
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="serContent"
|
||
align="left"
|
||
width="180">
|
||
<template slot="header">
|
||
<i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem"/>
|
||
服务内容
|
||
</template>
|
||
<template v-slot="scope">
|
||
<el-select @change="serviceChange(scope.row)" v-model="scope.row.systemCode" placeholder="请选择服务内容">
|
||
<el-option v-for="dict in serviceList"
|
||
:key="dict.id" :label="dict.name" :value="dict.id"/>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="serTimeStart"
|
||
align="center"
|
||
label="开始日期">
|
||
<template v-slot="scope">
|
||
<el-date-picker
|
||
v-model="scope.row.serTimeStart"
|
||
type="date"
|
||
placeholder="选择服务开始日期">
|
||
</el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="serTimeEnd"
|
||
align="center"
|
||
label="结束日期">
|
||
<template v-slot="scope">
|
||
<el-date-picker
|
||
v-model="scope.row.serTimeEnd"
|
||
type="date"
|
||
placeholder="选择服务结束日期">
|
||
</el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
width="100"
|
||
label="操作">
|
||
<template v-slot="scope">
|
||
<el-button v-if="formData.itemList.length>1" size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index, formData.itemList)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-collapse-item>
|
||
<!--附件-->
|
||
<!-- <el-collapse-item title="附件" name="3">-->
|
||
<!-- <el-row>-->
|
||
<!-- <el-col>-->
|
||
<!-- <el-form-item label="身份证照片">-->
|
||
<!-- <ImageUpload v-model="formData.idCardImage"/>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
<!-- </el-collapse-item>-->
|
||
</el-collapse>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as CustomerMainApi from '@/api/base/customer';
|
||
import { getServicePackageList} from "@/api/system/servicePackage";
|
||
import ImageUpload from '@/components/ImageUpload';
|
||
import Editor from '@/components/Editor';
|
||
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
|
||
|
||
export default {
|
||
name: "CustomerMainForm",
|
||
components: {
|
||
ImageUpload,
|
||
Editor,
|
||
},
|
||
data() {
|
||
return {
|
||
// 弹出层标题
|
||
dialogTitle: "",
|
||
// 是否显示弹出层
|
||
dialogVisible: false,
|
||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
formLoading: false,
|
||
//折叠面板默认展开
|
||
activeNames: ['1','2','3'],
|
||
//类型
|
||
typeCode:"",
|
||
//企业
|
||
deptCode:undefined,
|
||
//服务套餐列表
|
||
serviceList:[],
|
||
// 表单参数
|
||
formData: {
|
||
id: undefined,
|
||
userId: undefined,
|
||
typeCode: '01',
|
||
deptCode: undefined,
|
||
cusName: undefined,
|
||
phoneNumber: undefined,
|
||
birthday: undefined,
|
||
address: undefined,
|
||
sex: '1',
|
||
idCard: undefined,
|
||
idCardImage: undefined,
|
||
dataFrom: '08',
|
||
nearDoTime: undefined,
|
||
nearDoContent: undefined,
|
||
inviter: undefined,
|
||
inviterType: '01',
|
||
status: undefined,
|
||
itemList:[
|
||
{
|
||
systemCode:'',
|
||
serContent:'',
|
||
serTimeStart:'',
|
||
serTimeEnd:''
|
||
}
|
||
],
|
||
},
|
||
// 表单校验
|
||
formRules: {
|
||
cusName: [
|
||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||
],
|
||
typeCode: [
|
||
{ required: true, message: '请选择客户类型', trigger: 'change' },
|
||
],
|
||
phoneNumber: [
|
||
{ required: true, message: '请输入客户联系方式', trigger: 'blur' },
|
||
],
|
||
dataFrom: [
|
||
{ required: true, message: '请选择客户来源', trigger: 'change' },
|
||
],
|
||
inviterType: [
|
||
{ required: true, message: '请选择注册方式', trigger: 'change' },
|
||
],
|
||
},
|
||
// 性别数据字典
|
||
sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
|
||
cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)
|
||
};
|
||
},
|
||
methods: {
|
||
/**获取服务套餐精简信息*/
|
||
getServiceList(){
|
||
getServicePackageList().then(response => {
|
||
this.serviceList = response.data;
|
||
});
|
||
},
|
||
/**绑定事件*/
|
||
serviceChange(row){
|
||
this.serviceList.map(item => {
|
||
if (item.id == row.systemCode){
|
||
row.serContent = item.name
|
||
return
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 新增服务内容
|
||
*/
|
||
addItem(){
|
||
const item = {
|
||
serContent:'',
|
||
serTimeStart:'',
|
||
serTimeEnd:''
|
||
}
|
||
this.formData.itemList.push(item)
|
||
},
|
||
/**
|
||
* 移除服务内容
|
||
*/
|
||
deleteItem(index, rows) {
|
||
rows.splice(index, 1);
|
||
},
|
||
|
||
/** 打开弹窗 */
|
||
async open(id,typeCode) {
|
||
this.dialogVisible = true;
|
||
this.typeCode = typeCode
|
||
this.reset();
|
||
this.getServiceList()
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
this.formLoading = true;
|
||
try {
|
||
const res = await CustomerMainApi.getCustomerMain(id);
|
||
this.formData = res.data;
|
||
this.dialogTitle = "修改客户信息";
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
}
|
||
this.dialogTitle = "新增客户";
|
||
},
|
||
/** 打开弹窗 */
|
||
async openAttn(row) {
|
||
this.dialogVisible = true;
|
||
this.typeCode = '04'
|
||
this.deptCode = row.deptCode
|
||
this.reset();
|
||
this.dialogTitle = row.cusName;
|
||
},
|
||
|
||
/** 提交按钮 */
|
||
async submitForm() {
|
||
// 校验主表
|
||
await this.$refs["formRef"].validate();
|
||
this.formLoading = true;
|
||
try {
|
||
const data = this.formData;
|
||
//如果客户类型不是政企客户，没有扩展表信息
|
||
if(data.typeCode !== '03'){
|
||
data.itemList = []
|
||
}
|
||
// 修改的提交
|
||
if (data.id) {
|
||
await CustomerMainApi.updateCustomerMain(data);
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.dialogVisible = false;
|
||
this.$emit('success');
|
||
return;
|
||
}
|
||
// 添加的提交
|
||
await CustomerMainApi.createCustomerMain(data);
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.dialogVisible = false;
|
||
this.$emit('success');
|
||
} finally {
|
||
this.formLoading = false;
|
||
}
|
||
},
|
||
/** 表单重置 */
|
||
reset() {
|
||
this.formData = {
|
||
id: undefined,
|
||
userId: undefined,
|
||
typeCode: this.typeCode,
|
||
deptCode: this.deptCode,
|
||
cusName: undefined,
|
||
phoneNumber: undefined,
|
||
birthday: undefined,
|
||
address: undefined,
|
||
sex: '1',
|
||
idCard: undefined,
|
||
idCardImage: undefined,
|
||
dataFrom: '08',
|
||
nearDoTime: undefined,
|
||
nearDoContent: undefined,
|
||
inviter: undefined,
|
||
inviterType: '01',
|
||
status: undefined,
|
||
itemList:[
|
||
{
|
||
serContent:'',
|
||
serTimeStart:'',
|
||
serTimeEnd:''
|
||
}
|
||
],
|
||
};
|
||
this.resetForm("formRef");
|
||
}
|
||
}
|
||
};
|
||
</script>
|