<template>
|
<el-dialog title="新增投诉事件"
|
:visible.sync="dialogVisible"
|
width="1250px"
|
:before-close="handleClose">
|
<el-form ref="inputForm"
|
:model="form"
|
:inline="true"
|
label-width="120px">
|
<el-col :span="24"
|
v-if="isComplainFlag">
|
<el-form-item label="是否我司客户"
|
class="content-input"
|
style="width: 100%;"
|
:rules="rules.select">
|
<el-select filterable
|
v-model="isCompanyCustomer"
|
placeholder="请选择">
|
<el-option label="是"
|
value="1"></el-option>
|
<el-option label="否"
|
value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-form-item label="申请编号"
|
prop="busiNo"
|
:rules="(isCompanyCustomer != 1) ? {} : rules.required">
|
<el-input v-model="form.busiNo"
|
:disabled="!isComplainFlag || isCompanyCustomer != 1"
|
style="width: 100%;"
|
@blur="getCustomerInfo"></el-input>
|
</el-form-item>
|
<el-form-item label="客户名称"
|
prop="customerName"
|
:rules="rules.required">
|
<el-input v-model="form.customerName"
|
:disabled="!isComplainFlag || isCompanyCustomer == 1"
|
style="width: 100%;"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号"
|
prop="idCard"
|
:rules="(isCompanyCustomer != 1) ? rules.idCard : rules.required">
|
<el-input v-model="form.idCard"
|
:disabled="!isComplainFlag || isCompanyCustomer == 1"
|
style="width: 100%;"></el-input>
|
</el-form-item>
|
<el-form-item label="回拨电话"
|
prop="callBackPhone"
|
:rules="rules.phone">
|
<el-input v-model="form.callBackPhone"
|
maxlength="11"
|
style="width: 100%;"></el-input>
|
</el-form-item>
|
<el-col :span="24">
|
<el-form-item label="投诉来源"
|
prop="comPlainSource"
|
:rules="rules.select">
|
<el-select filterable
|
v-model="form.comPlainSource"
|
placeholder="请选择投诉来源">
|
<el-option v-for="item in comPlainSourceList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="投诉类型"
|
prop="compPlainType"
|
:rules="rules.select">
|
<el-select filterable
|
v-model="form.compPlainType"
|
placeholder="请选择投诉类型">
|
<el-option v-for="(item, idx) in compPlainTypeList"
|
:key="idx"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否本人"
|
prop="isMaster"
|
:rules="rules.select">
|
<el-select filterable
|
v-model="form.isMaster"
|
placeholder="请选择是否本人">
|
<el-option label="是"
|
value="1"></el-option>
|
<el-option label="否"
|
value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-col :span="24">
|
<el-form-item label="事件备注"
|
class="content-input"
|
style="width: 100%;"
|
prop="content"
|
:rules="rules.required">
|
<el-input :rows="3"
|
type="textarea"
|
v-model="form.content"
|
style="width: 100%;"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-col>
|
</el-form>
|
<div slot="footer"
|
class="dialog-footer">
|
<el-button size="mini"
|
@click="handleClose">取 消</el-button>
|
<el-button size="mini"
|
type="primary"
|
@click="submitForm('inputForm')">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import {
|
selectCustomerCodeList,
|
addComplainEvent,
|
qryBusinessApply,
|
} from '@comprehensive/serve/public';
|
export default {
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
// 是否是客户投诉界面入口
|
isComplainFlag: {
|
type: Boolean,
|
default: false,
|
},
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: true,
|
},
|
// 客户信息
|
customerInfo: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
let validatePhone = (rule,value,callback)=>{
|
if (!value){
|
callback(new Error('手机号不能为空！'));
|
}
|
//使用正则表达式进行验证手机号码
|
if (!/^1[3456789]\d{9}$/.test(value)){
|
callback(new Error('手机号不正确！'));
|
}
|
callback()
|
};
|
|
return {
|
form: { customerName: '', idCard: '' },
|
isCompanyCustomer: '1',
|
rules: {
|
required: { required: true, message: '请输入', trigger: 'blur' },
|
select: { required: true, message: '请选择', trigger: 'change' },
|
phone: [{ validator: validatePhone, trigger: 'blur', required: true, }],
|
idCard:[{ required: false, message: "请输入身份证号", trigger: "blur" }, { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: "请输入合法身份证号", trigger: "blur"}],
|
},
|
comPlainSourceList: [],
|
compPlainTypeList: [],
|
};
|
},
|
watch: {
|
dialogVisible(newV) {
|
if (newV) {
|
this.form = {
|
...this.form,
|
...this.customerInfo,
|
busiNo: this.serialNo,
|
};
|
}
|
},
|
},
|
mounted() {
|
// 投诉来源
|
this.selectCustomerCodeList('ComplainSource', 'comPlainSourceList');
|
// 投诉类型
|
this.selectCustomerCodeList('ComplainType', 'compPlainTypeList');
|
},
|
methods: {
|
// 查询客户信息
|
async getCustomerInfo() {
|
const { busiNo } = this.form;
|
if (!busiNo.trim().length) {
|
return;
|
}
|
const res = await qryBusinessApply({
|
busiNo: busiNo,
|
});
|
|
this.form.customerName = res.result.customerName;
|
this.form.idCard = res.result.idCard;
|
this.$set(this, 'form', this.form);
|
},
|
// 字典下拉列表
|
async selectCustomerCodeList(codeNo = '', index) {
|
const res = await selectCustomerCodeList({
|
codeNo,
|
});
|
if (res.code == '00') {
|
this.$set(this, index, res.result);
|
}
|
},
|
submitForm(formName) {
|
this.$refs.inputForm.validate(async (valid) => {
|
if (valid) {
|
const { form, isCompanyCustomer } = this;
|
const res = await addComplainEvent({
|
...form,
|
isCompanyCustomer,
|
});
|
if (res.code == '00') {
|
this.resetForm('inputForm');
|
this.$emit('succ');
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
handleClose(done) {
|
this.resetForm('inputForm');
|
this.$emit('close');
|
},
|
},
|
};
|
</script>
|
<style lang="stylus" scoped>
|
.content-input /deep/ .el-form-item__content
|
width calc(100% - 120px);
|
.dialog-footer
|
margin-top 60px;
|
display block;
|
width 100%;
|
text-align center;
|
</style>
|
