只差空调管理模块，其他全部完成。

src/api/accountMgr.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+// 获取账号列表数据
+export function getTableData(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+	return request({
+		url: '/airManage/adminlist.action',
+		method: 'post',
+		data
+	})
+}
+
+// 新增管理员
+export function addAccount(param) {
+	let data = {
+		admin_name: param.username,
+		phone: param.phone,
+		password: param.password,
+		level: param.checkedRole[0] == '超级管理员' ? 2 : 1,
+		remark: param.comment
+	}
+	return request({
+		url: '/airManage/admininsert.action',
+		method: 'post',
+		data
+	})
+}
+
+// 修改管理员
+export function modifyAccount(param) {
+	let data = {
+		id: param.id,
+		admin_name: param.username,
+		phone: param.phone,
+		password: param.password,
+		level: param.checkedRole[0] == '超级管理员' ? 2 : 1,
+		remark: param.comment
+	}
+	return request({
+		url: '/airManage/adminupdate.action',
+		method: 'post',
+		data
+	})
+}
+
+// 删除管理员
+export function deleteAccount(param) {
+	let data = new FormData()
+	data.append('id', param)
+	return request({
+		url: '/airManage/admindel.action',
+		method: 'post',
+		data
+	})
+}

src/api/consumptionRecord.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+// 获取3个数据
+export function getThreeData() {
+	return request({
+		url: '/airManage/consumequeryTongji.action',
+		method: 'post'
+	})
+}
+
+// 获取消费记录,表格数据
+export function getTableData(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+	if (typeof forData.name_card != 'undefined') {
+		data.append('name_card', forData.name_card)
+	}
+	if (typeof forData.start_time != 'undefined') {
+		data.append('start_time', forData.start_time)
+	}
+	if (typeof forData.end_time != 'undefined') {
+		data.append('end_time', forData.end_time)
+	}
+	if (typeof forData.state != 'undefined') {
+		data.append('state', forData.state)
+	}
+	return request({
+		url: '/airManage/consumequeryPage.action',
+		method: 'post',
+		data
+	})
+}
+
+
+// 下载
+export function downloadExcel() {
+	return request({
+		url: '/airManage/consumetoExcel.action',
+		method: 'post'
+	})
+}

src/api/rechargeRecord.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+// 获取3个数据
+export function getThreeData() {
+	return request({
+		url: '/airManage/rechargequeryTongji.action',
+		method: 'post'
+	})
+}
+
+// 获取充值记录,表格数据
+export function getTableData(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+	if (typeof forData.name_card != 'undefined') {
+		data.append('name_card', forData.name_card)
+	}
+	if (typeof forData.start_time != 'undefined') {
+		data.append('start_time', forData.start_time)
+	}
+	if (typeof forData.end_time != 'undefined') {
+		data.append('end_time', forData.end_time)
+	}
+	if (typeof forData.state != 'undefined') {
+		data.append('state', forData.state)
+	}
+	return request({
+		url: '/airManage/rechargequeryPage.action',
+		method: 'post',
+		data
+	})
+}
+
+
+// 下载
+export function downloadExcel() {
+	return request({
+		url: '/airManage/rechargetoExcel.action',
+		method: 'post'
+	})
+}

src/api/userMgr.js

@@ -1,4 +1,3 @@
-import service from '@/utils/request'
 import request from '@/utils/request'
 
 // 用户列表

src/views/accountMgr/index.vue

@@ -26,17 +26,18 @@
 							</el-table-column>
 							<el-table-column label="姓名" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.name }}</span>
