| New file | 
 |  |  | 
 |  |  | <!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> | 
 |  |  |         .header-input { | 
 |  |  |             width: 65%; | 
 |  |  |             height: 40px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .number-tool { | 
 |  |  |             margin-left: 10px; | 
 |  |  |             padding: 1px 0 1px 5px; | 
 |  |  |             display: inline-block; | 
 |  |  |             width: 120px; | 
 |  |  |         } | 
 |  |  |         .number-tool:after { | 
 |  |  |             clear: both; | 
 |  |  |             content: ""; | 
 |  |  |             display: table; | 
 |  |  |         } | 
 |  |  |         .number-tool button { | 
 |  |  |             background-color: #fff; | 
 |  |  |             margin-top: 3px; | 
 |  |  |             font-size: 16px; | 
 |  |  |             height: 25px; | 
 |  |  |             float: left; | 
 |  |  |             width: 25px; | 
 |  |  |             border: 1px solid #777777; | 
 |  |  |         } | 
 |  |  |         .number-tool input { | 
 |  |  |             text-align: center; | 
 |  |  |             height: 30px; | 
 |  |  |             float: left; | 
 |  |  |             margin: 0 5px; | 
 |  |  |             width: 50px; | 
 |  |  |             padding: 0; | 
 |  |  |         } | 
 |  |  |         #yes { | 
 |  |  |             margin: 10px 10px; | 
 |  |  |             padding: 5px 20px; | 
 |  |  |             font-weight: 600; | 
 |  |  |         } | 
 |  |  |         #no { | 
 |  |  |             margin: 10px 10px; | 
 |  |  |             padding: 5px 20px; | 
 |  |  |             color: darkred; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /**绿色勾*/ | 
 |  |  |         #node-ok { | 
 |  |  |             float: left; | 
 |  |  |             width: 15px; | 
 |  |  |             height: 15px; | 
 |  |  |             border-radius: 50%; | 
 |  |  |             margin-top: 13px; | 
 |  |  |             background-color: #2ac845; | 
 |  |  |             display: none; | 
 |  |  |         } | 
 |  |  |     </style> | 
 |  |  | </head> | 
 |  |  | <body> | 
 |  |  | <!-- 头部 --> | 
 |  |  | <header> | 
 |  |  |     <div class="layui-input-inline" style="margin-top: 0px"> | 
 |  |  |         <label class="layui-form-label">货位编号</label> | 
 |  |  |         <input style="float: left" class="layui-input header-input" id="locNo" type="text" onkeyup="findLoc(this)" placeholder="扫码 / 输入" autocomplete="off"> | 
 |  |  |         <span id="node-ok"></span> | 
 |  |  |     </div> | 
 |  |  |     <div class="layui-input-inline" style="margin: 5px 0"> | 
 |  |  |         <label class="layui-form-label" style="width: 84px">商品条码</label> | 
 |  |  |         <input class="layui-input header-input" type="text" id="matnrByLoc" onkeyup="findMat(this)" placeholder="扫码 / 输入" autocomplete="off"> | 
 |  |  |     </div> | 
 |  |  | </header> | 
 |  |  |  | 
 |  |  | <!-- 主体 --> | 
 |  |  | <main> | 
 |  |  |     <table class="layui-table" id="chooseData" lay-filter="chooseData"></table> | 
 |  |  | </main> | 
 |  |  | <!-- 尾部 --> | 
 |  |  | <footer> | 
 |  |  |     <div class="layui-btn-container"> | 
 |  |  |         <button type="button" id="reset-btn" class="layui-btn layui-btn-primary" onclick="reset()">重置</button> | 
 |  |  |         <span id="tips"></span> | 
 |  |  |     </div> | 
 |  |  | </footer> | 
 |  |  |  | 
 |  |  | <div id="pakout" style="display: none; text-align: center;padding-top: 10px"> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>物料</span> | 
 |  |  |         <input id="matnr" type="text" disabled="disabled" style="width: 70%"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>名称</span> | 
 |  |  |         <input id="maktx" type="text" disabled="disabled" style="width: 70%"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item" style="margin-top: 5px"> | 
 |  |  |         <span style="vertical-align: middle">数量</span> | 
 |  |  |         <div class="number-tool" style="vertical-align: middle"> | 
 |  |  |             <button onclick="reduce()">-</button><input id="count" type="number"><button onclick="add()">+</button> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  |     <button id="no" onclick="no()">取消</button> | 
 |  |  |     <button id="yes" onclick="yes()">出库</button> | 
 |  |  | </div> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |     window.onload = function(){document.getElementById("locNo").focus();} | 
 |  |  |     var tableIns; | 
 |  |  |     var anfmeLayer; | 
 |  |  |     var nodeUuid; | 
 |  |  |     var locDetlData = []; | 
 |  |  |     layui.use(['table','laydate', 'form'], function() { | 
 |  |  |         var table = layui.table; | 
 |  |  |         var $ = layui.jquery; | 
 |  |  |         var layer = layui.layer; | 
 |  |  |         var form = layui.form; | 
 |  |  |  | 
 |  |  |         tableIns = table.render({ | 
 |  |  |             elem: '#chooseData', | 
 |  |  |             data: [], | 
 |  |  |             limit: 500, | 
 |  |  |             cellMinWidth: 50, | 
 |  |  |             cols: [[ | 
 |  |  |                 {fixed: 'left', align: 'center', field: 'anfme', title: '数量', event: 'stoOut', style:'font-weight: bold;color: blue', width:70}, | 
 |  |  |                 // {field: 'matnr', align: 'center', title: '商品编号', event: 'modify'}, | 
 |  |  |                 {field: 'maktx', align: 'center', title: '商品名称', event: 'stoOut'} | 
 |  |  |             ]], | 
 |  |  |             done: function (res, curr, count) { | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |  | 
 |  |  |         // 监听行工具事件 | 
 |  |  |         table.on('tool(chooseData)', function(obj) { | 
 |  |  |             var data = obj.data; | 
 |  |  |             switch (obj.event) { | 
 |  |  |                 case 'stoOut': | 
 |  |  |                     anfmeLayer = layer.open({ | 
 |  |  |                         type: 1, | 
 |  |  |                         offset: '20px', | 
 |  |  |                         title: '直接出库', | 
 |  |  |                         shadeClose: true, | 
 |  |  |                         area: ['80%', '200px'], | 
 |  |  |                         content: $("#pakout"), | 
 |  |  |                         success: function (layero, index) { | 
 |  |  |                             $('#matnr').val(data.matnr); | 
 |  |  |                             $('#maktx').val(data.maktx); | 
 |  |  |                             $('#count').val(data.anfme); | 
 |  |  |                             maxCount = data.anfme; | 
 |  |  |                         }, | 
 |  |  |                         end: function () { | 
 |  |  |                             anfmeLayer = null; | 
 |  |  |                         } | 
 |  |  |                     }); | 
 |  |  |                     break; | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |  | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 根据货位查找库存 | 
 |  |  |      */ | 
 |  |  |     function findLoc(el){ | 
 |  |  |         if (isEmpty(el.value)) { | 
 |  |  |             $('#node-ok').hide(); | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/locDetl/queryDetl/auth", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: { | 
 |  |  |                 uuid: el.value | 
 |  |  |             }, | 
 |  |  |             method: 'GET', | 
 |  |  |             success: function (res) { | 
 |  |  |                 $('#matnrByLoc').val(""); | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     nodeUuid = el.value; | 
 |  |  |                     locDetlData = []; | 
 |  |  |                     initTableData(res.data); | 
 |  |  |                     if (res.data != null && res.data.length > 0) { | 
 |  |  |                         $('#node-ok').show(); | 
 |  |  |                     } else { | 
 |  |  |                         $('#node-ok').hide(); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     tips(res.msg, true); | 
 |  |  |                     nodeUuid = null; | 
 |  |  |                     locDetlData = []; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 添加表格数据 | 
 |  |  |     function initTableData(data) { | 
 |  |  |         for (var i=0;i<data.length;i++) { | 
 |  |  |             var toPush = true; | 
 |  |  |             for (var j=0;j<locDetlData.length;j++){ | 
 |  |  |                 if (data[i].matnr === locDetlData[j].matnr) { | 
 |  |  |                     toPush  = false; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |             if (toPush) { | 
 |  |  |                 locDetlData.push(data[i]); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         tableIns.reload({data: locDetlData}); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 库存中的商品 | 
 |  |  |     function findMat(el){ | 
 |  |  |         if (isEmpty(el.value)) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         for (var i=0;i<locDetlData.length;i++) { | 
 |  |  |             if (el.value === locDetlData[i].matnr) { | 
 |  |  |                 if (anfmeLayer == null) { | 
 |  |  |                     anfmeLayer = layer.open({ | 
 |  |  |                         type: 1, | 
 |  |  |                         offset: '20px', | 
 |  |  |                         title: '直接出库', | 
 |  |  |                         shadeClose: true, | 
 |  |  |                         area: ['80%', '200px'], | 
 |  |  |                         content: $("#pakout"), | 
 |  |  |                         success: function (layero, index) { | 
 |  |  |                             $('#matnr').val(locDetlData[i].matnr); | 
 |  |  |                             $('#maktx').val(locDetlData[i].maktx); | 
 |  |  |                             $('#count').val(locDetlData[i].anfme); | 
 |  |  |                             maxCount = locDetlData[i].anfme; | 
 |  |  |                         }, | 
 |  |  |                         end: function () { | 
 |  |  |                             anfmeLayer = null; | 
 |  |  |                         } | 
 |  |  |                     }); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     /*************************************  弹窗  ****************************************/ | 
 |  |  |     var countDom = $('#count'); | 
 |  |  |     var minCount = 0; | 
 |  |  |     var maxCount; | 
 |  |  |     function add() { | 
 |  |  |         if (countDom.val() >= maxCount) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         countDom.val(Number(countDom.val()) + 1); | 
 |  |  |     } | 
 |  |  |     function reduce() { | 
 |  |  |         if (countDom.val() <= minCount + 1) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         countDom.val(countDom.val() - 1); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 出库 | 
 |  |  |     function yes(){ | 
 |  |  |         var matnr = $('#matnr').val(); | 
 |  |  |         var count = $('#count').val(); | 
 |  |  |         for (var j=0;j<locDetlData.length;j++){ | 
 |  |  |             if (matnr === locDetlData[j].matnr) { | 
 |  |  |                 if (count <= minCount) { | 
 |  |  |                     tips("数量必须大于0", true); | 
 |  |  |                     $('#count').val(1); | 
 |  |  |                     return; | 
 |  |  |                 } | 
 |  |  |                 if (count > maxCount) { | 
 |  |  |                     tips("库存不足", true); | 
 |  |  |                     $('#count').val(maxCount); | 
 |  |  |                     return; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/work/stock/pakout", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: JSON.stringify({ | 
 |  |  |                 nodeUuid: nodeUuid, | 
 |  |  |                 matnr: matnr, | 
 |  |  |                 count: count | 
 |  |  |             }), | 
 |  |  |             contentType:'application/json;charset=UTF-8', | 
 |  |  |             async: false, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 layer.close(anfmeLayer); | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     tips("出库成功"); | 
 |  |  |                     findLoc(document.getElementById("locNo")); | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     $('#matnrByLoc').val(""); | 
 |  |  |                     tips(res.msg, true); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     function no() { | 
 |  |  |         $('#matnrByLoc').val(""); | 
 |  |  |         layer.close(anfmeLayer); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     // 重置 | 
 |  |  |     function reset() { | 
 |  |  |         $('#locNo').val(""); | 
 |  |  |         $('#matnrByLoc').val(""); | 
 |  |  |         locDetlData = []; | 
 |  |  |         nodeUuid = null; | 
 |  |  |         tableIns.reload({data: locDetlData}); | 
 |  |  |         $('#node-ok').hide(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 提示信息 | 
 |  |  |      * @param msg 提示内容 | 
 |  |  |      * @param warn true:红色字体 | 
 |  |  |      */ | 
 |  |  |     function tips(msg, warn) { | 
 |  |  |         layer.msg(msg, {icon: warn?2:1}) | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  | </html> |