| <!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/admin.css?v=318" media="all"> | 
|   <link rel="stylesheet" href="../../static/css/cool.css" media="all"> | 
|   <link rel="stylesheet" href="../../static/css/common.css" media="all"> | 
|   <style> | 
|     body { | 
|     } | 
|     .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> | 
| <div style="padding: 25px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"> | 
|   <span style="font-size: large; font-weight: bold">提取库存商品</span> | 
| </div> | 
| <!-- 搜索栏 --> | 
| <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 cool-auto-complete"> | 
|         <input id="crnNo" class="layui-input" name="crnNo" type="text" placeholder="请输入" autocomplete="off" style="display: none"> | 
|         <input id="crnNo$" class="layui-input cool-auto-complete-div" onclick="autoShow(this.id)" type="text" placeholder="堆垛机号" onfocus=this.blur()> | 
|         <div class="cool-auto-complete-window"> | 
|           <input class="cool-auto-complete-window-input" data-key="basCrnpQueryBycrnNo" onkeyup="autoLoad(this.getAttribute('data-key'))"> | 
|           <select class="cool-auto-complete-window-select" data-key="basCrnpQueryBycrnNoSelect" onchange="confirmed(this.getAttribute('data-key'))" multiple="multiple"> | 
|           </select> | 
|         </div> | 
|       </div> | 
|     </div> | 
|     <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="batch" placeholder="尺寸" autocomplete="off"> | 
|       </div> | 
|     </div> | 
|     <div class="layui-inline"> | 
|       <div class="layui-input-inline"> | 
|         <input class="layui-input" type="text" name="memo" 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> | 
|     </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> | 
|   | 
|   function getCol() { | 
|     var cols = [ | 
|       {type: 'checkbox', merge: ['locNo']} | 
|       ,{field: 'locNo', align: 'center',title: '库位号', merge: true, style: 'font-weight: bold'} | 
|       ,{field: 'matnr', align: 'center',title: '物料类型',style: 'font-weight: bold'} | 
|       ,{field: 'batch', align: 'center',title: '木箱尺寸',style: 'font-weight: bold'} | 
|       ,{field: 'memo', align: 'center',title: '木箱备注',style: 'font-weight: bold'} | 
|       ,{field: 'anfme', align: 'center',title: '数量',style: 'font-weight: bold'} | 
|   | 
|     ]; | 
|     cols.push({field: 'modiUser$', align: 'center',title: '修改人员',hide:true} | 
|             ,{field: 'modiTime$', align: 'center',title: '修改时间'}) | 
|     return cols; | 
|   } | 
|   | 
|   layui.config({ | 
|     base: baseUrl + "/static/layui/lay/modules/" | 
|   }).use(['table','laydate', 'form', 'admin', 'tableMerge'], function() { | 
|     var table = layui.table; | 
|     var $ = layui.jquery; | 
|     var layer = layui.layer; | 
|     var layDate = layui.laydate; | 
|     var form = layui.form; | 
|     var admin = layui.admin; | 
|     var tableMerge = layui.tableMerge; | 
|     var dataSource = [] | 
|   | 
|     // 数据渲染 | 
|     locDetlTableIns = table.render({ | 
|       elem: '#stockOut', | 
|       headers: {token: localStorage.getItem('token')}, | 
|       url: baseUrl+'/stock/boxOut/list/auth', | 
|       page: true, | 
|       limits: [16, 30, 50, 100, 200, 500], | 
|       limit: 16, | 
|       even: true, | 
|       toolbar: '#toolbar', | 
|       cellMinWidth: 50, | 
|       cols: [getCol()], | 
|       request: { | 
|         pageName: 'curr', | 
|         pageSize: 'limit', | 
|       }, | 
|       parseData: function (res) { | 
|         dataSource = res.data.records | 
|         return { | 
|           'code': res.code, | 
|           'msg': res.msg, | 
|           'count': res.data.total, | 
|           'data': res.data.records | 
|         } | 
|       }, | 
|       response: { | 
|         statusCode: 200 | 
|       }, | 
|       done: function(res, curr, count) { | 
|         tableMerge.render(this); | 
|         if (res.code === 403) { | 
|           top.location.href = baseUrl+"/"; | 
|         } | 
|       } | 
|     }); | 
|   | 
|     // 监听头工具栏事件 | 
|     table.on('toolbar(stockOut)', function (obj) { | 
|   | 
|       var checkStatus = table.checkStatus(obj.config.id); | 
|       var data = checkStatus.data; | 
|       var dataList = [] | 
|       for (var j = 0; j < data.length; j++) { | 
|         var locno = data[j].locNo | 
|         for(var i = 0;i < dataSource.length; i++) { | 
|           if (dataSource[i].locNo === locno) { | 
|             dataList.push(dataSource[i]) | 
|           } | 
|         } | 
|       } | 
|   | 
|       switch(obj.event) { | 
|         case 'confirm': | 
|           if (data.length === 0){ | 
|             layer.msg("请选择数据"); | 
|             return; | 
|           } | 
|   | 
|           const reqDate = [...new Set(dataList.map(obj => obj.locNo))] | 
|           $.ajax({ | 
|             url: baseUrl+"/getBoxLocDateByLocNo", | 
|             headers: {'token': localStorage.getItem('token')}, | 
|             data: JSON.stringify(reqDate), | 
|             contentType:'application/json;charset=UTF-8', | 
|             dataType:'json', | 
|             method: 'POST', | 
|             success: function (res) { | 
|               if (res.code === 200){ | 
|                 console.log(res) | 
|                 parent.addTableData(res.data); | 
|               } else if (res.code === 403){ | 
|                 top.location.href = baseUrl+"/"; | 
|               } else { | 
|                 layer.msg(res.msg, {icon: 2}) | 
|               } | 
|             } | 
|           }); | 
|           break; | 
|       } | 
|     }); | 
|   | 
|     // 搜索栏搜索事件 | 
|     form.on('submit(search)', function (data) { | 
|       tableReload(); | 
|     }); | 
|   | 
|     layDate.render({ | 
|       elem: '.layui-laydate-range' | 
|       ,type: 'datetime' | 
|       ,range: true | 
|     }); | 
|   }) | 
|   | 
|   function tableReload() { | 
|     var searchData = {}; | 
|     $.each($('#search-box [name]').serializeArray(), function() { | 
|       searchData[this.name] = this.value; | 
|     }); | 
|     locDetlTableIns.reload({ | 
|       where: searchData, | 
|     }); | 
|   } | 
| </script> | 
| </html> |