blame | history | patch | commit | commitdiff | ignore whitespace
Helius
2022-05-27 4351e71d782741143a98f86f6648acd16689165f 
 zq-erp/src/main/resources/templates/views/admin/hive-erp/statistics/daily-list-new.html


@@ -2,227 +2,323 @@


<!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>


               <button  matrix:btn="ygyjbbZb-exportExcel" onclick="exportExcel()" type="button" class="btn btn-default btn-sm"><i class="fa fa-download" ></i> 导出</button>


            </div>


         </div>


         <div class="form-group mr-20">


            <label >选择年月</label> <select


               class="form-control" name="year" id="select_year">


               <option value="">年份</option>


               <option value="2010">2010</option>


               <option value="2011">2011</option>


               <option value="2012">2012</option>


               <option value="2013">2013</option>


               <option value="2014">2014</option>


               <option value="2015">2015</option>


               <option value="2016">2016</option>


               <option value="2017">2017</option>


               <option value="2018">2018</option>


               <option value="2019">2019</option>


               <option value="2020">2020</option>


               <option value="2021">2021</option>


            </select> <select class="form-control" name="month" id="select_month">


               <option value="01">1</option>


               <option value="02">2</option>


               <option value="03">3</option>


               <option value="04">4</option>


               <option value="05">5</option>


               <option value="06">6</option>


               <option value="07">7</option>


               <option value="08">8</option>


               <option value="09">9</option>


               <option value="10">10</option>


               <option value="11">11</option>


               <option value="12">12</option>


            </select>


            <select class="form-control" name="day" id="select_day">


             <option value="">日</option>


            <th:block th:each="i:${#numbers.sequence(1, 31)}"   >


               <option th:value="${i }" th:text="${i }"></option>


            </th:block>


            </select>


         </div>


         <div class="form-group mr-20">


            <label>日期范围</label>


            <input name="beginTime" type="text" class="form-control datetimepicker" id="beginTime">-


            <input 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>






      <table id="mgrid">


         <thead>


            <tr>


               <th data-formatter="MGrid.indexfn" data-align="center"


                  data-width="30px" data-footer-formatter="footCountTitle">序号</th>


                  <th data-field="datatime"  >时间</th>


               <th data-field="orderType">订单类型</th>


               <th data-field="orderNo"  data-formatter="buildOpenDetail" >订单编号</th>


               <th data-field="levelName">会员级别</th>


               <th data-field="vipName">姓名</th>


               <th data-field="proName">项目名称</th>


               <th data-field="zkTotal" data-footer-formatter="countColumn">总现金业绩


                  <i data-toggle="tooltip" data-placement="top" title="总现金业绩=售卡+项目+产品" class="fa fa-question-circle"></i>


               </th>




               <th data-field="cardCash"  data-footer-formatter="countColumn"  >售卡业绩


                  <i data-toggle="tooltip" data-placement="top" title="售卡业绩：现金购买充值卡,套餐,充值的收款金额" class="fa fa-question-circle"></i>


               </th>




               <th data-field="projCash" data-footer-formatter="countColumn">项目业绩


                  <i data-toggle="tooltip" data-placement="top" title="项目业绩：现金购买单个项目的业绩" class="fa fa-question-circle"></i>


               </th>




               <th data-field="goodsCash" data-footer-formatter="countColumn">产品业绩


                  <i data-toggle="tooltip" data-placement="top" title="产品业绩：现金购买产品的业绩" class="fa fa-question-circle"></i>


               </th>




               <th data-field="consume" data-footer-formatter="countColumn">余额划扣业绩


                  <i data-toggle="tooltip" data-placement="top" title="余额划扣业绩：从客户的充值卡余额中划扣消费的金额" class="fa fa-question-circle"></i>


               </th>




               <th data-field="hisConsume" data-footer-formatter="countColumn">本金消耗


                  <i data-toggle="tooltip" data-placement="top" title="消耗金额：客户做服务时划扣的本金" class="fa fa-question-circle"></i>


               </th>


               <th data-field="freeConsume" data-footer-formatter="countColumn">赠送消耗


                  <i data-toggle="tooltip" data-placement="top" title="赠送消耗：客户做服务时划扣的赠送金额" class="fa fa-question-circle"></i>


               </th>


               <th data-field="projPercentage" data-footer-formatter="countColumn">服务提成


                  <i data-toggle="tooltip" data-placement="top" title="服务提成：为美疗师手动设置的项目服务提成" class="fa fa-question-circle"></i>


               </th>


               <th data-field="guwen">顾问</th>


               <th data-field="meiliao">美疗师</th>


               <th data-field="numberOfPeople" data-footer-formatter="countColumn">人头</th>


               <th data-field="projNum" data-footer-formatter="countColumn">项目个数</th>


               <th data-field="projTime" data-footer-formatter="countColumn">项目时间</th>


               <th data-field="shopName">门店</th>


					


            </tr>


         </thead>


      </table>


   </div>




   <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>


   <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/systools/MBaseVue.js}"></script>


   <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>


   <script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>


   <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>


   <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">


   <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>


   <script type="text/javascript" th:src="@{/js/function/public.js}"></script>


   <script type="text/javascript">


      var myGrid;


      var initParam = {


            format : "yyyy-mm-dd hh:ii", //默认显示年与日，如果想显示十分秒:"yyyy-mm-dd hh:ii:ss"


            minView: "hour",    //"month",只显示年月日的选择,不会再跳转去选择时分秒；如果想要选择时分秒的:"hour"


         }


       MTools.ininDatetimepicker(initParam);


      //限制结束时间不小于开始时间


       MTools.limitStartEndTime({}); 


		


      var date = new Date();


      var year = date.getFullYear();


      var month = date.getMonth() + 1;


      var year_options = "";


      for (var i = 9; i > 0; i--) {


         year_options += "<option value='" + (year - i) + "'>" + (year - i)


               + "</option>";


      }


      year_options += "<option value='"+year+"' selected='selected'>" + year


            + "</option>";


      $("#select_year").html(year_options);


      $("#select_month").find("option").each(function(row) {


         var option_month = $(this).val();


         if (month == option_month) {


            $(this).attr("selected", true);


         }


      });


