ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/OrderInfo/OrderItemStatistics.cshtml

@using System.Web.UI.HtmlControls
@using Abp.Timing
@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models.Layout
@using ShwasherSys.Models.Modal

@{
    /**/
    ViewBag.ActiveMenu = PermissionNames.PagesOrderInfoOrderItemStatistics; //The menu item will be active for this page.
    ViewBag.Title = "订单明细统计";
}
@section css{
    <link href="~/Content/Plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <style>
        .form-box {
            
            min-height: 50px;
        }
        .form-box .input-group-addon {
            background: #d1dcf9;
            border-color: #d1dcf9;
            color: #563d7c;
        }
        .form-box  .form-control {
                
            border-color: #d1dcf9;
        }
        .form-box .form-box-column {
            float: left;
            min-width: 200px;
            width: 15%;
            margin: 0 5px;
        }
        .btn-action {
            margin-left: 20px;
            width: 250px;
            margin-top: 0px;
        }
        .table-box .btn-toolbar {
            background: #E6E6FA;
            border: 1px solid #E6E6FA;
        }
        .lable-value {
            padding: .4rem .25rem;
        }
    </style>
}
<div class="row" style="margin: 0 0;">
    <div class="col-sm-12 col-lg-12 form-box" style="padding: 0">
        <form class="form-horizontal " style="padding: 10px 0px" id="SearchForm">
                <div class="form-box-column ">
                    <div class="form-group-sm input-group">
                        <div class="input-group-addon" style="">
                            <span>统计类型</span>
                        </div>
                        <input id="KeyField-1" name="KeyField-1" class="KeyField" style="display: none" value="stype">
                        <input id="FieldType-1" name="FieldType-1" class="FieldType" type="hidden" value="0">
                        <input id="ExpType-1" name="ExpType-1" class="ExpType" type="hidden" value="6">
                        <select type="text" class="form-control KeyWords" style="border-radius: 0 0 0 0 !important;" id="KeyWords-1" name="KeyWords-1" onchange="ValidityType()">
                            @*<option value="0"></option>*@
                            <option value="1"  selected="selected">按日统计</option>
                            <option value="2">按周统计</option>
                            <option value="3">按月统计</option>
                            <option value="4">按季度统计</option>
                            <option value="5">按年统计</option>
                        </select>
                     
                    </div>
                </div>
                <div class="form-box-column">
                    <div class="form-group-sm input-group">
                        <div class="input-group-addon">
                            <span>日期</span>
                        </div>
                        <input id="KeyField-2" name="KeyField-2" class="KeyField" style="display: none" value="startDate">
                        <input id="FieldType-2" name="FieldType-2" class="FieldType" type="hidden" value="6">
                        <input id="ExpType-2" name="ExpType-2" class="ExpType" type="hidden" value="2">
                        <input type="text" class="form-control KeyWords" id="KeyWords-2" name="KeyWords-2" />

                    </div>
                </div>
            <div class="form-box-column ">
                <div class="form-group-sm input-group">
                    <div class="input-group-addon">
                        <span>至</span>
                    </div>
                    <input id="KeyField-3" name="KeyField-3" class="KeyField" style="display: none" value="endDate">
                    <input id="FieldType-3" name="FieldType-3" class="FieldType" type="hidden" value="6">
                    <input id="ExpType-3" name="ExpType-3" class="ExpType" type="hidden" value="5">
                    <input type="text" class="form-control KeyWords" id="KeyWords-3" name="KeyWords-3" />
                </div>
            </div>
            <div class="form-box-column ">
                <div class="form-group-sm input-group">
                    <div class="input-group-addon">
                        <span>外销/内销</span>
                    </div>
                    <input id="KeyField-4" name="KeyField-4" class="KeyField" style="display: none" value="saleType">
                    <input id="FieldType-4" name="FieldType-4" class="FieldType" type="hidden" value="0">
                    <input id="ExpType-4" name="ExpType-4" class="ExpType" type="hidden" value="6">
                    <select type="text" class="form-control KeyWords" style="border-radius: 0 0 0 0 !important;" id="KeyWords-4" name="KeyWords-4" >
                        <option value="1">内销</option>
                        <option value="2">外销</option>
                    </select>
                </div>
            </div>
            <div class="form-box-column ">
                <div class="form-group-sm input-group">
                    <div class="input-group-addon">
                        <span>员工</span>
                    </div>
                    <input id="KeyField-5" name="KeyField-5" class="KeyField" style="display: none" value="saleMan">
                    <input id="FieldType-5" name="FieldType-5" class="FieldType" type="hidden" value="0">
                    <input id="ExpType-5" name="ExpType-5" class="ExpType" type="hidden" value="6">
                    <input type="hidden" class="form-control KeyWords clear" id="KeyWords-5" name="KeyWords-5" />
                    <input type="text" class="form-control clear"  id="checkUserName" name="checkUserName" disabled=""/>
                    <div class="input-group-addon"  onclick="ShowQueryModal('query_employee_modal','#SearchForm');">
                        <i class="iconfont icon-search"></i>
                    </div>
                    <div class="input-group-addon" >
                        <i class="iconfont icon-delete" onclick="$(this).closest('.input-group ').find('input.clear').val('')"></i>
                    </div>
                </div>
            </div>
            <div class="form-box-column">
                <button type="button" class="btn btn-block btn-info btn-sm btn-action" onclick="BtnSearch()"><strong>查 询</strong><span style="color: #563d7c ; font-weight: bold; padding-left: 5px;">(不可跨年度按周,月,季度统计)</span></button>
            </div>
            
            </form>

        </div>
    </div>

