Opnp1.vue

<template>
  <div class="eibs">
    <!-- ============== 顶部============================== -->
    <c-col :span="24" style="margin-top: 0">
      <c-col :span="12" style="padding-right: 20px;">
        <el-form-item
          label="业务编号"
          style="width: 100%"
          prop="cpdgrp.rec.ownref"
        >
          <c-fullbox>
            <c-input
              v-model="model.cpdgrp.rec.ownref"
              maxlength="16"
              disabled
              placeholder="请输入业务编号"
            ></c-input>

            <template slot="footer">
              <c-button
                style="margin: 0 10px 0 10px; padding: 0 12px"
                size="small"
                type="primary"
                @click="onSeainf"
              >
                <i class="el-icon-info"></i>
              </c-button>
              <c-button
                style="margin: 0 0"
                size="small"
                type="primary"
                :disabled="this.flag"
                @click="commonExecuteRule('cptp.getref')"
              >
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="12" style="padding-left: 20px;">
        <el-form-item label="简略信息" prop="cpdgrp.rec.nam">
          <c-input
            v-model="model.cpdgrp.rec.nam"
            maxlength="40"
            disabled
            placeholder="请输入简略信息"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- ========================左边======================= -->
    <c-col :span="12" style="padding-right: 20px;">
      <c-col :span="24">
        <el-form-item
          label="清算编号"
          style="width: 100%"
          prop="cpdgrp.rec.sysno"
        >
          <c-fullbox>
            <c-input
              v-model="model.cpdgrp.rec.sysno"
              maxlength="21"
              placeholder="请输入清算编号"
              style="width: 100%"
            ></c-input>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <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"
            style="text-align: left; width: 100%"
            placeholder="请输入汇款金额"
            @change="commonExecuteNotify()"
          ></c-input>
        </c-form-item>
      </c-col>
      <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%" prop="cptp.payuil">
          <c-select
            v-model="model.cptp.payuil"
            style="width: 100%"
            placeholder="请选择汇款语种"
          >
            <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 :span="24">
        <el-form-item
          label="付款人常驻国家/地区代码"
          prop="cptp.draweecountcode"
        >
          <c-fullbox>
            <c-input
              v-model="model.cptp.draweecountcode"
              maxlength="3"
              placeholder="请输入付款人常驻国家/地区代码"
              style="width: 100%"
              @keyup.enter.native="showGridPromptDialog('cptp.draweecountcode')"
            ></c-input>
            <template slot="footer">
              <c-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="
                  showGridPromptDialog(
                    'cptp.selbut',
                    null,
                    null,
                    { COD: 'cptp.draweecountcode' },
                    { COD: true },
                    'doxpDialog'
                  )
                "
              >
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="我行费用负担" prop="cpdgrp.rec.detchgcod">
          <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="货物类型" prop="cpdgrp.rec.stagod">
          <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="12" style="padding-left: 20px;">
      <c-col :span="13">
        <el-form-item label="汇款性质" prop="cpdgrp.rec.trntyp">
          <c-select
            v-model="model.cpdgrp.rec.trntyp"
            style="width: 100%"
            placeholder="请选择汇款性质"
          >
            <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="汇款方式"
          label-width="40%"
          prop="cpdgrp.rec.paytype"
        >
          <c-select
            v-model="model.cpdgrp.rec.paytype"
            style="width: 100%"
            placeholder="请选择汇款方式"
          >
            <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 :span="13">
        <el-form-item label="收款对象" prop="cpdgrp.rec.gors">
          <c-select
            v-model="model.cpdgrp.rec.gors"
            style="width: 100%"
            placeholder="请选择收款对象"
          >
            <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="收支类型" label-width="40%" prop="cpdgrp.rec.sztyp">
          <c-select
            v-model="model.cpdgrp.rec.sztyp"
            style="width: 100%"
            placeholder="请选择收支类型"
          >
            <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 :span="24">
        <el-form-item label="Uetr" prop="cptp.uetr">
          <c-fullbox>
            <c-input
              v-model="model.cptp.uetr"
              style="width: 100%"
              placeholder="请输入Uetr"
              disabled
            ></c-input>
            <template slot="footer">
              <c-button
                size="small"
                style="margin-left: 10px; padding: 0 10px"
                type="primary"
                @click="onCptpGetuetr"
              >
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="13">
        <el-form-item label="解付日期">
          <c-date-picker
            type="date"
            v-model="model.cpdgrp.rec.paydat"
            style="width: 100%"
            placeholder="请选择付款日期"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="11">
        <el-form-item label="起息日" label-width="40%">
          <c-date-picker
            type="date"
            v-model="model.cpdgrp.rec.valdat"
            style="width: 100%"
            placeholder="请选择起息日"
            @change="commonExecuteNotify()"
          ></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="13">
        <el-form-item label="客户类型" prop="cpdgrp.rec.clityp">
          <c-select
            v-model="model.cpdgrp.rec.clityp"
            style="width: 100%"
            placeholder="请选择客户类型"
          >
            <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="报文类型"
          label-width="40%"
          prop="cpdgrp.rec.swftyp"
        >
          <c-select
            v-model="model.cpdgrp.rec.swftyp"
            style="width: 100%"
            placeholder="请选择报文类型"
            :disabled="model.cpdgrp.cbs.nom1.amt === '0.000'"
            @change="commonExecuteRule('cpdgrp.rec.swftyp')"
            :code="this.swftypOpnp"
          >
          </c-select>
        </c-form-item>
      </c-col>

      <c-col :span="13">
        <el-form-item label="国外费用" prop="cpdgrp.rec.feecur">
          <c-select
            v-model="model.cpdgrp.rec.feecur"
            style="width: 100%"
            placeholder="请选择国外费用币种"
          >
            <el-option
              v-for="item in codes.currencycode"
              :key="item.value"
              :label="item.value + item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="11">
        <el-form-item
          label=""
          style="width: 100%"
          label-width="8px"
          prop="cpdgrp.rec.feeamt"
        >
          <c-fullbox>
            <c-input
              v-model="model.cpdgrp.rec.feeamt"
              placeholder="请输入国外费用金额"
              style="width: 95%"
            ></c-input>

            <template slot="footer">
              <span>
                <c-checkbox v-model="model.cpdgrp.rec.tsnflg"
                  >同名划转标志</c-checkbox
                >
              </span>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
    </c-col>


    <CptAdvChangePanel
      :model="model"
      :codes="codes"
      v-on:onSndpDet="onSndpDet"
    ></CptAdvChangePanel>

    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px;"
        v-if="
          model.cpdgrp.rec.swftyp === '103' ||
          model.cpdgrp.rec.swftyp === '202' ||
          model.cpdgrp.rec.swftyp === '200'
        "
      >
        <!--将Addtional Info面板合并-->
        <el-form-item label="汇款人名称" prop="orcnam">
          <c-input
            v-model="model.orcnam"
            maxlength="100"
            placeholder="请输入汇款人名称"
            style="width: 100%"
          ></c-input>
        </el-form-item>
      </c-col>

      <!--将MT103面板合并-->
      <c-col :span="12" style="padding-left: 20px;" v-if="model.cpdgrp.rec.swftyp === '103'">
        <el-form-item
          label="汇款附言(Tag 70)"
          prop="cpdgrp.blk.contag70"
        >
          <c-input
            type="textarea"
            :rows="4"
            maxlength="200"
            v-model="model.cpdgrp.blk.contag70"
            show-word-limit
            placeholder="请输入汇款附言"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import Utils from "~/utils/index";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Cptadv/Event";
