427 lines
22 KiB
Vue
427 lines
22 KiB
Vue
<template>
|
||
<div class="case-repayment-certificate">
|
||
<div class="mb-16 flex-row justify-content-between">
|
||
<span class="f-weight500 f18">还款计划</span>
|
||
<span class="cursor-pointer" v-if="planList.length == 0" @click="updateFlag = true"><i class="el-icon-plus"></i> 添加还款计划</span>
|
||
<span class="cursor-pointer" v-else @click="UpdatePlanClick"><i class="el-icon-plus"></i> 编辑还款计划</span>
|
||
</div>
|
||
|
||
<div v-if="planList.length >0 && !updateFlag" class="case-detail-des flex-column mb-16 p-16 border-radius-8">
|
||
<div class="flex-column justify-content-between">
|
||
<el-form ref="ruleFormRepayment"
|
||
:model="repaymentObj"
|
||
:rules="rulesClientRepayment"
|
||
label-width="130px">
|
||
<el-form-item label="还款方式" prop="type">
|
||
<el-select v-model="repaymentObj.type" class="width100" disabled
|
||
placeholder="请选择还款方式" size="small">
|
||
<el-option
|
||
v-for="(item,index) in RepaymentOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="还款金额" prop="totalAmount">
|
||
<el-input class="inputpaddingtop2" disabled
|
||
size="small"
|
||
placeholder="请输入还款金额"
|
||
v-model="repaymentObj.totalAmount"
|
||
@input="inputChange($event)">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合，部分先还加分期 OTHER :其他 -->
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount">
|
||
<el-input class="inputpaddingtop2" disabled
|
||
size="small"
|
||
placeholder="请输入分期前偿还金额"
|
||
v-model="repaymentObj.partAmount"
|
||
@input="inputChange($event)">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate">
|
||
<el-date-picker class="width100" size="small" disabled
|
||
v-model="repaymentObj.partDate"
|
||
type="date"
|
||
placeholder="选择先还日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
disabled
|
||
placeholder="分期部分金额"
|
||
v-model="repaymentObj.moneyAmount">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数" prop="stagesNum">
|
||
<el-input
|
||
size="small" disabled
|
||
placeholder="请输入分期期数"
|
||
v-model="repaymentObj.stagesNum"
|
||
@input="inputChange($event)">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款金额" prop="stagesAmount">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
disabled
|
||
placeholder="每期还款金额"
|
||
v-model="repaymentObj.stagesAmount">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款日期" prop="stagesDay"
|
||
:rules="[
|
||
{ required: true, message: '请选择每期还款日期', trigger: 'change',},
|
||
]">
|
||
<el-select v-model="repaymentObj.stagesDay" class="width100" disabled
|
||
placeholder="请选择每期还款日期" size="small">
|
||
<el-option
|
||
v-for="(item, index) in 31"
|
||
:key="index"
|
||
:label="(index+1)+'日'"
|
||
:value="(index+1)">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="还款截止日期" prop="paybackDate">
|
||
<el-date-picker class="width100" size="small" disabled
|
||
v-model="repaymentObj.paybackDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="备注说明" prop="remark">
|
||
<el-input disabled
|
||
size="small"
|
||
clearable
|
||
placeholder="请输入备注说明"
|
||
v-model="repaymentObj.remark">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div v-if="updateFlag" class="case-detail-des flex-column mb-16 p-16 border-radius-8">
|
||
<div class="flex-column justify-content-between">
|
||
<el-form ref="ruleFormRepayment"
|
||
:model="repaymentObj"
|
||
:rules="rulesClientRepayment"
|
||
label-width="130px">
|
||
|
||
<el-form-item label="还款方式" prop="type">
|
||
<el-select v-model="repaymentObj.type" class="width100"
|
||
placeholder="请选择还款方式" size="small">
|
||
<el-option
|
||
v-for="(item,index) in RepaymentOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="还款金额" prop="totalAmount">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
placeholder="请输入还款金额"
|
||
v-model="repaymentObj.totalAmount"
|
||
@input="inputChange($event)">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合，部分先还加分期 OTHER :其他 -->
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount"
|
||
:rules="[
|
||
{ required: true, validator: validatePass2, trigger: 'change'},
|
||
]">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
placeholder="请输入分期前偿还金额"
|
||
v-model="repaymentObj.partAmount"
|
||
@input="inputChange($event)">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate"
|
||
:rules="[
|
||
{ required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
||
]">
|
||
<el-date-picker class="width100" size="small"
|
||
v-model="repaymentObj.partDate"
|
||
type="date"
|
||
placeholder="选择先还日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
disabled
|
||
placeholder="分期部分金额"
|
||
v-model="repaymentObj.moneyAmount">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数" prop="stagesNum"
|
||
:rules="[
|
||
{ required: true, message: '请输入分期期数', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
||
]">
|
||
<el-input
|
||
size="small"
|
||
placeholder="请输入分期期数"
|
||
v-model="repaymentObj.stagesNum"
|
||
@input="inputChange($event)">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款金额" prop="stagesAmount">
|
||
<el-input class="inputpaddingtop2"
|
||
size="small"
|
||
disabled
|
||
placeholder="每期还款金额"
|
||
v-model="repaymentObj.stagesAmount">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="每期还款日期" prop="stagesDay">
|
||
<el-select v-model="repaymentObj.stagesDay" class="width100"
|
||
placeholder="请选择每期还款日期" size="small">
|
||
<el-option
|
||
v-for="(item, index) in 31"
|
||
:key="index"
|
||
:label="(index+1)+'日'"
|
||
:value="(index+1)">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="还款截止日期" prop="paybackDate"
|
||
:rules="[
|
||
{ required: true, message: '请选择还款截止日期', trigger: 'change',},
|
||
{ required: true, validator: validatePass3, trigger: 'change',},
|
||
]">
|
||
<el-date-picker class="width100" size="small"
|
||
v-model="repaymentObj.paybackDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="备注说明" prop="remark">
|
||
<el-input
|
||
size="small"
|
||
clearable
|
||
placeholder="请输入备注说明"
|
||
v-model="repaymentObj.remark">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-button @click="cancelPlanClick" size="small">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmitRepayment()" size="small">保存</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
export default {
|
||
components: {
|
||
},
|
||
props: {
|
||
eventDialog: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
|
||
var validatePass2 = (rule, value, callback) => {
|
||
if (value === '') {
|
||
callback(new Error('请输入分期前偿还金额'));
|
||
} else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)) {
|
||
callback(new Error('只能输入2位小数金额'));
|
||
} else if (value*1 > this.repaymentObj.totalAmount*1) {
|
||
callback(new Error('分期前偿还金额不能大于还款金额!'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
var validatePass3 = (rule, value, callback) => {
|
||
if (value === '') {
|
||
callback(new Error('请选择还款截止日期'));
|
||
} else if (this.repaymentObj.partDate != '' && this.repaymentObj.partDate != undefined) {
|
||
let date1 = new Date(value);//还款截止日期
|
||
let date2 = new Date(this.repaymentObj.partDate);//分期前偿还日期
|
||
let timestamp1 = date1.getTime();
|
||
let timestamp2 = date2.getTime();
|
||
if(timestamp2 > timestamp1)
|
||
{
|
||
callback(new Error('还款截止日期不能小于分期前偿还日期!'));
|
||
}
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
pickerOptions: {
|
||
disabledDate(v) {
|
||
return v.getTime() < new Date().getTime() - 86400000;// - 86400000是否包括当天
|
||
}
|
||
},
|
||
updateFlag:false,
|
||
repaymentObj:{type:'ALL'},
|
||
RepaymentOptions:[{label:'一次性还款',value:'ALL'},{label:'全部分期',value:'STAGES'},{label:'部分先还加分期',value:'MIX'},{label:'其他',value:'OTHER'}],
|
||
rulesClientRepayment:{
|
||
type: [
|
||
{ required: true, message: '请选择还款方式', trigger: 'change',},
|
||
],
|
||
totalAmount: [
|
||
{ required: true, message: '请输入还款金额', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
||
],
|
||
|
||
// paybackDate: [
|
||
// { required: true, validator: validatePass3, trigger: 'change',},
|
||
// ],
|
||
// stagesDay: [
|
||
// { required: true, message: '请选择每期还款日期', trigger: 'change',},
|
||
// ],
|
||
|
||
// partAmount: [
|
||
// { required: true, validator: validatePass2, trigger: 'change'},
|
||
// ],
|
||
// partDate: [
|
||
// { required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
||
// ],
|
||
// stagesNum: [
|
||
// { required: true, message: '请输入分期期数', trigger: 'change',},
|
||
// { pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
||
// ],
|
||
},
|
||
planList:[],
|
||
oldrepaymentObj:{},
|
||
|
||
};
|
||
},
|
||
mounted () {
|
||
this.getplanlist()
|
||
},
|
||
methods: {
|
||
validatePass2(rule, value, callback){
|
||
if (value === '') {
|
||
callback(new Error('请输入分期前偿还金额'));
|
||
} else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)) {
|
||
callback(new Error('只能输入2位小数金额'));
|
||
} else if (value*1 > this.repaymentObj.totalAmount*1) {
|
||
callback(new Error('分期前偿还金额不能大于还款金额!'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
validatePass3 (rule, value, callback){
|
||
if (value === '') {
|
||
callback(new Error('请选择还款截止日期'));
|
||
} else if (this.repaymentObj.partDate != '' && this.repaymentObj.partDate != undefined) {
|
||
let date1 = new Date(value);//还款截止日期
|
||
let date2 = new Date(this.repaymentObj.partDate);//分期前偿还日期
|
||
let timestamp1 = date1.getTime();
|
||
let timestamp2 = date2.getTime();
|
||
if(timestamp2 > timestamp1)
|
||
{
|
||
callback(new Error('还款截止日期不能小于分期前偿还日期!'));
|
||
}
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
handleSubmitRepayment(){
|
||
console.log(1,'handleSubmitRepayment')
|
||
this.$refs.ruleFormRepayment.validate((valid) => {
|
||
if (valid){
|
||
|
||
console.log(2,'handleSubmitRepayment')
|
||
this.repaymentObj.caseId = this.eventDialog.caseId
|
||
api.getcase_payback_save(this.repaymentObj).then(res => {
|
||
if(!res.code){
|
||
this.updateFlag = false
|
||
this.getplanlist()
|
||
}
|
||
})
|
||
}
|
||
else{
|
||
console.log(valid,'valid')
|
||
}
|
||
})
|
||
},
|
||
getplanlist(){
|
||
api.getcase_payback_planlist({caseId:this.eventDialog.caseId}).then(res => {
|
||
if(!res.code){
|
||
this.planList = res
|
||
if(this.planList.length > 0 ){this.repaymentObj = this.planList[0]}
|
||
}
|
||
})
|
||
},
|
||
// 输入还款金额 输入分期期数
|
||
inputChange(){
|
||
if(this.repaymentObj.type == 'STAGES')
|
||
{
|
||
if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
|
||
{
|
||
this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
|
||
}
|
||
}
|
||
|
||
if(this.repaymentObj.type == 'MIX')
|
||
{
|
||
if(this.repaymentObj.totalAmount !='' &&this.repaymentObj.stagesNum !='' && this.repaymentObj.totalAmount !=undefined &&this.repaymentObj.stagesNum !=undefined)
|
||
{
|
||
this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount*1 - this.repaymentObj.partAmount*1)/(this.repaymentObj.stagesNum*1)).toFixed(2)
|
||
}
|
||
}
|
||
},
|
||
// 编辑
|
||
UpdatePlanClick()
|
||
{
|
||
this.updateFlag = true
|
||
this.oldrepaymentObj = JSON.parse(JSON.stringify(this.repaymentObj))
|
||
},
|
||
// 取消保存，还原数据
|
||
cancelPlanClick(){
|
||
this.updateFlag = false
|
||
this.repaymentObj = JSON.parse(JSON.stringify(this.oldrepaymentObj))
|
||
},
|
||
//
|
||
handleClose() {
|
||
this.$emit('update:eventTraDialog', null)
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.case-repayment-certificate{
|
||
.case-detail-des{
|
||
border:solid 1px #E5E6EB;
|
||
.el-form-item{ margin-bottom: 12px;}
|
||
.inputpaddingtop2{padding-top:3px}
|
||
}
|
||
}
|
||
</style>
|