Utlp.vue

<template>
  <div class="eibs-tab">
  <c-row>
    <c-col :span="24">                         
       <c-col :span="11">
        <el-form-item 
            label="信用证编号" 
            prop="lidgrp.rec.ownref"
            style="width = 100%">
            <c-fullbox>
              <c-input
                  v-model="model.lidgrp.rec.ownref"
                  maxlength="16"
                  placeholder="请输入信用证编号"
                  disabled
              ></c-input>
              <template slot="footer">
                <c-button
                style="margin:0 0 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  @click="onSeainf"
                >
                <span style="font-family:'宋体';font-weight:bold">i</span>
                </c-button>
              </template>
           </c-fullbox>
        </el-form-item>
       </c-col>
       <c-col :span="11" :offset="1">
        <el-form-item label="Date of Expiry" prop="lidgrp.rec.expdat">
            <c-date-picker 
                type="date"  
                v-model="model.lidgrp.rec.expdat" 
                style="width:100%"  
                placeholder="请选择Date of Expiry"
                disabled
                >
            </c-date-picker>
        </el-form-item>
       </c-col>
    </c-col>    

    <!-- ====================左边======================= -->

    <c-col :span="11">  
        <c-col :span="24">
            <el-form-item
                label="单据参考号"
                prop="brdgrp.rec.ownref"
                style="width: 100%"
            >
            <c-fullbox>
                <c-input
                v-model="model.brdgrp.rec.ownref"
                maxlength="8"
                placeholder="请输入单据参考号"
                disabled
            ></c-input>
                <template slot="footer">
                <c-button
                style="margin:0 0 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  @click="onSeainf">
                <span style="font-family:'宋体';font-weight:bold">i</span>
                </c-button>
                </template>  
          </c-fullbox>
        </el-form-item>
        </c-col>
         <c-col :span="24">
            <c-col :span="13">
                <el-form-item label="单据金额" prop="brdgrp.cbs.max.cur">
                    <c-select v-model="model.brdgrp.cbs.max.cur" style="width:100%" placeholder="请选择单据金额" :code="codes.cur" disabled>
                    </c-select>
                </el-form-item>
            </c-col>
            <c-col :span="11">
                <el-form-item label="" prop="brdgrp.cbs.max.amt" label-width="5px">
                    <c-input
                    v-model="model.brdgrp.cbs.max.amt"
                     placeholder="请选择单据金额"
                     disabled
                    ></c-input>
            </el-form-item>
           </c-col>
        </c-col>
        <c-col :span="24">
            <c-col :span="13">
                <el-form-item label="单据余额" prop="brdgrp.cbs.opn1.cur" >
                    <c-input  v-model="model.brdgrp.cbs.opn1.cur" maxlength="3"  placeholder="请输入单据余额" disabled></c-input>
                </el-form-item>
           </c-col>
           <c-col :span="11">
            <el-form-item label="" prop="brdgrp.cbs.opn1.amt" label-width="5px">
                <c-input  v-model="model.brdgrp.cbs.opn1.amt"  placeholder="请输入单据余额" disabled></c-input>
            </el-form-item>
           </c-col>
       </c-col>
       <c-col :span="12">
        <el-form-item label="到单日期" prop="brdgrp.rec.rcvdat">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.rcvdat" style="width:100%"  placeholder="请选择到单日期" disabled></c-date-picker>
        </el-form-item>
       </c-col>
       <c-col :span="12">
        <el-form-item label="付款通知日期" prop="brdgrp.rec.advdat" label-width="120px">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.advdat" style="width:100%"  placeholder="请选择Date of Advice of Payment" disabled></c-date-picker>
        </el-form-item>
       </c-col>
       <c-col :span="12">
        <el-form-item label="远期单据到期日" prop="brdgrp.rec.matdat">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.matdat" style="width:100%"  placeholder="请选择到单日期" disabled></c-date-picker>
        </el-form-item>
       </c-col>
       <c-col :span="12">
        <el-form-item label="start Date" prop="brdgrp.rec.stadat" label-width="120px">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.stadat" style="width:100%"  placeholder="请选择远期单据到期日" disabled></c-date-picker>
        </el-form-item>
       </c-col>
       <c-col :span="12">
        <el-form-item label="单据类型" prop="brdgrp.rec.docflg">
            <c-select v-model="model.brdgrp.rec.docflg" style="width:100%" placeholder="请选择单据类型" :code="codes.docflg" disabled>
              </c-select>
        </el-form-item>
       </c-col>
       <c-col :span="12">
        <el-form-item label="Tenor" prop="brdgrp.rec.tenmaxday" label-width="120px">
            <c-input  v-model="model.brdgrp.rec.tenmaxday"  placeholder="请输入Tenor day" disabled></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="单据状态" prop="brdgrp.rec.docsta">
            <c-select v-model="model.brdgrp.rec.docsta" style="width:100%" placeholder="请选择单据状态" :code="codes.docsta1" disabled>
              </c-select>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="Tenor Stream" prop="liaall.tenstm.rows">
            <c-istream-table
              :list="model.liaall.tenstm.rows"
              :columns="columns"
              :showSelection=true
              v-on:multipleSelect="multipleSelect"
            >
            </c-istream-table>
        </el-form-item>
       </c-col>

         <c-col :span="24">
           <c-col :span="13">
            <el-form-item label="Amount Settled" prop="setmod.doccur">
                <c-input  v-model="model.setmod.doccur" maxlength="3"  placeholder="请输入document currency" disabled></c-input>
            </el-form-item>
           </c-col>
           <c-col :span="11">
                <el-form-item label="" label-width="5px" prop="setmod.docamt">
                    <c-input  v-model="model.setmod.docamt"  placeholder="请输入document amount" @blur="onChangeDocamt"></c-input>
                </el-form-item>
           </c-col>
        </c-col>
        <c-col :span="24">
           <c-col :span="13">
            <el-form-item label="Reduce Amt.settled" prop="setmod.doccur">
                <c-input  v-model="model.setmod.doccur" maxlength="3"  placeholder="请输入document currency" disabled></c-input>
            </el-form-item>
           </c-col>
           <c-col :span="11">
            <c-fullbox>
                <el-form-item label="" label-width="5px" prop="setmod.setamt">
                <c-input  v-model="model.setmod.setamt"  placeholder="请输入document amount" :disabled=this.flag3></c-input>
                </el-form-item>
            </c-fullbox>
           </c-col>
       </c-col>



        <c-col  :span="24">
           <c-col :span="13">
            <el-form-item label="单据金额" prop="brdgrp.cbs.opn2.cur">
                <c-select v-model="model.brdgrp.cbs.opn2.cur" style="width:100%" placeholder="请选择单据金额" :code="codes.cur" disabled>
                  </c-select>
            </el-form-item>
           </c-col>
           <c-col :span="11">
            <el-form-item label="" prop="aamset.utlamt" label-width="5px">
                <c-input  v-model="model.aamset.utlamt"  placeholder="请输入单据金额" :disabled=this.flag3></c-input>
            </el-form-item>
           </c-col>
       </c-col>

       <c-col :span="24">
           <c-col :span="13">
            <el-form-item label="附加金额" prop="brdgrp.cbs.opn2.cur">
                <c-select v-model="model.brdgrp.cbs.opn2.cur" style="width:100%" placeholder="请选择附加金额" :code="codes.cur" disabled>
                  </c-select>
            </el-form-item>
           </c-col>
           <c-col :span="11">
            <el-form-item label="" prop="aamset.utlamt2" label-width="5px">
                <c-input  v-model="model.aamset.utlamt2"  placeholder="" :disabled=this.flag3></c-input>
            </el-form-item>
           </c-col>
       </c-col>
        <c-col :span="24">
            <c-col :span="12">
                <el-form-item label="跨境人民币清算模式" prop="trnmod.cmtflg">
                    <c-select
                    v-model="model.trnmod.cmtflg"
                    style="width:100%"
                    placeholder="请选择跨境人民币清算模式"
                    :code="this.cmtflg"
                    @change="commonExecuteRule('trnmod.cmtflg')"
                    >
                      </c-select>
                </el-form-item>
            </c-col>
           <c-col :span="12">
                <el-form-item label="Close Flag" label-width="80px" prop="setmod.docamt" style="margin-left:20px">
        	        <c-checkbox v-model="model.mtabut.clsflg" style="margin-left:20px" true-label="X"></c-checkbox>
                </el-form-item>
               </c-col>
       </c-col>
       <c-col :span="24">
        <el-form-item label="报文类型" prop="trnmod.swftyp" v-show="model.trnmod.cmtflg=='P'?true:false">
            <c-select v-model="model.trnmod.swftyp" style="width:100%" placeholder="请选择报文类型" :code="codes.swftyp1" disabled>
              </c-select>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="发票号" prop="brdgrp.rec.invref">
            <c-input  v-model="model.brdgrp.rec.invref" maxlength="35"  placeholder="请输入发票号"></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="最迟送达日期" prop="zcsdrq">
            <c-date-picker type="date"  v-model="model.zcsdrq" style="width:100%"  placeholder="请选择最迟送达日期"></c-date-picker>
        </el-form-item>
       </c-col>

       <c-col :span="24">
        <div class="e-table-wrapper">
            <c-table
                style="text-align: center"
                :list="table1"
                :paginationShow="false"
                :border="true"
                >

            <el-table-column label="Reference" prop="ownref" width="auto"></el-table-column>
            <el-table-column label="Cur." prop="opncur" width="auto"></el-table-column>
            <el-table-column label="Open Amount" prop="opnamt" width="auto"></el-table-column>
            <el-table-column label="Amount Paid" prop="bckamt" width="auto"></el-table-column>
            <el-table-column label="Cal." prop="butcal" width="auto"></el-table-column>

              </c-table>

       </div>
       </c-col>

         <c-col :span="12">
                <el-form-item label="是否需要检验" prop="brtp.ischktyp">
                    <c-select v-model="model.brtp.ischktyp" style="width:100%" placeholder="" :code="codes.ischktyp" >
                        <el-option
                            v-for="item in codes.ischktyp"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                        </el-option>
                      </c-select>
                 </el-form-item>
           </c-col>

       <c-col :span="12">
        <el-form-item label="预计核验日期" prop="brtp.prechkdat">
            <c-date-picker type="date"  v-model="model.brtp.prechkdat" style="width:100%"  placeholder="请选择预计核验日期" :disabled="model.brtp.ischktyp=='N'?true:false"></c-date-picker>
        </el-form-item>
       </c-col>


    </c-col>
    <!-- ====================右边======================= -->
    <c-col :span="11" :offset="1">
        <c-col :span="24">
        <el-form-item label="Name of Bill Contract" prop="brdgrp.rec.nam">
            <c-input  v-model="model.brdgrp.rec.nam" maxlength="40"  placeholder="请输入Name of Bill Contract" disabled></c-input>
        </el-form-item>
       </c-col>

        
       <c-col :span="24">
        <el-form-item label="Applicant" prop="brdgrp.apl.pts.ref">
            <c-input  v-model="model.brdgrp.apl.pts.ref" maxlength="16"  placeholder="请输入申请人" disabled></c-input>
        </el-form-item>
       </c-col>


        <c-col :span="24">
        <el-form-item label="Name of Party" prop="brdgrp.apl.pts.nam">
            <c-input  v-model="model.brdgrp.apl.pts.nam" maxlength="40"  placeholder="请输入Name of Party" disabled></c-input>
        </el-form-item>
       </c-col>


       <c-col :span="24">
        <el-form-item label="Beneficiary" prop="brdgrp.ben.pts.ref">
            <c-input  v-model="model.brdgrp.ben.pts.ref" maxlength="16"  placeholder="请输入受益人" disabled></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="Name of Party" prop="brdgrp.ben.pts.nam">
            <c-input  v-model="model.brdgrp.ben.pts.nam" maxlength="40"  placeholder="请输入Name of Party" disabled></c-input>
        </el-form-item>
       </c-col>

        <c-col :span="24">
        <el-form-item label="Preseenting Bank" prop="brdgrp.prb.pts.ref">
            <c-input  v-model="model.brdgrp.prb.pts.ref" maxlength="16"  placeholder="请输入交单行" disabled></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="24">
        <el-form-item label="Name of Party" prop="brdgrp.prb.pts.nam">
            <c-input  v-model="model.brdgrp.prb.pts.nam" maxlength="40"  placeholder="请输入Name of Party" disabled></c-input>
        </el-form-item>
       </c-col>
       
       <c-col :span="12">
        <el-form-item label="Create Financing" prop="trtcre.crefinflg">
	    <c-checkbox v-model="model.trtcre.crefinflg" :disabled="model.paypsb != '' || model.brdgrp.rec.frepayflg !=''?true:false"></c-checkbox>
        </el-form-item>
       </c-col>       
       <c-col :span="12">
        <el-form-item label="同业代付" prop="dftcre.dfflag">
	    <c-checkbox v-model="model.dftcre.dfflag"></c-checkbox>
        </el-form-item>
       </c-col>

         <c-col :span="12">
            <el-form-item label="Unpaid by Applicant" prop="paypsb">
	                <c-checkbox v-model="model.paypsb"
                        :disabled="model.brdgrp.rec.frepayflg == ''?false:true"
	                ></c-checkbox>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Free of Payment Flag" prop="brdgrp.rec.frepayflg">
	    <c-checkbox v-model="model.brdgrp.rec.frepayflg"></c-checkbox>
        </el-form-item>
       </c-col>

        <c-col :span="24">
        <c-col :span="13">
        <el-form-item label="Reduction Amt." prop="setmod.doccur">
            <c-input  v-model="model.setmod.doccur" maxlength="3"  placeholder="请输入document currency" disabled></c-input>
        </el-form-item>
       </c-col>
       <c-col :span="11">
        <el-form-item label="" prop="setmod.redamt" label-width="5px">
            <c-input  v-model="model.setmod.redamt"  placeholder="请输入Reduction Amt."></c-input>
        </el-form-item>
       </c-col>
       </c-col>

       <c-col :span="24">
        <el-form-item label="合同号" prop="brdgrp.rec.rptref">
            <c-input  v-model="model.brdgrp.rec.rptref" maxlength="25"  placeholder="请输入合同号"></c-input>
        </el-form-item>
       </c-col>

       <c-col :span="24">
        <el-form-item label="Narrative :77A:" prop="nar754">
            <c-input type="textarea" v-model="model.nar754" maxlength="35" show-word-limit placeholder="请输入Narrative :77A:" ></c-input>
        </el-form-item>
        </c-col>

        <c-col :span="24">
        <el-form-item label="Presented by" prop="brdgrp.rec.docprbrol">
            <c-select v-model="model.brdgrp.rec.docprbrol" style="width:100%" placeholder="请选择Presented by" :code="codes.docprbrol">
              </c-select>
        </el-form-item>
       </c-col>

        <c-col :span="24">
        <el-form-item label="External Key of Address" prop="brdgrp.prb.pts.extkey">
            <c-fullbox>
                <c-input
                    v-model="model.brdgrp.prb.pts.extkey"
                    maxlength="16"
                    placeholder="请输入External Key of Address"
                    @keyup.enter.native="showGridPromptDialog('brdgrp.prb.pts.extkey')"
                    ></c-input>
                <template slot="footer">
                <c-button
                style="margin:0 10px 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  @click="onSeainf">
                <span style="font-family:'宋体';font-weight:bold">i</span>
                </c-button>
                <c-button
                style="margin:0 0 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  @click="onSeainf">
                <span style="font-family:'宋体';font-weight:bold">det</span>
                </c-button>
                </template>  
          </c-fullbox>


        </el-form-item>
       </c-col>





        <c-col :span="24">
        <el-form-item label="Address Block" prop="brdgrp.prb.pts.adrblk">
            <c-input type="textarea" v-model="model.brdgrp.prb.pts.adrblk" maxlength="35" show-word-limit placeholder="请输入Address Block" disabled></c-input>
        </el-form-item>
        </c-col>

    </c-col>    
    </c-row>           
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Brtset/Event"

