Utlp.vue

<template>
  <div class="eibs-tab" style="">

    <c-col :span="24">
      <c-col :span="11">
        <c-col :span="16">
          <el-form-item label="信用证参考号" prop="didgrp.rec.ownref">
            <c-fullbox>
              <c-input v-model="model.didgrp.rec.ownref" maxlength="16" placeholder="请输入信用证参考号" disabled></c-input>
              <template slot="footer">
                <c-button style="padding: 0 14px;" size="small" type="primary">
                  <span style="font-size:15px;font-family:'宋体';font-weight:bold">i</span>
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>
        <!-- <c-col :span="1" style="text-align: right;margin-left:10px">
                    <c-button
                        style="margin:0;padding: 0 14px;"
                        size="small"
                        type="primary"
                    >
                    <span style="font-size:15px;font-family:'宋体';font-weight:bold">i</span>
                    </c-button>
                </c-col> -->

        <c-col :span="8">
          <el-form-item label="到期日" prop="didgrp.rec.expdat" label-width="30%">
            <c-fullbox>
              <c-date-picker type="date" v-model="model.didgrp.rec.expdat" style="width: 100%"
                placeholder="请选择Date of Expiry" disabled></c-date-picker>
            </c-fullbox>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="11" :offset="1">
        <c-col :span="12">
          <el-form-item label="信用证余额" prop="didgrp.cbs.opn1.cur">
            <c-input v-model="model.didgrp.cbs.opn1.cur" maxlength="3" placeholder="请输入币种" disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="didgrp.cbs.opn1.amt" label-width="2%">
            <c-input v-model="model.didgrp.cbs.opn1.amt" placeholder="请输入信用证余额" disabled></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24" style="height:24px;margin-top:-10px">
      <el-form-item label="单据信息" class="messageLabel">
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>

    <c-col :span="11" style="margin-top:10px">
      <c-col :span="24">
        <c-col :span="22">
          <el-form-item label="单据参考号" prop="bddgrp.rec.ownref">
            <c-input v-model="model.bddgrp.rec.ownref" maxlength="16" placeholder="请输入单据参考号" disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="2" style="text-align: right">
          <c-button style="margin:0;padding: 0 14px;" size="small" type="primary">
            <span style="font-size:15px;font-family:'宋体';font-weight:bold">i</span>
          </c-button>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="11" :offset="1" style="margin-top:10px">
      <el-form-item label="单据摘要" prop="bddgrp.rec.nam">
        <c-input v-model="model.bddgrp.rec.nam" maxlength="40" placeholder="请输入单据摘要" disabled>
        </c-input>
      </el-form-item>
    </c-col>

    <!-- ==========middle-left======== -->
    <c-col :span="11">
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="单据金额" prop="bddgrp.cbs.max.cur">
            <c-select v-model="model.bddgrp.cbs.max.cur" placeholder="请选择单据金额" disabled>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="bddgrp.cbs.max.amt" label-width="2%">
            <c-input v-model="model.bddgrp.cbs.max.amt" placeholder="请输入单据金额" disabled></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="单据余额" prop="bddgrp.cbs.opn1.cur">
            <c-select v-model="model.bddgrp.cbs.opn1.cur" placeholder="请选择币种" disabled></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="bddgrp.cbs.opn1.amt" label-width="2%">
            <c-input v-model="model.bddgrp.cbs.opn1.amt" placeholder="请输入单据余额" disabled></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="到单日期" prop="bddgrp.rec.rcvdat">
            <c-date-picker type="date" style="width:100%" v-model="model.bddgrp.rec.rcvdat" placeholder="请选择到单日期"
              disabled></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="1">
          &nbsp;
        </c-col>
        <c-col :span="11">
          <el-form-item label="远期起算日" prop="bddgrp.rec.stadat" label-width="40%">
            <c-date-picker type="date" v-model="model.bddgrp.rec.stadat" style="width: 100%" placeholder="请选择远期起算日"
              disabled></c-date-picker>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="单据到期日" prop="bddgrp.rec.matdat">
            <c-date-picker type="date" style="width:100%" v-model="model.bddgrp.rec.matdat"
              placeholder="请选择单据到期日" width="100%" disabled></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="1">
          &nbsp;
        </c-col>
        <c-col :span="11">
          <el-form-item label="远期期限" prop="bddgrp.rec.tenmaxday" label-width="40%">
            <c-input v-model="model.bddgrp.rec.tenmaxday" placeholder="请输入远期期限" disabled></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <el-form-item label="单据类型" prop="bddgrp.rec.docflg">
          <c-select v-model="model.bddgrp.rec.docflg" style="width: 100%" placeholder="请选择单据类型" disabled>
            <el-option v-for="item in codes.brdtyp" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="单据状态" prop="bddgrp.rec.docsta">
          <c-select v-model="model.bddgrp.rec.docsta" style="width: 100%" placeholder="请选择单据状态" disabled>
            <el-option v-for="item in codes.docsta" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- ==========middle-right======== -->
    <c-col :span="11" :offset="1">
      <c-col :span="24">
        <el-form-item label="申请人编号" prop="bddgrp.apl.pts.ref">
          <c-input v-model="model.bddgrp.apl.pts.ref" maxlength="16" placeholder="请输入申请人编号" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="申请人名称" prop="bddgrp.apl.pts.nam">
          <c-input v-model="model.bddgrp.apl.pts.nam" maxlength="40" placeholder="请输入申请人名称" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="受益人编号" prop="bddgrp.ben.pts.ref">
          <c-input v-model="model.bddgrp.ben.pts.ref" maxlength="16" placeholder="请输入受益人编号" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="受益人名称" prop="bddgrp.ben.pts.nam">
          <c-input v-model="model.bddgrp.ben.pts.nam" maxlength="40" placeholder="请输入受益人名称" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行编号" prop="bddgrp.prb.pts.ref">
          <c-input v-model="model.bddgrp.prb.pts.ref" maxlength="16" placeholder="请输入交单行编号" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行名称" prop="bddgrp.prb.pts.nam">
          <c-input v-model="model.bddgrp.prb.pts.nam" maxlength="40" placeholder="请输入交单行名称" disabled></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- <c-col :span="24" style="height:10px">
           <el-divider></el-divider>
       </c-col> -->

    <!-- =========bottom-left======== -->
    <c-col :span="24" style="height:24px;margin-top:-10px">
      <el-form-item label="付款信息" class="messageLabel">
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="11">
      <!-- <c-col :span="22" :offset="2" style="height:24px">
            <el-form-item
                class="formItemLabel"
                label="表外信息"
                label-width="300px"
            >
            </el-form-item>
        </c-col> -->
      <c-col :span="24" style="margin-top: 10px">
        <c-col :span="12">
          <el-form-item label="付款金额" prop="setmod.doccur">
            <c-input v-model="model.setmod.doccur" maxlength="3" placeholder="请输入付款金额" disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="setmod.docamt" label-width="2%">
            <c-input v-model="model.setmod.docamt" placeholder="请输入"
              @keyup.enter.native="commonExecuteRule('setmod.docamt')"></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="扣减金额" prop="setmod.doccur">
            <c-input v-model="model.setmod.doccur" placeholder="请输入扣减金额" disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="setmod.redamt" label-width="2%">
            <c-input v-model="model.setmod.redamt" placeholder="请输入扣减金额" :disabled="model.bddgrp.rec.frepayflg == 'X' "
              @keyup.enter.native="commonExecuteRule('setmod.redamt')"></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="扣费后付款金额" prop="setmod.doccur">
            <c-input v-model="model.setmod.doccur" maxlength="3" placeholder="请输入扣费后付款金额" disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="setmod.setamt" label-width="2%">
            <c-input v-model="model.setmod.setamt" placeholder="请输入" disabled></c-input>
          </el-form-item>
        </c-col>
      </c-col>

      <c-col :span="24">
        <el-form-item label="清算方式" prop="bddgrp.rec.clrmtd">

          <c-select v-model="model.bddgrp.rec.clrmtd" style="width: 100%" placeholder="请选择清算方式" disabled>
            <el-option v-for="item in codes.clrtyp" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <!-- <c-col :span="24">
        <el-form-item label="交单行联行名称">
          <c-input type="textarea" v-model="model.bddgrp.prb.pts.jigomc" style="width: 100%" maxlength="35"
            show-word-limit placeholder="请输入联行名称" disabled></c-input>
        </el-form-item>
      </c-col> -->

    </c-col>
    <!-- =========bottom-right======== -->
    <c-col :span="11" :offset="1">
      <c-col :span="24" style="margin-top:10px">
        <el-form-item>
          <c-col :span=4>
            <c-checkbox v-model="crefinflg" :disabled="model.bddgrp.rec.frepayflg === 'X'  || model.paypsb ==='X'">融资</c-checkbox>
          </c-col>
          <c-col :span="5">
            <c-checkbox v-model="clsflg" @change="clsflgOtherDefault" :disabled="clsflgFlg">闭卷</c-checkbox>
          </c-col>
          <c-col :span="5">
            <c-checkbox v-model="paypsb" :disabled="model.bddgrp.rec.frepayflg === 'X' || model.trtcre.crefinflg ==='X'">垫款</c-checkbox>
          </c-col>
          <c-col :span="5">
            <c-checkbox v-model="frepayflg" @change="frepayflgDefault">无偿放单</c-checkbox>
          </c-col>
          <c-col :span="5">
            <c-checkbox v-model="dfflag">同业代付</c-checkbox>
          </c-col>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行" prop="bddgrp.rec.docprbrol">
          <c-select v-model="model.bddgrp.rec.docprbrol" style="width: 100%" placeholder="请选择交单行"
            :code="codes.docprbrol1" @change="docprbrolChange">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行BIC" prop="bddgrp.prb.pts.extkey">
          <c-input
            v-model="model.bddgrp.prb.pts.extkey"
            maxlength="16"
            style="width: 100%"
            placeholder="请输入交单行BIC"
            @keyup.enter.native="showGridPromptDialog(`bddgrp.prb.pts.extkey`)"
            :disabled="model.bddgrp.rec.docprbrol == 'PRB' ? false : true"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行联行行号" prop="bddgrp.prb.pts.bankno">
          <c-input
            v-model="model.bddgrp.prb.pts.bankno"
            maxlength="20"
            style="width: 100%"
            placeholder="请输入交单行联行行号"
            :disabled="model.bddgrp.rec.docprbrol == 'PRB' ? false : true"
             @keyup.enter.native="showGridPromptDialog('bddgrp.prb.pts.bankno')"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行联行名称" prop="bddgrp.prb.pts.jigomc">
          <c-input
            type="textarea"
            v-model="model.bddgrp.prb.pts.jigomc"
            style="width: 100%"
            maxlength="35"
            show-word-limit
            placeholder="请输入联行名称"
            disabled
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="交单行地址" prop="bddgrp.prb.pts.dizhii">
          <c-input
            type="textarea"
            v-model="model.bddgrp.prb.pts.dizhii"
            style="width: 100%"
            maxlength="35"
            show-word-limit
            placeholder="请输入交单行地址"
            :disabled="model.bddgrp.rec.docprbrol == 'PRB' ? false : true"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24" style="height:24px;margin-top:-10px">
      <el-form-item label="表外信息" class="messageLabel">
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="24" :offset="0">
      <c-istream-table ref="bwxxIst" :list="stmData.data" :columns="stmData.columns" :paginationShow="false" v-on:multipleSelect="multipleSelect"
        :showSelection="true">
      </c-istream-table>
    </c-col>

    <c-col :span="24" style="height:24px">
      <el-form-item label="待还融资" class="messageLabel">
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="24" :offset="0">
      <div class="e-table-wrapper">
        <c-table :data="model.bptbck.bptbckg" style="width: 100%" :paginationShow="false">
          <el-table-column prop="ownref" label="Reference" width="auto">
          </el-table-column>
          <el-table-column prop="opncur" label="Cur." width="auto">
          </el-table-column>
          <el-table-column prop="opnamt" label="Open Amount" width="auto">
          </el-table-column>
          <el-table-column prop="bckamt" label="Amount Paid" width="auto">
          </el-table-column>
          <el-table-column prop="butcal" label="Cal." width="auto">
          </el-table-column>
        </c-table>
        <!-- <el-pagination
                 layout="prev, pager, next"
                 :total="pager.bptbck_bptbckg.total">
              </el-pagination> -->
      </div>
    </c-col>
    <div>
     
    </div>

  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Bdtset/Event";
