|   | 
|   | 
|   | 
|   | 
|   | 
| <!DOCTYPE HTML> | 
| <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> | 
| <head> | 
| <meta charset="utf-8"> | 
| <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> | 
| <meta name="renderer" content="webkit|ie-comp|ie-stand"> | 
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 
| <meta name="viewport" | 
|     content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | 
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | 
| <LINK rel="Bookmark" href="../images/favicon.ico"> | 
| <!-- 本框架基本脚本和样式 --> | 
| <script type="text/javascript" | 
|     th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> | 
| <script type="text/javascript" | 
|     th:src="@{/js/systools/MBase.js}"></script> | 
| </head> | 
| <body class="gray-bg"> | 
|   | 
|     <div class="ibox-content"> | 
|     <div class="row"> | 
|           <div class="panel panel-warning"> | 
|               <div class="panel-heading">消耗统计 | 
|               </div> | 
|               <div class="panel-body"> | 
|     <!-- 搜索框部分start --> | 
|                 <form class="form-inline" id="serchform"> | 
|                     <div class="form-group mr-20"> | 
|                         <label >时间</label> | 
|                         <input autocomplete="off"   name="beginTime" id="beginTime" type="text" class="form-control datetimepicker">— | 
|                         <input autocomplete="off"   name="endTime" id="endTime" type="text" class="form-control datetimepicker"> | 
|                     </div> | 
|                     <button  onclick="myGrid.serchData()" type="button" class="btn btn-default btn-sm"><i class="fa fa-search " ></i> 搜索</button> | 
|                     <button  type="reset" class="btn btn-default btn-sm"><i class="fa fa-refresh " ></i> 重置</button> | 
|                     <a class="btn btn-default btn-sm" th:href="@{/admin/redirect/hive/beautySalon/saleOrder-list}" >订单统计</a> | 
|                     <a class="btn btn-default btn-sm" th:href="@{/admin/redirect/hive/beautySalon/serviceOrder-list}" >消耗统计</a> | 
|                 </form> | 
|             <!-- 搜索框部分en --> | 
|                 <div class="option-bar"  > | 
|                     <button onclick="exportExcel()" type="button" class="btn btn-success btn-sm"><i class="glyphicon glyphicon-export icon-share" ></i> 导出数据</button> | 
|                 </div> | 
|                 <table id="mgrid" > | 
|                     <thead> | 
|                         <tr> | 
|                             <th data-checkbox="true"  ></th> | 
|                             <th data-formatter="MGrid.indexfn" data-align="center"  data-width="30px" >序号</th> | 
|                             <th data-field="serviceNo" data-sortable="true">订单号</th> | 
|                             <th data-field="vipName" data-sortable="true">会员名</th> | 
|                             <th data-field="money" data-sortable="true">消耗金额</th> | 
|                             <th data-field="createTime" data-sortable="true" data-formatter="MGrid.getTime" >下单时间</th> | 
|                             <th data-field="createStaffName" data-sortable="true" >下单顾问</th> | 
|                             <th data-field="remark" data-sortable="true">备注</th> | 
|                             <th data-align="center" data-width="150px" data-field="id" | 
|                         data-formatter="buidLs">操作</th> | 
|                         </tr> | 
|                     </thead> | 
|                 </table> | 
|            </div> | 
|         </div> | 
|       </div> | 
|     </div> | 
|      | 
|     <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript"> | 
|     var myGrid; | 
|         $(function(){ | 
|              myGrid=MGrid.initGrid({ | 
|                  url:basePath+"/admin/projService/showServiceOrderList", | 
|                  height:700, | 
|                  pageList : [ 50, 100, 200, 300, 500 ], | 
|                  detailView : true, | 
|                 onExpandRow : function(index, row, $detail) { | 
|                     console.log("1======="); | 
|                     console.log(row); | 
|                     InitSubTable(index, row, $detail); | 
|                 }, | 
|              }); | 
|         }); | 
|           | 
|         // 父子表,拼接字表 | 
|         function InitSubTable(index, row, $detail) { | 
|             if (row.projUses.length == 0) { | 
|                 var cur = $detail.html('<h4></h4>'); | 
|                 var html = "没有找到匹配的数据"; | 
|                 cur.append(html); | 
|             } else { | 
|                 var thead = '<thead><tr><th>序号</th><th>项目名称</th> <th>项目编号</th><th>剩余次数</th><th>划扣价</th><th>服务时长</th></tr></thead>'; | 
|                 var cur_table = $detail.html( | 
|                         '<table  class="table table-hover" >' + thead + '</table>') | 
|                         .find('table'); | 
|                 var detailList = row.projUses; | 
|                 var html = ""; | 
|                  | 
|                 if (detailList.length > 0) { | 
|                     for (var i = 0; i < detailList.length; i++) { | 
|                         html += '<tr>'  | 
|                             + '<td>' + (i + 1) + '</td>'  | 
|                             + '<td>'+ detailList[i].name + '</td>' | 
|                              + '<td>'+ detailList[i].projInfo.projNo + '</td>'  | 
|                             + '<td>'+ detailList[i].surplusCount + '</td>'  | 
|                             + '<td>'+ detailList[i].price + '</td>'  | 
|                             + '<td>'+ detailList[i].projInfo.timeLength + '</td>' + '</tr>'; | 
|                     } | 
|                 } | 
|                 cur_table.append(html); | 
|             } | 
|         } | 
|         MTools.ininDatetimepicker({ | 
|             format : "yyyy-mm-dd hh:ii", | 
|             minView: "hour" | 
|         }); | 
|         MTools.limitStartEndTime({}); | 
|          | 
|         //导出 | 
|         function exportExcel(){ | 
|             var param=MForm.toUrlParam("#serchform"); | 
|             window.location.href=basePath+"/admin/projService/exportExcel?"+param; | 
|         } | 
|          | 
|         function buidLs(value, row, index) { | 
|             var html = ''; | 
|             html += '<button class="btn btn-default btn-sm mr-5" onClick="selectLs(' | 
|                     + value + ')"  title="查看详情"><i class="fa fa-eye"></i></buttoun>'; | 
|             html += '' | 
|             return html; | 
|         } | 
|         /** | 
|          * 跳转服务单流水详情页面 | 
|          */ | 
|         function selectLs(id) { | 
|             layer.full(layer.open({ | 
|                 type : 2, | 
|                 title : "服务单详情流水", | 
|                 maxmin : true, | 
|                 area : [ MUI.SIZE_L, '500px' ], | 
|                 content : [ basePath + '/admin/projService/serviceInfo?pageFlae=pc&id=' + id ] | 
|             })); | 
|         } | 
|     </script> | 
| </body> | 
| </html> |