<template>
|
<el-dialog title="新增客服事件"
|
:visible.sync="dialogVisible"
|
width="1250px"
|
:before-close="handleClose">
|
<el-form ref="inputForm"
|
:model="form"
|
:rules="rules"
|
:inline="true"
|
label-width="120px">
|
<el-form-item label="事件类型(一级)"
|
prop="region1">
|
<el-select filterable
|
v-model="form.region1"
|
placeholder="请选择事件类型(一级)"
|
@change="value => changeType(value, 1)">
|
<el-option v-for="item in typeList1"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="事件类型(二级)"
|
prop="region2">
|
<el-select filterable
|
v-model="form.region2"
|
placeholder="请选择事件类型(二级)"
|
@change="value => changeType(value, 2)">
|
<el-option v-for="(item, idx) in typeList2"
|
:key="idx"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="事件类型(三级)"
|
prop="region3">
|
<el-select filterable
|
v-model="form.region3"
|
placeholder="请选择事件类型(三级)"
|
@change="value => changeType(value, 3)">
|
<el-option v-for="(item, idx) in typeList3"
|
:key="idx"
|
:label="item.itemname"
|
:value="item.itemno"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
size="mini"
|
@click="getGradingDetailsView">分组详情</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="submit-form">
|
<el-form ref="submitForm"
|
:inline="true"
|
label-width="120px">
|
<el-col :span="7">
|
<el-form-item label="事件类型">
|
<el-input v-model="form.eventType"
|
disabled></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="事件备注"
|
class="content-input"
|
style="width: 100%;">
|
<el-input :rows="1"
|
type="textarea"
|
v-model="form.content"
|
style="width: 100%;"></el-input>
|
</el-form-item>
|
</el-col>
|
|
</el-form>
|
</div>
|
<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>
|
<GradingDetails ref="GradingDetails" type="2" />
|
|
</el-dialog>
|
</template>
|
<script>
|
import {
|
selectCustomerSubCodeList,
|
addCustomerServerEvent,
|
} from '@comprehensive/serve/public';
|
import GradingDetails from './GradingDetails'
|
export default {
|
components: {
|
GradingDetails
|
},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: true,
|
},
|
},
|
data() {
|
return {
|
form: {
|
region1: '',
|
region2: '',
|
region3: '',
|
eventType: '',
|
content: '',
|
},
|
rules: {
|
region1: [
|
{ required: true, message: '请选择活动区域', trigger: 'change' },
|
],
|
},
|
typeList1: [],
|
typeList2: [],
|
typeList3: [],
|
};
|
},
|
mounted() {
|
this.selectCustomerSubCodeList('', (list) => {
|
this.typeList1 = list;
|
});
|
},
|
methods: {
|
// 事件类型
|
async selectCustomerSubCodeList(bankNo = '', func) {
|
const res = await selectCustomerSubCodeList({
|
codeNo: 'CustomerServiceEvent',
|
bankNo,
|
});
|
if (res.code == '00') {
|
typeof func === 'function' && func(res.result);
|
}
|
},
|
changeType(itemno, step) {
|
switch (step) {
|
case 1:
|
this.selectCustomerSubCodeList(itemno, (list) => {
|
this.typeList2 = list;
|
});
|
var obj = this.typeList1.find((item) => {
|
return item.itemno == itemno;
|
});
|
|
this.form.eventType = obj.itemname;
|
this.form.region2 = '';
|
this.form.region3 = '';
|
break;
|
case 2:
|
this.selectCustomerSubCodeList(itemno, (list) => {
|
this.typeList3 = list;
|
});
|
var obj = this.typeList2.find((item) => {
|
return item.itemno == itemno;
|
});
|
|
this.form.eventType = obj.itemname;
|
this.form.region3 = '';
|
break;
|
|
default:
|
var obj = this.typeList3.find((item) => {
|
return item.itemno == itemno;
|
});
|
this.form.eventType = obj.itemname;
|
break;
|
}
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
const { form, content } = this;
|
const eventType = form.region3 || form.region2 || form.region1;
|
const res = await addCustomerServerEvent({
|
busiNo: this.serialNo, // 申请编号,
|
eventType: form.eventType, // 事件类型,
|
content: form.content, // 事件备注
|
});
|
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');
|
},
|
getGradingDetailsView() {
|
this.$refs.GradingDetails.open()
|
}
|
},
|
};
|
</script>
|
<style lang="stylus" scoped>
|
.submit-form
|
margin-top 20px;
|
padding-top 40px;
|
border-top 1px solid #eee;
|
.content-input /deep/ .el-form-item__content
|
width calc(100% - 120px);
|
/deep/.el-input input
|
padding 4px 15px;
|
height auto;
|
.dialog-footer
|
margin-top 60px;
|
display block;
|
width 100%;
|
text-align center;
|
</style>
|
