|
<!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-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-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-input v-model="form.vipQueryKey"></el-input>
|
</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" fixed="left"></el-table-column>
|
<el-table-column prop="datatime" width="150" label="时间" fixed="left"></el-table-column>
|
<el-table-column prop="beautyName" label="美疗师" fixed="left"></el-table-column>
|
<el-table-column prop="vipName" label="客户" fixed="left"></el-table-column>
|
<el-table-column prop="isAppoint" label="是否指定客" width="100">
|
<template slot-scope="scope">
|
<span v-if="scope.row.isAppoint ==1 ">是</span>
|
<span v-else>否</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="客流" align="center">
|
<el-table-column prop="orderCnt" label="是否会员">
|
<template slot-scope="scope">
|
<span v-if="scope.row.orderCnt > 0">是</span>
|
<span v-else>否</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="arrivalWay" label="到店途径"></el-table-column>
|
<el-table-column prop="arriveCnt" label="当月到店次数" width="120"></el-table-column>
|
</el-table-column>
|
<el-table-column label="实操业绩" align="center">
|
<el-table-column prop="projInfo" label="项目->消耗产品" width="230"></el-table-column>
|
<el-table-column prop="projCnt" label="项目数量"></el-table-column>
|
<el-table-column prop="ticheng" label="手工费"></el-table-column>
|
<el-table-column prop="consume" label="耗卡"></el-table-column>
|
</el-table-column>
|
<el-table-column label="现金业绩" align="center">
|
<el-table-column prop="payMethods" label="消费类型" width="200"></el-table-column>
|
<el-table-column prop="orderType" label="特色项目"></el-table-column>
|
<el-table-column prop="teamPay" label="团购销售"></el-table-column>
|
<el-table-column prop="tcAndProjCash" label="卡项销售"></el-table-column>
|
<el-table-column prop="productCash" label="产品销售"></el-table-column>
|
<el-table-column prop="cardCash" label="会员充值"></el-table-column>
|
<el-table-column prop="cashPay" label="总业绩"></el-table-column>
|
<el-table-column prop="cardPay" label="划卡"></el-table-column>
|
</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">
|
var vue = new Vue({
|
el : "#app",
|
data : {
|
tableData : [],
|
shopList : [],
|
form : {
|
timeRange : '',
|
vipQueryKey : '',
|
beaultId : '',
|
shopId : ''
|
},
|
page : {
|
currentPage : 1,
|
size : 10,
|
total : 0
|
}
|
},
|
created : function() {
|
this.queryTableData();
|
},
|
methods : {
|
queryTableData() {
|
let _this = this;
|
let params = {};
|
let page = _this.page;
|
let form = _this.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"):'';
|
}
|
params.vipQueryKey=form.vipQueryKey;
|
params.beaultId=form.beaultId;
|
params.limit = page.size;
|
params.offset = (page.currentPage - 1) * page.size;
|
AjaxProxy.requst({
|
app: _this,
|
data: params,
|
url: basePath + "/admin/achieve/findDailyBeautyList",
|
callback: function (loj) {
|
_this.tableData = loj.rows;
|
_this.page.total = loj.total;
|
|
_this.queryAchieveUsers();
|
_this.queryShops();
|
}
|
});
|
},
|
queryAchieveUsers() {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/getShopStaffByRoleName',
|
callback: function (data) {
|
_this.achieveUsers = data.rows;
|
}
|
});
|
},
|
resetForm(formName) {
|
// this.$refs[formName].resetFields();
|
this.form = {
|
timeRange : '',
|
vipQueryKey : '',
|
beaultId : ''
|
}
|
},
|
search() {
|
this.queryTableData();
|
},
|
queryShops() {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + '/admin/shopInfo/findAllWithPermi',
|
callback: function (data) {
|
_this.shopList = data.rows;
|
}
|
});
|
},
|
handleSizeChange(val) {
|
this.page.size = val;
|
this.queryTableData();
|
},
|
handleCurrentChange(val) {
|
this.page.currentPage = val;
|
this.queryTableData();
|
},
|
}
|
})
|
</script>
|
</body>
|
</html>
|