+									<span>{{ scope.row.admin_name }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="角色" align="center">
 								<template slot-scope="scope">
-									{{scope.row.role}}
+									<span v-if="scope.row.level == 1">管理员</span>
+									<span v-else>超级管理员</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="备注" align="center" width="200">
 								<template slot-scope="scope">
-									<span>{{ scope.row.comment }}</span>
+									<span>{{ scope.row.remark }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="操作" align="center">
@@ -59,38 +60,63 @@
 				</div>
 			</el-col>
 		</el-row>
-		<el-dialog title="添加账号" :visible.sync="dialogAddAcountFormVisible" :close-on-click-modal="false"
-			:close-on-press-escape="false" @close="add_account_dialog_close">
-			<el-form :model="formAddAcount">
-				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
-					<el-input v-model="formAddAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
+		<el-dialog title="添加账号" custom-class="add-account-class" :visible.sync="dialogAddAcountFormVisible"
+			:close-on-click-modal="false" :close-on-press-escape="false" @close="add_account_dialog_close">
+			<el-form :model="formAddAcount" ref="addAccountForm" :rules="addAccountFormRules">
+				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true" prop="username">
+					<el-input v-model="formAddAcount.username" autocomplete="off" placeholder="请输入用户名" maxlength="10">
+					</el-input>
 				</el-form-item>
-				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
-					<el-input v-model="formAddAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
+				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true" prop="phone">
+					<el-input v-model="formAddAcount.phone" autocomplete="off" placeholder="请输入手机号" maxlength="11">
+					</el-input>
 				</el-form-item>
-				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
+				<el-form-item label="密　码：" :label-width="formLabelWidth" :required="true" prop="password">
+					<el-input v-model="formAddAcount.password" type="password" autocomplete="off" placeholder="请输入密码"
+						maxlength="16">
+					</el-input>
+				</el-form-item>
+				<el-form-item label="确认密码：" :label-width="formLabelWidth" :required="true" prop="confirmPassword">
+					<el-input v-model="formAddAcount.confirmPassword" type="password" autocomplete="off"
+						placeholder="请输入确认密码" maxlength="16">
+					</el-input>
+				</el-form-item>
+				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true" prop="checkedRole">
 					<el-checkbox-group v-model="formAddAcount.checkedRole" :min="0" :max="1">
-						<el-checkbox v-for="(role, index) in formAddAcount.roles" :label="role" :key="index">{{role}}
+						<el-checkbox v-for="(role, index) in formAddAcount.roles" :label="role" :key="role">{{role}}
 						</el-checkbox>
 					</el-checkbox-group>
 				</el-form-item>
 				<el-form-item label="备　注：" :label-width="formLabelWidth">
-					<el-input type="textarea" v-model="formAddAcount.comment" placeholder="请输入备注信息"></el-input>
+					<el-input type="textarea" v-model="formAddAcount.comment" placeholder="请输入备注信息" resize="none"
+						maxlength="100" show-word-limit></el-input>
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click="dialogAddAcountFormVisible = false">取 消</el-button>
-				<el-button type="primary" @click="dialogAddAcountFormVisible = false">确 认</el-button>
+				<el-button type="primary" @click="add_account_dialog">确 认</el-button>
 			</div>
 		</el-dialog>
-		<el-dialog title="修改账号" :visible.sync="dialogModifyAcountFormVisible" :close-on-click-modal="false"
-			:close-on-press-escape="false" @close="modify_account_dialog_close">
-			<el-form :model="formModifyAcount">
+		<el-dialog title="修改账号" custom-class="modify-account-class" :visible.sync="dialogModifyAcountFormVisible"
+			:close-on-click-modal="false" :close-on-press-escape="false" @close="modify_account_dialog_close">
+			<el-form :model="formModifyAcount" ref="modifyAccountForm" :rules="modifyAccountFormRules">
+				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="formModifyAcount.username" autocomplete="off" placeholder="请输入用户名" readonly
+						maxlength="10"></el-input>
+				</el-form-item>
 				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
-					<el-input v-model="formModifyAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
+					<el-input v-model="formModifyAcount.phone" autocomplete="off" placeholder="请输入手机号" maxlength="11">
+					</el-input>
 				</el-form-item>
-				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
-					<el-input v-model="formModifyAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
+				<el-form-item label="密　码：" :label-width="formLabelWidth" :required="true" prop="password">
+					<el-input v-model="formModifyAcount.password" type="password" autocomplete="off" placeholder="请输入密码"
+						maxlength="16">
+					</el-input>
+				</el-form-item>
+				<el-form-item label="确认密码：" :label-width="formLabelWidth" :required="true" prop="confirmPassword">
+					<el-input v-model="formModifyAcount.confirmPassword" type="password" autocomplete="off"
+						placeholder="请输入确认密码" maxlength="16">
+					</el-input>
 				</el-form-item>
 				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
 					<el-checkbox-group v-model="formModifyAcount.checkedRole" :min="0" :max="1">
@@ -99,51 +125,161 @@
 					</el-checkbox-group>
 				</el-form-item>
 				<el-form-item label="备　注：" :label-width="formLabelWidth">
-					<el-input type="textarea" v-model="formModifyAcount.comment" placeholder="请输入备注信息"></el-input>
+					<el-input type="textarea" v-model="formModifyAcount.comment" placeholder="请输入备注信息" resize="none"
+						maxlength="100" show-word-limit></el-input>
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click="dialogModifyAcountFormVisible = false">取 消</el-button>
-				<el-button type="primary" @click="dialogModifyAcountFormVisible = false">确 认</el-button>
+				<el-button type="primary" @click="modify_account_dialog">确 认</el-button>
 			</div>
 		</el-dialog>
 		<el-dialog custom-class="el-dialog-delete-account" :visible.sync="dialog_delete_account"
 			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
 			<div slot="" class="del-account-body">
 				<img src="../../icons/serveAC/del_warning.png" alt="">
-				<div class="del-account-body-txt">是否确定将该【{{delete_account}}】从列表中移除？</div>
+				<div class="del-account-body-txt">是否确定将该【{{deleteAccountData.delete_account}}】从列表中移除？</div>
 			</div>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click="dialog_delete_account = false"> 否 </el-button>
-				<el-button type="primary" @click="dialog_delete_account = false"> 是 </el-button>
+				<el-button type="primary" @click="delete_account_dialog"> 是 </el-button>
 			</div>
 		</el-dialog>
 	</div>
 </template>
 
 <script>
-	const roleOptions = ['管理员', '浏览员'];
+	import {
+		getTableData,
+		addAccount,
+		modifyAccount,
+		deleteAccount
+	} from '@/api/accountMgr'
+	const roleOptions = ['管理员', '超级管理员']
 	export default {
 		data() {
+			var checkUserName = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('请输入用户名）'));
+				}
+				setTimeout(() => {
+					var reg = /^\w{6,16}$/
+					if (!reg.test(value)) {
+						callback(new Error('必须为6-16个非空白字符或数字！'));
+					} else {
+						callback();
+					}
+				}, 100);
+			}
+			var checkPhone = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('请输入手机号'));
+				}
+				setTimeout(() => {
+					var reg = /^1[3456789]\d{9}$/
+					if (!reg.test(value)) {
+						callback(new Error('手机号格式不对'));
+					} else {
+						callback();
+					}
+				}, 100);
+			}
+			var checkPwd = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('请输入密码'));
+				}
+				setTimeout(() => {
+					var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
+					if (!reg.test(value)) {
+						callback(new Error('密码至少包含 数字和英文，长度6-16'));
+					} else {
+						callback();
+					}
+				}, 100);
+			}
+			var checkConfirmPwd = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('请输入确认密码'));
+				}
+				setTimeout(() => {
+					var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
+					if (!reg.test(value)) {
+						callback(new Error('确认密码至少包含 数字和英文，长度6-16'));
+					} else if (this.formAddAcount.password !== this.formAddAcount.confirmPassword) {
+						callback(new Error('确认密码与密码不一致！'));
+					} else {
+						callback();
+					}
+				}, 100);
+			}
+			var checkRole = (rule, value, callback) => {
+				if (!(value.length > 0)) {
+					callback(new Error('请选择角色'));
+				} else {
+					callback()
+				}
+			}
 			return {
 				dialogAddAcountFormVisible: false, // 添加账号对话框显示与隐藏
 				formAddAcount: { // 添加账号对话框 数据
 					phone: '',
 					username: '',
+					password: '',
+					confirmPassword: '',
 					comment: '',
 					checkedRole: [],
 					roles: roleOptions
 				},
+				addAccountFormRules: {
+					phone: [{
+						validator: checkPhone
+					}],
+					username: [{
+						validator: checkUserName
+					}],
+					password: [{
+						validator: checkPwd
+					}],
+					confirmPassword: [{
+						validator: checkConfirmPwd
+					}],
+					checkedRole: [{
+						validator: checkRole
+					}]
+				},
 				dialogModifyAcountFormVisible: false, // 修改账号对话框显示与隐藏
 				formModifyAcount: { // 修改账号对话框 数据
+					id: '',
 					phone: '',
 					username: '',
+					password: '',
+					confirmPassword: '',
 					comment: '',
 					checkedRole: [],
 					roles: roleOptions
 				},
+				modifyAccountFormRules: {
+					phone: [{
+						validator: checkPhone
+					}],
+					username: [{
+						validator: checkUserName
+					}],
+					password: [{
+						validator: checkPwd
+					}],
+					confirmPassword: [{
+						validator: checkConfirmPwd
+					}],
+					checkedRole: [{
+						validator: checkRole
+					}]
+				},
 				dialog_delete_account: false,
-				delete_account: '',
+				deleteAccountData: {
+					id: '',
+					delete_account: ''
+				},
 				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {
@@ -158,77 +294,58 @@
 					'font-size': '16px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
-				tableData: [{
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '浏览员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					role: '管理员',
-					comment: '此处是备注内容'
-				}],
+				tableData: [],
 				// 分页参数
 				pagination: {
 					pageSize: 10,
 					currentPage: 1,
-					total: 100
+					total: 0
 				}
 			}
 		},
