Wg.vue

<template>
  <div class="eibs">
    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px;">
        <el-form-item label="申报类型" label-width="120px" prop="bopmod.szflg">
            <c-select v-model="model.bopmod.szflg" 
            style="width:100%" 
            placeholder="请选择申报类型"
            @change="handelSelChange"
            >
            <el-option
              v-for="item in szflg"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
            </c-select>
        </el-form-item>
       </c-col>

       <c-col :span="12" style="padding-left: 20px;"> 
        <c-col :span="24">                       
          <c-col :span="8">
          <c-checkbox style="float:left" v-model="model.bopmod.basflg" v-show="basflgShow" :disabled="basflgEnable">基础数据</c-checkbox>
          </c-col> 
                      
          <c-col :span="8">
          <c-checkbox v-model="model.bopmod.dclflg" v-show="dclflgShow">申报数据</c-checkbox>
          </c-col> 
                      
          <c-col :span="8">
          <c-checkbox v-model="model.bopmod.vrfflg" v-show="vrfflgShow">核销数据</c-checkbox>
          </c-col> 
        </c-col>
      </c-col>
    </c-col>                                 
                                   
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
      <el-form-item label="款项来源" label-width="120px">
          <c-select v-model="model.bopmod.acttyp" 
            style="width:100%" 
            placeholder="请选择款项来源"
            :disabled="model.bopmod.szflg != 1"
            >
            <el-option
              v-for="item in acttyp"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </c-select>
      </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="地区机构号" label-width="120px">
            <c-select v-model="model.bopmod.ownextkey" style="width:100%" placeholder="请选择地区机构号" :disabled="model.bopmod.szflg == 3 || model.bopmod.szflg == '' ">
            </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <c-col :span="13">
          <el-form-item label="国外银行扣费（涉外收入申报专用）" label-width="120px">
              <c-select v-model="model.bopmod.outchargeccy" style="width:100%" placeholder="请选择国外银行扣费（涉外收入申报专用）" :disabled="true">
                <el-option
                  v-for="item in outchargeccy"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </c-select>
          </el-form-item>
        </c-col>
        
        <c-col :span="11">
          <el-form-item label="" label-width="5px" prop="bopmod.outchargeamt">
            <c-input-currency v-model="model.bopmod.outchargeamt"  
              style="text-align: right;" 
              placeholder="请输入国外银行扣费（涉外收入申报专用）" 
              :disabled="!model.bopmod.basflg || model.bopmod.szflg === '2' || model.bopmod.szflg === '3' "
              @keyup.enter.native="defaultFunction('bopmod.outchargeamt', model.bopmod.outchargeamt)"
              ></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>
   
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Cptadv/Event"

export default {
  inject: ['root'],
  mixins: [commonProcess],
    props:["model","codes"],
    data(){
        return {
          isShowBasflg: false,
          isShowDclflg: false,
          isShowVrfflg: false,
          basflgShow: true,
          dclflgShow: false,
          vrfflgShow: false,
          basflgEnable:true,
          szflg:[
            { value: "1", label: "跨境收支" },
            { value: "2", label: "境内收支" },
            { value: "3", label: "不申报" },
          ],
          acttyp:[
            { value: "(JW)", label: "境外" },
            { value: "(JN)", label: "境内非居民" },
          ],
          outchargeccy:[
            { value: "CNY", label: "人民币" },
            { value: "KRW", label: "韩元" },
            { value: "NZD", label: "新西兰元" },
            { value: "USD", label: "美元" },
          ],
        }
    },
    methods:{...Event,
      handelSelChange(){
        this.basflgEnable = false;
        //控制checkbox的逻辑
        if(this.model.bopmod.szflg == '3'){
          this.model.bopmod.basflg = false;
          this.basflgEnable = true;
          this.model.bopmod.acttyp ="";
          this.model.bopmod.ownextkey ="";

        }else if(this.model.bopmod.szflg == '2'){
            this.model.bopmod.acttyp ="";
            this.model.bopmod.outchargeamt="0.00";
        }
      },
    },
    watch:{
        "model.bopmod.basflg":{
            immediate:true,
            handler(val ,oldVal){
                if(this.model.bopmod.basflg == ''){
                    this.model.bopmod.outchargeamt="0.00";
                }

            }
          }
    },
    created:function(){
      this.executeRule("bopmod.wg").then((res) => {
            if (res.respCode == SUCCESS) {
                this.updateModel(res.data);
            }
        });
    }
}
</script>
<style>

</style>