| <!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"> | 
|     <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> | 
|         .form-box { | 
|             padding: 15px 5px 5px 0px; | 
|             font-size: 16px; | 
|             text-align: center; | 
|         } | 
|   | 
|         .form-item { | 
|             margin-bottom: 10px; | 
|         } | 
|   | 
|         .form-box span { | 
|             font-size: 16px; | 
|             display: inline-block; | 
|             text-align: right; | 
|             width: 70px; | 
|             vertical-align: middle; | 
|         } | 
|         .form-box input { | 
|             width: 120px; | 
|             margin-left: 10px; | 
|             padding-left: 5px; | 
|             height: 30px; | 
|             border: 1px solid #777777; | 
|             overflow:hidden; | 
|             white-space:nowrap; | 
|             text-overflow:ellipsis; | 
|             vertical-align: middle; | 
|         } | 
|         .form-box textarea { | 
|             height: 60px; | 
|             width: 120px; | 
|             margin-left: 10px; | 
|             padding-left: 5px; | 
|             border: 1px solid #777777; | 
|             display: inline-block; | 
|             vertical-align: middle; | 
|         } | 
|         #selectBtn { | 
|             vertical-align: middle; | 
|             padding: 3px 5px; | 
|             height: 32px; | 
|         } | 
|   | 
|         #confirm { | 
|             margin-top: 10px; | 
|             padding: 5px 20px; | 
|         } | 
|   | 
|         .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: 40px; | 
|             padding: 0; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
|   | 
| <div class="form-box"> | 
|     <div class="form-item" style="padding-left: 33px;"> | 
|         <span>商品编码</span> | 
|         <input id="matnr" type="text" placeholder="扫码 / 输入" onkeyup="find(this)" autocomplete="off"> | 
|         <button id="selectBtn">选</button> | 
|     </div> | 
|     <div class="form-item"> | 
|         <span>商品名称</span> | 
|         <textarea id="maktx" type="text" disabled="disabled"></textarea> | 
|         <div style="clear: both"></div> | 
|     </div> | 
|     <div class="form-item"> | 
|         <span>规格</span> | 
|         <input id="specs" type="text" disabled="disabled"> | 
|     </div> | 
|     <div class="form-item"> | 
|         <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="confirm" onclick="confirm()">提取</button> | 
| </div> | 
|   | 
| </body> | 
| <script> | 
|     var layer; | 
|     layui.use(['layer'], function() { | 
|         layer = layui.layer; | 
|     }) | 
|     var countDom = $('#count'); | 
|     var initMatCount = 1; | 
|     var pageCurr; | 
|   | 
|     /** | 
|      * 根据商品编码查询商品详情 | 
|      */ | 
|     function find(el){ | 
|         if (isEmpty(el.value)) { | 
|             return; | 
|         } | 
|         $.ajax({ | 
|             url: baseUrl + "/matCode/auth", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             data: { | 
|                 matnr: el.value | 
|             }, | 
|             method: 'POST', | 
|             success: function (res) { | 
|                 if (res.code === 200) { | 
|                     if (res.data != null) { | 
|                         $('#maktx').val(res.data.maktx); | 
|                         $('#specs').val(res.data.specs); | 
|                         $('#unit').val(res.data.unit); | 
|                         countDom.val(initMatCount); | 
|                         // $('#count').focus().select(); | 
|                     } | 
|                 } else if (res.code === 403) { | 
|                     top.location.href = baseUrl + "/pda"; | 
|                 } else { | 
|                     alert(res.msg) | 
|                 } | 
|             } | 
|         }) | 
|     } | 
|   | 
|     function findBySelect(el) { | 
|         $("#matnr").val(el.value); | 
|         find(el); | 
|         layer.close(matSelectIdx); | 
|   | 
|     } | 
|   | 
|     /** | 
|      * 提取 | 
|      */ | 
|     function confirm(){ | 
|         var data = { | 
|             matnr: $('#matnr').val(), | 
|             maktx: $('#maktx').val(), | 
|             count: countDom.val() | 
|         }; | 
|         parent.addTableData(data); | 
|         parent.layer.close(parent.matCodeLayerIdx); | 
|     } | 
|   | 
|     window.onload = function(){document.getElementById("matnr").focus();} | 
|     var matSelectIdx; | 
|     $(document).on('click','#selectBtn', function () { | 
|         matSelectIdx = layer.open({ | 
|             type: 2, | 
|             title: false, | 
|             area: ['100%', '100%'], | 
|             content: 'selectMat.html', | 
|             success: function(layero, index){ | 
|                 $('.layui-layer-setwin .layui-layer-close2').hide(); | 
|             } | 
|         }); | 
|     }) | 
|   | 
|     // $('body').keydown(function () { | 
|     //     if (event.keyCode === 13) { | 
|     //         $("#confirm").click(); | 
|     //     } | 
|     // }); | 
|   | 
|     function add() { | 
|         countDom.val(Number(countDom.val()) + 1); | 
|     } | 
|     function reduce() { | 
|         if (countDom.val() <= initMatCount) { | 
|             return; | 
|         } | 
|         countDom.val(countDom.val() - 1); | 
|     } | 
|   | 
|   | 
|     document.onkeyup = function (e) { | 
|         if (window.event)//如果window.event对象存在,就以此事件对象为准 | 
|             e = window.event; | 
|         var key = e.charCode || e.keyCode; | 
|         if (key === 115) { | 
|             confirm(); | 
|         } | 
|     } | 
|   | 
| </script> | 
| </html> |