| <!DOCTYPE html> | 
| <html lang="en"> | 
| <head> | 
|     <meta charset="utf-8"> | 
|     <title></title> | 
|     <meta name="renderer" content="webkit"> | 
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
|     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | 
|     <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> | 
|     <link rel="stylesheet" href="../../static/css/cool.css" media="all"> | 
|     <link rel="stylesheet" href="../../static/css/common.css" media="all"> | 
|     <style> | 
|         body { | 
|             padding: 0 20px; | 
|         } | 
|         .layui-table-box { | 
|             border-right: 1px solid #9F9F9F; | 
|             border-left: 1px solid #9F9F9F; | 
|         } | 
|   | 
|         #search-box { | 
|             padding: 30px 0 20px 0; | 
|         } | 
|         #search-box .layui-inline:first-child { | 
|             margin-left: 30px; | 
|         } | 
|         #search-box .layui-inline { | 
|             margin-right: 5px; | 
|         } | 
|   | 
|         #data-search-btn { | 
|             margin-left: 10px; | 
|             display: inline-block; | 
|         } | 
|         #data-search-btn.layui-btn-container .layui-btn { | 
|             margin-right: 20px; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
|   | 
| <!-- 搜索栏 --> | 
| <fieldset class="layui-elem-field site-demo-button" style="margin: 20px;"> | 
|     <legend>搜索栏</legend> | 
|     <!-- 搜索栏 --> | 
|     <div id="search-box" class="layui-form layui-card-header"> | 
|         <div class="layui-inline"> | 
|             <div class="layui-input-inline"> | 
|                 <input class="layui-input" type="text" name="loc_no" placeholder="库位号" autocomplete="off"> | 
|             </div> | 
|         </div> | 
|         <div class="layui-inline"> | 
|             <div class="layui-input-inline"> | 
|                 <input class="layui-input" type="text" name="matnr" placeholder="物料号"  autocomplete="off"> | 
|             </div> | 
|         </div> | 
|         <div class="layui-inline"> | 
|             <div class="layui-input-inline"> | 
|                 <input class="layui-input" type="text" name="maktx" placeholder="物料描述" autocomplete="off"> | 
|             </div> | 
|         </div> | 
|         <!-- 日期范围 --> | 
|         <div class="layui-inline" style="width: 300px"> | 
|             <div class="layui-input-inline"> | 
|                 <input class="layui-input layui-laydate-range" name="modi_time" type="text" placeholder="起始时间 - 终止时间" autocomplete="off" style="width: 300px"> | 
|             </div> | 
|         </div> | 
|         <!-- 待添加 --> | 
|         <div id="data-search-btn" class="layui-btn-container layui-form-item" style="display: inline-block"> | 
|             <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">搜索</button> | 
|             <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">重置</button> | 
|         </div> | 
|     </div> | 
| </fieldset> | 
|   | 
| <script type="text/html" id="toolbar"> | 
|     <div class="layui-btn-container"> | 
|         <button class="layui-btn" id="btn-confirm" lay-event="confirm" style="">提取</button> | 
|     </div> | 
| </script> | 
|   | 
| <div class="layui-form"> | 
|     <table class="layui-hide" id="stockOut" lay-filter="stockOut"></table> | 
| </div> | 
|   | 
| <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> | 
|   | 
| </body> | 
| <script> | 
|   | 
|     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; | 
|         // 数据渲染 | 
|         locDetlTableIns = table.render({ | 
|             elem: '#stockOut', | 
|             headers: {token: localStorage.getItem('token')}, | 
|             url: baseUrl+'/stock/out/list/auth', | 
|             page: true, | 
|             limit: 10, | 
|             even: true, | 
|             toolbar: '#toolbar', | 
|             cellMinWidth: 50, | 
|             cols: [[ | 
|                 {type: 'checkbox', event: 'checkbox'} | 
|                 ,{field: 'locNo$', align: 'center',title: '库位号'} | 
|                 ,{field: 'matnr', align: 'center',title: '物料'} | 
|                 // ,{field: 'lgnum', align: 'center',title: '仓库号', width:80} | 
|                 // ,{field: 'tbnum', align: 'center',title: '转储请求编号'} | 
|                 // ,{field: 'tbpos', align: 'center',title: '行项目'} | 
|                 // ,{field: 'zmatid', align: 'center',title: '物料标签ID', width:200} | 
|                 ,{field: 'maktx', align: 'center',title: '物料描述'} | 
|                 // ,{field: 'werks', align: 'center',title: '工厂'} | 
|                 ,{field: 'anfme', align: 'center',title: '数量'} | 
|                 ,{field: 'altme', align: 'center',title: '单位'} | 
|                 ,{field: 'zpallet', align: 'center',title: '托盘条码'} | 
|                 // ,{field: 'bname', align: 'center',title: '用户ID'} | 
|                 // ,{field: 'memo', align: 'center',title: '备注'} | 
|                 ,{field: 'modiUser$', align: 'center',title: '修改人员', hide: true} | 
|                 ,{field: 'modiTime$', align: 'center',title: '修改时间'} | 
|   | 
|             ]], | 
|             request: { | 
|                 pageName: 'curr', | 
|                 pageSize: 'limit' | 
|             }, | 
|             parseData: function (res) { | 
|                 return { | 
|                     'code': res.code, | 
|                     'msg': res.msg, | 
|                     'count': res.data.total, | 
|                     'data': res.data.records | 
|                 } | 
|             }, | 
|             response: { | 
|                 statusCode: 200 | 
|             }, | 
|             done: function(res, curr, count) { | 
|                 if (res.code === 403) { | 
|                     top.location.href = baseUrl+"/"; | 
|                 } | 
|                 pageCurr=curr; | 
|             } | 
|         }); | 
|   | 
|         // 监听头工具栏事件 | 
|         table.on('toolbar(stockOut)', function (obj) { | 
|             var checkStatus = table.checkStatus(obj.config.id); | 
|             var data = checkStatus.data; | 
|             switch(obj.event) { | 
|                 case 'confirm': | 
|                     if (data.length === 0){ | 
|                         layer.msg("请选择数据"); | 
|                         return; | 
|                     } | 
|                     var locNos = []; | 
|                     data.forEach(function(elem) { | 
|                         locNos.push(elem.locNo); | 
|                     }); | 
|                     $.ajax({ | 
|                         url: baseUrl+"/locDetl/auth", | 
|                         headers: {'token': localStorage.getItem('token')}, | 
|                         data: {locNos:locNos}, | 
|                         method: 'POST', | 
|                         async: false, | 
|                         success: function (res) { | 
|                             if (res.code === 200) { | 
|                                 data = res.data; | 
|                             } else if (res.code === 403) { | 
|                                 top.location.href = baseUrl + "/"; | 
|                             } else { | 
|                                 layer.msg(res.msg) | 
|                             } | 
|                         } | 
|                     }) | 
|                     parent.addTableData(data); | 
|                     break; | 
|             } | 
|         }); | 
|   | 
|         // 监听行工具事件 | 
|         table.on('tool(stockOut)', function(obj) { | 
|             var data = obj.data; | 
|             switch (obj.event) { | 
|                 case 'checkbox': | 
|                     var currDom = obj.tr.children("td:first").children().children("div"); | 
|                     console.log(currDom.attr("class")) | 
|                     var otherDom = $("td[data-field=locNo\\$] div:contains("+ data.locNo +")").parent().prev().children().children("div"); | 
|                     if (currDom.hasClass("layui-form-checked")){ | 
|                         otherDom.addClass("layui-form-checked"); | 
|                     } else { | 
|                         otherDom.removeClass("layui-form-checked"); | 
|                     } | 
|                     break; | 
|             } | 
|         }) | 
|   | 
|         // 搜索栏搜索事件 | 
|         form.on('submit(search)', function (data) { | 
|             pageCurr = 1; | 
|             tableReload(); | 
|         }); | 
|   | 
|         // 搜索栏重置事件 | 
|         form.on('submit(reset)', function (data) { | 
|             pageCurr = 1; | 
|             clearFormVal($('#search-box')); | 
|             tableReload(); | 
|         }); | 
|   | 
|         layDate.render({ | 
|             elem: '.layui-laydate-range' | 
|             ,type: 'datetime' | 
|             ,range: true | 
|         }); | 
|     }) | 
|   | 
|     function tableReload(child) { | 
|         var searchData = {}; | 
|         $.each($('#search-box [name]').serializeArray(), function() { | 
|             searchData[this.name] = this.value; | 
|         }); | 
|         locDetlTableIns.reload({ | 
|             where: searchData, | 
|             page: { | 
|                 curr: pageCurr | 
|             }, | 
|             done: function (res, curr, count) { | 
|                 if (res.code === 403) { | 
|                     top.location.href = baseUrl+"/"; | 
|                 } | 
|                 pageCurr=curr; | 
|                 if (res.data.length === 0 && count !== 0) { | 
|                     locDetlTableIns.reload({ | 
|                         where: searchData, | 
|                         page: { | 
|                             curr: pageCurr-1 | 
|                         } | 
|                     }); | 
|                     pageCurr -= 1; | 
|                 } | 
|             } | 
|         }); | 
|     } | 
|   | 
|     function clearFormVal(el) { | 
|         $(':input', el) | 
|             .val('') | 
|             .removeAttr('checked') | 
|             .removeAttr('selected'); | 
|     } | 
| </script> | 
| </html> |