Conp.vue

<template>
    <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="recgrp.bas.exdebtcode">
                        <c-input disabled maxlength="28" placeholder="请输入外债编号"
                                 v-model="model.recgrp.bas.exdebtcode"></c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="操作类型" prop="recgrp.bas.actiontype">
                        <c-select clearable dbCode="action" disabled
                                  placeholder="请输入操作类型"
                                  v-model="model.recgrp.bas.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.bas.actiondesc">
                        <c-input  disabled maxlength="128" placeholder="请输入删除原因" show-word-limit
                                 type="textarea" :rows="4"
                                 v-model="model.recgrp.bas.actiondesc"></c-input>
                    </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.bas.debtype">
                        <c-select disabled placeholder="请输入债务类型" dbCode="DEBTYP"
                                  v-model="model.recgrp.bas.debtype">
                        </c-select>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="债务人代码" prop="recgrp.bas.debtorcode">
                        <c-input disabled placeholder="请输入债务人代码" v-model="model.recgrp.bas.debtorcode"></c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="起息日" prop="recgrp.bas.valuedate">
                        <c-date-picker placeholder="请输入起息日" :disabled="disflg == 'X'"
                                       type="date" v-model="model.recgrp.bas.valuedate">
                        </c-date-picker>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="到期日" prop="recgrp.bas.maturity">
                        <c-date-picker placeholder="请输入到期日" :disabled="disflg == 'X'"
                                       type="date" v-model="model.recgrp.bas.maturity">
                        </c-date-picker>
                    </el-form-item>
                </c-col>

                 <c-col :span="24">
                    <el-form-item label="签约币种" prop="recgrp.bas.contractcurr">
                        <c-select  dbCode="curtxt" placeholder="请输入签约币种" :disabled="disflg == 'X'"
                                  v-model="model.recgrp.bas.contractcurr" >
                        </c-select>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="签约金额" prop="recgrp.bas.contractamount">
                        <c-input-currency  placeholder="请输入签约金额" :disabled="disflg == 'X'" :maxlength="23"
                             v-model="model.recgrp.bas.contractamount"></c-input-currency>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="相关业务类型" prop="recgrp.bas.credittype">
                        <c-select placeholder="请输入相关业务类型" dbCode="CFABUS"  :disabled="disflg == 'X'"
                                  v-model="model.recgrp.bas.credittype"></c-select>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="是否附有银行承兑汇票" prop="recgrp.bas.billsn">
                        <c-select placeholder="请输入是否附有银行承兑汇票"  :disabled="disflg == 'X'"
                        dbCode="CFAYES" v-model="model.recgrp.bas.billsn" isShowKeyAndLabel>
                        </c-select>
                    </el-form-item>
                </c-col>
                
                <c-col :span="24">
                    <el-form-item label="是否不纳入跨境融资风险加权余额计算" prop="recgrp.bas.spapfeboindex">
                        <c-select placeholder="请输入" dbCode="CFAYES" :disabled="disflg == 'X'"
                                  v-model="model.recgrp.bas.spapfeboindex" isShowKeyAndLabel>
                        </c-select>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="备注" prop="recgrp.bas.remark">
                        <c-input maxlength="248" placeholder="请输入备注" :disabled="disflg == 'X'" 
                                 show-word-limit type="textarea" v-model="model.recgrp.bas.remark">
                        </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="recgrp.bas.creditorcode">
                        <c-input placeholder="请输入债权人代码" :isShow="{ show: showflg, warning: warning }" :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.creditorcode"></c-input>
                    </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.bas.creditortype">
                        <c-select placeholder="请输入债权人类型代码" dbCode="SBWTYP" @change="creditortypeChange" :disabled="disflg == 'X'"
                                  v-model="model.recgrp.bas.creditortype" isShowKeyAndLabel>
                        </c-select>
                    </el-form-item>
                    </div>
                   </div>
                  <div class="box-2">
                      <c-checkbox
                        disabled
                        true-label="X"
                        false-label=""
                        class="checkbox-left"
                        v-model="model.recgrp.bas.acp"
                        >确认</c-checkbox
                      >
                  </div>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="债权人中文名称" prop="recgrp.bas.creditorname">
                        <c-input maxlength="90" placeholder="请输入债权人中文名称"  :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.creditorname"></c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="债权人英文名称" prop="recgrp.bas.creditornamen">
                        <c-input maxlength="90" placeholder="请输入债权人英文名称" :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.creditornamen">
                        </c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="债权人总部所在国家（地区）代码" prop="recgrp.bas.crehqcode">
                        <c-business-cty maxlength="3" placeholder="请输入债权人总部所在国家（地区）代码" :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.crehqcode"></c-business-cty>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="债权人经营地所在国家（地区）代码" prop="recgrp.bas.opercode">
                        <c-business-cty maxlength="3" placeholder="请输入债权人经营地所在国家（地区）代码" :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.opercode">
                        </c-business-cty>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="开证申请人代码" prop="recgrp.bas.appcode">
                        <c-input placeholder="请输入开证申请人代码" :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.appcode"></c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="开证申请人名称" prop="recgrp.bas.appname">
                        <c-input maxlength="90" placeholder="请输入开证申请人名称"  :disabled="disflg == 'X'"
                                 v-model="model.recgrp.bas.appname">
                        </c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="对方与本机构的关系" prop="recgrp.bas.relation">
                        <c-select placeholder="请输入对方与本机构的关系" dbCode="EXDTYP"   :disabled="disflg == 'X'"
                                  v-model="model.recgrp.bas.relation"></c-select>
                    </el-form-item>
                </c-col>


            </c-col>

        </c-col>

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

    export default {
        inject: ["root"],
        mixins: [CommonEvent],
        props:["model","codes","transName"],
        data() {
            return {
                showflg: false,
                warning: '',
                disflg:'',
            };
        },
        methods: {

      //针对选择的债权人类型进行提示
      creditortypeChange(){
          let creditortype = this.model.recgrp.bas.creditortype;
          if(creditortype !='' && creditortype !=null){
              let subtyp = creditortype.slice(0,6);
              if(subtyp == '200016'){
                  if(creditortype == '20001603'){
                      this.$alert('债权人类型通常不选择关联企业，请再次确认选择是否正确。', "提示", {
                      confirmButtonText: "OK",
            });
                  }
              }else{
                 this.$alert('债权人类型通常为企业，请再次确认选择是否正确。', "提示", {
                 confirmButtonText: "OK",
               });
            }
           }
          }
        },
       mounted() {
           
      },
        computed: {},
        watch: {
    //设置债权人代码提示信息
	'model.recgrp.bas.creditortype'(newVal) {
        if (newVal != null &&newVal != "") {
        let creditortype = newVal.substring(0, 6);
        switch (creditortype) {
          case "200011":
            this.showflg = true;
            this.warning = "(GOV+国家地区代码)";
            break;
          case "200013":
            this.showflg = true;
            this.warning = "(CEB+国家地区代码)";
            break;
          case "200014":
            this.showflg = true;
            this.warning = "(8或11位的SWIFT CODE)";
            break;
          case "200012":
          case "200015":
            this.showflg = true;
            this.warning = "(优先填写SWIFT CODE)";
            break;
          default:
            this.showflg = false;
            this.warning = "";
            break;
        }
      }
    },
        },
        created: function () {
           //控制界面灰显示
           this.disflg = 'X';
           //记录原操作类型
           this.oldacttyp = this.model.recgrp.bas.actiontype;
        }
    };
</script>
<style lang="less" scoped>
    .intrat /deep/ .el-input__inner {
        text-align: left;
    }
</style>