Fft.vue

<template>
	<div class="eibs-tab">
		<c-col c-col :span="17" style="padding-right: 20px">
			<c-col :span="24">
				<c-button @click="open" size="small" type="primary">上传影像</c-button>
							<c-button @click="getInvImg" style="margin-left:20px" :disabled="!model.imgInvmod.imgnum || model.imgInvmod.downLoadFlg" size="small" type="primary">
								<span style="position: relative">获取影像
									<div v-if="model.imgInvmod.imgnum != '' && !model.imgInvmod.downLoadFlg" style="position:absolute; top:24px; left:-12px; color:red;">
										请点击获取影像
									</div>
								</span>
							</c-button>
							<c-button @click="ruleShow" style="margin-left:20px" :disabled="!model.imgInvmod.imgnum" size="small" type="primary">
								<span style="position: relative">刷新列表
									<div v-if="(model.imgInvmod.imgnum != '' && model.imgInvmod.imguseList.length == 0 && model.imgInvmod.downLoadFlg) " style="position:absolute; top:24px; left:-13px; color:red;">
										请点击刷新列表
									</div>
								</span>
							</c-button>
							<c-button @click="deleteImg" :disabled="model.imgInvmod.imgnum == '' || model.imgInvmod.imguseList.length == 0 " style="margin-left:20px" size="small" type="primary">删除影像</c-button>
			</c-col>
		</c-col>
		<c-col :span="24" style="margin-top:20px">
			<el-table max-height="350px" style="text-align: center;" highlight-current-row :data="model.imgInvmod.imguseList" :row-class-name="tableRowClassName" @row-click="handleRowClick" :paginationShow="false" :border="true">
				<el-table-column label="影像种类" sortable min-width="130px" prop="imgflg">
					<template slot-scope="scope">
						{{getLabel(dbCodes.imgflg,scope.row.imgflg)}}
					</template>
				</el-table-column>
				<el-table-column label="有效标识" sortable min-width="110px" prop="valflg">
					<template slot-scope="scope">
						{{getLabel(dbCodes.valflg,scope.row.valflg)}}
					</template>
				</el-table-column>
				<el-table-column label="文件名" sortable min-width="120px" prop="filnam">
				</el-table-column>
				<el-table-column label="影像类型" sortable min-width="110px" prop="imgtyp">
					<template slot-scope="scope">
						<c-select v-model="scope.row.imgtyp" :disabled="scope.row.imgflg == 'JDFP'">
							<el-option v-for="item in imgdbCode(scope.row.imgflg)" :value='item.value' :label='item.label' :key='item.value'></el-option>
						</c-select>
					</template>
				</el-table-column>
				
				<el-table-column label="影像描述" sortable min-width="110px" prop="imgdsp">
					<template slot-scope="scope">
						<c-input v-model="scope.row.imgdsp"></c-input>
					</template>
				</el-table-column>
				<el-table-column label="影像ID" sortable min-width="200px" prop="imagid">
					</el-table-column>
					<el-table-column label="影像批次号" sortable min-width="200px" prop="imgnum"></el-table-column>
			</el-table>
		</c-col>
		<el-dialog :visible.sync="newScanVisible" :title="toolTitle" center destroy-on-close :before-close="beforeClose" width='80%' style="min-height: 800px;">
			<iframe :src="JumpUrl" frameborder="0" width="100%" height="100%" style="display: block;"></iframe>
		</el-dialog>
		<el-dialog :visible.sync="showImgList" title="影像批次列表" center destroy-on-close :before-close="beforeCloseImgList" width='50%'>
			<el-table :data="imgList">
				<el-table-column label="影像批次号" sortable min-width="110px">
					<template slot-scope="scope">
						<span>{{scope.row}}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="260">
					<template slot-scope="scope">
						<c-button @click="deleteRow(scope.row)" type="text">删除</c-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
import event from "../event";
import { getIpAndPort } from "~/service/business/common";

