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">
                                    <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="infcon.nam">
                                    <c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入业务简略信息"></c-input>
                                </el-form-item>
                            </c-col>
                        </c-col>
                    </c-row>

                    <!-- 可控展示区 -->
                    <el-row v-show="searchSlot.searchToggle">
                        <c-row>
                            <c-col :span="24">
                                <c-col :span="8">
                                    <el-form-item label="当事人编号" prop="infcon.pty.extkey">
                                        <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">
                                        <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">
                                        <c-input v-model="model.infcon.seapty" maxlength="24"
                                            placeholder="请输入当事人BIC编码"></c-input>
                                    </el-form-item>
                                </c-col>
                            </c-col>

                            <c-col :span="24">
                                <c-col :span="8">
                                    <el-form-item label="当事人角色" prop="infcon.searol">
                                        <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.searef">
                                        <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.seaamtto">
                                        <c-input v-model="model.infcon.seaamtto" placeholder="请输入金额上限"></c-input>
                                    </el-form-item>
                                </c-col>
                            </c-col>

                            <c-col :span="24">
                                <c-col :span="8">
                                    <el-form-item label="客户经理" prop="infcon.usr.extkey">
                                        <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">
                                        <c-select v-model="model.infcon.seasta" style="width: 100%"
                                            placeholder="请选择业务状态" :code="codes.seasta">
                                        </c-select>
                                    </el-form-item>
                                </c-col>

                                <c-col :span="8">
                                    <el-form-item label="币种" prop="infcon.seacur">
                                        <c-select v-model="model.infcon.seacur" style="width: 100%"
                                            placeholder="请选择币种" :code="codes.curtxt1">
                                        </c-select>
                                    </el-form-item>
                                </c-col>
                            </c-col>

                            <c-col :span="24">
                                <c-col :span="8">
                                    <el-form-item label="金额下限" prop="infcon.seaamtfr">
                                        <c-input v-model="model.infcon.seaamtfr" placeholder="请输入金额下限">
                                        </c-input>
                                    </el-form-item>
                                </c-col>

                                <c-col :span="8">
                                    <el-form-item label="是否通过电证系统" prop="elcflg">
                                        <c-select v-model="model.elcflg" style="width: 100%" placeholder="请选择是否通过电证系统"
                                            :code="codes.elcflg">
                                        </c-select>
                                    </el-form-item>
                                </c-col>

                                <c-col :span="8">
                                    <el-form-item label="">
                                        <c-checkbox v-model="model.infcon.forflg">转卖单据</c-checkbox>
                                    </el-form-item>
                                </c-col>
                            </c-col>

                            <c-col :span="24">
                                <c-col :span="8">
                                    <el-form-item label="文件类型" prop="seadoctypcod">
                                        <c-select v-model="model.seadoctypcod" style="width: 100%"
                                            placeholder="请选择文件类型" :code="codes.brdtyp">
                                        </c-select>
                                    </el-form-item>
                                </c-col>
                            </c-col>
                        </c-row>
                    </el-row>
                </el-form>
            </template>
        </c-list-search>
        
        <c-col :span="24">
            <c-istream-table :list="stmData.data" :columns="stmData.columns" :showButtonFlg="true">
                <el-table-column fixed="right" prop="op" 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['信用证编号'])">
                            处理
                        </c-button>
                    </template>
                </el-table-column>
            </c-istream-table>
        </c-col>
        <m-busbtn ref="childs" :ownref="ownref" trnCode="detsel" ownrefPath="bfdgrp" tabIndex=3 :model="detselModel"
            @onChoose="onChoose"></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/Infbfd/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: "",
            initdialog: false,
            dialogTableVisible: false,
            trnData: {
                columns: [
                    '1 1 "编号" 200',
                    '2 2 "交易名称" 100',
                    '3 3 "日期" 200',
                    { index: 4, position: 4, width: 100, pattern: 'code', label: '状态', code: this.codes.relstaEN },
                    '5 5 "币种" 80',
                    '6 6 "金额" 80',
                ],
                data: [],
            },

            stmData: {
                columns: [
                    '2 1 "信用证编号" 120 ',
                    '3 2 "客户经理" 100 ',
                    '6 3 "第一当事人编号" 200 ',
                    '7 4 "申请人名称" 150 ',
                    '8 5 "第二当事人编号" 200 ',
                    '9 6 "受益人名称" 150 ',
                    '10 7 "第三当事人编号" 200 ',
                    '11 8 "开证行名称" 150 ',
                    '12 9 "第四当事人编号" 200 ',
                    '13 10 "采购行名称" 150 ',
                    '1 11 "转卖日期" 150 ',
                    '4 12 "开立日期" 150 ',
                    '5 13 "关闭日期" 150 ',
                    '14 14 "单据币种" 100 ',
                    '15 15 "单据金额" 150 ',
                    '16 16 "余额币种" 100 ',
                    '17 17 "余额" 150 ',
                ],
                data: [],
            },
        };
    },
    /*
    computed: {
    tableData() {
      // "10000449\t2000007350\t2000007350-001\tBEIJING TESTTEST,BEIJING, CHINA\t\t100080\tBEIJING, CHINA\tTEST TEST1 CO.,LTD."
      console.log(this.model.infbut.dspstm.rows)
      return this.model.infbut.dspstm.rows;
    },
  },
  */
    methods: {
        ...Event,
        async getButtons(ownref) {
            this.ownref = ownref
            this.$refs.childs.initdialog = true
            console.log("ownref:" + ownref);
        },
        async onChoose(code) {
            //跳转交易
            this.$router.history.push("/business/" + code)
            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.bfdgrp.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();
        },
    },
    created: function () { },
};
</script>