|
<!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"/>
|
</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-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-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>
|
|
<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
|
}
|
},
|
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;
|
|
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();
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
