Docpre.vue

<template>
  <div class="eibs-tab">
    <!-- =================左边====================== -->
    <c-col :span="12">
      <el-form-item label="不符点">
        <c-col :span="21">
          <c-input type="textarea" v-model="model.bddgrp.blk.docdis" :disabled="!model.bddgrp.blk.docdisflg"
            maxlength="50" show-word-limit placeholder="请输入不符点"></c-input>
        </c-col>

        <c-col :span="3" style="text-align: right">
          <!-- <el-form-item label-width="0"> -->
          <c-button size="small" type="primary" icon="el-icon-search" style="margin-left: 0" @click="onDocdisButtxmsel"
            disabled></c-button>
          <!-- </el-form-item> -->
        </c-col>
      </el-form-item>

      <c-col :span="24">
        <el-form-item label="注释和结论">
          <c-input type="textarea" v-model="model.bddgrp.blk.comcon" maxlength="65" show-word-limit
            placeholder="请输入注释和结论"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="到期付款确认备注">
          <c-input type="textarea" v-model="model.bddgrp.blk.accrmk" maxlength="65" show-word-limit
            placeholder="请输入到期付款确认备注"></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- =================右边====================== -->
    <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="" prop="bddgrp.rec.igndisflg">
          <c-checkbox v-model="model.bddgrp.rec.igndisflg">忽略不符点</c-checkbox>
          <c-checkbox v-model="model.bddgrp.blk.docdisflg" @change="docdis">录入不符点</c-checkbox>
        </el-form-item>
      </c-col>

      <!-- <c-col :span="24">
                <el-form-item label="" prop="bddgrp.blk.docdisflg">
                </el-form-item>
            </c-col> -->

      <c-col :span="24">
        <el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp">
          <c-select v-model="model.bddgrp.rec.advtyp" style="width: 100%" placeholder="请选择收到的通知类型">
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="付款日期" prop="bddgrp.rec.totdat">
          <c-date-picker type="date" v-model="model.bddgrp.rec.totdat" style="width: 100%" placeholder="请选择付款日期">
          </c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat">
          <c-date-picker type="date" v-model="model.bddgrp.rec.disdat" style="width: 100%" placeholder="请选择不符点通知日期">
          </c-date-picker>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="" prop="bddgrp.rec.approvcod">
          <c-checkbox v-model="model.bddgrp.rec.approvcod">议付行担保协议</c-checkbox>
          <c-checkbox v-model="model.bdtp.cre732flg">Create MT 732</c-checkbox>
        </el-form-item>
      </c-col>

      <!-- <c-col :span="8">
                <c-checkbox v-model="model.bdtp.cre752flg">Create MT 752</c-checkbox>
            </c-col>

            <c-col :span="16">
                <el-form-item label="Further Identification" prop="bdtp.furide">
                    <c-select v-model="model.bdtp.furide" style="width:100%" placeholder="请选择Further Identification">
                    </c-select>
                </el-form-item>
            </c-col> -->

      <!-- <c-col :span="24">
                 <el-form-item label="" prop="bdtp.cre732flg">
                 </el-form-item>
            </c-col> -->
    </c-col>

    <!-- =================已交单据====================== -->
    

 <c-docpre 
        :model="model" 
        :argadr="{
          path: 'bddgrp.blk.prsdoc',
          grp: 'bdtp',
          code: 'prsdoc'
        }"></c-docpre>


    <!-- 不符点 -->
    <c-col>
      <el-dialog :visible.sync="InsertErrorDialogVisibal" center width="500px">
        <c-col :span="24">
          <c-col :span="20">
            <el-form-item label="不符点" label-width="100px">
              <c-input v-model="newInsertError"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="InsertError()">确定</el-button>
          <el-button @click="InsertErrorDialogVisibal = false; newInsertError = ''">取消</el-button>
        </span>
      </el-dialog>
    </c-col>
    <OcrRecognition ref="ocrRecognition" v-on:confirm="selectGridPDF"></OcrRecognition>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Ditdck/Event";

import OcrRecognition from "./OcrRecognition.vue";
import Utils from "~/utils";
import Docpre from "~/views/Public/Docpre";