export default {
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      imgCurrentZcinvlstIndex: -1,
      imgtypList1: [
        { label: "合同影像ID", value: "CTID" },
        { label: "贸易背景审查ID", value: "TRID" },
        { label: "开证申请书影像ID", value: "LCID" },
        { label: "其他影像ID", value: "OTID" }
      ],
      imgtypList2: [
        { label: "货物收据ID", value: "GRID" },
        { label: "出库单ID", value: "OSID" },
        { label: "装箱单ID", value: "LBID" },
        { label: "入库单ID", value: "WHID" },
        { label: "运输单ID", value: "THID" },
        { label: "保险单ID", value: "ISID" },
        { label: "其他单据影像ID", value: "OTID" }
      ],
      dbCodes: {
        imgflg: [],
        valflg: []
      },
      newScanVisible: false,
      ip: "",
      port: "",
      toolTitle: "",
			JumpUrl: "",
			imgList:[],
			showImgList: false
    };
  },
  mounted() {
    this.getdbCode("imgflg", "imgflg");
    this.getdbCode("vldflg", "valflg");
    window.addEventListener("message", this.messageEvent);
  },
  methods: {
    messageEvent(e) {
      if (e.data.invoiceLotNumber) {
				if(!this.model.imgInvmod.imgnum.includes(e.data.invoiceLotNumber)){
					this.model.imgInvmod.imgnum = this.model.imgInvmod.imgnum == '' ? e.data.invoiceLotNumber : this.model.imgInvmod.imgnum + '\n' + e.data.invoiceLotNumber;
				}
      }
		},
		open(){
			this.$alert('上传到寄单索款发票影像下才可以使用OCR功能!', '提示', {
		          confirmButtonText: '确定',
		          callback: action => {
								this.uploadImg()
		          }
		     });
		},
    // 打开新的影像控件
    async uploadImg() {
      this.toolTitle = "影像批扫";
      let isGet = await this.queryIpPort();
      if (!isGet) return;
      let token = sessionStorage.getItem("j_session_id");
      let s = "separator";
      let orgId = JSON.parse(window.sessionStorage.currentOrg).id;
      let userName = window.sessionStorage.userName;
      let branch = JSON.parse(window.sessionStorage.currentOrg)
        .departmentNumber;
      this.JumpUrl = `http://${
        window.location.host
      }/webscan?mode=scan&scanType=new&token=${token}&orgId=${orgId}&userName=${userName}&ip=${
        this.ip
      }&port=${this.port}&org=${branch}`;
      console.log(this.JumpUrl);
      this.newScanVisible = true;
    },
    async queryIpPort() {
      let data = { appid: "GJ01" };
      let ret = false;
      await getIpAndPort(data).then(res => {
        if (res.data.ERRMSG == "SUCCESS") {
          this.ip = res.data.ip;
          this.port = res.data.port + "";
          ret = true;
        } else {
          this.$alert("端口获取失败！");
        }
      });
      return ret;
    },
    beforeClose(done) {
      this.dialogVisible = false;
      done();
		},
		beforeCloseImgList(done){
			this.showImgList = false
			done();
		},
  },
  watch: {
    "model.imgInvmod.imgnum": {
      handler(val, oldval) {
        if (val != oldval && val.length > oldval.length) {
          this.model.imgInvmod.downLoadFlg = false;
        }
      }
    }
  },
  computed: {
    imgdbCode() {
      return function(val) {
        switch (val) {
          case "FFHT":
            return this.imgtypList1;
            break;
          case "JDDJ":
            return this.imgtypList2;
            break;
          default:
            return [];
        }
      };
    }
  },
  created() {}
};
</script>
<style scoped lang="less">
::v-deep .el-dialog {
  height: 90vh;
  margin: 5vh auto !important;
  .el-dialog__body {
    position: relative;
    height: calc(100% - 54px);
  }
}
</style>