<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <style type="text/css"> #img_list li{ font-size: 10px; /*width: 50px;*/ text-align: left; margin: auto 3px; } #img_list li img{ height: 35px; width: 35px; } #info_list{ display:inline-block; } #info_list li{ margin:8px 3px 0 5px; } #info_list li span{ font-size: 12px; display: inline-block; /*width: 65px;*/ text-align: center; } .grid{ display: inline-block; width: 50px; height: 50px; /*margin: 12px 6px;*/ margin-bottom: 6px; background-size:cover; background-image: url("../img/icon/空柜空闲.png"); } #location span{ display: inline-block; text-align: right; width: 50px; margin-right: 10px; } </style> <div class="container-div"> <div class="row"> <div class="col-sm-12 select-info"> <form id="container-form"> <div class="select-list"> <ul id="select_info"> <li> <select id="locationType" name="locationType" style="width: 100px"> <option value="L" selected>立库库位</option> <option value="Q">钱柜库位</option> <option value="DM">地面库位</option> </select> </li> <li> 第 <select id="editable-num" name="num" style="width: 70px"> </select> </li> <li> <select id="editable-select" name="col" style="width: 70px"> <option value="row" selected>行</option> <option value="line">列</option> <option value="layer">层</option> </select> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="Search()"><i class="fa fa-search"></i> 搜索</a> </li> </ul> </div> </form> </div> <div class="col-sm-12 select-info"> <form id="receiptHeader-form"> <div class="select-list"> <ul id="img_list" style=""> <li> 空柜空闲:<img src="../img/icon/空柜空闲.png"> </li> <li> 空盘空闲:<img src="../img/icon/空盘空闲.png"> </li> <li> 半盘空闲:<img src="../img/icon/半盘空闲.png"> </li> <li> 整盘空闲:<img src="../img/icon/整盘空闲.png"> </li> <li> 空柜锁定:<img src="../img/icon/空柜锁定.png"> </li> <li> 空盘锁定:<img src="../img/icon/空盘锁定.png"> </li> <li> 半盘锁定:<img src="../img/icon/半盘锁定.png"> </li> <li> 整盘锁定:<img src="../img/icon/整盘锁定.png"> </li> <li> 空柜禁用:<img src="../img/icon/空柜禁用.png"> </li> <li> 空盘禁用:<img src="../img/icon/空盘禁用.png"> </li> <li> 半盘禁用:<img src="../img/icon/半盘禁用.png"> </li> <li> 整盘禁用:<img src="../img/icon/整盘禁用.png"> </li> </ul><br><br> <ul id="info_list"> <li><span>库位:</span><input type="text" id="code" disabled/></li> <li><span>容器编码:</span><input type="text" id="containerCode" disabled/></li> <li><span>物料信息:<select id="material" style="width: auto"><option>无</option></select></span></li> <li> </li> <li> <a class="btn btn-success btn-rounded btn-sm" onclick="checkLocationCode()" shiro:hasPermission="inventory:inventory:seeOut"><i class="fa fa-eye"></i> 出库查看</a> </li> </ul> </div> </form> </div> <div class="col-sm-12 select-info"> <!--style="width: 100%;overflow-x: scroll;white-space:nowrap"--> <div id="borderCol" style="overflow-y: scroll;white-space:nowrap"> <div class="location" id="location"> <!--<div class="grid"></div>--> </div> </div> </div> </div> </div> <div th:include="include :: footer"></div> <script th:inline="javascript"> var prefix = ctx + "general/location"; var grid_row; var grid_line; var grid_layer; var list_info; var grid_rest="../img/icon/空柜空闲.png"; var grid_empty="../img/icon/空盘空闲.png"; var grid_half="../img/icon/半盘空闲.png"; var grid_all="../img/icon/整盘空闲.png"; var grid_emp_waing="../img/icon/空柜禁用.png"; var grid_empty_waring="../img/icon/空盘禁用.png"; var grid_half_waring="../img/icon/半盘禁用.png"; var grid_all_waring="../img/icon/整盘禁用.png"; var grid_emp_lock="../img/icon/空柜锁定.png"; var grid_empty_lock="../img/icon/空盘锁定.png"; var grid_half_lock="../img/icon/半盘锁定.png"; var grid_all_lock="../img/icon/整盘锁定.png"; var rel_empty="../img/icon/空.png"; $(function() { resetAjax("L"); //库位类型和行列层选择 $("#editable-select").change(function () { let num=$("#editable-select").val(); $("#editable-num").children().remove(); if (num === "row") { for (let i = 1; i <= grid_row; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "line") { for (let i = 1; i <= grid_line; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } else if (num === "layer") { for (let i = 1; i <= grid_layer; i++) { $("#editable-num").append("<option value='"+i+"'>"+i+"</option>") } } }); $("#locationType").change(function () { let type=$("#locationType").val(); resetAjax(type); }); //页面初始化请求 function resetAjax(type){ $.ajax({ url:prefix+"/getAllLocation", type:"post", data:{ type:type }, success:function (res) { grid_row=res.data.maxRow; grid_line=res.data.maxLine; grid_layer=res.data.maxLayer; //初始格子 $("#location").children().remove(); $("#editable-num").children().remove(); for (let i = 1; i <= grid_layer; i++) { // var index=i+1;<span style='margin-top:30px'>第"+ index +"行</span> $(".location").append("<br>"); for (let j = 1; j <= grid_line; j++) { $(".location").append("<img data-i='1' data-j="+j+" data-k="+ i +" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>"); } } for (let t = 1; t <= grid_row; t++) { $("#editable-num").append("<option value='"+t+"'>"+t+"</option>") } changeMargin(); } }); } //监听浏览器宽度的改变 window.onresize = function(){ changeMargin(); border() }; changeMargin(); border() }); //边框高度 function border() { let box_height=$("#borderCol").offset().top; let window_height=$(window).height()-20; $("#borderCol").css({"height":window_height-box_height}); } //格子宽度 function changeMargin() { let box_width=document.getElementById("location").offsetWidth; box_width=box_width-80; let num=$("#editable-select").val(); let grid_width; if (num === "layer" || num === "row") { grid_width=box_width/grid_line; } else if (num === "line") { grid_width=box_width/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信息 function 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 (list_info) { for (let i = 0; i < list_info.length; i++) { if (list_info[i].row === row && list_info[i].line === line && list_info[i].layer === layers) { let str_info=''; let container_code=''; if (list_info[i].containerCode) { container_code="<br>容器编码:"+ list_info[i].containerCode+""; if (list_info[i].materialName) { for (let j = 0; j < list_info[i].materialName.length; j++) { let list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j]; str_info=str_info + "<br>批次:"+ list_batch +",物料名称:"+ list_info[i].materialName[j] +",物料编码:"+ list_info[i].materialCode[j] + ",数量:"+ list_info[i].qty[j] +"" } } } let code=list_info[i].code===null?"无":list_info[i].code; layer.tips("第"+row+"行,第"+line+"列,第"+ layers +"层<br>库位:"+ code + container_code + str_info + "" ,$j,{tips:[1,"rgb(28,132,198)"],time:0,area:'auto',maxWidth: '1000'}); } } }else {return ""} } //关闭tips function Mclose(x) { let index = layer.tips(); layer.close(index); } //搜索平面库位 function Search() { let index=$("#editable-select").val(); let num=$("#editable-num").val(); let locationType=$("#locationType").val(); $("#code").val(""); $("#containerCode").val(""); $("#material").children().remove(); $("#material").append("<option>无</option>"); let data; if (index === "row") { data={type:locationType, row:num}; $("#location").children().remove(); for (let i = 1; i <= grid_layer; i++) { $(".location").append("<br><span>第"+ i+"层</span>"); for (let j = 1; j <= 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)'>"); } } changeMargin(); ajaxGrid(index,data); } else if (index === "line") { data={type:locationType, line:num}; $("#location").children().remove(); for (let k = 1; k <= grid_layer; k++) { $(".location").append("<br><span>第"+ k+"层</span>"); for (let l = 1; l <= 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)'>"); } } changeMargin(); ajaxGrid(index,data); } else if (index === "layer") { data={type:locationType, layer:num}; $("#location").children().remove(); for (let m = 1; m <= grid_row; m++) { $(".location").append("<br><span>第"+ m+"行</span>"); for (let n = 1; n <= 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)'>"); } } changeMargin(); ajaxGrid(index,data); } } //库位信息请求和状态显示 function ajaxGrid(x, info) { let load=layer.msg('加载中', {icon: 16,shade: 0.4,time: false}); $.ajax({ url:prefix+"/getLocationInfo", type:"post", data:info, success:function (res) { if (res.code===200||res.data||res.msg==="成功") { if (x === "row") { for (let i = 0; i < res.data.length; i++) { let index=res.data[i].line+((res.data[i].layer-1)*grid_line); index=index-1; resShow(res,index,i); } clearLocation(grid_line,grid_layer); layer.close(load); } else if (x === "line") { for (let i = 0; i < res.data.length; i++) { let index=res.data[i].row+((res.data[i].layer-1)*grid_row); index=index-1; resShow(res,index,i); } clearLocation(grid_row,grid_layer); layer.close(load); } else if (x === "layer") { for (let i = 0; i < res.data.length; i++) { let index=res.data[i].line+((res.data[i].row-1)*grid_line); index=index-1; resShow(res,index,i); } clearLocation(grid_line,grid_row); layer.close(load); } } else if (res.msg !== "成功"||res.code!==200) { layer.close(load); layer.open({ title: '错误', content: res.msg }); } list_info=res.data; }, error:function (req, msg) { console.log(msg); } }) } //库位请求的结果显示 function resShow(res, index ,i) { if (res.data[i].deleted === false) { if (res.data[i].userDef3 === "1") { $(".grid").eq(index).attr({"src": grid_rest, "isTrue": 1}); } else if (res.data[i].userDef3 === "2") { $(".grid").eq(index).attr({"src": grid_empty, "isTrue": 1}); } else if (res.data[i].userDef3 === "3") { $(".grid").eq(index).attr({"src": grid_half, "isTrue": 1}); } else if (res.data[i].userDef3 === "4") { $(".grid").eq(index).attr({"src": grid_all, "isTrue": 1}); } else if (res.data[i].userDef3 === "5") { $(".grid").eq(index).attr({"src": grid_emp_lock, "isTrue": 1}); } else if (res.data[i].userDef3 === "6") { $(".grid").eq(index).attr({"src": grid_empty_lock, "isTrue": 1}); } else if (res.data[i].userDef3 === "7") { $(".grid").eq(index).attr({"src": grid_half_lock, "isTrue": 1}); } else if (res.data[i].userDef3 === "8") { $(".grid").eq(index).attr({"src": grid_all_lock, "isTrue": 1}); } else if (res.data[i].userDef3 === "9") { $(".grid").eq(index).attr({"src": grid_emp_waing, "isTrue": 1}); } else if (res.data[i].userDef3 === "10") { $(".grid").eq(index).attr({"src": grid_empty_waring, "isTrue": 1}); } else if (res.data[i].userDef3 === "11") { $(".grid").eq(index).attr({"src": grid_half_waring, "isTrue": 1}); } else if (res.data[i].userDef3 === "12") { $(".grid").eq(index).attr({"src": grid_all_waring, "isTrue": 1}); } } else if (res.data[i].deleted === true) { $(".grid").eq(i).attr({"src": rel_empty, "onmouseover": "", "onclick": ""}); } } //清除将数据库中没有的库位 function clearLocation(x, y) { for (let j = 0; j < x * y; j++) { let sta=$(".grid").eq(j).attr("isTrue"); if (sta !== "1") { $(".grid").eq(j).attr({"src": rel_empty,"onmouseover": "","onclick": ""}); } } } //点击显示当前库位信息 function 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 (list_info) {//缓存查询 for (let i = 0; i < list_info.length; i++) { if (list_info[i].row === row && list_info[i].line === line && list_info[i].layer === layers) { if (list_info[i].materialName) { $("#material").children().remove(); for (let j = 0; j < list_info[i].materialName.length; j++) { let list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j]; let str_info="批次:"+ list_batch +"/ 物料名称:"+ list_info[i].materialName[j] +"/ 物料编码:"+ list_info[i].materialCode[j] + "/ 数量:"+ list_info[i].qty[j] +""; $("#material").append("<option>"+ str_info +"</option>"); } } else { $("#material").children().remove(); $("#material").append("<option>无</option>"); } $("#code").val(list_info[i].code); $("#containerCode").val(list_info[i].containerCode===""?"无":list_info[i].containerCode); } } }else {return ""} //接口查询 // $.ajax({ // url:prefix+"/getLocationInfo", // type:"post", // data:{ // type:"L", // row:row, // line:line, // layer:layers, // grid:1 // }, // success:function (res) { // $("#row_info").val(res.data[0].row); // $("#line_info").val(res.data[0].line); // $("#layer_info").val(res.data[0].layer); // $("#id").val(res.data[0].id); // $("#code").val(res.data[0].code); // $("#warehouseId").val(res.data[0].warehouseId); // $("#warehouseCode").val(res.data[0].warehouseCode); // $("#rowIndex").val(res.data[0].rowIndex); // $("#roadway").val(res.data[0].roadway); // $("#type").val(res.data[0].type); // $("#containerId").val(res.data[0].containerId); // $("#containerCode").val(res.data[0].containerCode); // $("#zoneId").val(res.data[0].zoneId); // $("#zoneCode").val(res.data[0].zoneCode); // $("#status").val(res.data[0].userDef3); // $("#lastCycleCountDate").val(res.data[0].lastCycleCountDate); // $("#created").val(res.data[0].created); // $("#createdBy").val(res.data[0].createdBy); // $("#lastUpdated").val(res.data[0].lastUpdated); // $("#lastUpdatedBy").val(res.data[0].lastUpdatedBy); // $("#enable").val(res.data[0].enable); // } // }); } //出库查看 function checkLocationCode() { let data = $("#code").val(); if (data) { $.modal.loading("正在处理中,请稍后..."); $.ajax({ url:prefix + "/checkLocationCode", type:'post', datatype:'json', data:{ locationCode:data }, success: function (result) { if (result.code == web_status.SUCCESS) { $.modal.msgSuccess(result.msg); } else { $.modal.alertError(result.msg) } $.modal.closeLoading() } }) } else{ layer.tips('请选择库位!',$("#code"),{tips:[1,"rgb(28,132,198)"],time:3000,area:'auto',maxWidth: '1000'}) } } </script> </body> </html>