airConditionerWebManager/src/views/userMgr/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title">用户管理</div>
						<div class="title-right">
							<el-button type="primary" @click="handler_download_excel">导出表单</el-button>
							<el-button type="warning" @click="add_user">新增用户</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-form-item>
							<el-form-item>
								<el-button type="warning" @click="btn_search">查询</el-button>
							</el-form-item>
							<el-form-item label="">
								<el-select v-model="formInline.category" placeholder="类别" @change="btn_search"
									clearable>
									<el-option label="学生" value="学生"></el-option>
									<el-option label="教工" value="教工"></el-option>
									<el-option label="员工" value="员工"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style"
							:header-cell-style="header_cell_style">
							<el-table-column label="序号" align="center" width="100">
								<template slot-scope="scope">
									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.user_name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="手机" align="center" width="180">
								<template slot-scope="scope">
									<span>{{ scope.row.phone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="身份证" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.sfzh }}</span>
								</template>
							</el-table-column>
							<el-table-column label="类别" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.classfy }}</span>
								</template>
							</el-table-column>
							<el-table-column label="年级" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.bj }}</span>
								</template>
							</el-table-column>
							<el-table-column label="账户余额（元）" align="center" width="180">
								<template slot-scope="scope">
									<span>{{ scope.row.balance }}</span>
								</template>
							</el-table-column>
							<el-table-column label="备注" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.remark }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="mini" class="btn-table" @click="recharge(scope.$index, scope.row)">
										充值</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange"
								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 新增用户对话框 -->
		<el-dialog title="新增用户" custom-class="add-user-dialog" :visible.sync="dialogAddUserVisible"
			:close-on-click-modal="false" :close-on-press-escape="false" @close="add_user_dialog_close">
			<el-form :model="addForm" ref="addUserForm" :rules="addFormRules">
				<el-form-item label="姓　　名：" :label-width="formLabelWidth" :required="true" prop="user_name">
					<el-input v-model="addForm.user_name" autocomplete="off" maxlength="10" ref="username_focus">
					</el-input>
				</el-form-item>
				<el-form-item label="手　　机：" :label-width="formLabelWidth" :required="true" prop="phone">
					<el-input v-model="addForm.phone" autocomplete="off" maxlength="11"></el-input>
				</el-form-item>
				<el-form-item label="身份证号：" :label-width="formLabelWidth" :required="true" prop="sfzh">
					<el-input v-model="addForm.sfzh" autocomplete="off" maxlength="18"></el-input>
				</el-form-item>
				<el-form-item label="类　　别：" :label-width="formLabelWidth" :required="true" prop="classfy">
					<el-select v-model="addForm.classfy" placeholder="类别">
						<el-option label="学生" value="学生"></el-option>
						<el-option label="教工" value="教工"></el-option>
						<el-option label="员工" value="员工"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="年　　级：" :label-width="formLabelWidth" :required="true" prop="bj">
					<el-select v-model="addForm.bj" placeholder="年级">
						<el-option label="大一" value="大一"></el-option>
						<el-option label="大二" value="大二"></el-option>
						<el-option label="大三" value="大三"></el-option>
						<el-option label="大四" value="大四"></el-option>
						<el-option label="非学生" value="非学生"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备　　注：" :label-width="formLabelWidth">
					<el-input type="textarea" resize="none" :rows="4" placeholder="请输入内容" v-model="addForm.remark"
						maxlength="100" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddUserVisible = false">取 消</el-button>
				<el-button type="primary" @click="handler_add_user">新 增</el-button>
			</div>
		</el-dialog>
		<!-- 充值对话框 -->
		<el-dialog title="充值" custom-class="chongzhi-dialog" :visible.sync="dialogChongzhiVisible"
			:close-on-click-modal="false" :close-on-press-escape="false" @close="dialog_close">
			<el-form :model="form" ref="chongzhiForm" :rules="chongzhiRules">
				<el-form-item label="充值账号：" :label-width="formLabelWidth">
					<div>{{form.sfzh}}</div>
				</el-form-item>
				<el-form-item label="姓　　名：" :label-width="formLabelWidth">
					<div>{{form.user_name}}</div>
				</el-form-item>
				<el-form-item label="充值金额：" :label-width="formLabelWidth" :required="true" prop="amount">
					<el-input v-model="form.amount" autocomplete="off" maxlength="3" ref="amount_focus"></el-input>
				</el-form-item>
				<el-form-item label="备　　注：" :label-width="formLabelWidth">
					<el-input type="textarea" resize="none" :rows="4" placeholder="请输入内容" v-model="form.desc"
						maxlength="100" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogChongzhiVisible = false">取 消</el-button>
				<el-button type="primary" @click="handler_chongzhi">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getUserList,
		addUser,
		chongzhi,
		downloadExcel
	} from '@/api/userMgr';
	export default {
		data() {
			var checkUserName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入姓名'));
				}
				setTimeout(() => {
					var reg = /^[\u4E00-\u9FA5]{2,10}$/
					if (!reg.test(value)) {
						callback(new Error('必须为2-10个汉字！'));
					} 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 checkIdCard = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入身份证'));
				}
				setTimeout(() => {
					var reg =
						/^[1-9]\d{5}(18|19|([2]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					if (!reg.test(value)) {
						callback(new Error('身份证不符合要求'));
					} else {
						callback();
					}
				}, 100);
			}
			var checkClassfy = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请选择类别'));
				}
				if (this.addForm.classfy == '学生' && this.addForm.bj == '非学生') {
					return callback(new Error('类型与年级不一致'));
				}
				if ((this.addForm.classfy == '教工' || this.addForm.classfy == '员工') && (this.addForm.bj == '大一' || this
						.addForm.bj == '大二' || this.addForm.bj == '大三' || this.addForm.bj == '大四')) {
					return callback(new Error('类型与年级不一致'));
				}
				callback();
			}
			var checkBj = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请选择年级'));
				}
				if (this.addForm.classfy == '学生' && this.addForm.bj == '非学生') {
					return callback(new Error('类型与年级不一致'));
				}
				if ((this.addForm.classfy == '教工' || this.addForm.classfy == '员工') && (this.addForm.bj == '大一' || this
						.addForm.bj == '大二' || this.addForm.bj == '大三' || this.addForm.bj == '大四')) {
					return callback(new Error('类型与年级不一致'));
				}
				callback();
			}
			var checkMoney = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('金额不能为空'));
				}
				setTimeout(() => {
					var reg = /^([1-9]{1}\d*)$/
					if (!reg.test(value)) {
						callback(new Error('请输入正整数'));
					} else if (value < 1 || value > 200) {
						callback(new Error('范围在1-200'));
					} else {
						callback();
					}
				}, 100);
			}
			return {
				// 弹出对话框数据
				dialogChongzhiVisible: false,
				form: {
					id: '',
					sfzh: '',
					user_name: '',
					amount: '',
					remark: ''
				},
				chongzhiRules: {
					amount: [{
						validator: checkMoney
					}]
				},
				// 添加用户对话框数据
				dialogAddUserVisible: false,
				addForm: {
					user_name: '',
					phone: '',
					sfzh: '',
					classfy: '',
					bj: '',
					remark: ''
				},
				addFormRules: {
					user_name: [{
						validator: checkUserName
					}],
					phone: [{
						validator: checkPhone
					}],
					sfzh: [{
						validator: checkIdCard
					}],
					classfy: [{
						validator: checkClassfy
					}],
					bj: [{
						validator: checkBj
					}]
				},
				// 查询表单数据
				formInline: {
					user: '',
					category: ''
				},
				tableData: [],
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 8,
					total: 0
				},
				formLabelWidth: '120px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '18px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				}
			}
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
			// 获取用户列表数据
			this.get_user_list('list')
		},
		methods: {
			/**
			 * 下载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)
				})
			},
			/**
			 * 充值
			 */
			handler_chongzhi() {
				this.$refs["chongzhiForm"].validate(validate => {
					if (validate) {
						let params = {
							id: this.form.id,
							balance: this.form.amount
						}
						// 开始发送请求，获取配置数据
						chongzhi(params).then((res) => {
							// console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.dialogChongzhiVisible = false
								this.$message.success('充值成功！')
								this.get_user_list('list')
							} else {
								this.$message.error('未知异常！')
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 打开新增用户对话框
			 */
			add_user() {
				this.dialogAddUserVisible = true

				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.username_focus.focus()
					})
				}, 100)
			},
			/**
			 * 新增用户操作
			 */
			handler_add_user() {
				this.$refs["addUserForm"].validate(validate => {
					console.log(typeof validate);
					console.log(validate);
					if (validate) {
						let params = {
							user_name: this.addForm.user_name,
							phone: this.addForm.phone,
							sfzh: this.addForm.sfzh,
							classfy: this.addForm.classfy,
							bj: this.addForm.bj,
							remark: this.addForm.remark
						}
						// 开始发送请求，获取配置数据
						addUser(params).then((res) => {
							console.log(res);
							if (typeof res.code == 'undefined' || res.code == '') {
								this.$message.error('返回数据格式问题，code未获取到！')
								return
							}

							if (res.code == 200) {
								this.dialogAddUserVisible = false
								this.$message.success('新增用户成功！')
								this.get_user_list('list')
							} else {
								this.$message.error('未知异常！')
							}
						}).catch((err) => {
							// console.log(err);
							this.$message.error(err.message)
						})
					} else {
						this.$message.error('验证不通过')
						return false
					}
				})
			},
			/**
			 * 获取用户列表数据
			 */
			get_user_list(param) {
				let params = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}
				if (param == 'search') {
					params.page = 1
					if (this.formInline.user !== '') {
						params.name_card = this.formInline.user
					}
					if (this.formInline.category !== '') {
						params.classfy = this.formInline.category
					}
				}
				// 开始发送请求，获取配置数据
				getUserList(params).then((res) => {
					// console.log(res.rows);
					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.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 查询
			 */
			btn_search() {
				this.get_user_list('search')
			},
			/**
			 * 充值对话框初始化
			 * @param {Object} index
			 * @param {Object} row
			 */
			recharge(index, row) {
				// console.log(index, row);
				this.dialogChongzhiVisible = true
				this.form.id = row.id
				this.form.sfzh = row.sfzh
				this.form.user_name = row.user_name
				// 使金额输入框input_amount获得焦点
				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.amount_focus.focus()
					})
				}, 100)
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_user_list('pages')
			},
			/**
			 * 对话框关闭时清理数据
			 */
			add_user_dialog_close() {
				this.addForm = {}
			},
			/**
			 * 对话框关闭时清理数据
			 */
			dialog_close() {
				this.form = {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title {
							font-size: 22px;
							font-family: Microsoft YaHei-3970(82674968);
							font-weight: bold;
							color: #1A202B;
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.el-button--warning {
							background: #F88A64;
						}

						.btn-table {
							border-radius: 15px !important;
							border-color: #5488FE;
							color: #5488FE;
						}

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;
							padding-right: 100px;

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 600px;
			height: 500px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				background: #E6EBFE;
				border-radius: 10px 10px 0px 0px;
				font-weight: bold;
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item__label,
				.el-form-item__content {
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #53575A;
				}

				.el-input__inner {
					width: 180px;
				}
			}

			.el-dialog__footer {
				padding-bottom: 0 !important;
				text-align: center;

				.el-button.el-button--default {
					width: 75px;
					height: 40px;
					border: 1px solid #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #2B4CFE;
				}

				.el-button.el-button--primary {
					width: 75px;
					height: 40px;
					background: #2B4CFE;
					border-radius: 6px;
					font-size: 16px;
					font-family: Microsoft YaHei-3970(82674968);
					color: #FFFFFF;
					margin-left: 60px;
				}
			}
		}
	}
</style>

<style>
	.add-user-dialog {
		height: 600px !important;
	}

	.chongzhi-dialog {
		height: 500px !important;
	}
</style>