Ovwp.vue

<template>
  <c-row>
    <!-- =================顶部====================== -->
    <c-col :span="24">
      <c-col :span="11">
        <c-col :span="20">
          <el-form-item label="Reference" prop="bodgrp.rec.ownref" style="width: 100%">
            <c-input v-model="model.bodgrp.rec.ownref" maxlength="16" placeholder="请输入Reference" style="width: 95%"
              disabled></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="1">
        </c-col>
        <c-col :span="3" style="text-align: right">
          <c-button style="margin:0 0" size="small" type="primary" :disabled="this.model.bodgrp.drr.pts.extkey==''" @click="onBotpButgetref">
            获取
          </c-button>
        </c-col>
      </c-col>
      <c-col :span="11" :offset="1">
        <el-form-item label="摘要" prop="bodgrp.rec.nam">
          <c-input text-align="middle" v-model="model.bodgrp.rec.nam" maxlength="40" disabled
            placeholder="请输入Externally Displayed Name to Identify the Contract"></c-input>
        </el-form-item>
      </c-col>
    </c-col>
    <!-- ====================左边======================= -->
    <c-col :span="11">
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="Responsible User" prop="ditp.usr.extkey" style="width: 100%">
            <c-row>
              <c-col :span="20">
                <c-input style="width: 95%" v-model="model.botp.usr.extkey" maxlength="8" placeholder="请输入User ID"
                  disabled></c-input>
              </c-col>
              <c-col :span="4">
                <c-button style="margin:0 10px 0 0;padding: 0 10px;" size="small" icon="el-icon-search" type="primary">
                </c-button>
              </c-col>
            </c-row>
          
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="" prop="bodgrp.rec.dircolflg">
            <c-checkbox v-model="model.bodgrp.rec.dircolflg">Direct Collection</c-checkbox>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Document Amount" prop="bodgrp.cbs.max.cur">
          <c-select v-model="model.bodgrp.cbs.max.cur" style="width: 100%" placeholder="请选择Currency"  @change="changeCur">
            <el-option v-for="item in codes.curtxt1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item style="text-align: left" label-width="20px" prop="bodgrp.cbs.max.amt">
          <c-input-currency v-model="model.bodgrp.cbs.max.amt" style="text-align: left; width: 100%"
            placeholder="请输入Document Amount"
            @keyup.enter.native="defaultFunction('bodgrp.cbs.max.amt', model.bodgrp.cbs.max.amt)"></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Open Amount" prop="bodgrp.cbs.opn1.cur">
          <c-select disabled v-model="model.bodgrp.cbs.opn1.cur" style="width: 100%" placeholder="请选择Currency">
            <el-option v-for="item in codes.cur" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item style="text-align: left" label-width="20px" prop="bodgrp.cbs.opn1.amt">
          <c-input-currency v-model="model.bodgrp.cbs.opn1.amt" style="text-align: left; width: 100%"
            placeholder="请输入" :disabled="true"
            @keyup.enter.native="defaultFunction('bodgrp.cbs.opn1.amt', model.bodgrp.cbs.opn1.amt)"></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Order Date" prop="bodgrp.rec.rcvdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.rcvdat" style="width:100%" placeholder="请选择Order Date">
          </c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Shipment date" prop="bodgrp.rec.shpdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.shpdat" style="width:100%"
            placeholder="请选择Shipment date"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Presentation Date" prop="bodgrp.rec.predat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.predat" style="width:100%"
            placeholder="请选择Presentation Date"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Dispatched on" prop="bodgrp.rec.advdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.advdat" style="width:100%" :disabled="true"
            placeholder="请选择Dispatched on"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Collection Condition" prop="bodgrp.rec.doctypcod">
          <c-select v-model="model.bodgrp.rec.doctypcod" style="width:100%" placeholder="请选择Collection Condition"
            :code="codes.doctypcod">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Maturity Date" prop="bodgrp.rec.matdat">
          <c-date-picker type="date" v-model="model.bodgrp.rec.matdat" style="width:100%"
            :disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请选择Maturity Date"></c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="发票类型" prop="bodgrp.rec.invtyp">
          <c-select v-model="model.bodgrp.rec.invtyp" style="width:100%" :code="invtyp">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Tenor Specification" prop="bodgrp.rec.matpercnt">
          <c-input v-model.number="model.bodgrp.rec.matpercnt" placeholder="请输入Tenor Specification"
            onkeyup="value=value.replace(/[^\d]/g,' ')" :disabled="model.bodgrp.rec.doctypcod === 'P'"></c-input>
        </el-form-item>
      </c-col>
      <c-col  :span="1" style="margin-left:-10px">
        <el-form-item label="Days"> </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Starting from" prop="bodgrp.rec.matperbeg">
          <c-select v-model="model.bodgrp.rec.matperbeg" style="width:100%" placeholder="请选择Starting from"
            :code="codes.matperbeg" :disabled="model.bodgrp.rec.doctypcod === 'P'">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Tenor Details Text" prop="bodgrp.blk.bogdet">
          <c-input type="textarea" v-model="model.bodgrp.blk.bogdet" maxlength="43" show-word-limit
            :disabled="model.bodgrp.rec.doctypcod === 'P'" placeholder="请输入Tenor Details Text"></c-input>
        </el-form-item>
      </c-col>

      

      <c-docpre :model="model" :argadr="{
          path: 'SEMFLG',
          grp: 'botp',
          code: 'docpre'
        }"></c-docpre>

    </c-col>
    <!-- ====================右边======================= -->
    <c-col :span="11" :offset="1">
    <!-- <c-col :span="24">
        <el-form-item
          label="Drawer参考号"
          prop="bodgrp.drr.pts.ref"
        >
          <c-input
            v-model="model.bodgrp.drr.pts.ref"
            maxlength="16"
            style="width: 100%"
            placeholder="请输入Application Ref"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Drawer" prop="bodgrp.drr.pts.extkey">
            <c-fullbox>
          <c-input
            v-model="model.bodgrp.drr.pts.extkey"
            maxlength="50"
            placeholder="请输入External Key of Address"
            @keyup.enter.native="showGridPromptDialog('bodgrp.drr.pts.extkey')"
          ></c-input>
            <template slot="footer">
                <c-button
                style="margin:0 10px 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                 
                >
                
                </c-button>
                <c-button
                style="margin:0 0"
                  size="small"
                  type="primary"
                  @click="onAplpDet"
                >
                  详情
                </c-button>
              </template>
            </c-fullbox>
        </el-form-item>

    </c-col>

      <c-col :span="24">
        <el-form-item label="地址名称" prop="bodgrp.drr.pts.adrblk">
          <c-input
            type="textarea"
            :rows="4"
            v-model="model.bodgrp.drr.pts.adrblk"
            maxlength="50"
            :disabled="this.flag1"
            show-word-limit
            placeholder="请输入Address Block"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="Collecting Bank参考号"
          prop="bodgrp.col.pts.ref"
        >
          <c-input
            v-model="model.bodgrp.col.pts.ref"
            maxlength="16"
            style="width: 100%"
            placeholder="请输入Application Ref"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Collecting Bank" prop="bodgrp.col.pts.extkey">
            <c-fullbox>
          <c-input
            v-model="model.bodgrp.col.pts.extkey"
            maxlength="50"
            placeholder="请输入External Key of Address"
            @keyup.enter.native="showGridPromptDialog('bodgrp.col.pts.extkey')"
          ></c-input>
            <template slot="footer">
                <c-button
                style="margin:0 10px 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                 
                >
                
                </c-button>
                <c-button
                style="margin:0 0"
                  size="small"
                  type="primary"
                  @click="onAplpDet"
                >
                  详情
                </c-button>
              </template>
            </c-fullbox>
        </el-form-item>

    </c-col>

      <c-col :span="24">
        <el-form-item label="地址名称" prop="bodgrp.col.pts.adrblk">
          <c-input
            type="textarea"
            :rows="4"
            v-model="model.bodgrp.col.pts.adrblk"
            maxlength="50"
            :disabled="this.flag2"
            show-word-limit
            placeholder="请输入Address Block"
          ></c-input>
        </el-form-item>
      </c-col>

    <c-col :span="24">
        <el-form-item
          label="Drawee参考号"
          prop="bodgrp.dre.pts.ref"
        >
          <c-input
            v-model="model.bodgrp.dre.pts.ref"
            maxlength="16"
            style="width: 100%"
            placeholder="请输入Application Ref"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="Drawee" prop="bodgrp.dre.pts.extkey">
            <c-fullbox>
          <c-input
            v-model="model.bodgrp.dre.pts.extkey"
            maxlength="50"
            placeholder="请输入External Key of Address"
            @keyup.enter.native="showGridPromptDialog('bodgrp.dre.pts.extkey')"
          ></c-input>
            <template slot="footer">
                <c-button
                style="margin:0 10px 0 10px;padding: 0 12px;"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                 
                >
                
                </c-button>
                <c-button
                style="margin:0 0"
                  size="small"
                  type="primary"
                  @click="onAplpDet"
                >
                  详情
                </c-button>
              </template>
            </c-fullbox>
        </el-form-item>

    </c-col>

      <c-col :span="24">
        <el-form-item label="地址名称" prop="bodgrp.dre.pts.adrblk">
          <c-input
            type="textarea"
            :rows="4"
            v-model="model.bodgrp.dre.pts.adrblk"
            maxlength="50"
            :disabled="this.flag3"
            show-word-limit
            placeholder="请输入Address Block"
          ></c-input>
        </el-form-item>
      </c-col> -->





      <c-ptap :model="model" :argadr="{
        title: 'Drawer',
        grp: 'bodgrp',
        rol: 'drr',
      }" :isAdrblk="true" :disabled="this.flag1">
      </c-ptap>
      <c-ptap :model="model" :argadr="{
        title: 'Collecting Bank',
        grp: 'bodgrp',
        rol: 'col',
      }" :disabled="this.flag2">
      </c-ptap>
      <c-ptap :model="model" :argadr="{
        title: 'Drawee',
        grp: 'bodgrp',
        rol: 'dre',
      }" :disabled="this.flag3">
      </c-ptap>
      <c-col :span="24">
        <el-form-item label="Country or region Code" prop="bodgrp.rec.stacty">
          <c-select v-model="model.bodgrp.rec.stacty" style="width:100%" placeholder="请选择Country Code Risk Country!"
            :code="codes.stacty">
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Goods Code" prop="bodgrp.rec.stagod">
          <c-select v-model="model.bodgrp.rec.stagod" style="width:100%" placeholder="请选择Goods Code" :code="codeTable2">
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
  </c-row>
