<template>
<div class="eibs-tab">
<div :class="model.cfagit.recgrp.vrf.length > 1 ? 'vrf-wrap' : 'vrf-wrap1'" v-if="model.cfagit.recgrp.vrf && model.cfagit.recgrp.vrf.length">
<div class="vrf-left div-tags" v-if="model.cfagit.recgrp.vrf.length > 1">
<div class="vrf-item" v-for="(item, index) in model.cfagit.recgrp.vrf" :key="index" @click="handleActive(index)" :class="[curActive === index ? 'active-tag' : '']">
履约信息{{ index + 1 }}
</div>
</div>
<div :class="model.cfagit.recgrp.vrf.length > 1 ? 'vrf-right' : 'vrf-right1'">
<c-col :span="24">
<!-- ==================================左边-外债编号================================ -->
<c-col :span="12" style="padding-right: 20px">
<c-col :span="24">
<el-form-item label="对外担保编号" :prop="`cfagit.recgrp.vrf.${curActive}.exguarancode`">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].exguarancode" disabled maxlength="28" placeholder="请输入对外担保编号" ></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="履约编号" :prop="`cfagit.recgrp.vrf.${curActive}.complianceno`">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].complianceno" disabled maxlength="4" placeholder="请输入履约编号" ></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="操作类型" :prop="`cfagit.recgrp.vrf.${curActive}.actiontype`">
<c-select v-model="model.cfagit.recgrp.vrf[curActive].actiontype" disabled style="width: 100%" placeholder="请选择操作类型" dbCode="action" @change="changeActiontype(curActive)">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="担保人代码" :prop="`cfagit.recgrp.vrf.${curActive}.guarantorcode`" :rules="[{required: model.cfagit.recgrp.vrf[curActive].guarantorcode ? false : true, message: '必输项',trigger: ['blur', 'change'] }]">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].guarantorcode" disabled maxlength="12" placeholder="请输入担保人代码" ></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="银行业务参号" :prop="`cfagit.recgrp.vrf.${curActive}.buscode`" :rules="[{required: model.cfagit.recgrp.vrf[curActive].buscode ? false : true, message: '必输项',trigger: ['blur', 'change'] }]">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].buscode" disabled maxlength="32" placeholder="请输入银行业务参号"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="受益人代码" :prop="`cfagit.recgrp.vrf.${curActive}.bencode`">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].bencode" disabled maxlength="32" placeholder="请输入受益人代码"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="受益人中文名称" :prop="`cfagit.recgrp.vrf.${curActive}.bename`" :rules="[{ validator: validateBename, trigger: ['blur', 'change'] }]">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].bename" disabled maxlength="90" placeholder="请输入受益人中文名称"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="受益人英文名称" :prop="`cfagit.recgrp.vrf.${curActive}.benamen`">
<c-input v-model="model.cfagit.recgrp.vrf[curActive].benamen" disabled maxlength="90" placeholder="请输入受益人英文名称"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="履约日期" :prop="`cfagit.recgrp.vrf.${curActive}.guperdate`" :rules="[{ required: model.cfagit.recgrp.vrf[curActive].guperdate ? false : true, validator: validateGuperdate, trigger: ['blur', 'change'] }]">
<c-date-picker type="date" v-model="model.cfagit.recgrp.vrf[curActive].guperdate" disabled style="width: 100%" placeholder="请选择履约日期" value-format="yyyy-MM-dd"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<c-col :span="12">
<el-form-item label="履约金额" :prop="`cfagit.recgrp.vrf.${curActive}.gupercurr`" :rules="[{ required: model.cfagit.recgrp.vrf[curActive].gupercurr ? false : true, validator: validateGupercurr, trigger: ['blur', 'change'] }]">
<c-select v-model="model.cfagit.recgrp.vrf[curActive].gupercurr" disabled maxlength="3" placeholder="请输入履约币种" dbCode="curtxt"></c-select>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="" :prop="`cfagit.recgrp.vrf.${curActive}.guperamount`" label-width="0" style="margin-left:5px;" :rules="[{ validator: validateGuperamount, trigger: ['blur', 'change'] }]">
<c-input-currency v-model="model.cfagit.recgrp.vrf[curActive].guperamount" disabled placeholder="请输入履约金额">
</c-input-currency>
</el-form-item>
</c-col>
</c-col>
<c-col :span="24">
<el-form-item label="购汇履约金额" :prop="`cfagit.recgrp.vrf.${curActive}.pguperamount`" :rules="[{ validator: validatePguperamount, trigger: ['blur', 'change'] }]">
<c-input-currency v-model="model.cfagit.recgrp.vrf[curActive].pguperamount" disabled placeholder="请输入购汇履约金额">
</c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="备注" :prop="`cfagit.recgrp.vrf.${curActive}.remark`">
<c-input type="textarea" v-model="model.cfagit.recgrp.vrf[curActive].remark" disabled maxlength="248" show-word-limit placeholder="请输入备注" :rows="5"></c-input>
</el-form-item>
</c-col>
</c-col>
<!-- ==================================右边-删除原因================================ -->
<c-col :span="12" style="padding-left: 20px">
<c-col :span="24">
<el-form-item label="删除原因" :prop="`cfagit.recgrp.vrf.${curActive}.actiondesc`" :rules="[{ validator: validateActiondesc, trigger: ['blur', 'change'] }]">
<c-input type="textarea" v-model="model.cfagit.recgrp.vrf[curActive].actiondesc" maxlength="128" show-word-limit placeholder="请输入删除原因" :rows="5" :disabled="disabledActiondesc" @change="changeActiondesc(curActive)"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="" :prop="`cfagit.recgrp.vrf.${curActive}.acp`" class="checkbox-left">
<c-checkbox true-label="X" false-label="" v-model="model.cfagit.recgrp.vrf[curActive].acp" disabled @change="changeActiondesc(curActive)">确认</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'S'">已发送</span>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'W'">待发送</span>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'D'">已撤销</span>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'G'">已删除</span>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'P'">已作废</span>
<span v-if="model.cfagit.recgrp.dcl[curActive].sta == 'E'">待修改</span>
</el-form-item>
</c-col>
</c-col>
</c-col>
</div>
</div>
</div>
</template>
<script>
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [],
data() {
return {
curActive: 0,
};
},
computed: {
disabledActiondesc() {
let actiontype = this.model.cfagit.recgrp.vrf[this.curActive].actiontype;
if(this.model.cfagit.recgrp.vrf[this.curActive].acp) {
this.model.cfagit.recgrp.vrf[this.curActive].actiondesc = '';
}
return true;
this.changeActiondesc()
}
},
methods: {
handleActive(ind) {
this.curActive = ind;
},
// default
changeActiontype(curActive) {
if(!this.model.cfagit.recgrp.vrf[curActive].actiontype) {
this.model.cfagit.recgrp.vrf[curActive].actiontype = 'A';
}
},
changeActiondesc(curActive) {
let actiontype = this.model.cfagit.recgrp.vrf[curActive].actiontype;
if(this.model.cfagit.recgrp.vrf[curActive].acp) {
this.model.cfagit.recgrp.vrf[curActive].actiondesc = '';
}
},
validateBename (rule, value, callback) {
if (!value && !this.model.cfagit.recgrp.vrf[this.curActive].benamen) {
return callback(new Error('受益人中文名称和英文名称至少填写一个！'));
}
callback();
},
validateGuperdate (rule, value, callback) {
let valuedate = this.model.cfagit.recgrp.bas.contractdate;
if(!value) {
return callback(new Error('必输项'));
}else {
if (value < valuedate) {
return callback(new Error('履约日期不能小于签约日期！'));
}
}
callback();
},
validateActiondesc (rule, value, callback) {
if(this.model.cfagit.recgrp.vrf[this.curActive].actiontype == 'D'){
if(!value) {
return callback(new Error('必输项'));
}
}
callback();
},
validatePguperamount (rule, value, callback) {
if(Number(value) < 0) {
return callback(new Error('购汇履约金额必须大于等于0！'));
}else {
if(Number(value) > Number(this.model.cfagit.recgrp.vrf[this.curActive].guperamount)) {
return callback(new Error('购汇履约金额必须小于等于履约金额！'));
}
}
callback();
},
validateGuperamount (rule, value, callback) {
if(!value) {
return callback(new Error('必输项'));
}else {
if(Number(value) < 0) {
return callback(new Error('履约金额必须大于等于0！'));
}else {
if(Number(value) > Number(this.model.cfagit.recgrp.bas.guaranamount)) {
return callback(new Error('履约金额不能大于保函金额！'));
}
}
}
callback();
},
validateGupercurr (rule, value, callback) {
if(!value) {
return callback(new Error('必输项'));
}else {
if(value != this.model.cfagit.recgrp.bas.guarancurr) {
return callback(new Error('履约币种应等于签约币种！'));
}
}
callback();
},
},
created() {},
watch: {}
};
</script>
<style scoped>
.vrf-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid #f1f1f1;
box-sizing: border-box;
border-radius: 3px;
}
.vrf-wrap1 {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-radius: 3px;
}
.vrf-left {
width: 120px;
height: 100%;
overflow: auto;
padding: 10px 0 10px 10px;
position: relative;
}
.div-tags {
padding: 0 !important;
}
.vrf-item {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.vrf-right {
width: calc(100% - 200px);
height: 100%;
border-left: 1px solid #f1f1f1;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 10px 10px 0;
}
.vrf-right1 {
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
</style>