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">
          <el-row>
            <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" placeholder="请选择起始日期"
                                 value-format="yyyy-MM-dd" style="width: 100%"></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" placeholder="请选择截至日期"
                                 style="width: 100%"
                                 value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </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>
          </el-row>

          <el-row v-show="searchSlot.searchToggle">
            <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 :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.nam" style="width: 100%">
                <c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入业务简略信息"
                         style="width: 100%"></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="请选择当事人角色"
                          :code="codes.payrol">
                </c-select>
              </el-form-item>
            </c-col>
            <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="请选择币种" :code="codes.cur">
                  <el-option v-for="item in codes.seacur" :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.seaamtfr" style="width: 100%">
                <c-col :span="11">
                  <c-input v-model="model.infcon.seaamtfr" placeholder="请输入金额下限" style="width: 100%"></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="请输入金额上限" style="width: 100%"></c-input>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="保兑指示" prop="seacnfdet" style="width: 100%">
                <c-select v-model="model.seacnfdet" style="width: 100%" placeholder="请选择保兑指示">
                  <el-option v-for="item in codes.cnfins" :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="sealcrtyp" style="width: 100%">
                <c-select v-model="model.sealcrtyp" :code="codes.lcrtyp" style="width: 100%"
                          placeholder="请选择信用证类型">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="货物类型" prop="seagodcod" style="width: 100%">
                <c-select v-model="model.seagodcod" 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>
          </el-row>
        </el-form>
      </template>
    </c-list-search>

    <c-col :span="24" style="margin-top: 10px">
      <c-button class="medium_bcs" size="medium" type="primary" style="margin-left: 0px" title="LITOPN"
                @click="toLitopn">
        进口信用证开立
      </c-button>
    </c-col>

    <div style="height: 90%">
      <c-col :span="24">
        <el-table
            :data="stmData.data"
            :columns="stmData.columns"
            :showButtonFlg="true"
        >
          <el-table-column
              v-for="(item, key) in stmData.columns"
              :key="key"
              :label="item.label"
              :prop="item.prop"
          ></el-table-column>
          <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>
            </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"
                      style="cursor: pointer"
                      @click="closeDetailsDialog('popover_' + scope.row.IDX)"
                  ></span>
                </div>
                <el-table
                    :data="trnData.data"
                    :columns="trnData.columns"
                    :showButtonFlg="true"
                >
                  <el-table-column
                      v-for="(item, key) in trnData.columns"
                      :key="key"
                      :label="item.label"
                      :prop="item.prop"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row[item.prop] }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="op" label="操作" width="250px">
                    <template slot-scope="scope">
                      <c-button
                          style="margin-left: 0"
                          size="small"
                          @click="display(scope.row['inr'])"
                      >快照
                      </c-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <c-button
                    style="margin-left: 0"
                    size="small"
                    slot="reference"
                    @click="details(scope.row)">
                  详情
                </c-button>
              </el-popover>
              <c-button
                  style="margin-left: 5px"
                  size="small"
                  type="primary"
                  @click="handler(scope.row)"
              >处理
              </c-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
              style="margin-right: 30px;"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="pagination.pageIndex"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-size="pagination.pageSize"
              layout="sizes, prev, pager, next"
              :total="pagination.total">
          </el-pagination>
        </div>
      </c-col>
    </div>
    <!-- 点击处理弹框 -->
    <el-dialog
        :visible.sync="initdialog"
        title="交易列表"
        append-to-body
        width="60%"
    >
      <div class="dialog-wrap">
        <div class="btn-group-wrap">
          <div class="btn-item" v-for="(item, index) in handlerDataList" :key="index">
            <el-button
                type="primary"
                :disabled="item.value === 'N'"
                @click="handleClick(item)"
            >{{ item.label }}
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="litdckdialog">
      <el-table :data="dckData" :columns="dckColumns" style="width:100%" @row-dblclick="checkData">
        <el-table-column
            v-for="(item, key) in dckColumns"
            :key="key"
            :label="item.label"
            :prop="item.prop"
        >
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- <m-busbtn ref="childs" :ownref="ownref" trnCode="litsel" :model="litselModel" ownrefPath="lidget.lid.ownref">
    </m-busbtn> -->
  </div>
</template>
<script>
import event from '../event'
import operationFunc from "@/mixin/operationFunc";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event,operationFunc],
  components: {},
  data() {
    return {
      ownref: "",
      isGuarantee: "",
      litdckdialog: false,
      dckData: [],
      dckColumns: [
        {label: 'inr', prop: 'inr', width: '120'},
        {label: '单据申请号', prop: 'ownref', width: '120'},
        {label: 'Nam', prop: 'nam', width: '120'}
      ],
      // 表格相关
      stmData: {
        columns: [
          {
            label: '信用证编号',
            prop: 'seaownref'
          },
          {
            label: '客户经理',
            prop: 'ownusr'
          },
          {
            label: '币种',
            prop: 'seacur'
          },

          {
            label: '金额',
            prop: 'maxamt',

          },
          {
            label: '余额',
            prop: 'opnamt'
          },
          {
            label: '开立日期',
            prop: 'opndat'
          },
          {
            label: '申请人编号',
            prop: 'aplextkey',

          },
          {
            label: '申请人名称',
            prop: 'aplnam'
          },
          {
            label: '通知银行BIC编码',
            prop: 'seapty'
          },
          {
            label: '受益人名称',
            prop: 'benefi'
          },
          {
            label: '远离期限',
            prop: 'tenmaxday'
          },
        ],
        data: [],
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      // 详情
      trnData: {
        columns: [
          {
            label: '交易id',
            prop: 'inr'
          },
          {
            label: '信用证编号',
            prop: 'ownref'
          },
          {
            label: '交易名称',
            prop: 'inifrm'
          },
          {
            label: '条目',
            prop: 'inidattim'
          },
          {
            label: '状态',
            prop: 'relflg'
          },
          {
            label: '币种',
            prop: 'reloricur'
          },
          {
            label: '相关金额',
            prop: 'reloriamt'
          },
          {
            label: '标识',
            prop: 'relres'
          },
        ],
        data: [],
      },
      // 处理
      initdialog: false,
      handlerDataList: [],
      btnRouteMap: [
        {
          label: '信用证注销',
          route: '/business-new/litcan'
        },
        {
          label: '信用证修改',
          route: '/business-new/litame'
        },
        {
          label: '保函索赔登记',
          route: '/business-new/litcrq'
        },
        {
          label: '保函收费',
          route: '/business-new/litfee'
        },
        {
          label: '绑定电子凭证',
          route: '/business-new/litatt'
        },
        {
          label: '保证金收取',
          route: '/business-new/lctopn'
        },
        {
          label: '到单',
          route: '/business-new/litdck'
        },
        {
          label: '通知到单',
          route: '/business-new/litdav'
        },
        {
          label: '减额修改接收',
          route: '/business-new/litdla'
        },
        {
          label: '通知到单',
          route: '/business-new/litdav'
        },
        {
          label: '提货担保',
          route: '/business-new/litrog'
        },
      ],
      currentHandleRow: {}
    };
  },
  methods: {},
  created: function () {
  },
};
</script>
<style scope>
.m-table-search {
  padding: 20px 0px 10px 0px;
}

.pagination-box {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  background: #fff;
  margin-top: 5px;
}

.el-dialog__body {
  padding: 10px 5px 50px;
}

.m-table-search {
  padding: 20px 0px 10px 0px;
}

.btn-group-wrap {
  max-height: 200px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.btn-item {
  margin-bottom: 10px;
  margin-right: 10px;
}
</style>