+		created() {
+			// 获取消费记录,表格数据
+			this.get_table_data()
+		},
 		mounted() {
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
 			/**
+			 * 获取账号列表数据
+			 */
+			get_table_data() {
+				let data = {
+					page: this.pagination.currentPage,
+					rows: this.pagination.pageSize
+				}
+				// console.log(data);
+				getTableData(data).then((res) => {
+					// console.log(res);
+					if (typeof res.rows !== 'undefined' && res.rows !== '') {
+						this.pagination.total = res.total
+						this.tableData = []
+						for (var i = 0; i < res.rows.length; i++) {
+							this.tableData.push(res.rows[i])
+						}
+					} else {
+						this.tableData = []
+						this.$message.warning('没有符合条件的数据！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
 			 * 删除账号
 			 * @param {Object} index
 			 * @param {Object} row
 			 */
 			delete_amount(index, row) {
-				console.log(row);
-				this.delete_account = row.name
+				// console.log(index, row);
+				this.deleteAccountData.id = row.id
+				this.deleteAccountData.delete_account = row.admin_name
 				this.dialog_delete_account = true
 			},
 			/**
@@ -237,37 +354,129 @@
 			 * @param {Object} row
 			 */
 			edit_amount(index, row) {
+				// console.log(index, row);
 				this.dialogModifyAcountFormVisible = true
+				this.formModifyAcount.id = row.id
+				this.formModifyAcount.username = row.admin_name
 				this.formModifyAcount.phone = row.phone
-				this.formModifyAcount.username = row.name
-				this.formModifyAcount.checkedRole.push(row.role)
-				this.formModifyAcount.comment = row.comment
+				if (row.level == 1) {
+					this.formModifyAcount.checkedRole.push('管理员')
+				} else {
+					this.formModifyAcount.checkedRole.push('超级管理员')
+				}
+				this.formModifyAcount.comment = row.remark
 			},
 			/**
-			 * 添加账号
+			 * 添加账号对话框弹出
 			 */
 			add_account() {
 				this.dialogAddAcountFormVisible = true
 			},
 			/**
+			 * 添加账号对话框确定按钮事件
+			 */
+			add_account_dialog() {
+				this.$refs["addAccountForm"].validate(validate => {
+					if (validate) {
+						// console.log(this.formAddAcount);
+						addAccount(this.formAddAcount).then((res) => {
+							// console.log(res);
+							if (typeof res.code == 'undefined' || res.code == '') {
+								this.$message.error('返回数据格式问题，code未获取到！')
+								return
+							}
+
+							if (res.code == 200) {
+								this.get_table_data()
+								this.dialogAddAcountFormVisible = false
+								this.$message.success('添加成功！')
+							} else {
+								this.$message.error('返回的数据异常！')
+							}
+						}).catch((err) => {
+							// console.log(err);
+							this.$message.error(err.message)
+						})
+					} else {
+						this.$message.error('验证不通过')
+						return false
+					}
+				})
+			},
+			/**
+			 * 添加账号对话框确定按钮事件
+			 */
+			modify_account_dialog() {
+				this.$refs["modifyAccountForm"].validate(validate => {
+					if (validate) {
+						// console.log(this.formAddAcount);
+						modifyAccount(this.formModifyAcount).then((res) => {
+							// console.log(res);
+							if (typeof res.code == 'undefined' || res.code == '') {
+								this.$message.error('返回数据格式问题，code未获取到！')
+								return
+							}
+				
+							if (res.code == 200) {
+								this.get_table_data()
+								this.dialogModifyAcountFormVisible = false
+								this.$message.success('修改成功！')
+							} else {
+								this.$message.error('返回的数据异常！')
+							}
+						}).catch((err) => {
+							// console.log(err);
+							this.$message.error(err.message)
+						})
+					} else {
+						this.$message.error('验证不通过')
+						return false
+					}
+				})
+			},
+			delete_account_dialog() {
+				deleteAccount(this.deleteAccountData.id).then((res) => {
+					// console.log(res);
+					if (typeof res.code == 'undefined' || res.code == '') {
+						this.$message.error('返回数据格式问题，code未获取到！')
+						return
+					}
+				
+					if (res.code == 200) {
+						this.get_table_data()
+						this.dialog_delete_account = false
+						this.$message.success('删除成功！')
+					} else {
+						this.$message.error('返回的数据异常！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
 			 * 添加账号对话框关闭时清理数据
 			 */
 			add_account_dialog_close() {
 				this.formAddAcount = {
 					phone: '',
 					username: '',
+					password: '',
+					confirmPassword: '',
 					comment: '',
 					checkedRole: [],
 					roles: roleOptions
 				}
 			},
 			/**
-			 * 添加账号对话框关闭时清理数据
+			 * 修改账号对话框关闭时清理数据
 			 */
 			modify_account_dialog_close() {
 				this.formModifyAcount = {
 					phone: '',
 					username: '',
+					password: '',
+					confirmPassword: '',
 					comment: '',
 					checkedRole: [],
 					roles: roleOptions
@@ -278,7 +487,8 @@
 			 * @param {Object} val
 			 */
 			currentPageChange(val) {
-				console.log('当前页:' + val);
+				this.pagination.currentPage = val
+				this.get_table_data()
 			}
 		}
 	}
@@ -505,6 +715,11 @@
 </style>
 
 <style>
+	.add-account-class,
+	.modify-account-class {
+		height: 570px !important;
+	}
+
 	.el-dialog-delete-account {
 		height: 300px !important;
 		width: 460px !important;

src/views/consumptionRecord/index.vue

@@ -11,28 +11,29 @@
 							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
 						</div>
 						<div class="title-right">
-							<el-button type="primary">导出表单</el-button>
+							<el-button type="primary" @click="handler_download_excel">导出表单</el-button>
 						</div>
 					</div>
 					<div class="cell-body">
 						<el-form :inline="true" :model="formInline" class="demo-form-inline">
 							<el-form-item label="关键字：">
-								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证" clearable></el-input>
 							</el-form-item>
 							<el-form-item>
 								<el-button type="warning" @click="btn_search">查询</el-button>
 							</el-form-item>
 							<el-form-item label="时间筛选：">
 								<el-date-picker v-model="search_datatime" type="datetimerange" align="right"
-									start-placeholder="开始日期" end-placeholder="结束日期"
-									:default-time="['12:00:00', '08:00:00']">
+									start-placeholder="开始日期" end-placeholder="结束日期" @change="search_datetime_change"
+									:default-time="['00:00:00', '23:59:59']" clearable
+									value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="支付状态">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
+								<el-select v-model="formInline.state" placeholder="支付状态" @change="search_state_change"
+									clearable>
+									<el-option label="支付成功" value="1"></el-option>
+									<el-option label="支付失败" value="0"></el-option>
 								</el-select>
 							</el-form-item>
 						</el-form>
@@ -45,7 +46,7 @@
 							</el-table-column>
 							<el-table-column label="姓名" align="center" width="100">
 								<template slot-scope="scope">
-									<span>{{ scope.row.name }}</span>
+									<span>{{ scope.row.user_name }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="手机" align="center" width="120">
@@ -55,49 +56,48 @@
 							</el-table-column>
 							<el-table-column label="楼栋" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.building }}</span>
+									<span>{{ scope.row.build }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="楼层" align="center" width="80">
 								<template slot-scope="scope">
-									<span>{{ scope.row.floor }}</span>
+									<span>{{ scope.row.floors }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="房间号" align="center" width="90">
 								<template slot-scope="scope">
-									<span>{{ scope.row.room }}</span>
+									<span>{{ scope.row.dom }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="操作状态" align="center" width="90">
 								<template slot-scope="scope">
-									<span>{{ scope.row.status }}</span>
+									<span>{{ scope.row.handler_state }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="到账金额（元）" align="center" width="140">
 								<template slot-scope="scope">
-									<span>{{ scope.row.arrivalAmount }}</span>
+									<span>{{ scope.row.account }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="账户余额（元）" align="center" width="140">
 								<template slot-scope="scope">
-									<span>{{ scope.row.accountBalance }}</span>
+									<span>{{ scope.row.balance }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="支付状态" align="center" width="150">
 								<template slot-scope="scope">
-									<span v-if="scope.row.payStatus == '支付成功'"
-										class="txt-cell-green">{{ scope.row.payStatus }}</span>
-									<span v-else class="txt-cell-red">{{ scope.row.payStatus }}</span>
+									<span v-if="scope.row.state == 1" class="txt-cell-green">支付成功</span>
+									<span v-else class="txt-cell-red">支付失败</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="交易流水号" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.payNumber }}</span>
+									<span>{{ scope.row.order_num }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="支付时间" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.payTime }}</span>
+									<span>{{ scope.row.time }}</span>
 								</template>
 							</el-table-column>
 						</el-table>
@@ -115,13 +115,17 @@
 </template>
 
 <script>
+	import {
+		getThreeData,
+		getTableData,
+		downloadExcel
+	} from '@/api/consumptionRecord'
 	export default {
 		data() {
 			return {
 				total_balance: 0.0.toFixed(2), // 总余额
 				total_consumption: 0.0.toFixed(2), // 总消费
 				total_number: 0, // 总交易笔数
-				search_datatime: '',
 				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {
@@ -136,190 +140,151 @@
 					'font-size': '16px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
+				search_datatime: '',
 				// 表单数据
 				formInline: {
 					user: '',
-					category: ''
+					startTime: '',
+					endTime: '',
+					state: ''
 				},
-				tableData: [{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				},{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				},{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				},{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				},{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				},{
-					name: '王小小小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小小虎',
-					phone: '18988888888',
-					building: '学生活动中心',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '消费',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}],
+				tableData: [],
 				// 分页参数
 				pagination: {
-					pageSize: 10,
+					pageSize: 8,
 					currentPage: 1,
-					total: 100
+					total: 0
 				}
 			}
 		},
+		created() {
+			// 获取3个数据
+			this.get_three_data()
+			// 获取消费记录,表格数据
+			this.get_table_data('list')
+		},
 		mounted() {
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
-			btn_search() {
-				console.log('查询');
+			/**
+			 * 下载Excel表格
+			 */
+			handler_download_excel() {
+				// 开始发送请求，获取配置数据
+				downloadExcel().then((res) => {
+					// console.log(res);
+					if (typeof res.code == 'undefined' || res.code == '') {
+						this.$message.error('返回数据格式问题，code未获取到！')
+						return
+					}
+
+					if (res.code == 200) {
+						this.$message.success('下载成功！')
+						let xls = 'http://demo.xwsyjjy.com' + res.downurl
+						window.open(xls)
+					} else {
+						this.$message.error('返回的数据异常！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
+			 * 搜索状态
+			 */
+			search_state_change() {
+				// 刷新列表
+				this.get_table_data('search')
+			},
+			/**
+			 * 选取的时间进行格式化，赋值给formInline
+			 */
+			search_datetime_change() {
+				// console.log(this.search_datatime);
+				if (this.search_datatime == null) {
+					this.formInline.startTime = ''
+					this.formInline.endTime = ''
+				} else {
+					this.formInline.startTime = this.search_datatime[0]
+					this.formInline.endTime = this.search_datatime[1]
+				}
+				// 刷新列表
+				this.get_table_data('search')
+			},
+			/**
+			 * 获取消费记录,表格数据
+			 */
+			get_table_data(param) {
+				let data = {
+					page: this.pagination.currentPage,
+					rows: this.pagination.pageSize
+				}
+				if (param == 'search') {
+					data.page = 1
+					if (this.formInline.user !== '') {
+						data.name_card = this.formInline.user
+					}
+					if (this.formInline.startTime !== '') {
+						data.start_time = this.formInline.startTime
+					}
+					if (this.formInline.endTime !== '') {
+						data.end_time = this.formInline.endTime
+					}
+					if (this.formInline.state !== '') {
+						data.state = this.formInline.state
+					}
+				}
+				// console.log(data);
+				getTableData(data).then((res) => {
+					// console.log(res);
+					if (typeof res.rows !== 'undefined' && res.rows !== '') {
+						this.pagination.total = res.total
+						this.tableData = []
+						for (var i = 0; i < res.rows.length; i++) {
+							this.tableData.push(res.rows[i])
+						}
+					} else {
+						this.tableData = []
+						this.$message.warning('没有符合条件的数据！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
 			},
-			// 对话框关闭时清理数据
-			dialog_close() {
-				this.form = {}
+			/**
+			 * 获取3个数据
+			 */
+			get_three_data() {
+				getThreeData().then((res) => {
+					// console.log(res);
+					if (res.code == 200) {
+						this.total_balance = res.TotalYe.toFixed(2) // 总余额
+						this.total_consumption = res.zongConsume.toFixed(2) // 总消费
+						this.total_number = res.zongRecord // 总交易笔数
+					} else {
+						this.$message.error('返回的数据异常！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
+			 * 搜索
+			 */
+			btn_search() {
+				this.get_table_data('search')
 			},
-			// currentPage 改变时会触发
+			/**
+			 * currentPage 改变时会触发
+			 * @param {Object} val
+			 */
 			currentPageChange(val) {
-				console.log('当前页:' + val);
+				this.pagination.currentPage = val
+				this.get_table_data('pages')
 			}
 		}
 	}

src/views/rechargeRecord/index.vue

@@ -11,28 +11,29 @@
 							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
 						</div>
 						<div class="title-right">
-							<el-button type="primary">导出表单</el-button>
+							<el-button type="primary" @click="handler_download_excel">导出表单</el-button>
 						</div>
 					</div>
 					<div class="cell-body">
 						<el-form :inline="true" :model="formInline" class="demo-form-inline">
 							<el-form-item label="关键字：">
-								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+								<el-input v-model="formInline.user" clearable placeholder="请输入姓名或身份证"></el-input>
 							</el-form-item>
 							<el-form-item>
 								<el-button type="warning" @click="btn_search">查询</el-button>
 							</el-form-item>
 							<el-form-item label="时间筛选：">
 								<el-date-picker v-model="search_datatime" type="datetimerange" align="right"
-									start-placeholder="开始日期" end-placeholder="结束日期"
-									:default-time="['12:00:00', '08:00:00']">
+									start-placeholder="开始日期" end-placeholder="结束日期" @change="search_datetime_change"
+									:default-time="['12:00:00', '08:00:00']" value-format="yyyy-MM-dd HH:mm:ss"
+									format="yyyy-MM-dd HH:mm:ss" clearable>
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="支付状态">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
+								<el-select v-model="formInline.state" placeholder="支付状态" @change="search_state_change"
+									clearable>
+									<el-option label="支付成功" value="1"></el-option>
+									<el-option label="支付失败" value="0"></el-option>
 								</el-select>
 							</el-form-item>
 						</el-form>
@@ -45,7 +46,7 @@
 							</el-table-column>
 							<el-table-column label="姓名" align="center" width="100">
 								<template slot-scope="scope">
-									<span>{{ scope.row.name }}</span>
+									<span>{{ scope.row.user_name }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="手机" align="center" width="180">
@@ -53,36 +54,35 @@
 									<span>{{ scope.row.phone }}</span>
 								</template>
 							</el-table-column>
-							<el-table-column label="操作状态" align="center" width="150">
+							<!-- <el-table-column label="身份证号" align="center" width="150">
 								<template slot-scope="scope">
-									{{scope.row.status}}
+									{{scope.row.sfzh}}
 								</template>
-							</el-table-column>
+							</el-table-column> -->
 							<el-table-column label="到账金额（元）" align="center" width="200">
 								<template slot-scope="scope">
-									<span>{{ scope.row.arrivalAmount }}</span>
+									<span>{{ scope.row.account }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="账户余额（元）" align="center" width="200">
 								<template slot-scope="scope">
-									<span>{{ scope.row.accountBalance }}</span>
+									<span>{{ scope.row.balance }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="支付状态" align="center" width="150">
 								<template slot-scope="scope">
-									<span v-if="scope.row.payStatus == '支付成功'"
-										class="txt-cell-green">{{ scope.row.payStatus }}</span>
-									<span v-else class="txt-cell-red">{{ scope.row.payStatus }}</span>
+									<span v-if="scope.row.state == 1" class="txt-cell-green">支付成功</span>
+									<span v-else class="txt-cell-red">支付失败</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="交易流水号" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.payNumber }}</span>
+									<span>{{ scope.row.order_num }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="支付时间" align="center">
 								<template slot-scope="scope">
-									<span>{{ scope.row.payTime }}</span>
+									<span>{{ scope.row.time }}</span>
 								</template>
 							</el-table-column>
 						</el-table>
@@ -100,13 +100,17 @@
 </template>
 
 <script>
+	import {
+		getThreeData,
+		getTableData,
+		downloadExcel
+	} from '@/api/rechargeRecord'
 	export default {
 		data() {
 			return {
 				total_balance: 0.0.toFixed(2), // 总余额
 				total_recharge: 0.0.toFixed(2), // 总充值
 				total_number: 0, // 总交易笔数
-				search_datatime: '',
 				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {
@@ -121,164 +125,151 @@
 					'font-size': '16px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
+				search_datatime: '',
 				// 表单数据
 				formInline: {
 					user: '',
-					category: ''
+					startTime: '',
+					endTime: '',
+					state: ''
 				},
-				tableData: [{
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '5F',
-					room: '501',
-					device: '1.5P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付成功',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}, {
-					name: '王小虎',
-					phone: '18988888888',
-					building: '科技楼',
-					floor: '2F',
-					room: '201',
-					device: '2P',
-					status: '充值',
-					arrivalAmount: 100.0.toFixed(2),
-					accountBalance: 100.01.toFixed(2),
-					payStatus: '支付失败',
-					payNumber: '2562656562695',
-					payTime: '2022-06-23 15:25:25'
-				}],
+				tableData: [],
 				// 分页参数
 				pagination: {
-					pageSize: 10,
+					pageSize: 8,
 					currentPage: 1,
-					total: 100
+					total: 0
 				}
 			}
 		},
+		created() {
+			// 获取3个数据
+			this.get_three_data()
+			// 获取消费记录,表格数据
+			this.get_table_data('list')
+		},
 		mounted() {
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
-			btn_search() {
-				console.log('查询');
+			/**
+			 * 下载Excel表格
+			 */
+			handler_download_excel() {
+				// 开始发送请求，获取配置数据
+				downloadExcel().then((res) => {
+					// console.log(res);
+					if (typeof res.code == 'undefined' || res.code == '') {
+						this.$message.error('返回数据格式问题，code未获取到！')
+						return
+					}
+
+					if (res.code == 200) {
+						this.$message.success('下载成功！')
+						let xls = 'http://demo.xwsyjjy.com' + res.downurl
+						window.open(xls)
+					} else {
+						this.$message.error('返回的数据异常！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
+			 * 选取的时间进行格式化，赋值给formInline
+			 */
+			search_datetime_change() {
+				// console.log(this.search_datatime);
+				if (this.search_datatime == null) {
+					this.formInline.startTime = ''
+					this.formInline.endTime = ''
+				} else {
+					this.formInline.startTime = this.search_datatime[0]
+					this.formInline.endTime = this.search_datatime[1]
+				}
+				// 刷新列表
+				this.get_table_data('search')
+			},
+			/**
+			 * 搜索状态
+			 */
+			search_state_change() {
+				// 刷新列表
+				this.get_table_data('search')
 			},
-			// 对话框关闭时清理数据
-			dialog_close() {
-				this.form = {}
+			/**
+			 * 获取3个数据
+			 */
+			get_three_data() {
+				getThreeData().then((res) => {
+					// console.log(res);
+					if (res.code == 200) {
+						this.total_balance = res.TotalYe.toFixed(2) // 总余额
+						this.total_recharge = res.zongRecharge.toFixed(2) // 总消费
+						this.total_number = res.zongRecord // 总交易笔数
+					} else {
+						this.$message.error('返回的数据异常！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
+			 * 获取消费记录,表格数据
+			 */
+			get_table_data(param) {
+				let data = {
+					page: this.pagination.currentPage,
+					rows: this.pagination.pageSize
+				}
+				if (param == 'search') {
+					data.page = 1
+					if (this.formInline.user !== '') {
+						data.name_card = this.formInline.user
+					}
+					if (this.formInline.startTime !== '') {
+						data.start_time = this.formInline.startTime
+					}
+					if (this.formInline.endTime !== '') {
+						data.end_time = this.formInline.endTime
+					}
+					if (this.formInline.state !== '') {
+						data.state = this.formInline.state
+					}
+				}
+				// console.log(data);
+				getTableData(data).then((res) => {
+					// console.log(res);
+					if (typeof res.rows !== 'undefined' && res.rows !== '') {
+						this.pagination.total = res.total
+						this.tableData = []
+						for (var i = 0; i < res.rows.length; i++) {
+							this.tableData.push(res.rows[i])
+						}
+					} else {
+						this.tableData = []
+						this.$message.warning('没有符合条件的数据！')
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				})
+			},
+			/**
+			 * 搜索
+			 */
+			btn_search() {
+				this.get_table_data('search')
 			},
-			// currentPage 改变时会触发
+			/**
+			 * currentPage 改变时会触发
+			 * @param {Object} val
+			 */
 			currentPageChange(val) {
-				console.log('当前页:' + val);
+				this.pagination.currentPage = val
+				this.get_table_data('pages')
 			}
 		}
 	}

src/views/userMgr/index.vue

@@ -13,7 +13,7 @@
 					<div class="cell-body">
 						<el-form :inline="true" :model="formInline" class="demo-form-inline">
 							<el-form-item label="关键字：">
-								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证" clearable></el-input>
 							</el-form-item>
 							<el-form-item>
 								<el-button type="warning" @click="btn_search">查询</el-button>
@@ -312,11 +312,13 @@
 				}
 			}
 		},
-		mounted() {
-			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		created() {
 			// 获取用户列表数据
 			this.get_user_list('list')
 		},
+		mounted() {
+			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		},
 		methods: {
 			/**
 			 * 下载Excel表格
@@ -324,7 +326,7 @@
 			handler_download_excel() {
 				// 开始发送请求，获取配置数据
 				downloadExcel().then((res) => {
-					console.log(res);
+					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
 						this.$message.error('返回数据格式问题，code未获取到！')
 						return
@@ -335,7 +337,7 @@
 						let xls = 'http://demo.xwsyjjy.com' + res.downurl
 						window.open(xls)
 					} else {
-						this.$message.error('未知异常！')
+						this.$message.error('返回的数据异常！')
 					}
 				}).catch((err) => {
 					// console.log(err);
@@ -365,7 +367,7 @@
 								this.$message.success('充值成功！')
 								this.get_user_list('list')
 							} else {
-								this.$message.error('未知异常！')
+								this.$message.error('返回的数据异常！')
 							}
 						}).catch((err) => {
 							// console.log(err);
@@ -394,8 +396,8 @@
 			 */
 			handler_add_user() {
 				this.$refs["addUserForm"].validate(validate => {
-					console.log(typeof validate);
-					console.log(validate);
+					// console.log(typeof validate);
+					// console.log(validate);
 					if (validate) {
 						let params = {
 							user_name: this.addForm.user_name,
@@ -418,7 +420,7 @@
 								this.$message.success('新增用户成功！')
 								this.get_user_list('list')
 							} else {
-								this.$message.error('未知异常！')
+								this.$message.error('返回的数据异常！')
 							}
 						}).catch((err) => {
 							// console.log(err);
@@ -434,21 +436,21 @@
 			 * 获取用户列表数据
 			 */
 			get_user_list(param) {
-				let params = {
+				let data = {
 					page: this.pagination.currentPage,
 					rows: this.pagination.pageSize
 				}
 				if (param == 'search') {
-					params.page = 1
+					data.page = 1
 					if (this.formInline.user !== '') {
-						params.name_card = this.formInline.user
+						data.name_card = this.formInline.user
 					}
 					if (this.formInline.category !== '') {
-						params.classfy = this.formInline.category
+						data.classfy = this.formInline.category
 					}
 				}
 				// 开始发送请求，获取配置数据
-				getUserList(params).then((res) => {
+				getUserList(data).then((res) => {
 					// console.log(res.rows);
 					if (typeof res.rows !== 'undefined' && res.rows !== '') {
 						this.pagination.total = res.total
@@ -457,6 +459,7 @@
 							this.tableData.push(res.rows[i])
 						}
 					} else {
+						this.tableData = []
 						this.$message.warning('没有符合条件的数据！')
 					}
 				}).catch((err) => {