| 
<!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"> 
 | 
        <!-- 搜索框部分start --> 
 | 
        <form class="form-inline" id="serchform"> 
 | 
        <div class="row mb-10"> 
 | 
                <div class="col-sm-8"> 
 | 
                    <button  onclick="myGrid.serchData()" type="button" class="btn btn-info btn-sm"><i class="fa fa-search" ></i> 搜索</button> 
 | 
                    <button  onclick="myGrid.resetForm()" type="button"   class="btn btn-default btn-sm"><i class="fa fa-refresh " ></i> 重置</button> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
            <div class="form-group mr-20"> 
 | 
                <label>日期范围</label> 
 | 
                <input autocomplete="off"   name="beginTime" type="text" class="form-control datetimepicker" id="beginTime">- 
 | 
                <input autocomplete="off"   name="endTime"  type="text" class="form-control datetimepicker" id="endTime"> 
 | 
            </div> 
 | 
            <div class="form-group mr-20"> 
 | 
                <label >所属门店</label> <select id="select_id" 
 | 
                    class="form-control autoFull" 
 | 
                    th:data-url="@{/admin/shopInfo/findShops}" data-value="id" 
 | 
                    data-filed="shopName" data-def="${obj.shopId}" name="shopId"> 
 | 
                    <option value="">--请选择所属门店--</option> 
 | 
                </select> 
 | 
            </div> 
 | 
              
 | 
        </form> 
 | 
        <!--TODO 导出--> 
 | 
  
 | 
        <table id="mgrid"> 
 | 
            <thead> 
 | 
                <tr> 
 | 
                    <th data-formatter="MGrid.indexfn" data-align="center" 
 | 
                        data-width="30px" data-footer-formatter="footCountTitle">序号</th> 
 | 
                    <th data-field="time">日期</th> 
 | 
                    <th data-field="shopName" >门店</th> 
 | 
                    <th data-field="cashPay" data-footer-formatter="countColumn">收现金额</th> 
 | 
                    <th data-field="cardPay" data-footer-formatter="countColumn">实收余额支付</th> 
 | 
                    <th data-field="consumePay" data-footer-formatter="countColumn">消耗金额</th> 
 | 
                    <th data-field="freeConsumePay" data-footer-formatter="countColumn">赠送消耗</th> 
 | 
                    <th data-field="refundCashPay" data-footer-formatter="countColumn">现金退款</th> 
 | 
                    <th data-field="refundCardPay" data-footer-formatter="countColumn">卡项退款</th> 
 | 
                    <th data-field="arrearsPay" data-footer-formatter="countColumn">欠款</th> 
 | 
                </tr> 
 | 
            </thead> 
 | 
        </table> 
 | 
    </div> 
 | 
  
 | 
    <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript"> 
 | 
        var myGrid; 
 | 
        var initParam = { 
 | 
                format : "yyyy-mm-dd", //默认显示年与日,如果想显示十分秒:"yyyy-mm-dd hh:ii:ss" 
 | 
            minView: 2, //"month",只显示年月日的选择,不会再跳转去选择时分秒;如果想要选择时分秒的:"hour" 
 | 
            startView:2, 
 | 
            } 
 | 
         MTools.ininDatetimepicker(initParam); 
 | 
        //限制结束时间不小于开始时间 
 | 
         MTools.limitStartEndTime({});  
 | 
  
 | 
  
 | 
        $(function() { 
 | 
            MTools.autoFullSelect(); 
 | 
            myGrid = MGrid.initGrid({ 
 | 
                url : basePath+"/admin/sysBusinessData/showList", 
 | 
                showExport : true, 
 | 
                showFooter : true, 
 | 
                height:'', 
 | 
                width:'', 
 | 
                exportDataType : "basic", //basic', 'all', 'selected'. 
 | 
                exportTypes : [ 'excel', 'xlsx' ], //导出类型 
 | 
                exportOptions : { 
 | 
                    ignoreColumn : [ 0 ], 
 | 
                    fileName : "每日单据统计" + MTools.getTime(), //文件名称设置   
 | 
                    worksheetName : 'Sheet1', //表格工作区名称   
 | 
                    tableName : '每日单据统计', 
 | 
                    excelstyles : [ 'background-color', 'color', 'font-size', 
 | 
                            'font-weight' ], 
 | 
                } 
 | 
            }); 
 | 
        }); 
 | 
  
 | 
        function footCountTitle(data) { 
 | 
            return "<b>合计</b>"; 
 | 
        }; 
 | 
        function countColumn(data) { 
 | 
            console.log(data) 
 | 
             field = this.field; 
 | 
                var resultsumQuantity = parseFloat((data.reduce(function(sum, row) {  
 | 
                    console.log(sum,row[field]); 
 | 
                    return sum + (+row[field]); 
 | 
                }, 0)).toFixed(2));//保留有效数字 
 | 
                return "<b>"+resultsumQuantity+"</b>"; 
 | 
        }; 
 | 
    </script> 
 | 
</body> 
 | 
</html> 
 |