| <!DOCTYPE html> | 
| <html lang="en"> | 
| <head> | 
|     <meta charset="UTF-8"> | 
|     <meta name="viewport" content="width=device-width, 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> | 
|         .layui-input-block { | 
|             margin-left: 60px; | 
|         } | 
|         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> | 
|     <div class="layui-input-inline"> | 
|         <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" 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" 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 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="confirm" type="button" class="layui-btn layui-btn-normal" onclick="pakoutConfirm()" style="margin-left: 20px">拣货确认</button> | 
|         <span id="tips"></span> | 
|     </div> | 
| </footer> | 
| </body> | 
| <script> | 
|     var pakoutData = []; | 
|     window.onload = function(){ | 
|         document.getElementById("docNum").focus(); | 
|     } | 
|   | 
|     function findNum(el){ | 
|         if (isEmpty(el.value)) { | 
|             return; | 
|         } | 
|         $.ajax({ | 
|             url: baseUrl + "/work/pakout/get", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             data: { | 
|                 docNumber: el.value | 
|             }, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200) { | 
|                     if (res.data != null) { | 
|                         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); | 
|                         } | 
|                         $('#confirm').focus(); | 
|                     } | 
|                 } else if (res.code === 201) { | 
|                 } else if (res.code === 403) { | 
|                     top.location.href = baseUrl + "/pda"; | 
|                 } else { | 
|                     pakoutData = []; | 
|                     tips(res.msg, true); | 
|                 } | 
|             } | 
|         }) | 
|     } | 
|   | 
|     layui.use(['laydate', 'form'], function() { | 
|         var $ = layui.jquery; | 
|         var layer = layui.layer; | 
|         var form = layui.form; | 
|   | 
|     }); | 
|   | 
|     // 拣货确认 | 
|     function pakoutConfirm() { | 
|         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 reset() { | 
|         $("#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'); | 
|     } | 
|   | 
|     /** | 
|      * 提示信息 | 
|      * @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) { | 
|             $("#confirm").focus(); | 
|             pakoutConfirm(); | 
|         } else if (key === 113) { | 
|             $("#docNum").val(""); | 
|             $("#docNum").focus(); | 
|         } | 
|     } | 
| </script> | 
| <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> |