scan.vue

<template>
	<el-row style="height:100%;position:relative;" :style="{paddingRight:closed?'15px':'0px'}" :gutter="2">
		<el-col :span="closed?24:18" style="height:100%">
			<!-- <SunscanDialog ref="sunscan" :mode='mode' :params="sunscanParams" @refresh="getDocidList()"></SunscanDialog> -->
			<!-- <SunscanDialog v-if="scanType == 'old'" ref="sunscan" :mode='mode' :params="sunscanParams" @refresh="getDocidList()"></SunscanDialog>
			<NewSunscanDialog v-if="scanType == 'new'" ref="sunscan" :mode='mode' :params="sunscanParams" @refresh="refresh"></NewSunscanDialog> -->
      
		</el-col>
    <i :class="closed?'el-icon-d-arrow-left':'el-icon-d-arrow-right'" :style="{right:closed?'0':'calc(25% - 15px)'}" style="position:absolute;top:48%;cursor:pointer;z-index:999;font-weight:bolder" @click="toggleClosed" ></i>
		<el-col v-show="!closed" :span="6" style="height:100%;padding-top: 6px;box-sizing: border-box;background: rgb(240, 240, 240);">

			<button @click="newSunscan()">新增</button>
			<el-table class="table-small" height="calc(100vh - 115px)" :data="list" tooltip-effect="dark" fit>
				<el-table-column label="日期" min-width="25%" show-overflow-tooltip>
					<template slot-scope="scope">
						{{format(scope.row.optime)}}
					</template>
				</el-table-column>
				<el-table-column label="柜员" prop="opuser" min-width="20%" show-overflow-tooltip></el-table-column>
				<el-table-column label="批次" prop="lotnum" min-width="40%" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" min-width="15%">
					<template slot-scope="scope">
						<el-dropdown @command="handleCommand($event,scope.row,scope.$index)">
							<i class="el-icon-more"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="view">查看</el-dropdown-item>
								<el-dropdown-item command="edit">编辑</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
      <el-pagination
        layout="prev,pager,next"
        :page-size="20"
        :pager-count="5"
        :total="total"
        style="height: 30px;"
        @current-change="handlePageClick"
      ></el-pagination>
		</el-col>
	</el-row>
</template>
<script>

import Api from "~/service/Api";
import moment from "moment";
export default {
  name: "webScan",
  props: {
    ip: {
      type: String
    },
    port: {
      type: String
    },
    org: {
      type: String
    },
    mode:{
			type: String,//scan:批扫 view:查看 bind：绑定
    },
    scanType:String,//新老影像控件标志
  },
 // components: { SunscanDialog ,NewSunscanDialog },
  data() {
    return {
      SUCCESS: "AAAAAA",
      chooseRowIndex: -1,
      sunscanParams: {
        optionType: "0",
        ip: this.ip,
        port: this.port,
        docid: "",
        date: "",
        org: "",
        oper: "",
        refresh:false,
      },
      list: [],
      total: 0,
      pageNum: 1,
      closed:true,
    };
  },
  watch: {
    ip: {
      handler(val) {
        if (!val) return;
      },
      immediate: true
    },
    port: {
      handler(val) {
        if (!val) return;
      },
      immediate: true
    }
  },
  mounted() {
    this.getDocid();
    this.getDocidList();
    console.log(this.scanType , '进到影像页面：scan')
  },
  methods: {
    async refresh(val, docid) {
      console.log(val)
      await this.getDocidList('refresh', val, docid)
    },
    toggleClosed(){
      this.closed = !this.closed
    },
    format(date) {
      return moment(date).format("YYYYMMDD");
    },
    async handleCommand(val,row,index) {
      this.sunscanParams.refresh = !this.sunscanParams.refresh
      if (val == "edit") {
				this.sunscanParams.org = row.branch;
        this.sunscanParams.oper = row.imgusr;
        this.sunscanParams.ip = this.ip;
        this.sunscanParams.port = this.port;
        this.sunscanParams.optionType = "1";
        this.sunscanParams.docid = row.lotnum;
        this.sunscanParams.date = this.format(row.optime);
        index ? this.chooseRowIndex = index : 0
      } else if (val == "view") {
				this.sunscanParams.org = row.branch;
        this.sunscanParams.oper = row.imgusr;
        this.sunscanParams.ip = this.ip;
        this.sunscanParams.port = this.port;
        this.sunscanParams.optionType = "2";
        this.sunscanParams.docid = row.lotnum;
        this.sunscanParams.date = this.format(row.optime);
      } else if (val == "delete") {
        await this.$emit("delete", row.lotnum);
        await this.getDocidList();
      }
    },
    newSunscan() {
      this.getDocid();
    },
    getDocid() {
      Api.post("/manager/img/generateLotNum").then(res => {
        if (res.respCode == this.SUCCESS) {
          this.sunscanParams.docid = res.data.lotNum;
          this.sunscanParams.optionType = "0";
          this.sunscanParams.date = this.format();
          this.sunscanParams.ip = this.ip;
          this.sunscanParams.port = this.port;
          this.sunscanParams.org = this.org;
        }
      });
    },
    async getDocidList(str, typ, docid) {
      await Api.post("/manager/img/listUnbindLotNum",{
        branch:this.org,
        pageSize: 20,
        pageNum: this.pageNum
      }).then(res => {
        if (res.respCode == this.SUCCESS) {
          this.list = res.data.list;
          this.total = res.data.total
          console.log(res)
          if(str == 'refresh') {
						let curRowList = this.list.filter((itm) => {
							return itm.lotnum === docid
						})
						let curRow = {}
						if (curRowList && curRowList.length > 0) {
							curRow = curRowList[0]
						}
						console.log('curRow=====', curRow)
            curRow && curRow.lotnum ? this.handleCommand('view', curRow) : this.afterDoBindRefresh(docid)
          }
        }
      });
		},
		afterDoBindRefresh(docid) {
			let data = {
        ownref: this.sunscanParams.tradeCode,
        imginr: this.sunscanParams.imginr,
        trninr: null,
        msginr: this.sunscanParams.smhinr,
        branch: this.sunscanParams.org
      };
      Api.post("/manager/img/listBindLotNum", data).then(res => {
        if (res.respCode == "AAAAAA") {
					this.list = res.data;
					let curRowList = this.list.filter((itm) => {
						return itm.lotnum === docid
					})
					let curRow = {}
					if (curRowList && curRowList.length > 0) {
						curRow = curRowList[0]
					}
					this.handleCommand('view', curRow)
        }
      });
		},
    async handlePageClick(page) {
      console.log(page)
      this.pageNum = page
      await this.getDocidList();
    }
  }
};
</script>
<style scoped lang="less">
::v-deep .el-dialog {
  height: 90vh;
  margin: 5vh auto;
  .el-dialog__body {
    position: relative;
    height: calc(100% - 54px);
  }
}
::v-deep .el-tabs__content {
  height: 100%;
}
::v-deep .el-tab-pane {
  height: 100%;
}

::v-deep .el-pager li {
  min-width: 22px;
}
::v-deep .el-pagination .btn-prev {
  padding: 0 3px;
}
::v-deep .el-pagination .btn-next {
  padding: 0 3px;
}
</style>