Infsea.vue

<template>
  <div class="eibs-tab">
    <c-list-search @form-reset="handleReset" @form-search="handleSearch">
      <!-- 持续展示区 -->
      <template v-slot="searchSlot">
        <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small"
        >
          <c-row>
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item
                  label="信用证编号"
                  prop="infcon.seaownref"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.seaownref"
                    maxlength="16"
                    placeholder="请输入信用证编号"
                  ></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item
                  label="开立日期"
                  prop="infcon.opndatfrom"
                  style="width: 100%"
                >
                  <c-col :span="11">
                    <c-date-picker
                      type="date"
                      v-model="model.infcon.opndatfrom"
                      style="width: 100%"
                      placeholder="请选择起始日期"
                      value-format="yyyy-MM-dd"
                    ></c-date-picker>
                  </c-col>
                  <c-col :span="2" style="text-align: center">
                    <label style="display: inline-block; width: 100%">-</label>
                  </c-col>
                  <c-col :span="11">
                    <c-date-picker
                      type="date"
                      v-model="model.infcon.opndatto"
                      style="width: 100%"
                      placeholder="请选择截止日期"
                      value-format="yyyy-MM-dd"
                    ></c-date-picker>
                  </c-col>
                </el-form-item>
              </c-col>

              <c-col :span="8">
                <el-form-item label="贸易类型" prop="mylx" style="width: 100%">
                  <c-select
                    v-model="model.mylx"
                    style="width: 100%"
                    placeholder="请选择贸易类型"
                  >
                    <el-option
                      v-for="item in codes.mytype"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </c-select>
                </el-form-item>
              </c-col>
            </c-col>
          </c-row>
          <c-row v-show="searchSlot.searchToggle">
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item
                  label="业务简略信息"
                  prop="infcon.nam"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.nam"
                    maxlength="40"
                    placeholder="请输入业务简略信息"
                  ></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="8"
                ><el-form-item
                  label="当事人参考号"
                  prop="infcon.searef"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.searef"
                    maxlength="16"
                    placeholder="请输入当事人参考号"
                  ></c-input> </el-form-item
              ></c-col>
              <c-col :span="8">
                <el-form-item
                  label="当事人编号"
                  prop="infcon.pty.extkey"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.pty.extkey"
                    maxlength="24"
                    placeholder="请输入当事人编号"
                  ></c-input> </el-form-item
              ></c-col>
            </c-col>
            <c-col :span="24">
              <c-col :span="8"
                ><el-form-item
                  label="当事人名称"
                  prop="infcon.pty.nam"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.pty.nam"
                    maxlength="40"
                    placeholder="请输入当事人名称"
                  ></c-input> </el-form-item
              ></c-col>
              <c-col :span="8"
                ><el-form-item
                  label="当事人BIC编码"
                  prop="infcon.seapty"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.seapty"
                    maxlength="24"
                    placeholder="请输入当事人BIC编码"
                  ></c-input> </el-form-item
              ></c-col>
              <c-col :span="8"
                ><el-form-item
                  label="当事人角色"
                  prop="infcon.searol"
                  style="width: 100%"
                >
                  <c-select
                    v-model="model.infcon.searol"
                    style="width: 100%"
                    placeholder="请选择当事人角色"
                  >
                  </c-select> </el-form-item
              ></c-col>
            </c-col>
            <c-col :span="24">
              <c-col :span="8"
                ><el-form-item
                  label="客户经理"
                  prop="infcon.usr.extkey"
                  style="width: 100%"
                >
                  <c-input
                    v-model="model.infcon.usr.extkey"
                    maxlength="8"
                    placeholder="请输入客户经理"
                  ></c-input> </el-form-item
              ></c-col>
              <c-col :span="8">
                <el-form-item
                  label="业务状态"
                  prop="infcon.seasta"
                  style="width: 100%"
                >
                  <c-select
                    v-model="model.infcon.seasta"
                    style="width: 100%"
                    placeholder="请选择业务状态"
                  >
                    <el-option
                      v-for="item in codes.seasta"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </c-select> </el-form-item
              ></c-col>
              <c-col :span="8"
                ><el-form-item
                  label="币种"
                  prop="infcon.seacur"
                  style="width: 100%"
                >
                  <c-select
                    v-model="model.infcon.seacur"
                    style="width: 100%"
                    placeholder="请选择币种"
                  >
                  </c-select> </el-form-item
              ></c-col>
            </c-col>
            <c-col :span="24">
              <c-col :span="8">
                <el-form-item
                  label="金额区间"
                  prop="infcon.seaamtfr"
                  style="width: 100%"
                >
                  <c-col :span="11">
                    <c-input
                      v-model="model.infcon.seaamtfr"
                      placeholder="请输入金额下限"
                    ></c-input>
                  </c-col>
                  <c-col :span="2" style="text-align: center">
                    <label style="display: inline-block; width: 100%">-</label>
                  </c-col>
                  <c-col :span="11">
                    <c-input
                      v-model="model.infcon.seaamtto"
                      placeholder="请输入金额上限"
                    ></c-input>
                  </c-col>
                </el-form-item>
              </c-col>
              <c-col :span="8"
                ><el-form-item
                  label="信用证类型"
                  prop="sealcrtyp"
                  style="width: 100%"
                >
                  <c-select
                    v-model="model.sealcrtyp"
                    style="width: 100%"
                    placeholder="请选择信用证类型"
                  >
                    <el-option
                      v-for="item in codes.sealcrtyp"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </c-select> </el-form-item
              ></c-col>
              <c-col :span="8">
                <el-form-item
                  label="是否通过电证系统"
                  prop="elcflg"
                  style="width: 100%"
                >
                  <c-select
                    v-model="model.elcflg"
                    style="width: 100%"
                    placeholder="请选择是否通过电证系统"
                  >
                    <el-option
                      v-for="item in codes.elcflg"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </c-select> </el-form-item
              ></c-col>
            </c-col>
          </c-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24" style="margin-top: 10px">
      <c-button
        class="medium_bcs"
        size="medium"
        type="primary"
        @click="toDetopn"
        >卖方信用证开立</c-button
      >
    </c-col>

    <c-col :span="24">
      <c-istream-table
        :list="stmData.data"
        :columns="stmData.columns"
        :showButtonFlg="true"
      >
        <el-table-column fixed="right" prop="op" label="操作" width="140px">
          <template slot="header">
            <c-col :span="11" style="text-align: center"
              ><span>操作</span></c-col
            >
            <!-- <c-col :span="12" style="text-align: right"
              ><c-button icon="el-icon-s-tools"></c-button
            ></c-col> -->
          </template>
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title="历史信息"
              width="800"
              trigger="click"
              :ref="'popover_' + scope.row.IDX"
            >
              <div
                style="
                  text-align: right;
                  margin-top: -30px;
                  margin-right: 5px;
                  font-size: 16px;
                "
              >
                <span
                  class="el-icon-close"
                  @click="closeTrn('popover_' + scope.row.IDX)"
                />
              </div>
              <c-istream-table :list="trnData.data" :columns="trnData.columns">
                <el-table-column prop="op" label="操作" width="0">
                  <template slot-scope="scope">
                    <c-button
                      style="margin-left: 0"
                      size="small"
                      @click="display(scope.row['INR'])"
                    >
                      详情
                    </c-button>
                  </template>
                </el-table-column>
              </c-istream-table>
              <c-button
                style="margin-left: 0"
                size="small"
                @click="getTrnInfo(scope.$index, scope.row)"
                slot="reference"
              >
                详情
              </c-button>
            </el-popover>
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="
                getButtons(scope.row['信用证编号'], scope.row['关闭日期'])
              "
            >
              处理
            </c-button>
          </template>
        </el-table-column>
      </c-istream-table>
    </c-col>

    <m-busbtn
      ref="childs"
      :ownref="ownref"
      trnCode="detsel"
      ownrefPath="dedgrp"
      :model="detselModel"
      @onChoose="onChoose"
      >11</m-busbtn
    >
  </div>
