| | |
|---|
| | | <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> |
|---|
| | | |
|---|
| | | <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"/> |
|---|
| | | </head> |
|---|
| | | <body class="gray-bg"> |
|---|
| | | |
|---|
| | | <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-date-picker v-model="form.timeRange" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | end-placeholder="结束日期"> |
|---|
| | | </el-date-picker> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <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="ygyjbb-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> |
|---|
| | | <el-form-item label="会员"> |
|---|
| | | <el-input v-model="form.vipQueryKey"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <div class="form-group mr-20"> |
|---|
| | | <label>会员</label> |
|---|
| | | <input autocomplete="off" placeholder="姓名/编号/电话" name="vipQueryKey" type="text" class="form-control" > |
|---|
| | | </div> |
|---|
| | | <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> |
|---|
| | | |
|---|
| | | <div class="form-group mr-20"> |
|---|
| | | <label>业绩归属人</label> |
|---|
| | | <select class="form-control autoFull select2" |
|---|
| | | th:data-url="@{/admin/getShopStaffByRoleName?roleName=美疗师}" |
|---|
| | | data-value="suId" |
|---|
| | | data-filed="suName" |
|---|
| | | name="beaultId" |
|---|
| | | id="beaultId"> |
|---|
| | | <option value="">--请选择--</option> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | <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> |
|---|
| | | |
|---|
| | | <div class="form-group mr-20"> |
|---|
| | | <label>门店</label> |
|---|
| | | <select class="form-control autoFull" data-filed="shopName" name="shopId" id="shopId" |
|---|
| | | th:data-url="@{/admin/shopInfo/findAllWithPermi}"> |
|---|
| | | <option value=''>--请选择部所属门店--</option> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | </form> |
|---|
| | | <el-button type="primary" @click="search" >搜索</el-button> |
|---|
| | | <el-button @click="resetForm('form')">重置</el-button> |
|---|
| | | </el-form> |
|---|
| | | |
|---|
| | | </el-row> |
|---|
| | | <el-row class="table-style"> |
|---|
| | | <el-table :data="tableData" style="width: 100%"> |
|---|
| | | <el-table-column type="index" width="50"></el-table-column> |
|---|
| | | <el-table-column prop="datatime" label="时间"></el-table-column> |
|---|
| | | <el-table-column prop="orderNo" label="订单编号"></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="产品"></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="meiliao" label="员工"></el-table-column> |
|---|
| | | <el-table-column prop="hisConsume" label="本金消耗"></el-table-column> |
|---|
| | | <el-table-column prop="freeConsume" label="赠送消耗"></el-table-column> |
|---|
| | | |
|---|
| | | <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="orderNo" data-formatter="buildOpenDetail" >订单编号</th> |
|---|
| | | <th data-field="orderType">订单类型</th> |
|---|
| | | <th data-field="vipName">会员姓名</th> |
|---|
| | | <th data-field="proName">产品</th> |
|---|
| | | <th data-field="cateName">产品分类</th> |
|---|
| | | <th data-field="zkTotal" data-footer-formatter="countColumn">订单金额</th> |
|---|
| | | <th data-field="goodsCash" data-footer-formatter="countColumn">订单业绩</th> |
|---|
| | | <th data-field="payMethod">收款方式</th> |
|---|
| | | <th data-field="achieveType">业绩类型</th> |
|---|
| | | <th data-field="meiliao">员工</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="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="guwen">操作人</th> |
|---|
| | | <th data-field="shopName">门店</th> |
|---|
| | | |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> |
|---|
| | | <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" |
|---|
| | | <el-table-column v-for="(item, index) in customColumns" :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> |
|---|
| | | <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 : [], |
|---|
| | | form : { |
|---|
| | | timeRange : '', |
|---|
| | | vipQueryKey : '', |
|---|
| | | beaultId : '', |
|---|
| | | shopId : '' |
|---|
| | | }, |
|---|
| | | page : { |
|---|
| | | currentPage : 1, |
|---|
| | | size : 10, |
|---|
| | | total : 0 |
|---|
| | | } |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | created : function() { |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | 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>' |
|---|
| | | } |
|---|
| | | |
|---|
| | | return html.join(""); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | $(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' ], |
|---|
| | | 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; |
|---|
| | | $.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(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
