Fft.vue

<template>
	<div class="eibs-tab">
		<c-col c-col :span="17" style="padding-right: 20px">
			<c-col :span="24">
				<c-button @click="getInvImg" :disabled="!model.imgInvmod.imgnum || model.imgInvmod.downLoadFlg" size="small" type="primary">
								<span style="position: relative">获取影像
									<div v-if="!dis && model.imgInvmod.imgnum != '' && !model.imgInvmod.downLoadFlg" style="position:absolute; top:22px; left:-30px; color:red;">
										请点击获取影像
									</div>
								</span>
							</c-button>
							<c-button @click="ruleShow" :disabled="!model.imgInvmod.imgnum" style="margin-left:15px" size="small" type="primary">
								<span style="position: relative">刷新列表
									<div v-if="!dis && ((model.imgInvmod.imgnum != '' && model.imgInvmod.imguseList.length == 0 && model.imgInvmod.downLoadFlg) || (model.imgInvmod.uploadFlg && isUploadR)) " style="position:absolute; top:22px; left:-13px; color:red;">
										请点击刷新列表
									</div>
								</span>
							</c-button>
							<c-button @click="sendInvImg" :disabled="!elcFlg || (!isUpload || model.imgInvmod.uploadFlg)" style="margin-left:15px" size="small" type="primary">
								<span style="position: relative">上传人行
									<div v-if="!dis && elcFlg && isUpload && !model.imgInvmod.uploadFlg" style="position:absolute; top:22px; left:-6px; color:red;">
										请点上传人行
									</div>
								</span>
							</c-button>
			</c-col>
			<!-- <c-col :span="24">
			<el-form-item label="影像业务编号"  prop="imgInvmod.fftref">
            <c-fullbox>
              <c-input v-model="model.imgInvmod.fftref"  placeholder="请输入影像业务编号"></c-input>
              <template slot="footer">
                <c-button size="small" type="primary">获取</c-button>
              </template>
            </c-fullbox>
          </el-form-item>
		</c-col> -->
		</c-col>
		<c-col :span="24" style="margin-top:20px">
			<el-form ref="imgRef" :model="model" label-width="120px" label-position="right" size="small" :validate-on-rule-change="false">
				<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 width="auto" prop="imgnum">	
				</el-table-column> -->

					<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">
							<el-form-item :prop="'imgInvmod.imguseList.' + scope.$index + '.imgtyp'" label-width="0" :rules="[{required:elcFlg && !scope.row.imgtyp && scope.row.imgflg != 'JDFP', message: '必输项'}]">
								<c-select v-model="scope.row.imgtyp" :disabled="scope.row.imgflg == 'JDFP' || model.imgInvmod.uploadFlg">
									<el-option v-for="item in imgdbCode(scope.row.imgflg)" :value='item.value' :label='item.label' :key='item.value'></el-option>
								</c-select>
							</el-form-item>
						</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" :disabled="model.imgInvmod.uploadFlg"></c-input>
						</template>
					</el-table-column>
					<el-table-column label="发送人行状态" sortable min-width="140px" prop="sndsta">
						<template slot-scope="scope">
							{{getLabel(dbCodeList,scope.row.sndsta)}}
						</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-column label="显示在电证报文" sortable min-width="160px" prop="isbind">
					<template slot-scope="scope">
						<c-select v-model="scope.row.isbind" dbCode="isbind"></c-select>
					</template>
				</el-table-column> -->
					<!-- <el-table-column label="发送人行报文msg" sortable min-width="180px" prop="msgid">
				</el-table-column> -->
					<!-- <el-table-column label="" prop="det"  min-width="100px" fixed="right">
						<template slot-scope="scope" slot="header">
							<c-button circle  class="el-icon-plus" size="mini" @click="addRow(scope)">
							</c-button>
							<c-button  circle class="el-icon-minus" size="mini" @click="removeRow(scope)">
							</c-button>
						</template>
					</el-table-column> -->
				</el-table>
			</el-form>

		</c-col>
		<c-col :span="24" style="margin-top:20px" v-if="'BPTINV_BFTINV_BDTINV_BDTDCK_BFTDRV_DITAME'.includes(root.trnName.toUpperCase())">
			<span>历史影像信息</span>
		</c-col>
		<c-col :span="24" style="margin-top:20px" v-if="'BPTINV_BFTINV_BDTINV_BDTDCK_BFTDRV_DITAME'.includes(root.trnName.toUpperCase())">
			<el-table max-height="300px" style="text-align: center;" stripe :data="model.imgInvmod.oldImguseList" :paginationShow="false" :border="true">
				<!-- <el-table-column label="影像批次号" sortable min-width="100px" prop="imgnum">	
				</el-table-column> -->
				<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">
						<c-select v-model="scope.row.valflg" dbCode="vldflg"></c-select>
					</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">
						{{getLabel(imgdbCode,scope.row.imgtyp)}}
					</template>
				</el-table-column>
				<el-table-column label="影像描述" sortable min-width="110px" prop="imgdsp">
				</el-table-column>

				<el-table-column label="发送人行状态" sortable min-width="140px" prop="sndsta">
					<template slot-scope="scope">
						{{getLabel(dbCodeList,scope.row.sndsta)}}
					</template>
				</el-table-column>
				<el-table-column label="影像ID" sortable min-width="200px" prop="imagid">
				</el-table-column>
			</el-table>
		</c-col>
	</div>
