<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="eventType">
|
<el-select
|
filterable
|
v-model="form.eventType"
|
placeholder="请选择事件类型"
|
@change="(value) => changeType(value, 1)"
|
>
|
<el-option
|
v-for="item in eventTypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="动作类型" prop="actionType">
|
<el-select
|
filterable
|
v-model="form.actionType"
|
placeholder="请选择动作类型"
|
@change="(value) => changeType(value, 2)"
|
>
|
<el-option
|
v-for="item in actionTypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="联系人姓名" prop="contactName">
|
<el-input v-model="form.contactName" placeholder="请填写"></el-input>
|
</el-form-item>
|
<el-form-item label="与借款人关系" prop="borrowerRelation">
|
<el-input
|
v-model="form.borrowerRelation"
|
placeholder="请填写"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="沟通工具" prop="communicateTool">
|
<el-select
|
filterable
|
v-model="form.communicateTool"
|
placeholder="请选择沟通工具"
|
@change="(value) => changeType(value, 3)"
|
>
|
<el-option
|
v-for="item in communicateToolList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="沟通时间" prop="communicateDate">
|
<el-date-picker
|
:value="form.communicateDate"
|
@input="startTimeHandle($event)"
|
:placeholder="'请选择'"
|
type="datetime"
|
format="yyyy/MM/dd HH:mm:ss"
|
value-format="yyyy/MM/dd HH:mm:ss"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="联系号码" prop="contactNo">
|
<el-input v-model="form.contactNo" placeholder="请填写"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="事件备注"
|
class="content-input"
|
style="width: 100%"
|
prop="memo"
|
>
|
<el-input
|
:rows="3"
|
type="textarea"
|
placeholder="备注信息"
|
v-model="form.memo"
|
style="width: 1000px"
|
></el-input>
|
</el-form-item>
|
</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 {
|
addCaseEventDebtCollection,
|
getDictionaryList,
|
queryAcctLoan,
|
} from "@comprehensive/serve/public";
|
export default {
|
components: {},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: false,
|
},
|
},
|
data() {
|
let validatePhone = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("手机号不能为空！"));
|
}
|
//使用正则表达式进行验证手机号码
|
if (!/^1[3456789]\d{9}$/.test(value)) {
|
callback(new Error("手机号不正确！"));
|
}
|
callback();
|
};
|
return {
|
form: {
|
eventType: "",
|
actionType: "",
|
contactName: "",
|
borrowerRelation: "本人",
|
communicateTool: "",
|
communicateDate: this.dayjs(new Date()).format("YYYY/MM/DD HH:mm:ss"),
|
contactNo: "",
|
memo: "",
|
},
|
rules: {
|
eventType: [
|
{ required: true, message: "请选择事件类型", trigger: "change" },
|
],
|
actionType: [
|
{ required: true, message: "请选择动作类型", trigger: "change" },
|
],
|
contactName: [
|
{ required: true, message: "请填写联系人姓名", trigger: "change" },
|
],
|
borrowerRelation: [
|
{ required: true, message: "请填写与借款人关系", trigger: "change" },
|
],
|
communicateTool: [
|
{ required: true, message: "请选择沟通工具", trigger: "change" },
|
],
|
communicateDate: [
|
{ required: true, message: "请选择沟通时间", trigger: "change" },
|
],
|
contactNo: [
|
{ validator: validatePhone, trigger: "blur", required: true },
|
],
|
memo: [{ required: false }],
|
},
|
personInfo: {}, //借据信息
|
submitLoading: false,
|
eventTypeList: [], //事件类型
|
actionTypeList: [], //动作类型
|
communicateToolList: [], //沟通工具
|
};
|
},
|
mounted() {
|
this.requestGetDictionaryList();
|
this.requestQueryAcctLoan();
|
},
|
watch: {
|
dialogVisible: {
|
handler(newVal) {
|
|
if (newVal) {
|
console.log('this.personInfo',this.personInfo.customerName.value,this.personInfo.phone.value)
|
this.form = {
|
eventType: "",
|
actionType: "",
|
contactName: this.personInfo.customerName.value,
|
borrowerRelation: "本人",
|
communicateTool: "",
|
communicateDate: this.dayjs(new Date()).format(
|
"YYYY/MM/DD HH:mm:ss"
|
),
|
contactNo: this.personInfo.phone.value,
|
memo: "",
|
};
|
this.requestGetDictionaryList()
|
} else {
|
this.form = {
|
eventType: "",
|
actionType: "",
|
contactName: "",
|
borrowerRelation: "本人",
|
communicateTool: "",
|
communicateDate: "",
|
contactNo: "",
|
memo: "",
|
};
|
}
|
},
|
},
|
},
|
methods: {
|
async requestGetDictionaryList() {
|
//事件类型
|
const respEventTypeList = await getDictionaryList({
|
codeNo: "CASE_EVENT_TYPE",
|
});
|
this.eventTypeList = respEventTypeList.result;
|
this.form.eventType = respEventTypeList.result[0].itemno;
|
// 动作类型
|
const respActionTypeList = await getDictionaryList({
|
codeNo: "CASE_ACTION_TYPE",
|
});
|
this.actionTypeList = respActionTypeList.result;
|
this.form.actionType = respActionTypeList.result[0].itemno;
|
// 沟通工具
|
const respCommunicateToolList = await getDictionaryList({
|
codeNo: "CASE_COMMUNICATE_TOOL",
|
});
|
this.communicateToolList = respCommunicateToolList.result;
|
this.form.communicateTool = respCommunicateToolList.result[0].itemno;
|
},
|
async requestQueryAcctLoan() {
|
if (this.serialNo) {
|
const res = await queryAcctLoan({
|
serialno: this.serialNo,
|
});
|
this.loading = false;
|
const { result } = res;
|
this.personInfo = result;
|
}
|
},
|
changeType(itemno, step) {
|
switch (step) {
|
case 1:
|
this.form.eventType = itemno;
|
break;
|
case 2:
|
this.form.actionType = itemno;
|
break;
|
case 3:
|
this.form.communicateTool = itemno;
|
break;
|
}
|
},
|
|
startTimeHandle(val) {
|
this.form.communicateDate = val;
|
},
|
//重置数据
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
},
|
//关闭窗口
|
handleClose(done) {
|
this.resetForm("inputForm");
|
this.$emit("close");
|
},
|
//提交催收记录
|
async submitForm(formName) {
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
this.submitLoading = true;
|
const resp = await addCaseEventDebtCollection({
|
loanId: this.personInfo.serialNo.value,
|
...this.form,
|
});
|
this.submitLoading = false;
|
if (resp.code == "00") {
|
this.resetForm("inputForm");
|
this.$emit("succ");
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
},
|
};
|
</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>
|
