ovwp1.vue

<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24" v-if="model.trdgrp.rec.fintyp=='BRF'">
          <el-form-item label="基础交易编号" prop="brdgrp.rec.ownref">
            <c-input v-model="model.brdgrp.rec.ownref" @keyup.enter.native="showBrdDialog()" @blur="blurBrd" maxlength="16" placeholder="请输入基础交易编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24" v-if="model.trdgrp.rec.fintyp=='BCF'">
          <el-form-item label="基础交易编号" prop="bcdgrp.rec.ownref">
            <c-input v-model="model.bcdgrp.rec.ownref" @keyup.enter.native="showBcdDialog()" @blur="blurBcd" maxlength="16" placeholder="请输入基础交易编号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="融资业务编号" prop="trdgrp.rec.ownref">
            <c-fullbox>
              <c-input v-model="model.trdgrp.rec.ownref" disabled placeholder="请输入融资业务编号"></c-input>
              <template slot="footer">
                <c-button :disabled="model.trdgrp.rec.fintyp=='' || model.trdgrp.fip.pts.ptyinr=='' || model.trdgrp.rec.ownref!='' " style="margin-left: 10px" size="small" type="primary" @click="queryOwnref">获取</c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="融资类型" prop="trdgrp.rec.fintyp">
            <c-select v-model="model.trdgrp.rec.fintyp" dbCode="trdtyp" :filterKey="['BRF','BCF','ECF']" style="width:100%" placeholder="请输入融资类型" :disabled="model.trdgrp.rec.pnttyp=='LED'" @change="fintypChange">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="经办柜员" prop="trtp.usr.extkey">
            <c-input disabled v-model="model.trtp.usr.extkey" maxlength="8" placeholder="请输入经办柜员"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="抵押标志" prop="trdgrp.rec.guaflg">
            <c-select v-model="model.trdgrp.rec.guaflg" dbCode="guaflg" style="width:100%" placeholder="请输入抵押标志">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="付款方式" prop="trdgrp.rec.avbby" :required="model.trdgrp.rec.fintyp=='ECF'">
            <c-select v-model="model.trdgrp.rec.avbby" style="width:100%" :disabled="model.trdgrp.rec.fintyp!='ECF'" placeholder="请输入付款方式">
              <el-option v-for="item in avbbyCodes[model.trdgrp.rec.fintyp]" :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="trdgrp.rec.tenorday">
            <c-input-number v-model="model.trdgrp.rec.tenorday" :disabled="!(model.trdgrp.rec.fintyp=='ECF' && model.trdgrp.rec.avbby!='P')" style="width:100%" placeholder="请输入付款期限"></c-input-number>
          </el-form-item>
        </c-col>

      </c-col>

      <c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <!-- <c-ptap :model="model" :argadr="{title:'融资申请人', grp: 'trdgrp', rol: 'fip'}" :isCheckInCompontent='false' :haveAdrLabel="true" :isAdrblk="true" :disabledExtkey="model.fipDisabledFlg=='N'" ptytyp="C" @saveRef="getCpdinfo"></c-ptap> -->
          <c-ptap-ext :argadr="{ title: '融资申请人', grp: 'trdgrp', rol: 'fip' }"
						:requiredExtkey="true"
						:isAdrblk="true" 
            :isFieldLabelVisible="true"
						chooseLanguage="CN"
						:model="model" ptytyp="C"
            disabled
            :disabledExtkey="model.fipDisabledFlg=='N'"  @saveRef="getCpdinfo">
					</c-ptap-ext>
        </c-col>

        <c-col :span="24">
          <div style="width: calc(100% - 120px);margin-left: 120px;display: flex;align-item: center;justify-content: space-between;">
            <div>
              <el-form-item label-width="0">
                <c-checkbox v-model="model.dftcre.dfflag" true-label="X" false-label="">委托方代付</c-checkbox>
              </el-form-item>
            </div>
            <div>
              <el-form-item label-width="0">
                <c-checkbox v-model="model.finmod.wjdkfl" :disabled="model.finmod.disableSet.includes('wjdkfl')" class="checkbox-left">是否到期主动扣收贷款本息</c-checkbox>
              </el-form-item>
            </div>
          </div>
        </c-col>

        <c-col :span="24">
          <el-form-item label="货物品类" prop="trdgrp.rec.stagod">
            <c-select v-model="model.trdgrp.rec.stagod" dbCode="godcod" style="width:100%" placeholder="请选择货物品类">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="中文货物描述" prop="trdgrp.rec.goddspcn">
            <c-input v-model="model.trdgrp.rec.goddspcn" type="textarea" show-word-limit maxlength="100" placeholder="请输入中文货物描述"></c-input>
          </el-form-item>
        </c-col>

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

    <!-- BRD弹窗 -->
    <el-dialog title="进口信用证详情" :visible.sync="dialogBrdVisible" :modal-append-to-body="false" :close-on-click-modal="false" destroy-on-close width="75%">
      <div v-if="!brdLoading && brdTabLst.length === 0">暂无数据</div>
      <div v-else style="width: 100%;height: 100%;">
        <el-table id='tableRef' @row-dblclick="clickBrdRow" height="calc(100% - 32px)" style="width: 100%;" v-loading="brdLoading" :data="brdTabLst" :before-close="beforeBrdClose">
          <el-table-column label="INR" prop="inr" width="auto">
          </el-table-column>
          <el-table-column label="Reference" prop="ownref" width="auto">
          </el-table-column>
          <el-table-column label="Name" prop="nam" width="auto">
          </el-table-column>
          <el-table-column label="Acc. Docs now" prop="acpnowflg" width="auto">
          </el-table-column>
          <el-table-column label="Date" prop="totdat" width="auto">
          </el-table-column>
          <el-table-column label="ORDDAT" prop="orddat" width="auto">
          </el-table-column>
        </el-table>
        <el-pagination class="eContainer-pagination" layout="prev, pager, next, jumper, ->, sizes, total" :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" :total="total" @size-change="sizeBrdChange" @current-change="currentBrdChange"></el-pagination>
      </div>
    </el-dialog>

    <!-- BCD弹窗 -->
    <el-dialog title="进口代收详情" :visible.sync="dialogBcdVisible" :modal-append-to-body="false" :close-on-click-modal="false" destroy-on-close width="75%">
      <div v-if="!bcdLoading && bcdTabLst.length === 0">暂无数据</div>
      <div v-else style="width: 100%;height: 100%;">
        <el-table id='tableRef' @row-dblclick="clickBcdRow" height="calc(100% - 32px)" style="width: 100%;" v-loading="bcdLoading" :data="bcdTabLst" :before-close="beforeBcdClose">
          <el-table-column label="Reference" prop="ownref" width="auto">
          </el-table-column>
          <el-table-column label="Description" prop="nam" width="auto">
          </el-table-column>
          <el-table-column label="Expiry Date SG" prop="expdat" width="auto">
          </el-table-column>
        </el-table>
        <el-pagination class="eContainer-pagination" layout="prev, pager, next, jumper, ->, sizes, total" :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" :total="total" @size-change="sizeBcdChange" @current-change="currentBcdChange"></el-pagination>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import event from "../event";