</template>
<script>
  import Api from "~/service/Api"
  import commonProcess from "~/mixin/commonProcess";
  import CodeTable from "~/config/CodeTable"
  import Event from "~/model/Botdav/Event"
  import Utils from "~/utils";
  import Ptap from "~/views/Public/Ptap";
  import Docpre from "~/views/Public/Docpre";
  export default {
    components: {
      "c-ptap": Ptap,
      "c-docpre": Docpre,
    },
    inject: ["root"],
    props: ["model", "codes"],
    mixins: [commonProcess],
    data() {
      return {
        flag1:false,
        flag2:false,
        flag3:false,
        codeTable2: [
          { label: "金(含金饰品)", value: "001" },
          { label: "银(含银饰品)", value: "002" },
          { label: "铜(含电解铜、铜制品及铜精矿)", value: "003" },
          { label: "铝(含电解铝、铝矾土及铝制品)", value: "004" },
          { label: "锌(含电解锌、锌精矿)", value: "005" },
          { label: "铁砂矿(含精矿)", value: "006" },
          { label: "其他金属", value: "007" },
          { label: "大豆", value: "008" },
          { label: "玉米", value: "009" },
          { label: "原油", value: "010" },
          { label: "食用油(含棕榈油)", value: "011" },
          { label: "煤", value: "013" },
          { label: "其他", value: "099" },
        ],
        columns: ['0 0 "lst1" 100 ', '1 1 "lst2" 100', '2 2 "document" 200'],
        codeTable: [
          { label: "Airway Bills", value: "Airway Bills" },
          { label: "Beneficiary's Declaration", value: "Beneficiary's Declaration" },
          { label: "Bill of Lading Copies", value: "Bill of Lading Copies" },
          { label: "Bill of Lading Originals", value: "Bill of Lading Originals" },
          { label: "Certificate", value: "Certificate" },
          { label: "Certificate of Analysis", value: "Certificate of Analysis" },
          { label: "Certificate of Origin", value: "Certificate of Origin" },
          { label: "Certificate of Quality", value: "Certificate of Quality" },
          { label: "Certificate of Quantity", value: "Certificate of Quantity" },
          { label: "Commercial Invoice", value: "Commercial Invoice" },
          { label: "Courier Receipt", value: "Courier Receipt" },
          { label: "Draft", value: "Draft" },
          { label: "Export Licence", value: "Export Licence" },
          { label: "Fax Report", value: "Fax Report" },
          { label: "Inspection Cert", value: "Inspection Cert" },
          { label: "Insurance Policy", value: "Insurance Policy" },
          { label: "Packing List", value: "Packing List" },
          { label: "Shipment Advice", value: "Shipment Advice" },
          { label: "Weight List", value: "Weight List" },
        ],
        // TableValue: [
        //   {
        //     id: 0,
        //     cmail1: "",
        //     cmail2: "",
        //     docnam: "",
        //     description: "",
        //     serialNum: "",
        //     tableName: "",
        //     tcddoc: "",
        //   },
        // ],
        newValue: {
          id: 0,
          cmail1: "",
          cmail2: "",
          docnam: "",
          description: "",
          serialNum: "",
          tableName: "",
          tcddoc: "",
        },
        invtyp: [
          { label: "type1", value: "1" }
        ],
      };
    },

  watch:{
    "model.bodgrp.drr.pts.extkey" :{
      immediate:true,
        handler(val ,oldVal){
          if(this.model.bodgrp.drr.pts.extkey!=''){
            this.flag1=true;
          }else{
            this.flag1=false;
          }
        }
      },
      "model.bodgrp.col.pts.extkey" :{
        immediate:true,
        handler(val ,oldVal){
          if(this.model.bodgrp.col.pts.extkey!=''){
            this.flag2=true;
          }else{
            this.flag2=false;
          }
        }
      },
      "model.bodgrp.dre.pts.extkey" :{
        immediate:true,
        handler(val ,oldVal){
          if(this.model.bodgrp.dre.pts.extkey!=''){
            this.flag3=true;
          }else{
            this.flag3=false;
          }
        }
      },
  },
    methods: {
      ...Event,
      changeCur(){
        this.executeDefault("cnybop.libflg").then((res) => {
        if ((res.respCode == SUCCESS)) {
          Utils.copyValueFromVO(this.model, res.data);
        }
      });
      },
      addTableValue(index) {
        var newTableValue = Object.assign({}, this.newValue);
        const serial = Utils.generateUUID();
        newTableValue.serialNum = serial;
        this.model.botp.docgrdm.docgrd.splice(index - 1, 0, newTableValue);
        // var index = this.TableValue.length;

        // if (index > 0) {
        //   newTableValue.id = this.TableValue[index - 1].id + 1;
        // }
        // this.TableValue.push(newTableValue);
      },
      deleteTable(index) {
        this.model.botp.docgrdm.docgrd.splice(index, 1);
        // console.log(row)
        // console.log(this.TableValue)
        // for (let i = 0; i < this.TableValue.length; i++) {
        //   if (this.TableValue[i].id == row.id) {
        //     this.TableValue.splice(i, 1);
        //     break;
        //   }
        // }
      },
      async docpre() {
        let rtnmsg = await this.executeDefault('bodgrp.blk.docpre')
        if (rtnmsg.respCode == SUCCESS) {
          //TODO 处理数据逻辑
          this.updateModel(rtnmsg.data)
        }
        else {
          this.$notify.error({ title: '错误', message: '服务请求失败！' });
        }
      },

    },
    computed: {
      flag() {
        return this.model.bodgrp.drr.pts.adrelc == "";
      },
    },
    created: function () {
      console.log(this.root);
    },
  }
</script>
<style>
  .messageLabel>>>.el-form-item__label {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
  }
</style>