</head>


<style>


   .table-style {


      margin: 20px 0;


      padding: 20px 10px;


      border: 1px solid #DCDFE6;


      background-color: white;


   }


   .search-form {


      background-color: white;


      padding-top: 10px;


      padding-left: 20px;


      padding-bottom: 10px;


   }


</style>


<body>


<div id="app" style="">


   <el-row class="search-form">


      <el-form ref="form" :model="form" inline>


         <el-form-item label="选择年月">


            <el-select v-model="form.year" style="width:120px;" placeholder="请选择年份">


               <el-option v-for="item in years"


                        :key="item"


                        :label="item"


                        :value="item"></el-option>


            </el-select>


         </el-form-item>


         <el-form-item>


            <el-select v-model="form.month" style="width:120px;" placeholder="请选择月份">


               <el-option v-for="item in months"


                        :key="item"


                        :label="item"


                        :value="item"></el-option>


            </el-select>


         </el-form-item>


         <el-form-item>


            <el-select v-model="form.day" style="width:120px;" placeholder="请选择日">


               <el-option v-for="item in days"


                        :key="item"


                        :label="item"


                        :value="item"></el-option>


            </el-select>


         </el-form-item>


         <el-form-item label="日期范围">


            <el-date-picker v-model="form.timeRange"


                        type="datetimerange"


                        range-separator="至"


                        start-placeholder="开始日期"


                        end-placeholder="结束日期">


            </el-date-picker>


         </el-form-item>


         <el-form-item label="业绩规则" prop="achieveRuleId">


            <el-select v-model="form.achieveRuleId" filterable placeholder="请选择业绩规则">


               <el-option


                     v-for="item in achieveRulsList"


                     :key="item.id"


                     :label="item.name"


                     :value="item.id">


               </el-option>


            </el-select>


         </el-form-item>


         <el-form-item label="会员">


            <el-input v-model="form.vipQueryKey"></el-input>


         </el-form-item>




      $(function() {


         MTools.autoFullSelect();


         myGrid = MGrid.initGrid({


            url : basePath+"/admin/achieve/findDailyInfoNew",


            showExport : true,


            showFooter : true,


            height:'auto',


            width:'auto',


            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' ],


         <el-form-item label="业绩归属人">


            <el-select v-model="form.beaultId" placeholder="请选择">


               <el-option v-for="item in achieveUsers"


                        :key="item.suId"


                        :label="item.suName"


                        :value="item.suId"></el-option>


            </el-select>


         </el-form-item>




         <el-form-item label="门店">


            <el-select v-model="form.shopId" placeholder="请选择所属门店">


               <el-option v-for="item in shopList"


                        :key="item.id"


                        :label="item.shopName"


                        :value="item.id">


               </el-option>


            </el-select>


         </el-form-item>




         <el-button type="primary" @click="search" >搜索</el-button>


         <el-button @click="resetForm('form')">重置</el-button>


         <el-button type="warning" @click="exportExcel">导出</el-button>


      </el-form>




   </el-row>


   <el-row class="table-style">


      <el-table :data="tableData" style="width: 100%">


         <el-table-column type="index" width="30"></el-table-column>


         <el-table-column prop="datatime" width="150" label="时间"></el-table-column>


         <el-table-column prop="orderNo" width="180" label="订单编号">


            <template slot-scope="scope">


               <el-link @click="jumpOrder(scope.row.orderType, scope.row.orderNo)" type="primary">{{scope.row.orderNo}}</el-link>


            </template>


         </el-table-column>


         <el-table-column prop="orderType" label="订单类型"></el-table-column>


         <el-table-column prop="vipName" label="会员姓名"></el-table-column>


         <el-table-column prop="proName" label="产品" width="200"></el-table-column>


         <el-table-column prop="achieveRuleName" label="业绩规则" width="200"></el-table-column>


         <el-table-column prop="cateName" label="产品分类"></el-table-column>


         <el-table-column prop="zkTotal" label="订单金额"></el-table-column>


         <el-table-column prop="goodsCash" label="现金"></el-table-column>


         <el-table-column prop="cardCash" label="划扣"></el-table-column>


         <!--         <el-table-column prop="goodsCash" label="订单业绩"></el-table-column>-->


         <el-table-column prop="meiliao" label="员工"></el-table-column>


         <el-table-column v-for="(item, index) in customColumns" width="120" :key="index" :label="item.value">


            <template slot-scope="scope">


               <span v-if="item.value == scope.row.achieveType">{{scope.row.goodsCash}}</span>


            </template>


         </el-table-column>


         <el-table-column prop="hisConsume" label="本金消耗"></el-table-column>


         <el-table-column prop="freeConsume" label="赠送消耗"></el-table-column>


         <el-table-column prop="projPercentage" label="服务提成"></el-table-column>


         <el-table-column prop="numberOfPeople" label="人头"></el-table-column>


         <el-table-column prop="projNum" label="项目个数"></el-table-column>


         <el-table-column prop="projTime" label="服务时间"></el-table-column>


         <el-table-column prop="guwen" label="操作人"></el-table-column>


         <el-table-column prop="shopName" label="门店"></el-table-column>


      </el-table>


      <el-row style="margin-top: 10px;">


         <el-pagination


               @size-change="handleSizeChange"


               @current-change="handleCurrentChange"


               :current-page="page.currentPage"


               :page-sizes="[10, 20, 30, 50]"


               :page-size="page.size"


               layout="total, sizes, prev, pager, next, jumper"


               :total="page.total">


         </el-pagination>


      </el-row>


   </el-row>


</div>


<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>


<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>


<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>


<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>


<script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>


<script type="text/javascript" th:inline="javascript">


   var vue = new Vue({


      el : "#app",


      data : {


         tableData : [],


         customColumns : [],


         achieveRulsList : [],


         shopList : [],


         achieveUsers : [],


         years : [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,2022],


         months : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],


         days : [],


         form : {


            year : '',


            month : '',


            day : '',


            timeRange : '',


            vipQueryKey : '',


            beaultId : '',


            achieveRuleId : '',


            shopId : ''


         },


         page : {


            currentPage : 1,


            size : 10,


            total : 0


         }


      },


      created : function() {


         this.initDays();


         this.queryCustomColumns();


         this.queryShops();


         this.queryAchieveUsers();


         this.getAchieveRule();


      },


      methods : {


         queryTableData () {




            let _this = this;


            let form = _this.form;


            let page = _this.page;


            let params = {};


            params.year=form.year;


            params.achieveRuleId=form.achieveRuleId;


            params.month=form.month;


            params.year=form.year;


            params.day=form.day;


            params.vipQueryKey=form.vipQueryKey;


            params.beaultId=form.beaultId;


            params.shopId=form.shopId;


            params.limit = page.size;


            params.offset = (page.currentPage - 1) * page.size;




            if (form.timeRange) {


               params.beginTime = form.timeRange?moment(form.timeRange[0]).format("YYYY-MM-DD HH:mm"):'';


               params.endTime = form.timeRange?moment(form.timeRange[1]).format("YYYY-MM-DD HH:mm"):'';


            }


         });




         $('[data-toggle="tooltip"]').tooltip()




      });






      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>";


      };


		


		


      function exportExcel(){


         var param=MForm.toUrlParam("#serchform");




         window.location.href=basePath+"/admin/achieve/exportDailyInfoNew?"+param;


      }




      function buildOpenDetail(value, row, index){


         var html = [];


         if(row.orderType=='服务单'){


            html[0] = '<a  onClick="fnPublci.showServiceOrder(1 , \'' + value +'\')"   class="text-primary " >'+value+'</a>'


         }else{


            html[0] = '<a  onClick="fnPublci.showOrder(1 , \'' + value +'\')"   class="text-primary " >'+value+'</a>'


            AjaxProxy.requst({


               app: _this,


               data: params,


               url: basePath + "/admin/achieve/findDailyInfoNew",


               callback: function (loj) {


                  _this.tableData = loj.rows;


                  _this.page.total = loj.total;


               }


            });


         },


         queryCustomColumns() {


            let _this = this;


            AjaxProxy.requst({


               app: _this,


               url: basePath + '/admin/customerDictionary/getListByParentCode/YJLX',


               callback: function (data) {


                  _this.customColumns = data.rows;


                  _this.queryTableData();


               }


            });


         },


         /**


          * 获取规则


          */


         getAchieveRule(){


            let _this = this;


            AjaxProxy.requst({


               app: _this,


               data: {pageNum:1,pageSize:1000},


               url: basePath + "/admin/achieveRule/selectList",


               callback: function (data) {


                  _this.achieveRulsList=data.rows;


               }


            });


         },


         queryShops() {


            let _this = this;


            AjaxProxy.requst({


               app: _this,


               url: basePath + '/admin/shopInfo/findAllWithPermi',


               callback: function (data) {


                  _this.shopList = data.rows;


               }


            });


         },


         queryAchieveUsers() {


            let _this = this;


            AjaxProxy.requst({


               app: _this,


               url: basePath + '/admin/getShopStaffByRoleName?roleName=美疗师',


               callback: function (data) {


                  _this.achieveUsers = data.rows;


               }


            });


         },


         resetForm(formName) {


            // this.$refs[formName].resetFields();


            this.form = {


               timeRange : '',


               vipQueryKey : '',


               beaultId : '',


               shopId : ''


            }


         },


         search() {


            this.queryTableData();


         },


         handleSizeChange(val) {


            this.page.size = val;


            this.queryTableData();


         },


         handleCurrentChange(val) {


            this.page.currentPage = val;


            this.queryTableData();


         },


         initDays() {


            let _this = this;


            for (var i = 1; i <= 31 ; i++) {


               _this.days.push(i);


            }


         },


         getRequestParam() {


            var form = this.form;


            var params = form;


            if (form.timeRange) {


               params.beginTime = form.timeRange?moment(form.timeRange[0]).format("YYYY-MM-DD HH:mm"):'';


               params.endTime = form.timeRange?moment(form.timeRange[1]).format("YYYY-MM-DD HH:mm"):'';


            }


            return params;


         },


         exportExcel() {


            window.location.href=basePath+"/admin/achieve/exportDailyInfoNew?"+MTools.jsonToUrlParam(this.getRequestParam());


         },


         jumpOrder(type, value) {


            if(type=='服务单') {


               fnPublci.showServiceOrder(1, value);


            } else {


               fnPublci.showOrder(1, value);


            }


         }




         return html.join("");


      }










   </script>


   });


</script>


</body>


</html>