import Default from "../model/default";
import commonFunctions from "~/mixin/commonFunctions.js";
import commonDepend from "~/mixin/commonDepend.js";
import Api from "~/service/Api";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, Default, commonFunctions, commonDepend],
  data() {
    return {
      dialogBrdVisible: false, // 控制弹框的展示和隐藏
      brdLoading: false,
      brdTabLst: [],
      markBrdownref: "",

      dialogBcdVisible: false, // 控制弹框的展示和隐藏
      bcdLoading: false,
      bcdTabLst: [],
      markBcdownref: "",

      total: 0,
      pageNum: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10, // 条数
      avbbyCodes: {
        BRF: [
          { label: "Mixed Payment Documents", value: "M" },
          { label: "Sight Documents", value: "P" },
          { label: "Usance Documents(Acceptance)", value: "A" },
          { label: "Usance Documents(Deferred)", value: "D" }
        ],
        BCF: [
          { label: "Documents against Mixed Payment", value: "M" },
          { label: "D/P Documents against Sight Payment", value: "P" },
          { label: "D/A Documents against Acceptance", value: "A" },
          { label: "D/P Documents Deferred Payment", value: "D" }
        ],
        ECF: [{ label: "远期", value: "A" }, { label: "即期", value: "P" }]
      }
    };
  },
  methods: {
    blurBrd(e) {
      let brdownref = this.model.brdgrp.rec.ownref;
      if (brdownref && brdownref !== this.markBrdownref) {
        this.showBrdDialog();
      }
    },

    async showBrdDialog() {
      if (this.brdLoading || this.dialogBrdVisible) {
        return;
      }
      const value = this.model.brdgrp.rec.ownref;
      // 分层取值
      await this.getBrdData(value);
      if (this.total == 1) {
        this.clickBrdRow(this.brdTabLst[0]);
      } else {
        // 设置弹框标题
        this.dialogBrdVisible = true;
        this.$nextTick(() => {
          this.root.$refs["modelForm"].validateField([`brdgrp.rec.ownref`]);
        });
      }
    },

    // 获取弹框内的table数据
    async getBrdData(value) {
      return new Promise(async resolve => {
        this.brdLoading = true;
        this.brdTabLst = [];
        let params = {
          ownref: value || "",
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        let res = await Api.post(
          `/${this.moduleRouter()}/trtopn/queryBrd`,
          params
        );
        if (res.respCode === SUCCESS) {
          if (res.data && res.data.list) {
            this.total = res.data.total;
            this.brdTabLst = res.data.list;
            resolve(this.brdTabLst);
          }
        }
        this.brdLoading = false;
      });
    },

    async clickBrdRow(row, column, event) {
      this.markBrdownref = row.ownref;
      let params = {
        inr: row.inr,
        rec: this.model.trdgrp
      };
      let res = await Api.post(
        `/${this.moduleRouter()}/trtopn/ruleBrdgrpRecOwnrefN1250`,
        params
      );
      if (res.respCode === SUCCESS) {
        // 赋值
        this.model.brdgrp = res.data.brdgrp;
        this.model.trdgrp = res.data.trdgrp;
        // 此处为了回填数据时回调
        this.$emit("handleChange", {
          rowData: row
        });
      }
      this.dialogBrdVisible = false;
    },

    beforeBrdClose(done) {
      this.dialogBrdVisible = false;
      this.pageNum = 1;
      done();
    },

    sizeBrdChange(num) {
      this.pageSize = num;
      const value = this.model.brdgrp.rec.ownref;
      this.getBrdData(value);
    },
    currentBrdChange(num) {
      this.currentPage = num;
      const value = this.model.brdgrp.rec.ownref;
      this.getBrdData(value);
    },

    blurBcd(e) {
      let bcdownref = this.model.bcdgrp.rec.ownref;
      if (bcdownref && bcdownref !== this.markBcdownref) {
        this.showBcdDialog();
      }
    },

    async showBcdDialog() {
      if (this.bcdLoading || this.dialogBcdVisible) {
        return;
      }
      const value = this.model.bcdgrp.rec.ownref;
      // 分层取值
      await this.getBcdData(value);
      if (this.total == 1) {
        this.clickBcdRow(this.bcdTabLst[0]);
      } else {
        // 设置弹框标题
        this.dialogBcdVisible = true;
        this.$nextTick(() => {
          this.root.$refs["modelForm"].validateField([`bcdgrp.rec.ownref`]);
        });
      }
    },

    // 获取弹框内的table数据
    async getBcdData(value) {
      return new Promise(async resolve => {
        this.bcdLoading = true;
        this.bcdTabLst = [];
        let params = {
          ownref: value || "",
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        let res = await Api.post(
          `/${this.moduleRouter()}/trtopn/queryBcd`,
          params
        );
        if (res.respCode === SUCCESS) {
          if (res.data && res.data.list) {
            this.total = res.data.total;
            this.bcdTabLst = res.data.list;
            resolve(this.bcdTabLst);
          }
        }
        this.bcdLoading = false;
      });
    },

    async clickBcdRow(row, column, event) {
      this.markBcdownref = row.ownref;
      let params = {
        inr: row.inr,
        rec: this.model.trdgrp
      };
      let res = await Api.post(
        `/${this.moduleRouter()}/trtopn/ruleBcdgrpRecOwnrefN1250`,
        params
      );
      if (res.respCode === SUCCESS) {
        // 赋值
        this.model.bcdgrp = res.data.bcdgrp;
        this.model.trdgrp = res.data.trdgrp;
        // 此处为了回填数据时回调
        this.$emit("handleChange", {
          rowData: row
        });
      }
      this.dialogBcdVisible = false;
    },

    beforeBcdClose(done) {
      this.dialogBcdVisible = false;
      this.pageNum = 1;
      done();
    },

    sizeBcdChange(num) {
      this.pageSize = num;
      const value = this.model.bcdgrp.rec.ownref;
      this.getBcdData(value);
    },
    currentBcdChange(num) {
      this.currentPage = num;
      const value = this.model.bcdgrp.rec.ownref;
      this.getBcdData(value);
    }
  },
  mounted() {},
  computed: {},
  watch: {
    "model.trdgrp.rec.fintyp": {
      immediate: true,
      handler(val, oldval) {
        if (val == "ECF") {
          this.model.trdgrp.fip.pts.ref = this.model.trdgrp.fip.pts.ref.toUpperCase();
        }
        if (
          !(
            this.model.trdgrp.rec.fintyp == "ECF" &&
            this.model.trdgrp.rec.avbby != "P"
          )
        ) {
          this.model.trdgrp.rec.tenorday = 0;
        }
        if (oldval != undefined && oldval != "") {
          if (oldval != val) {
            this.namChange();
            this.disableExtkey();
          }
        }
      }
    },

    "model.trdgrp.rec.avbby": {
      immediate: true,
      handler(val, oldval) {
        if (
          !(
            this.model.trdgrp.rec.fintyp == "ECF" &&
            this.model.trdgrp.rec.avbby != "P"
          )
        ) {
          this.model.trdgrp.rec.tenorday = 0;
        }
      }
    },

    "model.trdgrp.fip.pts.ptyinr": {
      immediate: true,
      handler(val, oldval) {
        if (oldval != undefined && oldval != "") {
          if (oldval != val) {
            this.getActSet("changeCur");
            this.getIdType();
            this.namChange();
            this.changeTenday();
          }
        }
      }
    },

    "model.trdgrp.fip.pts.extkey": {
      handler(val, oldval) {
        if (oldval != undefined && oldval != "") {
          if (oldval != val) {
            this.extkeyChange();
          }
        }
      }
    },

    "model.trdgrp.fip.pts.ref": {
      immediate: true,
      handler(val, oldval) {
        if (this.model.trdgrp.rec.fintyp == "ECF") {
          this.model.trdgrp.fip.pts.ref = val.toUpperCase();
        }
        if (oldval != undefined && oldval != "") {
          if (oldval != val) {
            this.disableExtkey();
          }
        }
      }
    }
  },
  created: function() {}
};
</script>
<style>
</style>