<template> <a-card :bordered="false"> <form id="container-form"> <div class="select-list"> <ul id="select_info"> <li> <a-select show-search placeholder="请选择库区" option-filter-prop="children" v-model="zoneCode" @change="refresh" style="width: 200px"> <a-select-option selected="0" id="zoneCode" v-for="item in zoneList" :key="item.name" :value="item.code">{{ item.name }} </a-select-option> </a-select> </li> <li>第 <a-select show-search option-filter-prop="children" v-model="num" style="width: 70px"> <a-select-option id="num" v-for="num in nums" :key="num" :value="num">{{ num }} </a-select-option> </a-select> </li> <li> <a-select show-search option-filter-prop="children" v-model="col" @change="refresh" style="width: 70px"> <a-select-option id="col" v-for="item in colList" :key="item.name" :value="item.code">{{ item.name }} </a-select-option> </a-select> </li> <li> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="search()" icon="search" style="margin-left: 8px;">查询</a-button> <a-button @click='expressDelivery()' v-if="expressDeliveryVisible" type='primary' style="margin-left: 8px;">快速出库</a-button> <a-button @click="expressStorage()" type="primary" v-if="expressStorageVisible" style="margin-left: 8px;">快速入库</a-button> </span> </li> </ul> </div> </form> <div class="col-sm-12 select-info"> <form id="receiptHeader-form"> <div class="select-list"> <ul id="img_list"> <li style="font-size: 12px">空柜空闲:<img src="~@/assets/icon/grid_rest.png"></li> <li style="font-size: 12px">空盘空闲:<img src="~@/assets/icon/grid_empty.png" alt=""></li> <li style="font-size: 12px">整盘空闲:<img src="~@/assets/icon/grid_all.png"></li> <li style="font-size: 12px">空柜锁定:<img src="~@/assets/icon/grid_emp_lock.png"></li> <li style="font-size: 12px">空盘锁定:<img src="~@/assets/icon/grid_empty_lock.png"></li> <li style="font-size: 12px">整盘锁定:<img src="~@/assets/icon/grid_all_lock.png"></li> </ul> <ul id="info_list"> <li> <span style="font-size: 12px">库位统计情况:</span> <input style="width: 600px; font-size: 12px; border: none;" type="text" id="zone" disabled/> </li><br><br> <li><span>库位:</span><input type="text" style="width: 100px; font-size: 12px; border: none;" id="code" disabled/></li><br><br> <li><span>容器:</span><input type="text" style="width: 200px; font-size: 12px; border: none;" id="containerCode" disabled/></li><br><br> <li style="width: 100%;"> <span style="height: 32px; line-height:26px;">物料信息:</span> <a-textarea v-model="materialInfo" auto-size style="width: 80%; font-size: 12px; resize: none; vertical-align:top; border: none; box-shadow: none; outline:none;" readonly /> </li> </ul> </div> </form> </div> <div class="col-sm-12 select-info"> <div id="borderCol" style="overflow-y: auto;white-space:nowrap" v-show="showPrise"> <div class="location" id="location"></div> </div> <a-spin tip="库位视图生成中..." :spinning="spinning"> <a-skeleton active :loading="loading" :paragraph="{ rows: 5 }"/> </a-spin> </div> <ExpressStorageModal ref="ExpressStorageModal" @ok="search"></ExpressStorageModal> <ExpressDeliveryModal ref="ExpressDeliveryModal" @ok="search"></ExpressDeliveryModal> </a-card> </template> <script> import huahengUI from '@/assets/css/huahengUI.css' import $ from '../../../assets/js/jquery-1.11.1.min' import grid_rest from '@/assets/icon/grid_rest.png' import grid_empty from '@/assets/icon/grid_empty.png' import grid_half from '@/assets/icon/grid_half.png' import grid_all from '@/assets/icon/grid_all.png' import grid_emp_waing from '@/assets/icon/grid_emp_waing.png' import grid_empty_waring from '@/assets/icon/grid_empty_waring.png' import grid_half_waring from '@/assets/icon/grid_half_waring.png' import grid_all_waring from '@/assets/icon/ContainerDisabled.png' import grid_emp_lock from '@/assets/icon/grid_emp_lock.png' import grid_empty_lock from '@/assets/icon/grid_empty_lock.png' import grid_half_lock from '@/assets/icon/grid_half_lock.png' import grid_all_lock from '@/assets/icon/grid_all_lock.png' import rel_empty from '@/assets/icon/rel_empty.png' import {getInventoryDetailByLocationCode, getZoneList} from '@/api/api' import ExpressDeliveryModal from "@views/system/monitor/modules/ExpressDeliveryModal"; import ExpressStorageModal from "@views/system/monitor/modules/ExpressStorageModal"; import {JeecgListMixin} from '@/mixins/JeecgListMixin' import {getAction, postAction} from "@api/manage"; export default { name: "locationStatus", mixins: [JeecgListMixin], components: { ExpressStorageModal, ExpressDeliveryModal }, data() { return { spinning: true, loading: true, showPrise: false, expressDeliveryVisible: false, expressStorageVisible: false, col: "row", materialInfo: "", colList: [ {code: "row", name: "行"}, {code: "line", name: "列"}, {code: "layer", name: "层"} ], zoneCode: '', zoneList: [], num: 1, nums: [], model: {}, url: { getStatus: "/location/locationMonitor/getStatus", getLocationInfo: "/location/locationMonitor/getLocationInfo", getAllLocation: "/location/locationMonitor/getAllLocation" }, grid_row: null, grid_line: null, grid_layer: null, list_info: null, currentLocationCode: 0, } }, created() { this.loadFrom() window.gridMsg = this.gridMsg window.mClose = this.mClose window.lays = this.lays }, mounted() { // 方法一:确保 .location 元素存在且已渲染 const locationElement = document.querySelector('.location'); if (locationElement) { const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { this.changeMargin(); } }); resizeObserver.observe(locationElement); setTimeout(() => { this.refresh(); // 使用箭头函数,this 指向 Vue 组件实例 }, 1000); } }, methods: { loadData() { // 空方法,为了覆盖混入文件中的方法,解决报错 }, loadFrom() { getZoneList().then((res) => { if (res.success) { this.zoneList = res.result; if (this.zoneList.length > 0) { this.zoneCode = this.zoneList[0].code; } } }) }, handleNumsSelect() { let col = this.col; if (col === "row") { this.nums = this.grid_row; } else if (col === "line") { this.nums = this.grid_line; } else if (col === "layer") { this.nums = this.grid_layer; } else { this.$message.warning("错误"); } }, refresh() { let url = this.url.getAllLocation getAction(url, {zoneCode: this.zoneCode}).then(res => { if (res.success) { this.grid_row = res.result.maxRow; this.grid_line = res.result.maxLine; this.grid_layer = res.result.maxLayer; } else { this.$message.warning(res.message) } }).finally(() => { this.handleNumsSelect(); this.search(); }) this.locationStatistics(); }, //格子宽度 changeMargin() { let box_width = 0; if (document.getElementById("location") != null) { box_width = document.getElementById("location").offsetWidth; } box_width = box_width - 80; let num = this.col; let grid_width; if (num === "layer" || num === "row") { grid_width = box_width / this.grid_line; } else if (num === "line") { grid_width = box_width / this.grid_row; } if (grid_width >= 50) { $(".grid").css({"width": "50px", "height": "50px"}); } else if (grid_width <= 20) { $(".grid").css({"width": "20px", "height": "20px"}); } else { $(".grid").css({"width": grid_width, "height": grid_width}); } }, //tips信息 lays(x) { let $j = $(x); let row = $j.attr("data-i"); let line = $j.attr("data-j"); let layers = $j.attr("data-k"); row = parseInt(row); line = parseInt(line); layers = parseInt(layers); if (this.list_info) { for (const element of this.list_info) { if (element.row === row && element.icolumn === line && element.layer === layers) { let str_info = ''; let container_code = ''; if (element.containerCode) { container_code = "\n容器编码:" + element.containerCode + ""; if (element.materialName) { for (let j = 0; j < element.materialName.length; j++) { let list_batch = element.batch[j].length == 0 ? "无" : element.batch[j]; let list_qty = element.qty[j]; str_info += "\n物料信息:批次->" + list_batch + ",物料名称->" + element.materialName[j] + ",物料编码->" + element.materialCode[j] + ",数量->" + list_qty + "" } } } let code = element.code === null ? "无" : element.code; $("[data-i='" + row + "']" + "[data-j='" + line + "']" + "[data-k='" + layers + "']").attr({"title": "第" + row + "行,第" + line + "列,第" + layers + "层\n库位:" + code + container_code + str_info}); } } } else { return "" } }, // 快速入库 expressStorage() { let json = { "containerCode": this.currentContainerCode, "locationCode": this.currentLocationCode } this.$refs.ExpressStorageModal.edit(json); }, // 获取库存信息 getInventory(locationCode) { let params = { locationCode: locationCode } getInventoryDetailByLocationCode(params).then((res) => { if (res.success) { let parameter = []; let newArr = res.result.records; for (let i of newArr) { let param = { materialCode: i.materialCode, shipQty: i.qty, inventoryDetailId: i.id, containerCode: i.containerCode } parameter.push(param); } this.$refs.ExpressDeliveryModal.edit(parameter); } else { this.$message.error(res.message); } }); }, //快速出库 expressDelivery() { this.getInventory(this.currentLocationCode); }, // 显示快速出库 revealExpressDelivery(code, materialCode) { this.expressDeliveryVisible = !!materialCode; }, // 显示快速入库 revealExpressStorage(code) { this.expressStorageVisible = !!code; }, //关闭tips mClose(x) { //关闭 // Vue.prototype.$Jnotification.error({message: '系统提示', description: "鼠标拿走了", duration: 4}) }, //库位信息请求和状态显示 ajaxGrid(x, info) { let _this = this let url = this.url.getLocationInfo; postAction(url, info).then(res => { if (res.success) { if (x === "row") { for (let i = 0; i < res.result.length; i++) { let index = res.result[i].icolumn + ((res.result[i].layer - 1) * this.grid_line); index = index - 1; _this.resShow(res, index, i); } _this.clearLocation(this.grid_line, this.grid_layer); } else if (x === "line") { for (let i = 0; i < res.result.length; i++) { let index = res.result[i].row + ((res.result[i].layer - 1) * this.grid_row); index = index - 1; _this.resShow(res, index, i); } _this.clearLocation(this.grid_row, this.grid_layer); } else if (x === "layer") { for (let i = 0; i < res.result.length; i++) { let index = res.result[i].icolumn + ((res.result[i].row - 1) * this.grid_line); index = index - 1; _this.resShow(res, index, i); } _this.clearLocation(this.grid_line, this.grid_row); } } else { this.$message.error(res.message); } this.list_info = res.result; }).finally(() => { }) }, //库位请求的结果显示 resShow(res, index, i) { let row = res.result[i].row; let jColumn = res.result[i].icolumn; let kLayer = res.result[i].layer; if (res.result[i].locationAttribute === "1") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_rest, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "2") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_empty, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "3") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_half, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "4") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_all, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "5") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_emp_lock, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "6") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_empty_lock, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "7") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_half_lock, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "8") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_all_lock, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "9") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_emp_waing, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "10") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_empty_waring, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "11") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_half_waring, "isTrue": 1 }); } else if (res.result[i].locationAttribute === "12") { $("[data-i='" + row + "']" + "[data-j='" + jColumn + "']" + "[data-k='" + kLayer + "']").attr({ "src": grid_all_waring, "isTrue": 1 }); } }, //清除将数据库中没有的库位 clearLocation(x, y) { for (let j = 0; j < x * y; j++) { let $grid = $(".grid"); let sta = $grid.eq(j).attr("isTrue"); if (sta !== "1") { $grid.eq(j).attr({"src": rel_empty, "onmouseover": "", "onclick": ""}); } } this.spinning = false; this.showPrise = true; this.loading = false; }, //点击显示当前库位信息 gridMsg(msg) { let $j = $(msg); let row = $j.attr("data-i"); let line = $j.attr("data-j"); let layers = $j.attr("data-k"); row = parseInt(row); line = parseInt(line); layers = parseInt(layers); if (this.list_info) { for (const element of this.list_info) { if (element.row === row && element.icolumn === line && element.layer === layers) { let materialCode = ''; //let $material = $("#material"); if (element.materialName) { //$material.children().remove(); let str_info = ''; for (let j = 0; j < element.materialName.length; j++) { let list_batch = element.batch[j].length === 0 ? "无" : element.batch[j]; let list_qty = element.qty[j]; str_info += "批次->" + list_batch + ",物料名称->" + element.materialName[j] + ",物料编码->" + element.materialCode[j] + ",数量->" + list_qty; materialCode = element.materialCode[j]; if (j !== element.materialName.length -1) { str_info += "\r\n" } } this.materialInfo = str_info } else { this.materialInfo = "无" } let $code = $("#code"); $code.val(element.code); $("#containerCode").val(element.containerCode === "" ? "无" : element.containerCode); this.currentContainerCode = element.containerCode; this.currentLocationCode = $code.val() this.revealExpressDelivery(element.code, materialCode); this.revealExpressStorage(element.code); break; } } } else { return "" } }, //搜索平面库位 search() { this.spinning = true; this.showPrise = false; this.loading = true; let col = this.col; let num = this.num; let data; $("#location").children().remove(); let $location = $(".location"); if (col === "row") { data = {zoneCode: this.zoneCode, row: num}; for (let i = this.grid_layer; i > 0; i--) { if (i != this.grid_layer) { $location.append("<br>") } $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + i + "层</span>"); for (let j = 1; j <= this.grid_line; j++) { $location.append("<img data-i=" + num + " data-j=" + j + " data-k=" + i + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>"); } } } else if (col === "line") { data = {zoneCode: this.zoneCode, line: num}; for (let k = this.grid_layer; k > 0; k--) { if (k != this.grid_layer) { $location.append("<br>") } $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + k + "层</span>"); for (let l = 1; l <= this.grid_row; l++) { $location.append("<img data-i=" + l + " data-j=" + num + " data-k=" + k + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>"); } } } else if (col === "layer") { data = {zoneCode: this.zoneCode, layer: num}; for (let m = 1; m <= this.grid_row; m++) { if (m != 1) { $location.append("<br>") } $location.append("<span style='display: inline-block;text-align: right;width: 50px; margin-right: 10px;'>第" + m + "行</span>"); for (let n = 1; n <= this.grid_line; n++) { $location.append("<img data-i=" + m + " data-j=" + n + " data-k=" + num + " class='grid' onmouseover='lays(this)' onmouseout='mClose(this)' onclick='gridMsg(this)'>"); } } } this.ajaxGrid(col, data); }, locationStatistics() { let url = this.url.getStatus; getAction(url, {zoneCode: this.zoneCode}).then(res => { if (res.success) { $("#zone").val("库位总数:" + res.result.location + ",空库位:" + res.result.emptyLocation + ",空托盘库位:" + res.result.haveContainLocation + ",有货库位:" + res.result.haveInventoryLocation) } else { this.$message.warning(res.message) } }).finally() } } } </script>