Infsea.vue

<template>
    <div class="eibs-tab" >
        <c-list-search  @form-reset="handleReset" @form-search="onInfbutSearow">
            <!-- 持续展示区 -->
            <template v-slot="searchSlot">
                <el-form
                    class="m-table-search-form"
                    ref="paramsForm"
                    :inline="true"
                    label-position="left"
                    label-width="110px"
                    size="small"
                >
                    <c-row>
                        <c-col :span="12">
                            <el-form-item label="业务编号" prop="infcon.seaownref">
                                <c-input v-model="model.infcon.seaownref" 
                                    maxlength="16"
                                    placeholder="请输入Own Reference"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="开立日期" >
                                <el-date-picker 
                                    type="date"  
                                    v-model="model.infcon.opndatfrom" 
                                    style="width:43%"  
                                    placeholder="请选择Opening between"
                                ></el-date-picker>
                                    -
                                <el-date-picker 
                                    type="date"  
                                    v-model="model.infcon.opndatto" 
                                    style="width:43%"  
                                    placeholder="请选择Open Date to"
                                ></el-date-picker>
                            </el-form-item>
                        </c-col>
                    </c-row>

                    <!-- 可控展示区 -->
                    <el-row v-show="searchSlot.searchToggle"> 
                        <c-col :span="12" >
                            <el-form-item label="Party Reference" prop="infcon.searef">
                                <c-input 
                                    v-model="model.infcon.searef" 
                                    maxlength="16"
                                    placeholder="请输入Party Reference"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="复核状态" prop="infcon.relflg"  style="">
                                <c-select v-model="model.infcon.relflg" style="width:100%" placeholder="请选择Release Status">
                                   <!-- v-for 可用于获取码表 codes.码表名，
                                        但因可能会出现重复名,即绑定item.value不严谨，需要使用模板字符串拼接
                                        <el-option
                                            v-for="item in codes.relflg"
                                            :key="item.value"
                                        >
                                     -->
                                    <el-option
                                        v-for="(item, index) in codes.relflg"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="Select Single Party" prop="infcon.pty.extkey">
                                <c-input  
                                    v-model="model.infcon.pty.extkey" 
                                    maxlength="24"  
                                    placeholder="请输入Select Single Party"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="Party Name" prop="infcon.pty.nam">
                                <c-input  
                                    v-model="model.infcon.pty.nam" 
                                    style="width:100%"
                                    maxlength="40"  
                                    placeholder="请输入External Visible Name"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="Party Name/BIC" prop="infcon.seapty">
                                <c-input  
                                    v-model="model.infcon.seapty" 
                                    style="width:100%"
                                    maxlength="24"  
                                    placeholder="请输入Party Name/BIC"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="Role" prop="infcon.searol">
                                <c-select 
                                    v-model="model.infcon.searol" 
                                    style="width:100%" 
                                    placeholder="请选择Role"
                                >
                                    <el-option
                                       
                                         v-for="(item, index) in codes.infled_role"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="业务主题" prop="infcon.nam">
                                <c-input 
                                    v-model="model.infcon.nam" 
                                    style="width:100%"
                                    maxlength="40" 
                                    placeholder="请输入Name"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="Resp.User" prop="infcon.usr.extkey">
                                <c-input  
                                    v-model="model.infcon.usr.extkey"
                                    style="width:100%"
                                    maxlength="8"  
                                    placeholder="请输入User ID"
                                ></c-input>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="业务状态"  prop="infcon.seasta">
                                <c-select v-model="model.infcon.seasta" style="width:100%" placeholder="请选择Status">
                                    <el-option
                                        v-for="(item, index) in codes.seasta"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="币种" prop="infcon.seacur">
                                <c-select v-model="model.infcon.seacur" style="width:100%" placeholder="请选择Currency">
                                    <el-option
                                        v-for="(item, index) in codes.infled_Cur"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="12">
                            <el-form-item label="是否显示查询码" prop="infcon.cxmflg" >
                                <c-select 
                                    v-model="model.infcon.cxmflg" 
                                    style="width:100%" 
                                    placeholder="请选择是否显示查询码"
                                >
                                    <el-option
                                        v-for="(item,index) in codes.cxmflg"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>    
                        <c-col :span="12">
                            <el-form-item label="金额" >
                                <c-input  
                                    v-model="model.infcon.seaamtfr"  
                                    placeholder="请输入Amount between" 
                                    style="width:45%"
                                ></c-input>
                                    -
                                <c-input  
                                    v-model="model.infcon.seaamtto"  
                                    placeholder="请输入Amount to" 
                                    style="width:45%"
                                ></c-input>
                            </el-form-item>
                        </c-col>

                        <c-col :span="12">
                            <el-form-item label="信用证类型" prop="sealcrtyp">
                                <c-select 
                                    v-model="model.sealcrtyp" 
                                    style="width:100%" 
                                    placeholder="请选择Form of L/C"
                                >
                                    <el-option
                                        v-for="(item, index) in codes.infled_sealcrtyp"
                                        :key="`${item.value}_${index}`"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </c-select>
                            </el-form-item>
                        </c-col>
                    </el-row>   
                </el-form>
            </template>
        </c-list-search>    
        <el-col :span="24" style="padding: 20px 16px;">
            <c-button size="small" type="primary" title="LETOPN"  @click="toLetopn('letopn')">
                出口信用证开立
            </c-button>
            <c-button size="small" type="primary"  @click="onInfbutDsp">
                Display
            </c-button>
            <!-- <c-button size="small" type="primary"  @click="onInfbutUserow">
                Use
            </c-button>-->
            <c-button size="small" type="primary"  @click="onInfbutClr">
                Clear
            </c-button>
            <c-button size="small" type="primary"  @click="onInfbutButprt">
                导Excel
            </c-button>
            <c-button size="small" type="primary"  @click="onInfbutExi">
                Exit
            </c-button>
        </el-col>
        <c-col :span="24">
            <!-- <c-istream-table :list="this.model.infbut.dspstm" :columns="columns" style="padding: 0 16px;"> -->
            <c-istream-table :list="stmData.data" :columns="stmData.columns" style="padding: 0 16px;">
                <el-table-column
                    fixed="right"
                    prop="op"
                    label="操作"
                    width="150px"
                >
                    <template slot="header">
                        <c-col :span="11" style="text-align:left"><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">                     
                        <!-- @click="getButtons(scope.row['Reference'])" -->
                        <c-button
                            style="margin-left: 0"
                            size="small"
                            type="primary"
                           @click="getButtons(scope.row['业务编号'])"
                        >
                            处理
                        </c-button>
                    </template>
                </el-table-column>
            </c-istream-table>
        </c-col>
        <el-dialog :visible.sync="initdialog" :title="'交易列表'" append-to-body>
            <div class="m-list-btns">
                <m-busbtn 
                    ref="childs"  
                    :ownref="curownref"  
                    @onChoose="onChoose" 
                >
                    11
                </m-busbtn>
            </div>
        </el-dialog> 
    </div>  
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Infled/Event"
import BusNavbar from "~/views/Business/Infled/BusNavbar"