export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  components: { OcrRecognition ,
    "c-docpre": Docpre,},
  data() {
    return {
      addDialogVisible: false,
      InsertErrorDialogVisibal: false,
      InsertGridDataDialogVisibal: false,
      newInsertError: "",
      newInsertErrorIndex: -1,
      newInsertGridData: "",
      dialog: {
        cmail1: "",
        cmail2: "",
        docnam: "",
        state: "",
      },
      liData: ["增值税发票", "发票", "装箱单", "空运单", "海运提单", "铁路运单", "货物收据", "邮政收据", "出库单", "保险单", "质检证", "受益人证明"],
      docgrdDataStore: [
        {
          id: "invoice",
          cmail1: "1",
          cmail2: "",
          docnam: "发票",
          state: "缺失",
        },
        {
          id: "receipt",
          cmail1: "1",
          cmail2: "",
          docnam: "货物收据",
          state: "缺失",
        },
        {
          id: "oceanShipping",
          cmail1: "1",
          cmail2: "",
          docnam: "海运提单",
          state: "缺失",
        },
      ],
      docgrdData: [],
      gridData: [
        {
          id: "invoice",
          data: [
            {
              name: "KZ3500220597AA-001.pdf",
              errorData: [
                {
                  discribe: "发票金额不符",
                  state: true
                },
                {
                  discribe: "发票非原始正本",
                  state: true
                },
                {
                  discribe: "未批注交单情况",
                  state: true
                },
              ]
            }
          ],
        },
        {
          id: "receipt",
          data: [
            {
              name: "KZ3500220597AA-002.pdf",
              errorData: [
                {
                  discribe: "货物收据金额不符",
                  state: true
                },
                {
                  discribe: "货物收据缺失",
                  state: true
                },
              ]
            },
            // {
            //     name:"KZ3500220597AA-003.pdf",
            //     errorData:[
            //         {
            //             discribe:"货物数量有误",
            //             state:true
            //         },
            //     ]
            // },
          ],
        },
        {
          id: "oceanShipping",
          data: [
            {
              name: "KZ3500220597AA-003.pdf",
              errorData: [
              ]
            },
          ]
        }
      ],
      gridPDFData: [],
      selectPDFData: "",
      selectedPdf: {
        id: '',
        index: null
      }
    };
  },
  methods: {
    ...Event,
    docdis() {
      console.log("进入前---------");
      this.executeDefault("bddgrp.blk.docdis").then((res) => {
      console.log("进入后---------");
        if ((res.respCode == 'AAAAAA')) {
          Utils.copyValueFromVO(this.model, res.data);
      console.log("if中---------");
        }
      });
    },
    importFile() {
      this.root.setDraggableContent('cms', '影像信息');
    },
    addRow() {
      this.addDialogVisible = false;
      let newRow = { ...this.dialog };
      this.model.bdtp.docgrdm.docgrd.push(newRow);
    },
    removeRow(idx) {
      this.model.bdtp.docgrdm.docgrd.pop(idx);
    },
    addPDF(idx) {
      this.selectPDFData = idx;
    },
    detailPDF(id) {
      this.openPdfDialog(id, 0);
    },
    openPdfDialog(id, idx) {
      this.$refs.ocrRecognition.show = true
      var tempId = 0;
      for (let i = 0; i < this.docgrdDataStore.length; i++) {
        if (id == this.docgrdDataStore[i].id) {
          tempId = i;
          break;
        }
      }
      this.$refs.ocrRecognition.formData.type = this.$refs.ocrRecognition.fileType[tempId].value;
      this.selectedPdf.id = id;
      this.selectedPdf.index = idx;
      this.$nextTick(() => {
        this.$refs.ocrRecognition.fileUrl = require(`~/assets/demo-files/${this.$refs.ocrRecognition.formData.type}.jpg`)
      })
    },
    selectGridPDF() {
      const id = this.selectedPdf.id;
      // const idx = this.selectedPdf.index;
      const idx = 0;  //PDF全部展示，就不存在idx
      var tempData = [];
      var list = [];
      var flag = false;
      for (let i = 0; i < this.gridData.length; i++) {
        if (this.gridData[i].id == this.selectPDFData) {
          list = [...this.gridData[i].data[idx].errorData]
          break;
        }
      }
      for (let i = 0; i < this.docgrdData.length; i++) {
        if (this.docgrdData[i].id == id && id == this.selectPDFData) {
          if (list.length > 0) {
            this.docgrdData[i].state = "内容不符"
          } else {
            this.docgrdData[i].state = "符合"
          }
        }
        if (flag) {
          let tempListData = this.docgrdData[i];
          tempListData.list.push(...list);
          tempData.push(tempListData);
          flag = false;
        } else {
          tempData.push(this.docgrdData[i]);
          if (this.docgrdData[i].id == id && id == this.selectPDFData && list.length > 0) {
            if (i < this.docgrdData.length - 1 && this.docgrdData[i + 1].hasOwnProperty("list")) {
              flag = true;
            } else {
              tempData.push({
                list,
                states: true,
              });
            }
          }
        }
      }
      this.docgrdData = tempData;
      sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.docgrdData[rowIndex].states) {
        return [1, 5];
      }
    },
    DeleteError(index, idx) {
      this.docgrdData[index].list.splice(idx, 1);
      if (this.docgrdData[index].list.length == 0) {
        this.docgrdData.splice(index, 1);
        this.docgrdData[index - 1].state = "符合"
      }
      sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    InsertErrorDialog(index) {
      this.InsertErrorDialogVisibal = true;
      this.newInsertErrorIndex = index;
    },
    InsertError() {
      var temp = {
        discribe: this.newInsertError,
        state: true
      };
      this.docgrdData[this.newInsertErrorIndex].list.push(temp);
      this.newInsertError = "";
      this.InsertErrorDialogVisibal = false;
      sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    },
    addDocgrdDataStore() {
      this.InsertGridDataDialogVisibal = true;
    },
    InsertGridData() {
      var index = this.docgrdData.length;
      var tempData = this.dialog;
      tempData.cmail1 = this.newInsertGridData;
      tempData.id = "tempId" + index;
      tempData.state = "符合";
      this.docgrdData.push(this.dialog);
      this.InsertGridDataDialogVisibal = false;
      this.newInsertGridData = "";
      sessionStorage.setItem('docgrdData', JSON.stringify(this.docgrdData));
    }
  },
  created: function () {
    //docgrdData， gridPDFData
    var temp_docgrdData = JSON.parse(sessionStorage.getItem("docgrdData"));
    if (temp_docgrdData != null) {
      var temp_gridPDFData = JSON.parse(sessionStorage.getItem("gridPDFData"));
      this.docgrdData = temp_docgrdData;
      this.gridPDFData = temp_gridPDFData;
    } else {
      var IconList = JSON.parse(sessionStorage.getItem("IconList"));
      if (IconList == null) {
        IconList = ["invoice", "receipt"];
      }
      var list = [];
      for (let i = 0; i < IconList.length; i++) {
        for (let j = 0; j < this.docgrdDataStore.length; j++) {
          if (IconList[i] == this.docgrdDataStore[j].id) {
            list.push(this.docgrdDataStore[j]);
            break;
          }
        }
      }
      this.docgrdData = list;
    }
  },
  computed: {
  },
  watch: {
    selectPDFData() {
      if (this.selectPDFData.length > 0) {
        const arr = []
        for (let i = 0; i < this.gridData.length; i++) {
          // if(this.gridData[i].id == this.selectPDFData){
          // arr.push({"id" : this.gridData[i].id});
          for (let j = 0; j < this.gridData[i].data.length; j++) {
            arr.push({ "name": this.gridData[i].data[j].name, "id": this.gridData[i].id });
          }
          //     break;
          // }
        }
        this.gridPDFData = arr;
        sessionStorage.setItem('gridPDFData', JSON.stringify(this.gridPDFData));
      }
    }
  }
};
</script>
<style scoped>
.addCss {}

/* 如果要增加竖线上方加上.el-table td */
/* 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式 */
/* 如果td没有颜色，可以去掉，这里加上保险 */
/* .el-table{
  background-color: transparent;
  color:white;
}
.el-table th, .el-table tr{
  border: 0;
  background-color: transparent;
}
.el-table tbody tr:hover>td {
  background-color:transparent!important;
}
.el-table__body tr.hover-row>td {
  background-color: transparent;
} */

/* .el-table tbody tr:hover>td {   
    background-color:#ffffff!important
} */

.file-add {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #EBEEF5;
}

.file-add:hover {
  color: #5cb6ff;
  border: 1px solid #5cb6ff;
}
</style>