Opnp1.vue

<template>
    <div class="eibs-tab">
        <!--=================顶部=================  -->

        <!-- <c-col :span="24" style="height: 24px">
            <el-form-item label="基本信息" class="messageLabel"> </el-form-item>
        </c-col>
        <c-col :span="24" style="height: 0px">
            <el-divider></el-divider>
        </c-col> -->

        <c-col :span="24" style="margin-top: 0">
            <c-col :span="11">
                <el-form-item
                    label="业务编号"
                    prop="cpdgrp.rec.ownref"
                    style="width: 100%"
                >
                    <c-fullbox>
                        <c-input
                            v-model="model.cpdgrp.rec.ownref"
                            maxlength="16"
                            placeholder="请输入Reference"
                            disabled
                        ></c-input>
                        <template slot="footer">
                            <c-button
                                style="margin: 0px 10px 0 10px; padding: 0 12px"
                                size="small"
                                type="primary"
                                @click="onSeainf"
                            >
                                <span
                                    style="
                                        font-family: '宋体';
                                        font-weight: bold;
                                    "
                                    >i</span
                                >
                            </c-button>
                            <c-button
                                style="margin: 0 0"
                                size="small"
                                type="primary"
                                :disabled="this.flag"
                                @click="onOpnpButgetref"
                            >
                                获取
                            </c-button>
                        </template>
                    </c-fullbox>
                </el-form-item>
            </c-col>
            <c-col :span="11" :offset="1">
                <el-form-item label="Name" prop="cpdgrp.rec.nam">
                    <c-input
                        v-model="model.cpdgrp.rec.nam"
                        maxlength="16"
                        placeholder=""
                        disabled
                    ></c-input>
                </el-form-item>
            </c-col>
        </c-col>
        <!-- <c-col :span="11" :offset="1">
      <el-form-item label="Our Reference">
        <c-input
          v-model="model.cpdgrp.rec.ownref"
          maxlength="16"
          placeholder="请输入Our Reference"
        ></c-input>
      </el-form-item>
    </c-col> -->

        <!-- <c-col :span="9">
      <el-form-item label="">
        <c-input
          v-model="model.cptp.recget.sdamod.seainf"
          placeholder="请输入"
        ></c-input>
      </el-form-item>
    </c-col>

    <c-col :span="11">
      <el-form-item label="Externally Displayed Name to Identify the Contract">
        <c-input
          v-model="model.cpdgrp.rec.nam"
          maxlength="40"
          placeholder="请输入Externally Displayed Name to Identify the Contract"
        ></c-input>
      </el-form-item>
    </c-col> -->

        <c-col>
            <!-- ===================中部--左==================== -->
            <c-col :span="11">
                <c-col :span="24">
                    <el-form-item label="清算编号" prop="cpdgrp.rec.sysno">
                        <c-input
                            v-model="model.cpdgrp.rec.sysno"
                            maxlength="21"
                            placeholder="请输入清算编号"
                        ></c-input>
                    </el-form-item>
                </c-col>

                <c-col :span="24">
                    <c-col :span="13">
                        <c-form-item
                            label="汇款金额"
                            previewLabel="汇款金额币种"
                            prop="cpdgrp.cbs.nom1.cur"

                        >
                            <c-select
                                v-model="model.cpdgrp.cbs.nom1.cur"
                                style="width: 100%"
                                placeholder=""
                                 @change="commonExecuteRule('cpdgrp.cbs.nom1.cur')"
                            >
                                <el-option
                                    v-for="item in codes.currencycode"
                                    :key="item.value"
                                    :label="item.value+item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </c-form-item>
                    </c-col>
                    <c-col :span="11">
                        <c-form-item
                            label=""
                            previewLabel="汇款金额"
                            label-width="8px"
                            prop="cpdgrp.cbs.nom1.amt"
                        >
                            <c-input
                                class="m-input-currency"
                                v-model="model.cpdgrp.cbs.nom1.amt"
                                placeholder="请输入汇款金额"
                                @keyup.enter.native="defaultFunction('cpdgrp.cbs.nom1.amt', model.cpdgrp.cbs.nom1.amt)"
                            ></c-input>
                        </c-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <c-col :span="13">
                        <el-form-item label="所属行" prop="cpdgrp.rec.othbch">
                            <c-input
                                v-model="model.cpdgrp.rec.othbch"
                                maxlength="8"
                                placeholder=""
                                disabled
                            ></c-input>
                        </el-form-item>
                    </c-col>
                    <c-col :span="11">
                        <el-form-item label="汇款语种" label-width="40%">
                            <c-select
                                v-model="model.cptp.payuil"
                                placeholder="请选择汇款语种"
                                @change="onPayuilChange"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in codes.payuil"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </el-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <c-col :span="13">
                        <el-form-item
                            label="是否需要核验"
                            prop="cpdgrp.rec.ischktyp"
                        >
                            <c-select
                                v-model="model.cpdgrp.rec.ischktyp"
                                style="width: 100%"
                                placeholder=""
                            >
                                <el-option
                                    v-for="item in codes.ischktyp"
                                    :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="预计核验日期"
                            prop="cpdgrp.rec.paydat"
                            label-width="40%"
                        >
                            <c-date-picker
                                type="date"
                                v-model="model.cpdgrp.rec.paydat"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                                placeholder=""
                                :disabled=this.flag1
                            ></c-date-picker>
                        </el-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="我行费用负担">
                        <c-select
                            v-model="model.cpdgrp.rec.detchgcod"
                            style="width: 100%"
                            placeholder=""
                        >
                            <el-option
                                v-for="item in codes.detchgcod"
                                :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="货物类型">
                        <c-select
                            v-model="model.cpdgrp.rec.stagod"
                            style="width: 100%"
                            placeholder="请选择货物类型"
                        >
                            <el-option
                                v-for="item in codes.godcod"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </c-select>
                    </el-form-item>
                </c-col>

            </c-col>

            <!-- ===================中部--右==================== -->
            <c-col :span="11" :offset="1">
                <c-col :span="24">
                    <c-col :span="13">
                        <el-form-item label="汇款性质" prop="cpdgrp.rec.trntyp">
                            <c-select
                                v-model="model.cpdgrp.rec.trntyp"
                                placeholder="请选择汇款性质"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in trntyp"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </el-form-item>
                    </c-col>
                    <c-col :span="11">
                        <c-form-item
                            label="汇款方式"
                            prop="cpdgrp.rec.paytype"
                            label-width="40%"
                        >
                            <c-select
                                v-model="model.cpdgrp.rec.paytype"
                                placeholder="请选择汇款方式"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in codes.paytype"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </c-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <c-col :span="13">
                        <el-form-item label="汇款对象" prop="cpdgrp.rec.gors">
                            <c-select
                                v-model="model.cpdgrp.rec.gors"
                                placeholder="请选择汇款对象"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in codes.gors"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </el-form-item>
                    </c-col>
                    <c-col :span="11">
                        <c-form-item label="收支类型" prop="cpdgrp.rec.sztyp" label-width="40%">
                            <c-select
                                v-model="model.cpdgrp.rec.sztyp"
                                placeholder="请选择收支类型"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in codes.sztyp"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </c-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <c-col :span="13">
                        <el-form-item label="客户类型" prop="cpdgrp.rec.clityp">
                            <c-select
                                v-model="model.cpdgrp.rec.clityp"
                                placeholder="请选择客户类型"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in codes.clityp"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </el-form-item>
                    </c-col>
                    <c-col :span="11">
                        <c-form-item label="报文类型" prop="cpdgrp.rec.swftyp" label-width="40%">
                            <c-select
                                style="width: 100%"
                                placeholder=""
                                v-model="model.cpdgrp.rec.swftyp"
                                :disabled=this.flag2
                                @change="swftypChange"
                            >
                                <!-- :disabled="model.cptp.liqtyp != 'C' && model.cptp.liqtyp != 'S' && model.cptp.liqtyp != ''" -->
                                <el-option
                                    v-for="item in this.swftypOpnp"
                                    :label="item.label"
                                    :value="item.value"
                                    :key="item.value"
                                ></el-option>
                            </c-select>
                        </c-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <c-fullbox>
                        <c-col :span="20">
                                <c-col :span="21">
                                    <el-form-item
                                        label="收款人常驻国家/地区代码"
                                        prop="cptp.payeecountcode">
                                        <c-input
                                            v-model="model.cptp.payeecountcode"
                                            maxlength="3"
                                            placeholder="请输入收款人常驻国家/地区代码"
                                            @keyup.enter.native="
                                                showGridPromptDialog('cptp.payeecountcode')
                                            "
                                            style="width: 100%"
                                        ></c-input>
                                    </el-form-item>
                                </c-col>
                              <c-col :span="3">
                              <c-button
                                    size="small"
                                    type="primary"
                                     icon="el-icon-search"
                                    @click="showGridPromptDialog('cptp.selbut1', null, null,{TXT: 'cptp.payeecountcode'}, {TXT: false},'doxpDialog')"
                                  > </c-button>
                            </c-col>
                        </c-col>

                         <c-col :span="4" style="float: right">
                                 <c-checkbox v-model="model.cpdgrp.rec.tsnflg" label-width="150px" >同名划转</c-checkbox>
                        </c-col>
                    </c-fullbox>
                </c-col>

                 <c-col :span="24">
                    <c-col :span="14">
                        <el-form-item
                            label="清算模式"
                            v-if="model.cpdgrp.cbs.nom1.cur === 'CNY'">
                            <c-select
                                v-model="model.cptp.liqtyp"
                                style="width: 100%"
                                placeholder="请选择清算模式"
                                :disabled="model.cpdgrp.cbs.nom1.amt === '0.000'"
                                :code=this.liqtypOptions
                                @change="swftypChange"
                            >
                                <el-option
                                    v-for="item in liqtypOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </c-select>
                        </el-form-item>
                        <el-form-item
                            label=""
                            v-if="!(model.cpdgrp.cbs.nom1.cur === 'CNY')"
                        ></el-form-item>
                    </c-col>
                </c-col>

                <c-col :span="24">
                    <el-form-item label="货物类型">
                        <c-select
                            v-model="model.cpdgrp.rec.stagod"
                            style="width: 100%"
                            placeholder="请选择货物类型"
                        >
                            <el-option
                                v-for="item in codes.godcod"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </c-select>
                    </el-form-item>
                </c-col>


            </c-col>
        </c-col>

        <!-- <c-col :span="24" style="height: 24px">
            <el-form-item label="*****信息" class="messageLabel">
            </el-form-item>
        </c-col> -->
        <c-col :span="24" style="height: 0px">
            <el-divider></el-divider>
        </c-col>

        <CptOpnp1Common :model="model" :codes="codes" v-on:onSndpDet="onSndpDet"></CptOpnp1Common>
    </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import commonProcess from "~/mixin/commonProcess";
