329 lines
17 KiB
Vue
329 lines
17 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="updateFlag = true"><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">
|
||
</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">
|
||
<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">
|
||
</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">
|
||
<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">
|
||
<el-date-picker class="width100" size="small"
|
||
v-model="repaymentObj.partDate"
|
||
type="date"
|
||
placeholder="选择先还日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd">
|
||
</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"
|
||
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">
|
||
<el-date-picker class="width100" size="small"
|
||
v-model="repaymentObj.paybackDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd">
|
||
</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="updateFlag = false" 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() {
|
||
return {
|
||
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, message: '请选择还款截止日期', trigger: 'change',},
|
||
],
|
||
stagesDay: [
|
||
{ required: true, message: '请选择每期还款日期', trigger: 'change',},
|
||
],
|
||
partAmount: [
|
||
{ required: true, message: '请输入分期前偿还金额 ', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
|
||
],
|
||
partDate: [
|
||
{ required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
||
],
|
||
stagesNum: [
|
||
{ required: true, message: '请输入分期期数', trigger: 'change',},
|
||
{ pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
||
],
|
||
},
|
||
planList:[]
|
||
|
||
};
|
||
},
|
||
mounted () {
|
||
this.getplanlist()
|
||
},
|
||
methods: {
|
||
handleSubmitRepayment(){
|
||
this.$refs.ruleFormRepayment.validate((valid) => {
|
||
if (valid){
|
||
this.repaymentObj.caseId = this.eventDialog.caseId
|
||
api.getcase_payback_save(this.repaymentObj).then(res => {
|
||
if(!res.code){
|
||
this.updateFlag = false
|
||
this.getplanlist()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
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)
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
|
||
//
|
||
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>
|