Betdcrd.vue

<template>
  <div class="eibs-tab">
    <!-- left -->
    <c-col :span="11">
      <c-col :span="24">
        <el-form-item
          label="Internal Discrepancies"
          prop="bedgrp.blk.intdis"
          style="width: 100%"
        >
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.bedgrp.blk.intdis"
              maxlength="50"
              show-word-limit
              placeholder="Please input Internal Discrepancies"
            ></c-input>
            <template slot="footer">
              <c-button
                style="margin-left: 10px; padding: 0 10px"
                size="small"
                type="primary"
              >
                ...
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="Discrepancies"
          prop="bedgrp.blk.docdis"
          style="width: 100%"
        >
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.bedgrp.blk.docdis"
              maxlength="65"
              show-word-limit
              placeholder="Please input Discrepancies"
              :disabled="!docdisflg"
            ></c-input>
            <template slot="footer">
              <c-button
                style="margin-left: 10px; padding: 0 10px"
                size="small"
                type="primary"
                :disabled="!docdisflg"
              >
                ...
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-checkbox v-model="docdisflg" style="margin-left: 150px"
          >Discrepancies modified</c-checkbox
        >
      </c-col>
    </c-col>
    <!-- right -->
    <c-col :span="11" :offset="1">
      <c-col :span="24">
        <el-form-item
          label="Reasons for Rejection"
          prop="bedgrp.blk.docins"
          style="width: 100%"
        >
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.bedgrp.blk.docins"
              maxlength="50"
              show-word-limit
              placeholder="Please input Reasons for Rejection"
              disabled
            ></c-input>
            <template slot="footer">
              <c-button
                style="margin-left: 10px; padding: 0 10px"
                size="small"
                type="primary"
              >
                ...
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item
          label="Disposal of Documents"
          prop="bedgrp.blk.disdoc"
          style="width: 100%"
        >
          <c-fullbox>
            <c-input
              type="textarea"
              v-model="model.bedgrp.blk.disdoc"
              maxlength="65"
              show-word-limit
              placeholder="Please input Disposal of Documents"
              disabled
            ></c-input>
            <template slot="footer">
              <c-button
                style="margin-left: 10px; padding: 0 10px"
                size="small"
                type="primary"
                disabled
              >
                ...
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <c-checkbox v-model="rejpenins" style="margin-left: 150px"
          >Rejection Pending Instructions</c-checkbox
        >
      </c-col>
    </c-col>

    <!-- next part -->
    <c-col :span="24">
      <c-docpre
        :model="model"
        :argadr="{
          path:'bedgrp.blk.prsdoc',
          grp:'betp',
          code:'docpre'
        }"
        
      >
      </c-docpre>
    </c-col>

    <!-- <c-col :span="24" style="height: 24px; margin-top: -10px">
      <el-form-item :label="model.betp.docgrdm.docdsclab" class="messageLabel">
        <c-button style="float: right" @click="addTableValue" type="primary"
          >新增单据</c-button
        >
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="24" style="margin-bottom: 30px">
      <c-table
        height="200px"
        style="text-align: center"
        :list="this.model.betp.docgrdm.docgrd || []"
        :paginationShow="false"
        :border="true"
      >
        <el-table-column label="1st" width="auto">
          <template slot-scope="scope">
            <c-input v-model="scope.row.cmail1"></c-input>
          </template>
        </el-table-column>
        <el-table-column label="2nd" width="auto">
          <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">
          <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="12">
        <el-form-item label="Internal Discrepancies" prop="bedgrp.blk.intdis">
            <c-input type="textarea" v-model="model.bedgrp.blk.intdis" maxlength="65" show-word-limit placeholder="请输入Internal Discrepancies" ></c-input>
        </el-form-item>
        </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary" icon="el-icon-search" @click="onIntdisButtxmsel">
            ...
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Reasons for Rejection" prop="bedgrp.blk.docins">
            <c-input type="textarea" v-model="model.bedgrp.blk.docins" maxlength="35" show-word-limit placeholder="请输入Reasons for Rejection" ></c-input>
        </el-form-item>
        </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary" icon="el-icon-search" @click="onResrejButtxmsel">
            ...
        </c-button>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="Disposal of Documents" prop="bedgrp.blk.disdoc">
            <c-input type="textarea" v-model="model.bedgrp.blk.disdoc" maxlength="35" show-word-limit placeholder="请输入Disposal of Documents" ></c-input>
        </el-form-item>
        </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary" icon="el-icon-search" @click="onDisdocButtxmsel">
            ...
        </c-button>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="Discrepancies" prop="bedgrp.blk.docdis">
            <c-input type="textarea" v-model="model.bedgrp.blk.docdis" maxlength="50" show-word-limit placeholder="请输入Discrepancies" ></c-input>
        </el-form-item>
        </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary" icon="el-icon-search" @click="onDocdisButtxmsel">
            ...
        </c-button>
       </c-col>
                  
       <c-col :span="12">
	    <c-checkbox v-model="model.rejpenins">Rejection pending instructions</c-checkbox>
       </c-col>
                  
       <c-col :span="12">
	    <c-checkbox v-model="model.bedgrp.blk.docdisflg">Discrepancies modified</c-checkbox>
       </c-col>
                  
	<c-col :span="12">
	    <span  v-text="model.betp.docgrdm.docdsclab"   data-path=".betp.docgrdm.docdsclab" > </span>
	</c-col> -->
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Betdcr/Event";
import Utils from "~/utils";
import Docpre from "~/views/Public/Docpre";

export default {
  components:{"c-docpre":Docpre},
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      TableValue: [
        {
          id: 0,
          cmail1: "",
          cmail2: "",
          docnam: "",
          docnam: "",
          description: "",
          docnam: "",
          serialNum: "",
          tableName: "",
          tcddoc: "",
        },
      ],
      newValue: {
        id: 0,
        cmail1: "",
        cmail2: "",
        docnam: "",
        docnam: "",
        description: "",
        docnam: "",
        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" },
      ],
    };
  },
  computed: {
    docdisflg: {
      get() {
        if(this.model.bedgrp.blk.docdis==""){
          return this.model.bedgrp.blk.docdisflg != "X";
        }else{
          return this.model.bedgrp.blk.docdisflg != "";
        }
      },
      set(val) {
        this.model.bedgrp.blk.docdisflg = val ? "X" : "";
        this.model.bedgrp.blk.docdis = "";
      },
    },
    rejpenins: {
      get() {
        return this.model.rejpenins != "";
      },
      set(val) {
        this.model.rejpenins = val ? "X" : "";
      },
    },
  },
  methods: {
    ...Event,
    addTableValue(index) {
      var newTableValue = Object.assign({}, this.newValue);
      const serial = Utils.generateUUID();
      newTableValue.serialNum = serial;
      // this.model.bftp.docgrdm.docgrd.push(newTableValue);
      this.model.betp.docgrdm.docgrd.splice(index - 1, 0, newTableValue);

      this.TableValue.push(newTableValue);
    },
    deleteTable(index) {
      this.model.betp.docgrdm.docgrd.splice(index, 1);
    },
  },
  created: function () {},
};
</script>
<style>
.messageLabel >>> .el-form-item__label {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
</style>