</template>
<script>
import Utils from "~/utils/index";
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Infdet/Event";
import DetselModel from "~/model/Detsel";
//交易跳转逻辑
import BusNavbar from "~/views/Public/BusNavbar";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  components: { "m-busbtn": BusNavbar },
  data() {
    return {
      detselModel: new DetselModel().data,
      ownref: "",
      dialogTableVisible: false,
      trnData: {
        columns: [
          '1 1 "编号" 200',
          '2 2 "交易名称" 100',
          '3 3 "日期" 200',
          // '4 4 "状态" 50',
          {
            index: 4,
            position: 4,
            width: 100,
            pattern: "code",
            label: "状态",
            code: this.codes.relstaEN,
          },
          '5 5 "币种" 80',
          '6 6 "金额" 80',
        ],
        data: [],
      },
      stmData: {
        columns: [
          '1 1 "信用证编号" 120 ',
          '2 2 "客户经理" 100',
          '3 3 "远期期限" 100',
          '7 4 "第一当事人编号" 200 ',
          '8 5 "申请人名称" 150 ',
          '9 6 "第二当事人编号" 200 ',
          '10 7 "受益人名称" 150 ',
          '11 8 "第三当事人编号" 200 ',
          '12 9 "开证行名称" 150 ',
          '4 10 "开立日期" 150 ',
          '5 11 "到期日" 150 ',
          '6 12 "关闭日期" 150 ',
          '13 13 "名义币种" 150 ',
          '15 15 "余额币种" 150 ',
          '14 14 "名义金额" 150 ',
          '16 16 "余额" 150 ',
        ],
        data: [],
      },
    };
  },

  methods: {
    ...Event,
    async getButtons(ownref, closedDate) {
      this.ownref = ownref;
      this.detselModel.clsflg = (closedDate ?? "").trim() === "" ? "" : "C";
      this.$refs.childs.initdialog = true;
      console.log("ownref:" + ownref);
    },
    async onChoose(code, prePageId) {
      //跳转交易
      // this.$router.history.push("/business/" + code);
      this.$router.push({ name: code.charAt(0).toUpperCase() + code.substring(1), params: { prePageId } });
      this.$refs.childs.initdialog = false;
    },
    async getDitSelInfo(code) {
      //跳转交易
      this.$router.history.push("/business/" + code);
      this.$refs.childs.initdialog = false;
    },

    async getTrnInfo(idx, row) {
      this.model.infcon.objinr = row["INR"];
      this.model.dedgrp.rec.inr = row["INR"];
      this.model.infcon.chksubcon = "X";

      this.dialogTableVisible = true;
      let rtnmsg = await this.executeDefault("infcon.chksubcon");

      if ((rtnmsg.respCode = SUCCESS)) {
        this.trnData.data = rtnmsg.data.infcon_trnstm.rows;
      }
    },
    closeTrn(refId) {
      this.$refs[refId].doClose();
    },

    toDetopn() {
      this.$router.history.push("/business/detopn");
    },
  },

  created: function () {},
};
</script>
<style>
.el-form--label-left .el-form-item__label {
  white-space: pre-wrap;
  text-align: center;
}
</style>