|  |  | 
 |  |  |  | 
 |  |  |         .form-box { | 
 |  |  |             padding: 15px 5px 5px 5px; | 
 |  |  |             font-size: 12px; | 
 |  |  |             font-size: 16px; | 
 |  |  |             text-align: center; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .form-box span { | 
 |  |  |             font-size: 12px; | 
 |  |  |             font-size: 16px; | 
 |  |  |             display: inline-block; | 
 |  |  |             text-align: right; | 
 |  |  |             width: 50px; | 
 |  |  |             width: 70px; | 
 |  |  |         } | 
 |  |  |         .form-box input { | 
 |  |  |             width: 120px; | 
 |  |  |             margin-left: 10px; | 
 |  |  |             padding-left: 5px; | 
 |  |  |             height: 20px; | 
 |  |  |             height: 30px; | 
 |  |  |             border: 1px solid #777777; | 
 |  |  |             overflow:hidden; | 
 |  |  |             white-space:nowrap; | 
 |  |  |             text-overflow:ellipsis; | 
 |  |  |         } | 
 |  |  |         .form-box button { | 
 |  |  |         #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> | 
 |  |  | 
 |  |  |  | 
 |  |  | <div class="form-box"> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>物料编码</span> | 
 |  |  |         <input id="matNo" type="text" placeholder="扫码/输入"> | 
 |  |  |         <span>规格</span> | 
 |  |  |         <input id="matNo" type="text" placeholder="扫码 / 输入" onkeyup="find(this)" autocomplete="off"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>物料名称</span> | 
 |  |  |         <input type="text" disabled="disabled"> | 
 |  |  |         <span>商品名称</span> | 
 |  |  |         <input id="matName" type="text" disabled="disabled"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>物料描述</span> | 
 |  |  |         <input type="text" disabled="disabled"> | 
 |  |  |         <span>接头</span> | 
 |  |  |         <input id="str2" type="text" disabled="disabled"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>单位</span> | 
 |  |  |         <input type="text" disabled="disabled"> | 
 |  |  |         <input id="str1" type="text" disabled="disabled"> | 
 |  |  |     </div> | 
 |  |  |     <div class="form-item"> | 
 |  |  |         <span>数量</span> | 
 |  |  |         <input type="number" > | 
 |  |  |         <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">提取</button> | 
 |  |  |     <button id="confirm" onclick="confirm()">提取</button> | 
 |  |  | </div> | 
 |  |  |  | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |     var countDom = $('#count'); | 
 |  |  |     var initMatCount = 1; | 
 |  |  |     var pageCurr; | 
 |  |  |     layui.use(['table','laydate', 'form'], function() { | 
 |  |  |         var table = layui.table; | 
 |  |  |         var $ = layui.jquery; | 
 |  |  |         var layer = layui.layer; | 
 |  |  |         var layDate = layui.laydate; | 
 |  |  |         var form = layui.form; | 
 |  |  |  | 
 |  |  |     }); | 
 |  |  |     /** | 
 |  |  |      * 根据商品编号查询物料详情 | 
 |  |  |      */ | 
 |  |  |     function find(el){ | 
 |  |  |         if (isEmpty(el.value)) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl + "/mat/auth", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             data: { | 
 |  |  |                 matnr: el.value | 
 |  |  |             }, | 
 |  |  |             method: 'POST', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200) { | 
 |  |  |                     if (res.data != null) { | 
 |  |  |                         $('#matName').val(res.data.matName); | 
 |  |  |                         $('#str1').val(res.data.str1); | 
 |  |  |                         $('#str2').val(res.data.str2); | 
 |  |  |                         countDom.val(initMatCount); | 
 |  |  |                         $('#count').focus().select(); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403) { | 
 |  |  |                     top.location.href = baseUrl + "/pda"; | 
 |  |  |                 } else { | 
 |  |  |                     alert(res.msg) | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 提取 | 
 |  |  |      */ | 
 |  |  |     function confirm(){ | 
 |  |  |         var data = { | 
 |  |  |             matNo: $('#matNo').val(), | 
 |  |  |             matName: $('#matName').val(), | 
 |  |  |             count: countDom.val() | 
 |  |  |         }; | 
 |  |  |         parent.addTableData(data); | 
 |  |  |         parent.layer.close(parent.matCodeLayerIdx); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     window.onload = function(){document.getElementById("matNo").focus();} | 
 |  |  |     $(document).on('click','#confirm', function () { | 
 |  |  |     }) | 
 |  |  |  | 
 |  |  |     $('body').keydown(function () { | 
 |  |  |         if (event.keyCode === 13) { | 
 |  |  |             $("#confirm").click(); | 
 |  |  |     // $('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> |