Dclpp.vue

<template>
    <div class="eibs-tab">
        <div v-if="model.recgrp.dcl && model.recgrp.dcl.length">
                <!-- 第一行 -->
                <c-col :span="24">
                    <c-col :span="12" style="padding-right: 20px">
                        <c-col :span="24">
                            <el-form-item label="国内外汇贷款编号" :prop="`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="`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="`recgrp.dcl.${curActive}.actiondesc`" style="width: 100%">
                                <c-input disabled 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="`recgrp.dcl.${curActive}.buscode`">
                                <c-input :disabled="disflg == '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="`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="`recgrp.dcl.${curActive}.changedate`">
                                <c-date-picker :disabled="disflg == '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="`recgrp.dcl.${curActive}.loanopenbalan`">
                                <c-input-currency :disabled="disflg == '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="`recgrp.dcl.${curActive}.withcurrence`">
                                <c-select :disabled="disflg == 'X'" dbCode="curtxt"  placeholder="请选择提款币种"
                                          v-model="model.recgrp.dcl[curActive].withcurrence"></c-select>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item label="提款金额" :prop="`recgrp.dcl.${curActive}.withamount`">
                                <c-input-currency :disabled="disflg == 'X'" placeholder="请输入提款金额"  :maxlength="23" :currency="model.recgrp.dcl[curActive].withcurrence"
                                                  v-model="model.recgrp.dcl[curActive].withamount"></c-input-currency>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item label="期末余额" :prop="`recgrp.dcl.${curActive}.endbalan`">
                                <c-input-currency :disabled="disflg == 'X'"  placeholder="请输入期末余额" :maxlength="23" :currency="model.recgrp.dcl[curActive].withcurrence"
                                                  v-model="model.recgrp.dcl[curActive].endbalan"></c-input-currency>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item label="备注" :prop="`recgrp.dcl.${curActive}.remark`">
                                <c-input :disabled="disflg == 'X'" placeholder="请输入备注" type="textarea"  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="`recgrp.dcl.${curActive}.settamount`">
                                <c-input-currency :disabled="disflg == 'X'" placeholder="请输入结汇金额"  :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="`recgrp.dcl.${curActive}.useofunds`">
                                <c-select :disabled="disflg == 'X'" dbCode="dofuse" placeholder="请选择资金用途"  isShowKeyAndLabel
                                          v-model="model.recgrp.dcl[curActive].useofunds"></c-select>
                            </el-form-item>
                             </div>
                         </div>

                         <div class="box-2">
                           <c-checkbox
                            :disabled="model.cfabut.dclflg !== 'X'|| model.recgrp.dcl[curActive].sta == 'G' " 
                            @change="actChange" 
                            true-label="X"
                            false-label=""
                            class="checkbox-left"
                            v-model="model.recgrp.dcl[curActive].acp"
                           >确认</c-checkbox>
                          </div>

                        </c-col>

                        <c-col :span="24">
                            <el-form-item label="还本币种" :prop="`recgrp.dcl.${curActive}.princurr`">
                                <c-select :disabled="disflg == 'X'" dbCode="curtxt" placeholder="请选择还本币种" 
                                          v-model="model.recgrp.dcl[curActive].princurr"></c-select>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item label="还本金额" :prop="`recgrp.dcl.${curActive}.repayamount`">
                                <c-input-currency :disabled="disflg == 'X'" placeholder="请输入还本金额"  :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="`recgrp.dcl.${curActive}.prepayamount`">
                                <c-input-currency :disabled="disflg == 'X'"  placeholder="请输入购汇还本金额"  :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="`recgrp.dcl.${curActive}.inpaycurr`">
                                <c-select :disabled="disflg == 'X'" dbCode="curtxt" placeholder="请选择付息币种" 
                                          v-model="model.recgrp.dcl[curActive].inpaycurr"></c-select>
                            </el-form-item>
                        </c-col>


                        <c-col :span="24">
                            <el-form-item label="付息金额" :prop="`recgrp.dcl.${curActive}.inpayamount`">
                                <c-input-currency :disabled="disflg == 'X'" placeholder="请输入付息金额"  :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="`recgrp.dcl.${curActive}.pinpayamount`">
                                <c-input-currency :disabled="disflg == 'X'" placeholder="请输入购汇付息金额"  :maxlength="23"
                                                  v-model="model.recgrp.dcl[curActive].pinpayamount"></c-input-currency>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24" style="padding-right: 0px">
                                <el-form-item>
                                    <template slot-scope="scope">
						                {{getLabel(dbCodes.cfastalabel,model.recgrp.dcl[curActive].sta)}}
					                </template>
                                </el-form-item>
                        </c-col>

                    </c-col>

                </c-col>

            </div>
    </div>
</template>
<script>
    import CommonEvent from '../../common/event/CommonEvent'

    export default {
        inject: ["root"],
        mixins: [CommonEvent],
        props: {
            model: {
                type: Object,
                default: undefined,
            },
            codes: {},
            curActive: {
                type: Number,
                default: 0
            },
            transName: {
              type: String,
              default: '',
            },
            
        },
        data() {
            return {
                disflg:'',
                dbCodes:{
				       cfastalabel: [],
			       },
            };
        },
        mounted() {
            this.getdbCode('cfasta','cfastalabel')
        },
        computed: {},
        methods: {
            handleActive(ind) {
                this.curActive = ind;
            },

            //联动控制
            actChange(){
                if(this.model.recgrp.dcl[this.curActive].acp == 'X'){
                    this.disflg = '';
                    let oldsta = this.model.recgrp.dcl[this.curActive].sta;
                    let oldacttyp = this.model.olddclacttyp[this.curActive];
                    let newdclacttyp = this.setCfaActiontype(this.transName,oldacttyp,oldsta,"X");
                    this.model.recgrp.dcl[this.curActive].actiontype = newdclacttyp;
                }else{
                    this.disflg = 'X';
                    this.model.recgrp.dcl[this.curActive].actiontype = this.model.olddclacttyp[this.curActive];
                }
            }
        },
        created() {
             //控制界面灰显示
            this.disflg = 'X';
        },
        watch: {
            //变动信息去掉勾选，确认勾选自动清空
           'model.cfabut.dclflg'(newVal) {
               if(newVal == ''||newVal == null){
                   this.model.recgrp.dcl[this.curActive].acp = '';
                   this.disflg = 'X';
                   this.model.recgrp.dcl[this.curActive].actiontype = this.model.olddclacttyp[this.curActive];
               }
           },
        }
    };
</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>