import Ptap from "~/views/Public/Ptap";

import CptAdvChangePanel from "./CptAdvChangePanel";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  components: { CptAdvChangePanel },
  mixins: [commonProcess],
  data() {
    return {
      trntyp: [
        { value: "0", label: "贸易" },
        { value: "1", label: "非贸易" },
        { value: "2", label: "资本" },
        { value: "3", label: "其他" },
      ],
      swftypOpnp: [
        { label: "MT103", value: "103" },
        { label: "Mt202 COV", value: "202" },
        { label: "MT202", value: "200" },
        { label: "Other", value: "OTH" },
      ],
    };
  },
  methods: {
    ...Event,
    onSeainf() {},
    commonExecuteRule(ruleName) {
      this.executeRule(ruleName).then((res) => {
        if (res.respCode == SUCCESS) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    commonExecuteNotify() {
      this.executeNotify().then((res) => {
        if (res.respCode == SUCCESS) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
  },
  created: function () {
    console.log(this.root);
  },
  computed: {
    flag() {
      return this.model.cpdgrp.pye.pts.extkey == "";
    },
  },
  watch: {
    "model.cpdgrp.cbs.nom1.cur": function () {
      if (this.model.cpdgrp.cbs.nom1.cur == "CNY") {
        this.swftypOpnp = [
          { label: "MT103", value: "103" },
          { label: "MT202 COV", value: "202" },
          { label: "MT202", value: "200" },
          { label: "CMT100", value: "CMT" },
          { label: "Other", value: "OTH" },
          { label: "hvps111", value: "HVP" },
          { label: "hvps112", value: "HVQ" },
          { label: "hvps115", value: "HVR" },
          { label: "PKG001", value: "CMX" },
          { label: "PKG005", value: "CMY" },
          { label: "beps121", value: "BEP" },
          { label: "beps122", value: "BEQ" },
          { label: "beps125", value: "BES" },
          { label: "cips111", value: "CIU" },
          { label: "cips112", value: "CIV" },
          { label: "cips113", value: "CIW" },
        ];
      } else {
        this.swftypOpnp = [
          { label: "MT103", value: "103" },
          { label: "Mt202 COV", value: "202" },
          { label: "MT202", value: "200" },
          { label: "Other", value: "OTH" },
        ];
      }
    },
  },
};
</script>
<style>
</style>