dclpp.vue

<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="model.recgrp.dcl.length > 1 ? 'dcl-right' : 'dcl-right1'" :key="index+'1'"
                 v-for="(item, index) in model.recgrp.dcl"
                 v-show="curActive === index">
                <!-- 第一行 -->
                <c-col :span="24">
                    <c-col :span="12" style="padding-right: 20px">
                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.exdebtcode`" label="外债编号">
                                <c-input disabled placeholder="请输入外债编号"
                                         v-model="model.recgrp.dcl[curActive].exdebtcode"/>
                            </el-form-item>
                        </c-col>
                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.actiontype`" label="操作类型">
                                <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">
                        <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.actiondesc`" label="删除原因">
                            <c-input :disabled="disflgobj.actiondesc=='X'||(model.recgrp.dcl[curActive].actiontype!=null && model.recgrp.dcl[curActive].actiontype!='D')"  placeholder="请输入删除原因"
                                     type="textarea" :rows="4" maxlength="128"
                                     v-model="model.recgrp.dcl[curActive].actiondesc"/>
                        </el-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <!-- 第二行开始  左侧列 -->
                    <c-col :span="12" style="padding-right: 20px">
                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.buscode`" label="银行业务参号">
                                <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 :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.changeno`" label="变动编号">
                                <c-input disabled placeholder="请输入变动编号"
                                         v-model="model.recgrp.dcl[curActive].changeno"/>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.changtype`" label="变动类型">
                                <c-select :disabled="disflgobj.changtype=='X'" placeholder="请输入变动类型" dbCode="CHGTXT"
                                         v-model="model.recgrp.dcl[curActive].changtype"></c-select>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.remark`" label="备注">
                                <c-input :disabled="disflgobj.remark=='X'" placeholder="请输入备注" type="textarea" maxlength="248"
                                         v-model="model.recgrp.dcl[curActive].remark"/>
                            </el-form-item>
                        </c-col>

                    </c-col>

                    <!-- 第二行开始  右侧列 -->
                    <c-col :span="12" style="padding-left: 20px">
                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.chdate`" label="变动日期">
                                <c-date-picker :disabled="disflgobj.chdate=='X'" placeholder="请选择变动日期" style="width: 100%" type="date"
                                               v-model="model.recgrp.dcl[curActive].chdate"
                                               value-format="yyyy-MM-dd"></c-date-picker>
                            </el-form-item>
                        </c-col>


                        <c-col :span="24" class="custom-box-wrap">
                         <div class="box-1">
                          <div style="width: 100%">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.chcurrency`" label="变动币种">
                                <c-select :disabled="disflgobj.chcurrency=='X'" dbCode="curtxt" placeholder="请输入变动币种"
                                          v-model="model.recgrp.dcl[curActive].chcurrency"></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 :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.chamount`" label="变动金额">
                                <c-input-currency :disabled="disflgobj.chamount=='X'"  placeholder="请输入变动金额" :maxlength="23"
                                                  v-model="model.recgrp.dcl[curActive].chamount"></c-input-currency>
                            </el-form-item>
                        </c-col>

                        <c-col :span="24">
                            <el-form-item :prop="`cfabop.cfaeaf.recgrp.dcl.${curActive}.fairvalue`" label="公允价值">
                                <c-input-currency :disabled="disflgobj.fairvalue=='X'" placeholder="请输入公允价值" :maxlength="23"
                                         v-model="model.recgrp.dcl[curActive].fairvalue"></c-input-currency>
                            </el-form-item>
                        </c-col>


                        <c-col :span="24">
                            <!-- <c-col :span="12" style="padding-left: 20px">
                                <el-form-item>
                                    <c-checkbox disabled false-label="" true-label="X"
                                                v-model="model.recgrp.dcl[0].acp">确认
                                    </c-checkbox>
                                </el-form-item>
                            </c-col> -->
                            <c-col :span="12">
                                <el-form-item>
                                    {{model.recgrp.dcl[curActive].sta}}
                                </el-form-item>
                            </c-col>
                        </c-col>

                    </c-col>

                </c-col>
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        inject: ["root"],
        props: {
            model: {
                type: Object,
                default: undefined,
            },
            codes: {},
        },
        mixins: [],
        data() {
            return {
                curActive: 0,
                allitem: ["actiondesc","buscode","changtype","remark","chdate","chcurrency","chamount","fairvalue"],
                enableitem:  ["remark"],
                disflgobj: {},
            };
        },
        mounted() {
            //初始化字段是否可编辑
            this.disableByItem();
        },
        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.cfaeaf.dclflg;
              //01 维护交易 新增 修改 字段均需要可编辑
             if(trnname === 'eafadd' || (trnname === 'eafame')){
                disflg = 'N';
             }

             //02 签约勾选的前提下 业务交易部分字段可编辑 
            if(dclflg ==='X' && trntyp !== 'eaf' &&  this.enableitem.includes(filedname)){
              disflg = 'N';
            }

            //03 特殊化处理删除原因 只有删除交易下才可能允许编辑
            if(filedname === 'actiondesc'){
              if(trnname === 'eafdel' && 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>