<template>
<div class="eibs-tab">
<div :class="model.recgrp.dcl.length > 1 ? 'dcl-wrap' : 'dcl-wrap1'"
v-if="model.recgrp.dcl && model.recgrp.dcl.length">
<div class="dcl-left div-tags" v-if="model.recgrp.dcl.length > 1">
<div :class="[curActive === index ? 'active-tag' : '']" :key="index" @click="handleActive(index)"
class="dcl-item" v-for="(item, index) in model.recgrp.dcl">
国内外汇贷款-变动信息({{ index + 1 }})
</div>
</div>
<div class="eibs-tab">
<!-- 第一行 -->
<c-col :span="24">
<c-col :span="12" style="padding-right: 20px">
<c-col :span="24">
<el-form-item label="国内外汇贷款编号" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.dofoexlocode`"
style="width: 100%">
<c-input disabled placeholder="请输入国内外汇贷款编号"
v-model="model.recgrp.dcl[curActive].dofoexlocode"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="操作类型" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.actiontype`" style="width: 100%">
<c-select clearable dbCode="action" disabled
placeholder="请选择操作类型"
style="width: 100%" v-model="model.recgrp.dcl[curActive].actiontype">
</c-select>
</el-form-item>
</c-col>
</c-col>
<c-col :span="12" style="padding-left: 20px">
<c-col :span="24">
<el-form-item label="删除原因" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.actiondesc`" style="width: 100%">
<c-input :disabled="disflgobj.actiondesc == 'X'||(model.recgrp.dcl[curActive].actiontype!=null && model.recgrp.dcl[curActive].actiontype!='D')" maxlength="128" placeholder="请输入删除原因"
type="textarea" :rows="4"
v-model="model.recgrp.dcl[curActive].actiondesc"/>
</el-form-item>
</c-col>
</c-col>
</c-col>
<c-col :span="24">
<!-- 第二行开始 左侧列 -->
<c-col :span="12" style="padding-right: 20px">
<c-col :span="24">
<el-form-item label="银行业务参号" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.buscode`">
<c-input :disabled="disflgobj.buscode == 'X'" placeholder="请输入银行业务参号" maxlength="32"
v-model="model.recgrp.dcl[curActive].buscode"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="变动编号" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.changeno`">
<c-input disabled placeholder="请输入变动编号"
v-model="model.recgrp.dcl[curActive].changeno"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="变动日期" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.changedate`">
<c-date-picker :disabled="disflgobj.changedate == 'X'" placeholder="请选择变动日期" style="width: 100%" type="date"
v-model="model.recgrp.dcl[curActive].changedate"
value-format="yyyy-MM-dd"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="期初余额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.loanopenbalan`">
<c-input-currency :disabled="disflgobj.loanopenbalan == 'X'" clearable placeholder="请输入期初余额" :maxlength="23"
style="width: 100%" v-model="model.recgrp.dcl[curActive].loanopenbalan">
</c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="提款币种" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.withcurrence`">
<c-select dbCode="curtxt" :disabled="disflgobj.withcurrence == 'X'" placeholder="请选择提款币种"
v-model="model.recgrp.dcl[curActive].withcurrence"></c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="提款金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.withamount`">
<c-input-currency placeholder="请输入提款金额" :disabled="disflgobj.withamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].withamount"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="期末余额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.endbalan`">
<c-input-currency :disabled="disflgobj.endbalan == 'X'" placeholder="请输入期末余额" :maxlength="23"
v-model="model.recgrp.dcl[curActive].endbalan"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="备注" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.remark`">
<c-input placeholder="请输入备注" type="textarea" :disabled="disflgobj.remark == 'X'" maxlength="248"
v-model="model.recgrp.dcl[curActive].remark"/>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<el-form-item>
<c-checkbox v-model="model.recgrp.dcl[curActive].acp" true-label="X" false-label="" disabled>确认</c-checkbox>
</el-form-item>
</c-col> -->
</c-col>
<!-- 第二行开始 右侧列 -->
<c-col :span="12" style="padding-left: 20px">
<c-col :span="24">
<el-form-item label="结汇金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.settamount`">
<c-input-currency placeholder="请输入结汇金额" :disabled="disflgobj.settamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].settamount"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24" class="custom-box-wrap">
<div class="box-1">
<div style="width: 100%">
<el-form-item label="资金用途" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.useofunds`">
<c-select dbCode="dofuse" placeholder="请选择资金用途" :disabled="disflgobj.useofunds == 'X'" isShowKeyAndLabel
v-model="model.recgrp.dcl[curActive].useofunds"></c-select>
</el-form-item>
</div>
</div>
<div class="box-2">
<c-checkbox
disabled
true-label=""
false-label="X"
class="checkbox-left"
>确认</c-checkbox>
</div>
</c-col>
<c-col :span="24">
<el-form-item label="还本币种" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.princurr`">
<c-select dbCode="curtxt" placeholder="请选择还本币种" :disabled="disflgobj.princurr == 'X'"
v-model="model.recgrp.dcl[curActive].princurr"></c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="还本金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.repayamount`">
<c-input-currency placeholder="请输入还本金额" :disabled="disflgobj.repayamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].repayamount"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="购汇还本金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.prepayamount`">
<c-input-currency placeholder="请输入购汇还本金额" :disabled="disflgobj.prepayamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].prepayamount"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="付息币种" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.inpaycurr`">
<c-select dbCode="curtxt" placeholder="请选择付息币种" :disabled="disflgobj.inpaycurr == 'X'"
v-model="model.recgrp.dcl[curActive].inpaycurr"></c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="付息金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.inpayamount`">
<c-input-currency placeholder="请输入付息金额" :disabled="disflgobj.inpayamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].inpayamount"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="购汇付息金额" :prop="`cfabop.cfaeca.recgrp.dcl.${curActive}.pinpayamount`">
<c-input-currency placeholder="请输入购汇付息金额" :disabled="disflgobj.pinpayamount == 'X'" :maxlength="23"
v-model="model.recgrp.dcl[curActive].pinpayamount"></c-input-currency>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<el-form-item>
{{model.recgrp.dcl[curActive].sta}}
</el-form-item>
</c-col> -->
</c-col>
</c-col>
</div>
</div>
</div>
</template>
<script>
import event from "../event";
export default {
mixins: [event],
inject: ["root"],
props: {
model: {
type: Object,
default: undefined,
},
codes: {},
},
data() {
return {
curActive: 0,
allitem: ["actiondesc","buscode","changedate","loanopenbalan","withcurrence","withamount","endbalan","remark","settamount","useofunds","princurr","repayamount","prepayamount","inpaycurr","inpayamount","pinpayamount"],
enableitem: ["withcurrence","withamount","settamount","useofunds","princurr","repayamount","prepayamount","inpaycurr","inpayamount","pinpayamount","remark"],
disflgobj: {},
};
},
mounted() {
//初始化字段是否可编辑
this.disableByItem();
console.log(this.disflgobj);
},
computed: {},
methods: {
handleActive(ind) {
this.curActive = ind;
},
//需要控制字段是否可编辑
disableByItem(){
//遍历字段名数组，设置可编辑标志 X
this.allitem.forEach((filedname,index) => {
let disflg = 'X';
let trnname = this.root.trnName.slice(0,6);
let trntyp = trnname.slice(0,3);
let dclflg = this.root.model.cfabop.cfaeca.dclflg;
//01 维护交易 新增 修改 字段均需要可编辑
if(trnname === 'ecaadd' || (trnname === 'ecaadd')){
disflg = 'N';
}
//02 签约勾选的前提下 业务交易部分字段可编辑
if(dclflg ==='X' && trntyp !== 'eca' && this.enableitem.includes(filedname)){
disflg = 'N';
}
//03 特殊化处理删除原因 只有删除交易下才可能允许编辑
if(filedname === 'actiondesc'){
if(trnname === 'ecadel' && dclflg ==='X'){
disflg = 'N';
}
}
// 标志赋值
this.$set(this.disflgobj,filedname,disflg);
});
},
},
created() {
},
watch: {}
};
</script>
<style scoped>
.dcl-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;
}
.dcl-wrap1 {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-radius: 3px;
}
.dcl-left {
width: 120px;
height: 100%;
overflow: auto;
padding: 10px 0 10px 10px;
position: relative;
background-color: rgba(102, 83, 242, 0.1);
}
.div-tags {
padding: 0 !important;
}
.dcl-item {
width: 100%;
height: 60px;
text-align: center;
line-height: 25px;
cursor: pointer;
padding: 5px 5px;
border: 1px solid #f1f1f1;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
.active-tag {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #ffffff;
border: 1px solid #f1f1f1;
}
.dcl-right {
width: calc(100% - 120px);
height: 100%;
border-left: 1px solid #f1f1f1;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 10px 10px 0;
}
.dcl-right1 {
height: 100%;
box-sizing: border-box;
}
</style>