import Event from "~/model/Cptopn/Event";
import Utils from "~/utils";
import Infpta from "~/views/Business/Infpta";

import CptOpnp1Common from "./CptOpnp1Common";

export default {
    inject: ["root"],
    props: ["model", "codes"],
    components: { Infpta, CptOpnp1Common },
    mixins: [commonProcess],
    data() {
        return {
            trntyp: [
                { value: "0", label: "贸易" },
                { value: "1", label: "非贸易" },
                { value: "2", label: "资本" },
                { value: "3", label: "其他" },
            ],
            liqtypOptions: [
                { value: "C", label: "代理行模式" },
                { value: "O", label: "Other" },
                { value: "S", label: "CIPS系统" },
            ],
              swftypOpnp: [
                    { label: 'MT103', value: '103' },
                    { label: 'Mt202 COV', value: '202' },
                    { label: 'MT202', value: '200' },
                    { label: 'Other', value: 'OTH' },
                ],
            flag1:true,
            flag2:true,
        };
    },
    methods: {
        ...Event,
        onCptpGetref() {},
        onCptpGetmod() {},
        commonExecuteRule(ruleName) {
              this.executeRule(ruleName).then((res) => {
                if ((res.respCode == SUCCESS)) {
                  Utils.copyValueFromVO(this.model, res.data);
                }
              });
            },
    },
    watch:{
        "model.cpdgrp.rec.ischktyp":{
            immediate:true,
            handler(val ,oldVal){
                if(this.model.cpdgrp.rec.ischktyp == 'N' || this.model.cpdgrp.rec.ischktyp == ''){
                    this.flag1=true;
                    this.model.cpdgrp.rec.paydat="";
                }
                else{
                    this.flag1=false;
                }
            }
          },
           "model.cptp.liqtyp":{
               immediate:true,
               handler(val ,oldVal){
                    //清除数据
                    if(this.model.cptp.liqtyp != 'C'){
                         //清除liqtyp = C时填写的数据
                        this.model.cptp.cleage="";
                        this.model.cptp.evebch="";
                        this.model.cptp.coract="";
                    }else if(this.model.cptp.liqtyp != 'O'){
                       this.model.cpdgrp.blk.contag70="";
                    }else if(this.model.cptp.liqtyp != 'S'){
                        this.model.cptp.orcnam="";
                        this.model.cptp.orcadr="";
                        this.model.cptp.pyenam="";
                        this.model.cptp.pyeadr="";
                        this.model.cptp.reconebch="";
                        this.model.cptp.reconebchnam="";
                        this.model.cptp.cptp.bustyp="";
                        this.model.cptp.commetr="";
                    }

                   if(this.model.cptp.liqtyp == 'C'){
                         this.model.cpdgrp.rec.swftyp="103";
                         this.swftypOpnp=[
                             { label: 'MT103', value: '103' },
                             { label: 'MT202', value: '200' },
                         ]
                          this.flag2 = false;
                   }else if(this.model.cptp.liqtyp == 'O'){
                        //同步切换报文类型的值
                        this.model.cpdgrp.rec.swftyp= "OTH";
                        this.flag2 = true;
                   }else if(this.model.cptp.liqtyp == 'S'){
                         this.flag2 = false;
                         //同步切换报文类型的值
                         this.model.cpdgrp.rec.swftyp= "CIU";
                         this.swftypOpnp=[
                              { label: "cips111", value: "CIU" },
                              { label: "cips112", value: "CIV" },
                         ]
                   }else{
                        //当为空时，恢复下拉选的选项
                      this.swftypOpnp=[
                                       { label: 'MT103', value: '103' },
                                       { label: 'Mt202 COV', value: '202' },
                                       { label: 'MT202', value: '200' },
                                       { label: 'Other', value: 'OTH' },
                                   ]
                   }
               }
           },
           "model.cpdgrp.cbs.nom1.amt":{
               immediate:true,
               handler(val ,oldVal){
                    if(this.model.cpdgrp.cbs.nom1.amt !== '0.000' && this.model.cpdgrp.cbs.nom1.cur !='CNY'){
                        this.flag2 = false;
                    }else{
                        this.flag2 = true;
                    }
               }
           },
           "model.cpdgrp.cbs.nom1.cur":{
               immediate:true,
               handler(val ,oldVal){
                    if(this.model.cpdgrp.cbs.nom1.amt !== '0.000' && this.model.cpdgrp.cbs.nom1.cur !='CNY'){
                        this.flag2 = false;
                    }else{
                        this.flag2 = true;
                    }
               }
           }
    },
    created: function () {},
    computed: {
        flag() {
            return (
                this.model.cpdgrp.orc.pts.extkey == ""
                // && this.model.cpdgrp.rec.ownref != ""
            );
        },
    },
};
</script>
<style scoped>

</style>