<div class="table-box mr-4  iwb-bootstrap-table">
    <table id="table"
           data-url="/api/services/app/OrderItems/StatisticsItem"
           data-striped="true" data-id-field="id" data-unique-id="id"
           data-method="post"
           data-side-pagination="server"
           data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
           data-cache="false"
           data-pagination="false" data-page-size="30" data-page-number="1" data-page-list="[30,50,100,200]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
           data-query-params="QueryParams"
           data-response-handler="ResponseHandlerNoPage"
           data-click-to-select="true"
           data-single-select="false" data-show-footer="true"  >
        <thead>
        <tr class="row">
            <th data-field="state" data-checkbox="true"  data-footer-formatter="合计："></th>
            <th data-align="center" data-field="orderCount"  data-footer-formatter="AllOrderCountFormatter">订单数量</th>
            <th data-align="center" data-field="currencyId">货币</th>
            <th data-align="center" data-field="totalPrice"  data-footer-formatter="AllTotalPriceFormatter">总金额</th>
            <th data-align="center" data-field="queryValue">查询周期</th>
            <th data-align="center" data-field="queryUnit" data-formatter="QueryUnitFormatter">统计类型</th>
        </tr>
        </thead>
    </table>

</div>

@Html.Partial("Modals/Query/_Employee", "KeyWords-5,checkUserName")

