Docpre.vue

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

       <!--================================左边================================== -->
   <c-col :span="11"> 
    <c-col :span="21" >           
        <el-form-item label="Discrepancies" prop="brdgrp.blk.docdis" >
            <c-input type="textarea" v-model="model.brdgrp.blk.docdis" 
                maxlength="3500" show-word-limit placeholder="请输入Discrepancies" rows="5"
                :disabled="!docdisflg">
            </c-input>
            <!-- :disabled="!docdisflg" 任意非空串 取非后即为false,,空串取非后即为true -->
        </el-form-item>
    </c-col>
    <c-col :span="3">
    <!-- @click="onDocdisButtxmsel" -->
        <c-button size="small" type="primary" icon="el-icon-search" 
        @click="showGridPromptDialog('brtp.docdis.buttxmsel', null, null,{TXT: 'brdgrp.blk.docdis'}, {TXT: false},'doxpDialog')"
        :disabled="!docdisflg">
            ...
        </c-button>
    </c-col> 
    <c-col :span="24">
        <el-form-item label="Comments and Conclusions" prop="brdgrp.blk.comcon" >
            <c-input type="textarea" v-model="model.brdgrp.blk.comcon" maxlength="1950" show-word-limit placeholder="请输入Comments and Conclusions" 
            rows="5"></c-input>
        </el-form-item>
        </c-col>
    <c-col :span="21">
        <el-form-item label="Settlement Instructions BR" prop="brdgrp.blk.setinsbr">
            <c-input type="textarea" v-model="model.brdgrp.blk.setinsbr" maxlength="390" show-word-limit placeholder="请输入Settlement Instructions BR" 
            rows="5"></c-input>
        </el-form-item>
    </c-col>
    <c-col :span="3">
        <c-button size="small" type="primary" icon="el-icon-search" @click="showGridPromptDialog('brtp.setinstxm.buttxmsel', null, null,{TXT: 'brdgrp.blk.setinsbr'}, {TXT: false},'doxpDialog')">
            ...
        </c-button>
    </c-col>


    <!-- <c-col :span="12">
        <c-button size="small" type="primary" 
        icon="el-icon-search" @click="onSetinstxmButtxmsel">
            ...
        </c-button>
    </c-col>
    
    <c-col :span="12">
          <span  v-text="model.brtp.docgrdm.docdsclab"   data-path=".brtp.docgrdm.docdsclab" > </span>
    </c-col> -->
              <!-- Documents Presdented 已交单据 -->
    <!-- <c-col :span="24" style="height: 24px; margin-top: 5px"> -->
      <!-- <el-form-item
        :label="model.brtp.docgrdm.docdsclab"
        class="messageLabel"
      > -->
      <!-- <el-form-item
        label="Documents Presdented"
        class="messageLabel">
        <c-button style="float: right" @click="addTableValue" type="primary"
          >新增单据</c-button
        >
      </el-form-item>
    </c-col> -->

    <!-- <c-col :span="24" style="margin-bottom: 30px;margin-top: -10px;">
        <c-table
          height="200px"
          style="text-align: center"
          :list="this.model.brtp.docgrdm.docgrd || []"
          :paginationShow="false"
          :border="true"
        >
          <el-table-column label="1st" width="auto" sortable>
            <template slot-scope="scope">
              <c-input v-model="scope.row.cmail1"></c-input>
            </template>
          </el-table-column>
          <el-table-column label="2st" width="auto" sortable>
            <template slot-scope="scope">
              <c-input v-model="scope.row.cmail2"></c-input>
            </template>
          </el-table-column>
          <el-table-column label="Document" prop="docnam" width="auto" sortable>
            <template slot-scope="scope"> -->
              <!-- {{scope.row.docnam}} -->
              <!-- <c-select
                style="width: 100%"
                placeholder="请选择"
                v-model="scope.row.docnam"
              >
                <el-option
                  v-for="item in codeTable"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170px" fixed="right">
            <template slot-scope="scope">
              <c-button @click="deleteTable(scope.$index)" type="primary"
                >删除</c-button
              >
            </template>
          </el-table-column>
        </c-table>
      </c-col> -->
      <c-col :span="24">
        <c-docpre :model="model" :argadr="{
          path: 'brdgrp.blk.prsdoc',
          grp: 'brtp',
          code: 'docpre',
        }"></c-docpre>
      </c-col>
   </c-col>
  
          <!--===========================右边============================== -->
   <c-col :span="11" :offset="1"> 
    <c-col :span="24">           
        <c-checkbox v-model="model.brdgrp.rec.igndisflg">Ignore Discrepancies</c-checkbox>
    </c-col>
    <c-col :span="24">
        <c-checkbox v-model="docdisflg" @change="docdisDefault">discrepancies modified</c-checkbox>
        <!-- <c-checkbox v-model="model.brdgrp.blk.docdisflg">discrepancies modified</c-checkbox> -->
    </c-col>
    <c-col :span="24">
        <el-form-item label="Type of Advice Received" prop="brdgrp.rec.advtyp" >
            <c-select v-model="model.brdgrp.rec.advtyp" style="width:100%" placeholder="请选择Type of Advice Received"
            :code="codes.advtyp"
            disabled>
            </c-select>
        </el-form-item>
    </c-col>
    <c-col :span="24">
        <el-form-item label="付款日期" prop="brdgrp.rec.totdat">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.totdat" style="width:100%"  placeholder="请选择付款日期"></c-date-picker>
        </el-form-item>
    </c-col>
    <c-col :span="24">
        <el-form-item label="Discrepancy Advice Dated" prop="brdgrp.rec.disdat" label-width="155px">
            <c-date-picker type="date"  v-model="model.brdgrp.rec.disdat" style="width:100%"  placeholder="请选择Discrepancy Advice Dated"
            disabled></c-date-picker>
        </el-form-item>
    </c-col>
    <c-col :span="24">
        <c-checkbox v-model="model.brdgrp.rec.approvcod">Documents on Approval Basis</c-checkbox>
    </c-col>

    <!-- <c-col :span="24">
        <c-checkbox v-model="model.brtp.cre752flg">Create 752</c-checkbox>
    </c-col>
    <c-col :span="24">
        <el-form-item label="Further Identification" prop="brtp.furide">
            <c-select v-model="model.brtp.furide" style="width:100%" placeholder="请选择Further Identification">
            </c-select>
        </el-form-item>
    </c-col> -->

    <c-col :span="24">
        <!-- <c-checkbox v-model="model.brtp.cre752flg">Create 752</c-checkbox> -->
        <el-form-item label=" ">
        </el-form-item>
    </c-col>
    <c-col :span="24">
        <el-form-item label=" " prop="brtp.furide">
            <!-- <c-select v-model="model.brtp.furide" style="width:100%" placeholder="请选择Further Identification"> -->
            <!-- </c-select> -->
        </el-form-item>
    </c-col>

    <c-col :span="24">
        <c-checkbox v-model="model.brtp.cre732flg" disabled>Create MT 732</c-checkbox>
    </c-col>
   </c-col>
   
  
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Brtdck/Event";
import Utils from "~/utils";
import Docpre from "~/views/Public/Docpre";