export default {
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
    components:{'m-busbtn':BusNavbar},

    data(){
       return {
            curownref:"",
            initdialog:false,
            stmData: {
                columns: [
                    //第一个数字表示代表是返回来数据的第几列，第二数字代表前端显示的列顺序
                    '1 1 \"业务编号\" 130 200',
                    "2 2 \"经办柜员\" 90 80",
                    "4 5 \"开立日期\" 150 250",
                    "5 6 \"到期日\" 150 250",
                    "7 7 \"分行名称\" 200 300",
                    "8 8 \"申请人编号\" 100 200",
                    "9 9 \"申请人名称\" 200 300",
                    "12 10 \"受益人名称\" 200 300",
                    "15 11\"开证行名称\" 100 300",
                    "16 3 \"开立币种\" 80 80",
                    "17 4 \"开立金额\" 90 80",
                ],
                data: [],
             },
            trnData: {
                columns: [
                '1 1 "编号" 200',
                '2 2 "交易名称" 100',
                '3 3 "日期" 200',
                '4 4 "状态" 50',
                '5 5 "币种" 80',
                '6 6 "金额" 80',
                ],
                data: [],
            },
        }
    },
    methods:{
        ...Event,
        async getButtons(ownref){
            this.initdialog = true
            this.curownref = ownref
            console.log("curownref:" +ownref);
            setTimeout(()=>{
                this.$refs.childs.$emit("childmethods")
                },10
            )
        },
        async  onChoose(code){
            //跳转交易
            this.$router.history.push("/business/" + code)                     
        },
        
        // 重置查询参数
        handleReset: function () {
            this.model.infcon.seaownref="";
            this.model.infcon.opendatfrm="";
            this.model.infcon.opndatto="";
            this.model.infcon.searef="";
            this.model.infcon.relflg="";
            this.model.infcon.pty.extkey="";
            this.model.infcon.pty.nam="";
            this.model.infcon.seapty="";
            this.model.infcon.searol="";
            this.model.infcon.nam="";
            this.model.infcon.usr.extkey="";
            this.model.infcon.seasta="";
            this.model.infcon.seacur="";
            this.model.infcon.cxmflg="";
            this.model.infcon.seaamtfr="";
            this.model.infcon.seaamtto="";
            this.model.sealcrtyp="";
        },
        // 跳转至出口信用证开立
        toLetopn(){
            this.$router.history.push("/business/letopn") 
        },
        closeTrn(refId){
          this.$refs[refId].doClose();
        },
    },
   
    created:function(){

    }
}
</script>
<style>

</style>