</template>
<script>
import event from "../event";

export default {
  inject: ["root"],
  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: [],
        imgtyp: []
      },
      dbCodeList: [
        { label: "未上传", value: "W" },
        { label: "上传成功", value: "Y" },
        { label: "上传失败", value: "N" }
      ]
    };
  },
  mounted() {
    this.getdbCode("imgflg", "imgflg");
    this.getdbCode("vldflg", "valflg");
  },
  methods: {
    addRow(row) {
      let newRow = {
        // imgnum:'',
        imagid: "",
        valflg: "",
        imgflg: this.imgflgList,
        imgtyp: "",
        imgdsp: "",
        filnam: "",
        isbind: "",
        sndsta: "",
        msgid: ""
      };
      let start = 0;
      if (this.model.imgInvmod.imguseList) {
        start = this.model.imgInvmod.imguseList.length;
      }
      this.model.imgInvmod.imguseList.splice(start, 0, newRow);
    },
    removeRow() {
      if (this.imgCurrentZcinvlstIndex === -1) {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据删除!"
        });
        return;
      }
      this.model.imgInvmod.imguseList.splice(this.imgCurrentZcinvlstIndex, 1);
      this.imgCurrentZcinvlstIndex = -1;
    },
    handleRowClick(row) {
      this.imgCurrentZcinvlstIndex = row.index;
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    }
  },
  watch: {
    "model.imgInvmod.imgnum": {
      handler(val, oldval) {
        if (oldval != '' && val != oldval) {
          this.model.imgInvmod.downLoadFlg = false;
          this.model.imgInvmod.uploadFlg = false;
        }
        //影像解绑的时候重新更新列表
        if (val == "") {
          this.model.imgInvmod.imguseList = [];
        } else {
          if (val != oldval && oldval != "") {
            let list = val.split("\n");
            let oldList = oldval.split("\n");
            if (list.length < oldList.length) {
              let lotnum = "";
              oldList.forEach(item => {
                if (!list.includes(item)) {
                  lotnum = item;
                }
              });
              if (this.model.imgInvmod.imguseList.length != 0) {
                let newList = [];
                this.model.imgInvmod.imguseList.forEach(i => {
                  if (i.imgnum == lotnum) {
                    newList.splice(newList.length, 0, i);
                  }
                });
                this.model.imgInvmod.imguseList = newList;
              }
            }
          }
        }
      }
    },
  },
  computed: {
		elcFlg(){
			switch (this.root.trnName.toUpperCase()) {
				case "DITOPN":
				case "DITAME":
				case "DITDCK":
				case "BDTDCK":
				case "BDTINV":
					if (this.model.didgrp.rec.elcflg == "Y") {
						console.log('true')
						return true;
					} else {
						console.log('false')
						return false;
					}
					break;
				case "BFTSND":
				case "BFTDRV":
				case "BFTINV":
					if (this.model.dedgrp.rec.elcflg == "Y") {
						console.log('true')
						return true;
					} else {
						console.log('false')
						return false;
					}
					break;
				default:
					return false;
			}
		},
		
    imgdbCode() {
      return function(val) {
        switch (val) {
          case "FFHT":
            return this.imgtypList1;
            break;
          case "JDDJ":
            return this.imgtypList2;
            break;
          default:
            return [];
        }
      };
		},
		dis(){
			return this.$store.state.Status.mode === "display"
		},
    isUploadR() {
      let list = this.model.imgInvmod.imguseList;
      if (list.length == 0) {
        return false;
      }
      let flg = list.some(item => {
        return item.imagid == null;
      });
      return flg;
		},
		isUpload(){
			let list = this.model.imgInvmod.imguseList
			if(list.length == 0){
				return false
			}else{
				let flg = list.some(item =>{
					return item.sndsta != 'Y'
				})
				if(flg){
					return true
				}else{
					return false
				}
			}
		}
  },
  created() {}
};
</script>
<style>
</style>