import PtapDome from "~/views/Public/PtapDome";
import Utils from "~/utils";

export default {
  components: { "c-ptapdome": PtapDome },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      stmData: {
        columns: [
          '1 1 "Type" 0 ',
          '2 2 "Dbt" 0 ',
          '3 3 "Cdt" 0 ',
          '4 4 "Cur" 0 ',
          '5 5 "Amt" 0 ',
          '6 6 "Mat Dat" 0 ',
        ],
        data: [],
      },
      clsflgFlg:false
    };
  },
  computed: {
    crefinflg: {
      get() {
        
        if (this.model.bddgrp.rec.frepayflg == 'X' || this.model.paypsb =='X') {
          return false;
        }else{
          return this.model.trtcre.crefinflg != ''
        }
        
      },
      set(val) {
      
        this.model.trtcre.crefinflg = val ? "X" : ""
        
         
        
      }
    },
    clsflg: {
      get() {
        return this.model.mtabut.clsflg=='C'; 
      },
      set(val) {
        this.model.mtabut.clsflg = val ? "C" : "O"
      }
    },
    paypsb: {
      get() {
        
        if (this.model.bddgrp.rec.frepayflg == 'X'|| this.model.trtcre.crefinflg =='X' ) {
          return false;
        }else{
          return this.model.paypsb != ''
        }
        
      },
      set(val) {
        if (this.model.bddgrp.rec.frepayflg == 'X'  || this.model.trtcre.crefinflg =='X') {
          this.model.paypsb = ""
        }else{
          this.model.paypsb = val ? "X" : ""
        }
      }
    },
    frepayflg: {
      get() {
        return this.model.bddgrp.rec.frepayflg != ''
      },
      set(val) {
        if (this.model.bddgrp.rec.frepayflg == 'X' || this.model.paypsb =='X') {
          this.model.trtcre.crefinflg = ''
          this.model.paypsb = ''
        }
        this.model.bddgrp.rec.frepayflg = val ? "X" : ""
      }
    },
    dfflag: {
      get() {
        return this.model.dftcre.dfflag != ''
      },
      set(val) {
        this.model.dftcre.dfflag = val ? "X" : ""
      }
    },
  },
  methods: {
    ...Event,
        async multipleSelect(selection) {
      if (selection.length > 1) {
        this.$notify({
          title: "error",
          message: "You cannot select more than one tenor",
          type: "error",
        });
      } else {
        let chkIds;
        if (selection.length === 0) {
          chkIds = []
          // this.model.liaall.tensetstm.rows = []
          this.clsflgFlg= true
        } else {
          chkIds = [selection[0] + 1]
          this.clsflgFlg= false
        }
        //
        console.log(this.model.liaall.tensetstm);
        let params = { chkDst: "liaall.tenstm", chkIds };
        const rtnmsg = await this.executeRule("liaall.tenstm", params);
        if (rtnmsg.respCode == SUCCESS) {
          this.updateModel(rtnmsg.data);
        } else {
          this.$notify.error({ title: "错误", message: "服务请求失败！" });
        }
      }

      // console.log(selection);
      // if (selection) {
      //   let selIds = selection.map(x=>x+1);
      //   let params = {selDst:"liaall.tenstm",selIds}
      //   const rtnmsg = await this.executeRule("liaall.tenstm",params);
      //   if (rtnmsg.respCode == SUCCESS) {
      //       this.updateModel(rtnmsg.data)
      //   }
      //   else
      //           {
      //           this.$notify.error({title: '错误',message: '服务请求失败！'});
      //           }
      // }else{
      //   let selIds = selection.map(x=>x+1);
      //   let params = {selDst:"liaall.tenstm",selIds}
      //   const rtnmsg = await this.executeRule("liaall.tenstm",params);
      //   if (rtnmsg.respCode == SUCCESS) {
      //       this.updateModel(rtnmsg.data)
      //   }
      //   else
      //           {
      //           this.$notify.error({title: '错误',message: '服务请求失败！'});
      //           }
      //   // this.model.setmod.docamt = "";
      //   // this.model.setmod.setamt = "";
      //   // this.model.aamset.utlamt = "";
      // }
    },
    frepayflgDefault(){
      this.executeDefault("paypsb").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    docprbrolChange() {
      this.executeRule("bddgrp.rec.docprbrol").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
          this.stmData.data = res.data.liaall_tenstm.rows;
          this.$refs.bwxxIst.$refs.table.toggleAllSelection();
        }
      });
    },
    commonExecuteRule(ruleName) {
      this.executeRule(ruleName).then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    clsflgOtherDefault(){
      this.executeDefault("mtabut.clsflg").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
    },
    
  },
  created: function () {
  },
};
</script>
<style scoped>
.el-checkbox {
  text-align: left;
  margin-right: 0;
}

.formItemLabel>>>.el-form-item__label {
  text-align: left;
  font-weight: bold;
}

.el-col>>>.el-divider--horizontal {
  margin-top: 1px;
}

.messageLabel>>>.el-form-item__label {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
</style>>
</style>