~jiangyouyao/beauty-erp.git

New file
			@@ -0,0 +1,311 @@
			<!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>
			<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
			<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
			<title></title>
			<style>
			.panel-body{
			overflow: hidden;
			}
			.buttonPanel{
			background: #ffffff;
			padding: 10px 10px ;
			margin: 0px 0px 10px 0px;
			}
			.rowPanel{
			background: #ffffff;
			padding: 0px 10px ;
			padding-top: 10px;
			margin: 0px 0px 10px 0px;
			}
			.paginationStyle{
			background: #ffffff;
			padding: 10px 10px;
			margin: 0px 0px 10px 0px;
			text-align: right;
			}
			</style>
			</head>
			<body>
			<div class="panel-body" id="app">

			<el-row class="buttonPanel">
			<el-button @click="exportExcel" type="primary" >导出</el-button>
			</el-row>

			<el-row class="rowPanel" >
			<el-form ref="form" :model="form" inline >
			<el-form-item label="会员" prop="queryKey">
			<el-input v-model="form.queryKey" placeholder="请输入会员姓名/手机"></el-input>
			</el-form-item>

			<el-form-item label="操作人" prop="oprationMan" >
			<el-input v-model="form.oprationMan"></el-input>
			</el-form-item>

			<el-form-item label="订单号" prop="orderNo">
			<el-input v-model="form.orderNo"></el-input>
			</el-form-item>

			<el-form-item label="交易类型" prop="flowType">
			<el-select v-model="form.flowType" placeholder="请选择">
			<el-option
			v-for="item in flowTypeList"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			>
			</el-option>
			</el-select>
			</el-form-item>

			<el-form-item label="支付方式" prop="payMethod">
			<el-select v-model="form.payMethod" placeholder="请选择">
			<el-option
			v-for="item in payMethodList"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			</el-option>
			</el-select>
			</el-form-item>

			<el-form-item label="时间" prop="datetimeArr">
			<el-date-picker
			v-model="form.datetimeArr"
			type="daterange"
			range-separator="至" format="yyyy-MM-dd HH:mm"
			start-placeholder="开始日期"
			end-placeholder="结束日期">
			</el-date-picker>
			</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 id="proj" :data="table.rows" :height="height" stripe @sort-change="sortChange">
			<el-table-column
			prop="orderNo"
			label="订单号"
			width="180">
			</el-table-column>
			<el-table-column
			prop="flowContent"
			label="交易内容"
			show-overflow-tooltip
			width="240">
			</el-table-column>
			<el-table-column
			prop="createTime"
			sortable="custom"
			label="交易时间"
			show-overflow-tooltip
			width="180">
			</el-table-column>
			<el-table-column
			prop="flowType"
			sortable="custom"
			label="交易类型">
			</el-table-column>
			<el-table-column
			prop="amount"
			sortable="custom"
			label="交易金额">
			</el-table-column>
			<el-table-column
			prop="vipName"
			label="会员姓名">
			</el-table-column>
			<el-table-column
			prop="payMethod"
			sortable="custom"
			label="支付方式">
			</el-table-column>
			<el-table-column
			prop="cardName"
			sortable="custom"
			label="储值卡名称">
			</el-table-column>
			<el-table-column
			prop="flowNo"
			label="支付流水号">
			</el-table-column>
			<el-table-column
			prop="staffName"
			label="操作人">
			</el-table-column>
			<el-table-column
			prop="shopName"
			label="门店名称">
			</el-table-column>
			<el-table-column label="操作">
			<template slot-scope="scope">
			<el-button type="text" @click="openOrder(scope.$index, scope.row)" size="small">订单详情</el-button>
			</template>
			</el-table-column>
			</el-table>
			</el-row>
			<el-row class="paginationStyle" >
			<el-pagination background
			@size-change="changePageSize"
			@current-change="changeCurrentPage"
			:current-page="table.currentPage"
			:page-sizes="[10, 20, 30, 50]"
			:page-size="table.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="table.total">
			</el-pagination>
			</el-row>

			</div>
			</body>
			<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/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: {
			table:{
			rows:[],
			total:0,
			pageSize:10,
			currentPage:1,
			},
			form:{
			name:null,
			datetimeArr:'',
			payMethod:'',
			flowType:'',
			orderNo:'',
			oprationMan:'',
			queryKey:'',
			order:'',
			sort:''
			},
			height:'calc(100vh - 240px)',
			flowTypeList:[
			{value:'',label:'全部'},
			{value:'购买',label:'购买'},
			{value:'退款',label:'退款'},
			{value:'还款',label:'还款'}
			],
			payMethodList:[
			{value:'',label:'全部'},
			{value:'现金',label:'现金'},
			{value:'微信',label:'微信'},
			{value:'支付宝',label:'支付宝'},
			{value:'银行卡',label:'银行卡'},
			{value:'团购',label:'团购'},
			{value:'储值卡',label:'储值卡'},
			{value:'欠款',label:'欠款'}
			],
			},
			created: function () {
			this.loadData();
			window.addEventListener("keydown", this.keydown);
			},
			methods: {
			changePageSize(val) {
			this.table.pageSize = val;
			this.loadData();
			},
			changeCurrentPage(val) {
			this.table.currentPage = val;
			this.loadData();
			},
			resetForm(formName) {
			this.$refs[formName].resetFields();
			},
			sortChange:function (column){
			if(column.order){
			if(column.order.indexOf("desc")){
			this.form.order="desc";
			}else{
			this.form.order="asc";
			}
			this.form.sort=column.prop;
			this.loadData();
			}
			},
			loadData:function(){
			let _this = this;
			let data=_this.getRequestParam();
			data.limit=_this.table.pageSize;
			data.offset=_this.table.pageSize*(_this.table.currentPage-1);
			AjaxProxy.requst({
			app: _this,
			data:data,
			url: basePath + '/admin/orderFlow/findOrderFlow',
			callback: function (data) {
			_this.table.rows = data.rows;
			_this.table.total=data.total;
			}
			});
			},
			getRequestParam(){
			let _this = this;
			return {
			name:_this.form.name,
			payMethod:_this.form.payMethod,
			flowType:_this.form.flowType,
			orderNo:_this.form.orderNo,
			oprationMan:_this.form.oprationMan,
			queryKey:_this.form.queryKey,
			startTime:_this.form.datetimeArr?moment(_this.form.datetimeArr[0]).format("YYYY-MM-DD HH:mm"):'',
			endTime:_this.form.datetimeArr?moment(_this.form.datetimeArr[1]).format("YYYY-MM-DD HH:mm"):'',
			shopId:_this.form.shopId,
			order:_this.form.order,
			sort:_this.form.sort,
			}
			},
			search:function(){
			this.table.currentPage=1;
			this.loadData();
			},
			keydown(evt){
			if(evt.keyCode==13) {
			this.search();
			}
			},

			openOrder(index,row){
			layer.full(layer.open({
			type : 2,
			title : "订单详情",
			maxmin : true,
			content : [ basePath + '/admin/order/orderItem?id=' + row.orderId ]
			}));
			},
			//导出
			exportExcel(){
			window.location.href=basePath+"/admin/orderFlow/exportOrderFlowExcel?"+MTools.jsonToUrlParam(this.getRequestParam());
			}

			}
			});


			</script>
			</body>
			</html>