|  |  | 
 |  |  |     <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no"/> | 
 |  |  |     <title>出库</title> | 
 |  |  |     <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> | 
 |  |  |     <link rel="stylesheet" href="../../static/css/pda.css" media="all"> | 
 |  |  |     <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> | 
 |  |  |     <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script> | 
 |  |  |     <style> | 
 |  |  |         * { | 
 |  |  |             font-family: microsoft yahei,serif; | 
 |  |  |             margin: 0; | 
 |  |  |             padding: 0; | 
 |  |  |             box-sizing: border-box; | 
 |  |  |             -webkit-box-sizing: border-box; | 
 |  |  |             -moz-box-sizing: border-box; | 
 |  |  |             font-size: 11px; | 
 |  |  |         .layui-input-block { | 
 |  |  |             margin-left: 60px; | 
 |  |  |         } | 
 |  |  |         html { | 
 |  |  |             height: 100%; | 
 |  |  |             background-color: #f1f1f1; | 
 |  |  |             padding: 5px; | 
 |  |  |         } | 
 |  |  |         body { | 
 |  |  |             height: 100%; | 
 |  |  |             background-color: #fff; | 
 |  |  |             border-radius: 5px; | 
 |  |  |             box-shadow: 0 0 3px rgba(0,0,0,.3); | 
 |  |  |             padding: 2px 5px; | 
 |  |  |             position: relative; | 
 |  |  |         } | 
 |  |  |         /* 头部 */ | 
 |  |  |         header { | 
 |  |  |             padding: 5px 0; | 
 |  |  |         } | 
 |  |  |         .layui-input-inline { | 
 |  |  |             margin-bottom: 5px; | 
 |  |  |         } | 
 |  |  |         .layui-form-label { | 
 |  |  |             width: initial; | 
 |  |  |             padding: 2px 10px; | 
 |  |  |         } | 
 |  |  |         .layui-input { | 
 |  |  |             width: 75%; | 
 |  |  |             height: 25px; | 
 |  |  |             margin-right: 0; | 
 |  |  |         } | 
 |  |  |         /* layer */ | 
 |  |  |         .layui-layer-title { | 
 |  |  |             font-size: 11px; | 
 |  |  |             height: 20px; | 
 |  |  |             line-height: 20px; | 
 |  |  |         } | 
 |  |  |         /* 主体 */ | 
 |  |  |         main { | 
 |  |  |             height: 150px; | 
 |  |  |             overflow: auto; | 
 |  |  |         } | 
 |  |  |         .layui-table, .layui-table-view { | 
 |  |  |             margin: 0; | 
 |  |  |         } | 
 |  |  |         .layui-table-view .layui-table td, .layui-table-view .layui-table th { | 
 |  |  |             padding: 0; | 
 |  |  |         } | 
 |  |  |         .layui-table-cell { | 
 |  |  |             height: 22px; | 
 |  |  |             line-height: 22px; | 
 |  |  |             padding: 0; | 
 |  |  |         } | 
 |  |  |         .layui-table-grid-down { | 
 |  |  |             display: none; | 
 |  |  |         } | 
 |  |  |         .layui-form-checkbox[lay-skin=primary] { | 
 |  |  |             height: 15px; | 
 |  |  |             width: 15px; | 
 |  |  |         } | 
 |  |  |         .layui-table-view .layui-form-checkbox[lay-skin=primary] i { | 
 |  |  |             height: 15px; | 
 |  |  |             width: 15px; | 
 |  |  |         } | 
 |  |  |         /* 尾部 */ | 
 |  |  |         footer { | 
 |  |  |             position: absolute; | 
 |  |  |             bottom: 5px; | 
 |  |  |             width: 100%; | 
 |  |  |         } | 
 |  |  |         .layui-btn-container .layui-btn { | 
 |  |  |             margin-left: 10px; | 
 |  |  |             margin-bottom: 2px; | 
 |  |  |         } | 
 |  |  |         #tips { | 
 |  |  |             display: inline-block; | 
 |  |  |             color: #666; | 
 |  |  |             margin-left: 5px; | 
 |  |  |             margin-bottom: 5px; | 
 |  |  |             vertical-align: middle; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .layui-btn-primary:hover { | 
 |  |  |             border-color: #C9C9C9 | 
 |  |  |             height: 200px; | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  | <!-- 头部 --> | 
 |  |  | <header> | 
 |  |  | <header class="layui-form"> | 
 |  |  |     <div class="layui-input-inline"> | 
 |  |  |         <label class="layui-form-label">库位</label> | 
 |  |  |         <input class="layui-input" type="text" id="locNo" autocomplete="off"> | 
 |  |  |         <div class="layui-input-block"> | 
 |  |  |             <input class="layui-input" type="number" id="locNo" onkeyup="findByLocNo(this)" autocomplete="off"> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |     </div> | 
 |  |  |     <div class="layui-input-inline"> | 
 |  |  |         <label class="layui-form-label">物料</label> | 
 |  |  |         <input class="layui-input" type="text" id="matNo" autocomplete="off"> | 
 |  |  |         <div class="layui-input-block"> | 
 |  |  |             <input class="layui-input" type="text" id="matNo" onkeyup="findByMatNo(this)" autocomplete="off"> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="layui-input-inline"> | 
 |  |  |         <label class="layui-form-label">出库口</label> | 
 |  |  |         <div class="layui-input-inline" style="margin-left: 5px;width: 120px"> | 
 |  |  |             <select id="staNoSelect"> | 
 |  |  |                 <option value="">请选择</option> | 
 |  |  |             </select> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </header> | 
 |  |  | <!-- 主体 --> | 
 |  |  | <main> | 
 |  |  |     <table class="layui-table" id="dataByLoc" lay-filter="chooseData"></table> | 
 |  |  |     <table class="layui-table" id="dataByLoc" lay-filter="dataByLoc"></table> | 
 |  |  | </main> | 
 |  |  | <!-- 尾部 --> | 
 |  |  | <footer> | 
 |  |  |     <!-- 出库口 --> | 
 |  |  |     <div class="site-list"> | 
 |  |  |         <span style="display: inline-block; margin:0 0 0 10px; font-size: 12px">出库口:</span> | 
 |  |  |     </div> | 
 |  |  |     <div class="layui-btn-container"> | 
 |  |  |         <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" onclick="reset()">重置</button> | 
 |  |  |         <button type="button" class="layui-btn layui-btn-normal  layui-btn-xs" onclick="pakOut()" style="margin-left: 20px">出库</button> | 
 |  |  |         <button id="reset" type="button" class="layui-btn layui-btn-primary" onclick="reset()">重置</button> | 
 |  |  |         <button id="pakOut" type="button" class="layui-btn layui-btn-normal" onclick="pakOut()" style="margin-left: 20px">出库</button> | 
 |  |  |         <span id="tips"></span> | 
 |  |  |     </div> | 
 |  |  | </footer> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |  | 
 |  |  |     window.onload = function(){ | 
 |  |  |         document.getElementById("locNo").focus(); | 
 |  |  |         getOutBound(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 根据库位号查找库存明细 | 
 |  |  |      */ | 
 |  |  |     function findByLocNo(el){ | 
 |  |  |         if (isEmpty(el.value)) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $("#matNo").val(""); | 
 |  |  |         find(el.value, null); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 根据商品编号查找库存明细 | 
 |  |  |      */ | 
 |  |  |     function findByMatNo(el){ | 
 |  |  |         if (isEmpty(el.value)) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $("#locNo").val(""); | 
 |  |  |         find(null, el.value); | 
 |  |  |     } | 
 |  |  |     function find(locNo, matNo) { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/mobile/locDetl", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: { | 
 |  |  |                 locNo: locNo, | 
 |  |  |                 matNo: matNo | 
 |  |  |             }, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     if (res.data != null) { | 
 |  |  |                         locDetlData = res.data; | 
 |  |  |                         tableIns.reload({data: locDetlData}); | 
 |  |  |                     } | 
 |  |  |                     $('#pakOut').focus(); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     locDetlData = []; | 
 |  |  |                     tableIns.reload({data: locDetlData}); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 表格 | 
 |  |  |     var locDetlData = []; | 
 |  |  |     var tableIns; | 
 |  |  |     layui.use(['table','laydate', 'form'], function() { | 
 |  |  |         var table = layui.table; | 
 |  |  |         var $ = layui.jquery; | 
 |  |  | 
 |  |  |         var form = layui.form; | 
 |  |  |  | 
 |  |  |         tableIns = table.render({ | 
 |  |  |             id: 'tableIdx', | 
 |  |  |             elem: '#dataByLoc', | 
 |  |  |             data: [], | 
 |  |  |             limit: 500, | 
 |  |  |             cellMinWidth: 50, | 
 |  |  |             cols: [[ | 
 |  |  |                 {type: 'checkbox', fixed: 'left', width:30}, | 
 |  |  |                 {fixed: 'left', align: 'center', field: 'count', title: '量', style:'color: blue', width:30}, | 
 |  |  |                 {field: 'matNo', align: 'center', title: '物料编码'}, | 
 |  |  |                 {field: 'matName', align: 'center', title: '物料名称'} | 
 |  |  |                 {field: 'count', align: 'center', title: '数量', event: 'detail', style:'color: blue', width:50}, | 
 |  |  |                 {field: 'matnr', align: 'center', title: '规格', event: 'detail'}, | 
 |  |  |                 {field: 'maktx', align: 'center', title: '名称', event: 'detail'}, | 
 |  |  |                 {field: 'locNo', align: 'center', title: '库位', event: 'detail'} | 
 |  |  |             ]], | 
 |  |  |             done: function (res, curr, count) { | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |  | 
 |  |  |         // 获取出库口 | 
 |  |  |         function getOutBound(){ | 
 |  |  |             $.ajax({ | 
 |  |  |                 url: baseUrl+"/available/take/site", | 
 |  |  |                 headers: {'token': localStorage.getItem('token')}, | 
 |  |  |                 method: 'POST', | 
 |  |  |                 async: false, | 
 |  |  |                 success: function (res) { | 
 |  |  |                     if (res.code === 200){ | 
 |  |  |                         var tpl = $("#outSitesTemplate").html(); | 
 |  |  |                         var template = Handlebars.compile(tpl); | 
 |  |  |                         var html = template(res); | 
 |  |  |                         $('#site-list').append(html); | 
 |  |  |                     } else if (res.code === 403){ | 
 |  |  |                         top.location.href = baseUrl+"/"; | 
 |  |  |                     }else { | 
 |  |  |                         layer.msg(res.msg) | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // 监听行工具事件 | 
 |  |  |         table.on('tool(dataByLoc)', function(obj) { | 
 |  |  |             var data = obj.data; | 
 |  |  |             switch (obj.event) { | 
 |  |  |                 // 详情 | 
 |  |  |                 case 'detail': | 
 |  |  |                     layer.open({ | 
 |  |  |                         type: 2, | 
 |  |  |                         title: '库存明细', | 
 |  |  |                         shade: [0.3,'#000'], | 
 |  |  |                         area: ['90%', '70%'], | 
 |  |  |                         content: 'locDetlIframe.html', | 
 |  |  |                         success: function(layero, index){ | 
 |  |  |                             // 设置弹窗样式 | 
 |  |  |                             $('.layui-layer-title').css('font-size', '16px'); | 
 |  |  |                             // 注入值 | 
 |  |  |                             let el = layer.getChildFrame('.form-box', index); | 
 |  |  |                             for (var val in data) { | 
 |  |  |                                 var find = el.find(":input[id='" + val + "']"); | 
 |  |  |                                 find.val(data[val]); | 
 |  |  |                             } | 
 |  |  |                         }, | 
 |  |  |                         end: function () { | 
 |  |  |                             $('#pakOut').focus(); | 
 |  |  |                         } | 
 |  |  |                     }); | 
 |  |  |                     break; | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     // 获取出库口 | 
 |  |  |     function getOutBound(){ | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+"/available/take/site", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'POST', | 
 |  |  |             async: false, | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     var tpl = $("#takeSiteSelectTemplate").html(); | 
 |  |  |                     var template = Handlebars.compile(tpl); | 
 |  |  |                     var html = template(res); | 
 |  |  |                     $('#staNoSelect').append(html); | 
 |  |  |                     layui.form.render('select'); | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     top.location.href = baseUrl+"/pda"; | 
 |  |  |                 }else { | 
 |  |  |                     tips("获取出库口失败", true) | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 出库 | 
 |  |  |     function pakOut() { | 
 |  |  |         var tableData = layui.table.checkStatus('tableIdx').data; | 
 |  |  |         if (tableData.length === 0) { | 
 |  |  |             tips("请选择物料", true); | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         var site = $('#staNoSelect').val(); | 
 |  |  |         if (null === site || undefined === site || site === "") { | 
 |  |  |             tips("请选择出库口", true); | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+"/plate/out/start", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: JSON.stringify({ | 
 |  |  |                 outSite: site, | 
 |  |  |                 locDetls: tableData | 
 |  |  |             }), | 
 |  |  |             contentType:'application/json;charset=UTF-8', | 
 |  |  |             method: 'POST', | 
 |  |  |             async: false, | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     reset(); | 
 |  |  |                     tips("启动出库成功") | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     tips(res.msg, true) | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 修改表格数据 | 
 |  |  |     function updateTableData(data) { | 
 |  |  |         for (var i=0;i<locDetlData.length;i++) { | 
 |  |  |             if (data.matnr === locDetlData[i].matnr && data.locNo === locDetlData[i].locNo) { | 
 |  |  |                 locDetlData[i].count = data.count; | 
 |  |  |                 break | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         tableIns.reload({data: locDetlData}); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 删除表格行 | 
 |  |  |     function removeTableData(data) { | 
 |  |  |         for (var i = locDetlData.length - 1; i >= 0; i--) { | 
 |  |  |             if (locDetlData[i].locNo === data.locNo && locDetlData[i].matnr === data.matnr) { | 
 |  |  |                 locDetlData.splice(i, 1); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         tableIns.reload({data: locDetlData}); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 重置 | 
 |  |  |     function reset() { | 
 |  |  |         $("#matNo").val(""); | 
 |  |  |         $("#locNo").val(""); | 
 |  |  |         locDetlData = []; | 
 |  |  |         tableIns.reload({data: locDetlData}); | 
 |  |  |         $('#staNoSelect').val(""); | 
 |  |  |         layui.form.render('select'); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 提示信息 | 
 |  |  |      * @param msg 提示内容 | 
 |  |  |      * @param warn true:红色var字体 | 
 |  |  |      */ | 
 |  |  |     function tips(msg, warn) { | 
 |  |  |         layer.msg(msg, {icon: warn?2:1}) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     document.onkeyup = function (e) { | 
 |  |  |         if (window.event)//如果window.event对象存在,就以此事件对象为准 | 
 |  |  |             e = window.event; | 
 |  |  |         var key = e.charCode || e.keyCode; | 
 |  |  |         if (key === 115) { | 
 |  |  |             $("#pakOut").focus(); | 
 |  |  |             pakOut(); | 
 |  |  |         } else if (key === 113) { | 
 |  |  |             $("#locNo").val(""); | 
 |  |  |             $("#locNo").focus(); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  | <script type="text/template" id="outSitesTemplate"> | 
 |  |  | <script type="text/template" id="takeSiteSelectTemplate"> | 
 |  |  |     {{#each data}} | 
 |  |  |     <label><input class="cool-checkbox" type="radio" name="site"><span>{{this}}</span></label> | 
 |  |  |     <option value="{{siteId}}">{{desc}}</option> | 
 |  |  |     {{/each}} | 
 |  |  | </script> | 
 |  |  | </html> |