export default {
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
    data(){
        return {
            flag3:true,
            cmtflg:[
              { label: "代理行模式", value: "C" },
              { label: "Other", value: "O" },
              { label: "CIPS系统", value: "P" },
            ],
             table1:[],
            columns:[
                "1 1 \"Type\" 80",
                "2 2 \"Dbt\" 80",
                "3 3 \"Cdt\" 80",
                "4 4 \"Cur\" 80",
                "5 5 \"Amt\" 85 2 8 1 4",
                "6 6 \"Mat.Dat.\" 105 4 7 1"
            ]
        }
    },
    methods:{...Event,

         commonExecuteRule(ruleName) {
              this.executeRule(ruleName).then((res) => {
                if ((res.respCode == SUCCESS)) {

                }
              });
            },
          async multipleSelect(selection) {
                if(selection.length>0){
                  console.log(selection);
                  let line = this.model.liaall.tenstm.rows[selection];
                  let lines = line.split('\t');
                  this.model.setmod.docamt = lines[5];
                }else{
                  this.model.setmod.docamt = 0.000;
                }
                 this.onChangeDocamt();
            },
    },
    created:function(){

    },
    watch: {
        declareParams() {},
         "model.trnmod.cmtflg":{
            immediate:true,
            handler(val ,oldVal){
                if(this.model.trnmod.cmtflg=='P'){
                    this.model.trnmod.swftyp='CIV';
                }else{
                    this.model.trnmod.swftyp='';
                }
            }
          },
    },
}
</script>
<style>

</style>