|  |  | 
 |  |  |         main { | 
 |  |  |             height: 200px; | 
 |  |  |         } | 
 |  |  |         /* 状态 */ | 
 |  |  |         #status { | 
 |  |  |             padding-left: 2px; | 
 |  |  |             line-height: 30px; | 
 |  |  |         } | 
 |  |  |         .status-0 { | 
 |  |  |             color: orange; | 
 |  |  |         } | 
 |  |  |         .status-1 { | 
 |  |  |             color: red; | 
 |  |  |         } | 
 |  |  |         .status-2 { | 
 |  |  |             color: red; | 
 |  |  |         } | 
 |  |  |         .status-3 { | 
 |  |  |             color: green; | 
 |  |  |         } | 
 |  |  |         /* 客户 */ | 
 |  |  |         #custName { | 
 |  |  |             padding-left: 2px; | 
 |  |  |             line-height: 30px; | 
 |  |  |             font-size: 14px; | 
 |  |  |         } | 
 |  |  |         /* 主体 */ | 
 |  |  |         main { | 
 |  |  |             border: 1px solid gainsboro; | 
 |  |  |             text-align: center; | 
 |  |  |             padding-bottom: 15px; | 
 |  |  |         } | 
 |  |  |         main hr { | 
 |  |  |             width: 80%; | 
 |  |  |             margin: 5px 0; | 
 |  |  |             display: inline-block | 
 |  |  |         } | 
 |  |  |         .pakout-item { | 
 |  |  |             padding: 10px; | 
 |  |  |         } | 
 |  |  |         .item-header { | 
 |  |  |             text-align: left; | 
 |  |  |             padding-left: 20px | 
 |  |  |         } | 
 |  |  |         .item-content { | 
 |  |  |             padding: 15px | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  | <!-- 头部 --> | 
 |  |  | <header class="layui-form"> | 
 |  |  | <header> | 
 |  |  |     <div class="layui-input-inline"> | 
 |  |  |         <label class="layui-form-label">库位</label> | 
 |  |  |         <div class="layui-input-block"> | 
 |  |  |             <input class="layui-input" type="number" id="locNo" onkeyup="findByLocNo(this)" autocomplete="off"> | 
 |  |  |         </div> | 
 |  |  |  | 
 |  |  |         <label class="layui-form-label" style="width: 84px">单据编号</label> | 
 |  |  |         <input class="layui-input" type="text" id="docNum" onkeyup="findNum(this)" placeholder="扫码 / 输入" autocomplete="off"> | 
 |  |  |     </div> | 
 |  |  |     <div class="layui-input-inline"> | 
 |  |  |         <label class="layui-form-label">物料</label> | 
 |  |  |         <div class="layui-input-block"> | 
 |  |  |             <input class="layui-input" type="text" id="matNo" onkeyup="findByMatNo(this)" autocomplete="off"> | 
 |  |  |         </div> | 
 |  |  |     <div class="layui-input-inline" style="width: 100%"> | 
 |  |  |         <label class="layui-form-label" style="width: 84px">状态</label> | 
 |  |  |         <label id="status" class="layui-form-label status-0">未知</label> | 
 |  |  |     </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 class="layui-input-inline" style="width: 100%"> | 
 |  |  |         <label class="layui-form-label" style="width: 84px; padding-top: 0">客户</label> | 
 |  |  |         <label id="custName" class="layui-form-label" style="padding-top: 0">-</label> | 
 |  |  |     </div> | 
 |  |  | </header> | 
 |  |  |  | 
 |  |  | <!-- 主体 --> | 
 |  |  | <main> | 
 |  |  |     <table class="layui-table" id="dataByLoc" lay-filter="dataByLoc"></table> | 
 |  |  | <main id="pakout-box"> | 
 |  |  |  | 
 |  |  | </main> | 
 |  |  | <!-- 尾部 --> | 
 |  |  | <footer> | 
 |  |  |     <div class="layui-btn-container"> | 
 |  |  |         <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> | 
 |  |  |         <button id="confirm" type="button" class="layui-btn layui-btn-normal" onclick="pakoutConfirm()" style="margin-left: 20px">拣货确认</button> | 
 |  |  |         <button id="tips1" style="outline: none;color: white;border-color: white; position: absolute;right: 0;bottom: 0;"></button> | 
 |  |  |     </div> | 
 |  |  | </footer> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |  | 
 |  |  |     var pakoutData = []; | 
 |  |  |     window.onload = function(){ | 
 |  |  |         document.getElementById("locNo").focus(); | 
 |  |  |         getOutBound(); | 
 |  |  |         document.getElementById("docNum").focus(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 根据库位号查找库存明细 | 
 |  |  |      */ | 
 |  |  |     function findByLocNo(el){ | 
 |  |  |     function findNum(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", | 
 |  |  |             url: baseUrl + "/work/pakout/get", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: { | 
 |  |  |                 locNo: locNo, | 
 |  |  |                 matNo: matNo | 
 |  |  |                 docNumber: el.value | 
 |  |  |             }, | 
 |  |  |             async: false, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     if (res.data != null) { | 
 |  |  |                         locDetlData = res.data; | 
 |  |  |                         tableIns.reload({data: locDetlData}); | 
 |  |  |                         $('#pakout-box').html(""); | 
 |  |  |                         pakoutData = []; | 
 |  |  |                         pakoutData = res.data.pakouts; | 
 |  |  |                         if (pakoutData != null) { | 
 |  |  |                             // 头 | 
 |  |  |                             $('#status').html(res.data.wrkSts$); | 
 |  |  |                             $('#status').attr("class", "layui-form-label status-" + res.data.wrkSts); | 
 |  |  |                             $('#custName').html(res.data.custName); | 
 |  |  |                             // 主 | 
 |  |  |                             var tpl = $("#pakoutDetlTpl").html(); | 
 |  |  |                             var template = Handlebars.compile(tpl); | 
 |  |  |                             var html = template(res.data); | 
 |  |  |                             $('#pakout-box').append(html); | 
 |  |  |                         } | 
 |  |  |                         $('#tips1').focus(); | 
 |  |  |                     } | 
 |  |  |                     $('#pakOut').focus(); | 
 |  |  |                 } else if (res.code === 201) { | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     locDetlData = []; | 
 |  |  |                     tableIns.reload({data: locDetlData}); | 
 |  |  |                     pakoutData = []; | 
 |  |  |                     tips(res.msg, true); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 表格 | 
 |  |  |     var locDetlData = []; | 
 |  |  |     var tableIns; | 
 |  |  |     layui.use(['table','laydate', 'form'], function() { | 
 |  |  |         var table = layui.table; | 
 |  |  |     layui.use(['laydate', 'form'], function() { | 
 |  |  |         var $ = layui.jquery; | 
 |  |  |         var layer = layui.layer; | 
 |  |  |         var form = layui.form; | 
 |  |  |  | 
 |  |  |         tableIns = table.render({ | 
 |  |  |             id: 'tableIdx', | 
 |  |  |             elem: '#dataByLoc', | 
 |  |  |             data: [], | 
 |  |  |             limit: 500, | 
 |  |  |             cellMinWidth: 50, | 
 |  |  |             cols: [[ | 
 |  |  |                 {type: 'checkbox', fixed: 'left', width:30}, | 
 |  |  |                 {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) { | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |  | 
 |  |  |         // 监听行工具事件 | 
 |  |  |         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 pakoutConfirm() { | 
 |  |  |         layer.confirm('确认拣货完成?', {shadeClose: true}, function(){ | 
 |  |  |             if (pakoutData == null || pakoutData.length === 0) { | 
 |  |  |                 tips("请确认单据编号!", true); | 
 |  |  |                 return; | 
 |  |  |             } | 
 |  |  |             var docNum = pakoutData[0].docNum; | 
 |  |  |             if (isEmpty(docNum)) { | 
 |  |  |                 tips("请确认单据编号!", true); | 
 |  |  |                 return; | 
 |  |  |             } | 
 |  |  |             $.ajax({ | 
 |  |  |                 url: baseUrl+"/work/stock/out/confirm", | 
 |  |  |                 headers: {'token': localStorage.getItem('token')}, | 
 |  |  |                 data: JSON.stringify({ | 
 |  |  |                     number: docNum | 
 |  |  |                 }), | 
 |  |  |                 contentType:'application/json;charset=UTF-8', | 
 |  |  |                 method: 'POST', | 
 |  |  |                 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 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(""); | 
 |  |  |         $("#docNum").val(""); | 
 |  |  |         $('#status').html("未知"); | 
 |  |  |         $('#status').attr("class", "layui-form-label status-0"); | 
 |  |  |         $('#custName').html("-"); | 
 |  |  |         $('#pakout-box').html(""); | 
 |  |  |         pakoutData = []; | 
 |  |  |         document.getElementById("docNum").focus(); | 
 |  |  |         layui.form.render('select'); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  | 
 |  |  |         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(); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |     // document.onkeyup = function (e) { | 
 |  |  |     //     if (window.event)//如果window.event对象存在,就以此事件对象为准 | 
 |  |  |     //         e = window.event; | 
 |  |  |     //     var key = e.charCode || e.keyCode; | 
 |  |  |     //     if (key === 115) { | 
 |  |  |     //         $("#confirm").focus(); | 
 |  |  |     //         pakoutConfirm(); | 
 |  |  |     //     } else if (key === 113) { | 
 |  |  |     //         $("#docNum").val(""); | 
 |  |  |     //         $("#docNum").focus(); | 
 |  |  |     //     } | 
 |  |  |     // } | 
 |  |  | </script> | 
 |  |  | <script type="text/template" id="takeSiteSelectTemplate"> | 
 |  |  |     {{#each data}} | 
 |  |  |     <option value="{{siteId}}">{{desc}}</option> | 
 |  |  | <script type="text/template" id="pakoutDetlTpl"> | 
 |  |  |     {{#each pakouts}} | 
 |  |  |         <hr> | 
 |  |  |         <div class="pakout-item"> | 
 |  |  |             <div class="item-header"> | 
 |  |  |                 {{maktx}} | 
 |  |  |             </div> | 
 |  |  |             <div class="item-content"> | 
 |  |  |                 <div style="float: left">{{anfme}}{{unit}}</div> | 
 |  |  |                 <div style="float: right">货位:{{locNo}}</div> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     {{/each}} | 
 |  |  | </script> | 
 |  |  | </html> |