export default {
    components: {
    // "c-ptap": Ptap,
    "c-docpre": Docpre,
  },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      // TableValue: [
      //   {
      //     id: 0,
      //     cmail1: "",
      //     cmail2: "",
      //     docnam: "",
      //     description: "",
      //     serialNum: "",
      //     tableName: "",
      //     tcddoc: "",
      //   },
      // ],
      // newValue: {
      //   id: 0,
      //   cmail1: "",
      //   cmail2: "",
      //   docnam: "",
      //   description: "",
      //   serialNum: "",
      //   tableName: "",
      //   tcddoc: "",
      // },
      // codeTable: [
      //   { label: 'Airway Bills', value: '1' },
      //   { label: `Beneficiary's Declaration`, value: '2' },
      //   { label: 'Bill of Lading Copies', value: '3' },
      //   { label: 'Bill of Lading Originals', value: '4' },
      //   { label: 'Certificate', value: '5' },
      //   { label: 'Certificate of Analysis', value: '6' },
      //   { label: 'Certificate of Origin', value: '7' },
      //   { label: 'Certificate of Quality', value: '8' },
      //   { label: 'Certificate of Quantity', value: '9' },
      //   { label: 'Commercial Invoice', value: '10' },
      //   { label: 'Courier Receipt', value: '11' },
      //   { label: 'Draft', value: '12' },
      //   { label: 'Export Licence ', value: '13' },
      //   { label: 'Fax Report', value: '14' },
      //   { label: 'Inspection Cert', value: '15' },
      //   { label: 'Insurance Policy', value: '16' },
      //   { label: 'Packing List', value: '17' },
      //   { label: 'Shipment Advice', value: '18' },
      //   { label: 'Weight List', value: '19' },
      // ],
    };
  },
  methods: { 
    ...Event,
    async docdisDefault(){
      this.executeDefault("brdgrp.blk.docdis").then(res => {
          //TODO 处理数据逻辑
          if(res.respCode == SUCCESS)
          this.updateModel(res.data);
      })
  },
    // addTableValue(index) {
    //   var newTableValue = Object.assign({}, this.newValue);
    //   const serial=Utils.generateUUID();
    //   newTableValue.serialNum=serial;
    //   // this.model.brtp.docgrdm.docgrd.push(newTableValue);
    //   this.model.brtp.docgrdm.docgrd.splice(index-1,0,newTableValue);
    // },
    // deleteTable(index) {
    //   this.model.brtp.docgrdm.docgrd.splice(index, 1);
    // },
  },
  created: function () {},
  computed: {
    docdisflg: {
      get() {
        return this.model.brdgrp.blk.docdisflg != ""
      },
      set(val) {
        this.model.brdgrp.blk.docdisflg = val ? "X" : ""
      }
    },
  },
};
</script>
<style>
.messageLabel >>> .el-form-item__label {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
</style>