|   | 
| <!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/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> | 
| </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="会员"> | 
|                 <el-input v-model="form.vipQueryKey"></el-input> | 
|             </el-form-item> | 
|   | 
|             <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="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:src="@{/js/systools/MJsBase.js}"></script> | 
| <script type="text/javascript" th:inline="javascript"> | 
|     var vue = new Vue({ | 
|         el : "#app", | 
|         data : { | 
|             tableData : [], | 
|             customColumns : [], | 
|             shopList : [], | 
|             achieveUsers : [], | 
|             years : [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021], | 
|             months : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], | 
|             days : [], | 
|             form : { | 
|                 year : '', | 
|                 month : '', | 
|                 day : '', | 
|                 timeRange : '', | 
|                 vipQueryKey : '', | 
|                 beaultId : '', | 
|                 shopId : '' | 
|             }, | 
|             page : { | 
|                 currentPage : 1, | 
|                 size : 10, | 
|                 total : 0 | 
|             } | 
|         }, | 
|         created : function() { | 
|             this.initDays(); | 
|             this.queryCustomColumns(); | 
|             this.queryShops(); | 
|             this.queryAchieveUsers(); | 
|         }, | 
|         methods : { | 
|             queryTableData () { | 
|                 let _this = this; | 
|                 var form = _this.form; | 
|                 var page = _this.page; | 
|                 var params = _this.form; | 
|                 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"):''; | 
|                 } | 
|                 $.AjaxProxy({ | 
|                     p:params | 
|                 }).invoke(basePath + "/admin/achieve/findDailyInfoNew", function (loj) { | 
|                     _this.tableData = loj.getValue("rows"); | 
|                     _this.page.total = loj.getResult().total; | 
|                 }); | 
|             }, | 
|             queryCustomColumns() { | 
|                 let _this = this; | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     url: basePath + '/admin/customerDictionary/getListByParentCode/YJLX', | 
|                     callback: function (data) { | 
|                         _this.customColumns = data.rows; | 
|                         _this.queryTableData(); | 
|                     } | 
|                 }); | 
|             }, | 
|             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); | 
|                 } | 
|             } | 
|         } | 
|     }); | 
| </script> | 
| </body> | 
| </html> |