@section modal
{
    <section>
        @*@Html.Partial("Modals/Query/_Customer", "KeyWords-1")*@
    </section>
}
@section scripts
{
    <script src="~/Content/Plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="~/Content/Plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        var datePickerOpt = {
            language: 'zh-CN',
            format: "yyyy-mm-dd",
            todayBtn: true,
            autoclose: true,
            startView: 2,
            minView: 2,
            maxView: 4
            //showSecond: true,
            //showHours: true,
            //minuteStep: 10
        };
        $(function() {
            $("#KeyWords-2").datetimepicker(datePickerOpt);
            $("#KeyWords-3").datetimepicker(datePickerOpt);
            $("#creatDate").datetimepicker(datePickerOpt);
            var nowDate = new Date();
            var preDate = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000);
            $("#KeyWords-2").val(preDate.Format("yyyy-MM-dd"));
            $("#KeyWords-3").val(nowDate.Format("yyyy-MM-dd"));
            $("#KeyWords-1").val("1");
            LoadTable({
                responseHandler:ResponseHandlerNoPage
            });
            
        });
       
        function AddSearchEvents() { }

        function ClearQuery(that) {
            $(this).closest('.input-group ').find('input.clear').val('');
        }
        function QueryUnitFormatter(v, r) {
            var result = "";
            switch (v) {
                case "1":
                    result = "日";
                    break;
                case "2":
                    result = "周";
                    break;
                case "3":
                    result = "月";
                    break;
                case "4":
                    result = "季度";
                    break;
                case "5":
                    result = "年";
                    break;
                
            }
            return result;
        }
        function ValidityType() {
            var t = $("#KeyWords-1").val();
            if (t === "2" || t === "3" || t === "4") {
                var start = $("#KeyWords-2").val();
                var end = $("#KeyWords-3").val();
                var s_start = start.substr(0, 4);
                var s_end = end.substr(0, 4);
                if (s_start !== s_end) {
                    abp.message.warn("不可跨年度按周,月,季度统计!").done(function() {
                        $("#KeyWords-3").val(s_start+"-12-31");
                    });
                }
            }
        }

        function BtnSearch(isCheck) {
            clearTimeout(t);
            if (_isSearching) {
                return;
            }
            window._isSearching = true;
            GetSearchList();
            if (!isCheck&&_searchList.length <= 0) {
                console.log("Search-Multi-None");
                return;
            }
            var isValidated = FormValidate({ form: $("#SearchForm") });
            ValidityType();
            if (isValidated) {
                RefreshTable();
                console.log("Search");
            } else {
                console.log("Search_Validate_Faild");
            }
    
        } 
    </script>
    <script>
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function(fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1,
                        (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        //将数字转换成金额显示 n是小数点后位数
        function toNumber(num, n) {
            var re = String(num);
            var dotfront = "";
            var dotlast = "";
            if (re.indexof('.') > -1) {
                var sarr = re.spilt('.');
                dotfront = sarr[0];
                dotlast = sarr[1];
                var dotlastlength = strlen(dotlast);
                if (dotlastlength < n) {
                    for (var j = 0; j < n - dotlastlength; j++) {
                        dotlast += "0";
                    }
                }
                if (dotlastlength > n) {
                    dotlast = dotlast.substr(0, n);
                }
            } else {
                dotfront = re;
                for (var i = 0; i < n; i++) {
                    dotlast += "0";
                }
            }
            num = dotfront + '.' + dotlast;
            return num;
        }

        function _formatAmount(strData, n) {
            var CurrencyAndAmountRegExp =
                /^(\d{1,18})|(\d{1,18}\.)|(\d{1,17}\.\d{0,1})|(\d{1,16}\.\d{0,2})|(\.\d{1,2})$/;
            var _result = CurrencyAndAmountRegExp.test(strData);
            if (_result == false) {
                return strData;
            } // 一般来说最多就6位吧，当然如果有特殊需求可自行更改(｀・∀・´)
            n = n > 0 && n <= 6 ? n : 2;
            var formatData = parseFloat((strData + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
            var l = formatData.split('.')[0].split('').reverse();
            var r = formatData.split('.')[1];
            var t = '';
            for (i = 0; i < l.length; i++) {
                t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
            }
            return t.split('').reverse().join('') + '.' + r;
        }

        function strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //单字节加1
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
        }

        function AllTotalPriceFormatter(data) {
           //console.log(data);
            var count = 0;
            var currencyId = "CNY";
            data.forEach(function(e) {
                currencyId = e.currencyId;
                count += e.totalPrice;
            });
            if (count && count > 0) {
                count = (count * 10000) / 10000;
                count = _formatAmount(count, 4);
            }
            return '<strong>' + count + ' ' + currencyId + '<strong>';
        }
        function AllOrderCountFormatter(data) {
            //console.log(data);
            var count = 0;
            var currencyId = "CNY";
            data.forEach(function(e) {
                count += e.orderCount;
            });
            
            return '<strong>' + count + '<strong>';
        }
    </script>
}