pc_manager_travel/src/components/zhuanghaoguanli/zhuanghaoguanli.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">账号管理</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<!-- <el-form :inline="true" class="demo-form-inline">
					<el-form-item label="账号：" class="shuibiaoId">
						<el-input v-model="account" placeholder="请输入账号" clearable maxlength="16"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查找</el-button>
					</el-form-item>
				</el-form> -->
				<div class="btn-add">
					<el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
				</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<!-- <el-table-column label="昵称" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column> -->
					<el-table-column prop="userName" label="账号" align="center"></el-table-column>
					<el-table-column prop="adminType" label="类别" align="center" :formatter="adminType">
					</el-table-column>
					<el-table-column prop="status" label="状态" show-overflow-tooltip :formatter="formatStatus">
					</el-table-column>
					<el-table-column label="操作" align="center" width="80">
						<el-button type="text" class="del-btn" slot-scope="scope" v-if="myUserType === '0'"
							@click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</el-table-column>
					<el-table-column width="130">
						<el-button type="text" slot-scope="scope" v-if="myUserType === '0'"
							@click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :total="total_rows" :current-page.sync="current_page"
							:hide-on-single-page="true" :page-size="page_rows" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 添加对话框 -->
				<el-dialog title="添加账号" :visible.sync="adddialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="addform" :rules="addRules" ref="addform">
						<el-form-item label="账号：" prop="userName" :label-width="formLabelWidth">
							<el-input v-model="addform.userName" autocomplete="off" minlength="5" maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="密码：" prop="password" :label-width="formLabelWidth">
							<el-input v-model="addform.password" type="password" minlength="5" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认密码：" prop="comfirmPass" :label-width="formLabelWidth">
							<el-input v-model="addform.comfirmPass" type="password" minlength="5" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="类别：" prop="adminType" :label-width="formLabelWidth">
							<el-radio v-model="addform.adminType" label="1">管理员</el-radio>
							<el-radio v-model="addform.adminType" label="0">超级管理员</el-radio>
						</el-form-item>
						<el-form-item label="状态：" prop="status" :label-width="formLabelWidth">
							<el-radio v-model="addform.status" label="1">正常</el-radio>
							<el-radio v-model="addform.status" label="0">冻结</el-radio>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="adddialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleAddRow('addform')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 编辑对话框 -->
				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="form" :rules="formRules" ref="form">
						<el-form-item label="账号：" prop="userName" :label-width="formLabelWidth">
							<el-input ref="zhanghao" v-model="form.userName" autocomplete="off" maxlength="16">
							</el-input>
						</el-form-item>
						<!-- <el-form-item label="原密码：" prop="oldPassword" :label-width="formLabelWidth">
							<el-input ref="yuanmima" v-model="form.oldPassword" type="password" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item> -->
						<el-form-item label="新密码：" prop="password" :label-width="formLabelWidth">
							<el-input ref="xinmima" v-model="form.password" autocomplete="off" type="password"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认新密码：" prop="comfirmPass" :label-width="formLabelWidth">
							<el-input ref="querenmima" v-model="form.comfirmPass" autocomplete="off" type="password"
								maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="类别" prop="adminType" :label-width="formLabelWidth">
							<el-radio v-model="form.adminType" label="1">管理员</el-radio>
							<el-radio v-model="form.adminType" label="0">超级管理员</el-radio>
						</el-form-item>
						<el-form-item label="状态：" prop="status" :label-width="formLabelWidth">
							<el-radio v-model="form.status" label="1">正常</el-radio>
							<el-radio v-model="form.status" label="0">冻结</el-radio>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleEditRow('form')">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 删除对话框 -->
				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<div class="box-icon"></div>
					<span class="del-msg">确定删除【{{del_account}}】账号吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="delDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="getDelPwd">确 定</el-button>
						<!-- <el-button type="primary" @click="handleDelRow">确 定</el-button> -->
					</span>
				</el-dialog>
				<!-- 删除账号密码验证对话框 -->
				<!-- <el-dialog title="验证密码" :visible.sync="delDialogEnterPwdVisible" width="500px" top="0vh"
					class="my-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :model="delConfirmPwdform" :rules="delConfirmPwdRules" ref="delConfirmPwdform">
						<el-form-item label="请输入密码：" prop="delPwd" :label-width="formLabelWidth">
							<el-input ref="delPwd" v-model="delConfirmPwdform.delPwd" type="password" autocomplete="off"
								maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="delDialogEnterPwdVisible = false">取 消</el-button>
						<el-button type="primary" @click="getDelPwd('delConfirmPwdform')">确 定</el-button>
					</div>
				</el-dialog> -->
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				myUserType: '',
				addform: { // 添加框的数据绑定
					userName: '',
					password: '',
					comfirmPass: '',
					adminType: '1',
					status: '1',
				},
				addRules: {
					userName: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '账号长度不小于5位',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '密码长度不小于5位',
							trigger: 'blur'
						}
					],
					comfirmPass: [{
							required: true,
							message: '请输入确认密码',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '确认密码长度不小于5位',
							trigger: 'blur'
						}
					]
				},
				form: { // 编辑框的数据绑定
					id: 0,
					userName: '',
					adminType: '1',
					status: '1',
					// oldPassword: '',
					password: '',
					comfirmPass: ''
				},
				formRules: {
					name: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '昵称长度不小于5位',
							trigger: 'blur'
						}
					],
					number: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '账号长度不小于5位',
							trigger: 'blur'
						}
					],
					// oldPassword: [{
					// 		required: true,
					// 		message: '请输入原密码',
					// 		trigger: 'blur'
					// 	},
					// 	{
					// 		min: 5,
					// 		max: 16,
					// 		message: '原密码长度不小于5位',
					// 		trigger: 'blur'
					// 	}
					// ],
					password: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '新密码长度不小于5位',
							trigger: 'blur'
						}
					],
					comfirmPass: [{
							required: true,
							message: '请输入确认新密码',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 16,
							message: '确认新密码长度不小于5位',
							trigger: 'blur'
						}
					]
				},
				delConfirmPwdform: {
					delPwd: '' // 被删除的账号的密码
				},
				// delConfirmPwdRules: {
				// 	delPwd: [{
				// 			required: true,
				// 			message: '请输入密码进行验证',
				// 			trigger: 'blur'
				// 		},
				// 		{
				// 			min: 5,
				// 			max: 16,
				// 			message: '密码长度不小于5位',
				// 			trigger: 'blur'
				// 		}
				// 	]
				// },
				del_id: 0, // 被删除的id
				del_account: '', // 被删除的账号
				account: '', // 需要查找的账号
				login_account: '', // 登陆的账号
				adddialogFormVisible: false, // 控制添加对话框显示、隐藏
				editdialogFormVisible: false, // 控制编辑对话框显示、隐藏
				delDialogEnterPwdVisible: false, // 控制删除账号时输入密码对话框
				delDialogVisible: false, // 控制删除对话框显示、隐藏
				formLabelWidth: '146px', // label宽度
				tableData: [], // 表格数据
				current_page: 1, // 当前所在页码
				page_rows: 8, // 每页显示的记录数
				total_rows: 0, // 总记录数
				token: ''
			}
		},
		created() {
			this.login_account = sessionStorage.getItem('uname')
			this.token = sessionStorage.getItem('token')
			this.myUserType = sessionStorage.getItem('userType')
			// 获取账号列表
			this.updateTable()
		},
		methods: {
			adminType(e) {
				if (e.adminType === '1') {
					return '管理员'
				} else if (e.adminType === '0') {
					return '超级管理员'
				}
				return '普通用户'
			},
			formatStatus(e) {
				if (e.status === '1') {
					return '正常'
				} else if (e.status === '0') {
					return '冻结'
				}
				return '未知'
			},
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.current_page = val

				// 查询账号相关信息
				this.updateTable()
			},
			/**
			 * 管理员列表，填充表格变量
			 */
			updateTable() {
				var _this = this
				_this.tableData = []
				let params = {
					curPage: this.current_page,
					pageSize: this.page_rows,
					orderField: this.login_account
				}
				// if (this.account) {
				// 	params.userName = this.account
				// }
				// _this.rows_total = 0
				this.$axios({
						method: "get",
						url: "/diseaseRight/adminInfo/list",
						headers: {
							'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
						},
						data: params
					})
					.then(res => {
						console.log(res.data);
						if (res.data.success) {
							_this.tableData = res.data.data.list
							_this.total_rows = res.data.data.totalCount
							var i = 0
							for (; i < _this.tableData.length; i++) {
								if (_this.tableData[i].userName == _this.login_account) {
									sessionStorage.setItem('unic', _this.tableData[i].userName)
									break
								}
							}
							// _this.$emit('sonFun', _this.tableData[i].userName)
						} else {
							_this.$message.success('【获取账号】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取账号】请求异常: ' + err);
					})
			},
			/**
			 * 查找账号
			 */
			onSearch() {
				// if (!this.account) {
				// 	this.$message.error('请输入账号')
				// 	return
				// }

				// 查询账号相关信息
				this.updateTable()
			},
			/**
			 * 添加账号
			 */
			handleAdd() {
				this.adddialogFormVisible = true
			},
			/**
			 * 添加一条账号
			 */
			handleAddRow(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(this.addform.userName).trim()) {
							this.$message.error('请输入账号')
							return
						}
						if (!String(this.addform.password).trim()) {
							this.$message.error('请输入密码')
							return
						}
						if (!String(this.addform.comfirmPass).trim()) {
							this.$message.error('请输入确认密码')
							return
						}
						if (String(this.addform.password).trim() != String(this.addform.comfirmPass).trim()) {
							this.$message.error('密码与确认密码不一致！')
							return
						}
						var params = {
							userName: String(this.addform.userName).trim(),
							password: String(this.addform.password).trim(),
							adminType: String(this.addform.adminType).trim(),
							status: String(this.addform.status).trim()
						}
						var _this = this
						this.$axios({
								method: "post",
								url: "/diseaseRight/adminInfo/save",
								headers: {
									'Admin-Token': this.token,
									'Content-type': 'application/json; charset=utf-8'
								},
								data: params
							})
							.then(res => {
								// console.log(res.data);
								if (res.data.success) {
									this.adddialogFormVisible = false
									_this.$message.success('【账号添加】成功！');
									_this.addform = {
										userName: '',
										password: '',
										comfirmPass: '',
										adminType: '1',
										status: '1',
									}
									// 更新列表
									this.updateTable()
								} else if (res.data.message === "数据已存在") {
									_this.$message.error('账号已存在');
								} else {
									_this.$message.error(res.data.message);
								}
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【账号】添加请求异常: ' + err);
							})
					} else {
						// this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 编辑对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				console.log(index, row);
				this.editdialogFormVisible = true
				this.form.id = row.id
				this.form.userName = row.userName
				this.form.adminType = row.adminType
				this.form.status = row.status
				// this.form.oldPassword = ''
				this.form.password = ''
				this.form.comfirmPass = ''
			},
			/**
			 * 编辑更新指定的id所在的行
			 */
			handleEditRow(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!String(_this.form.userName).trim()) {
							_this.$message.error('请输入账号')
							_this.$refs['nicheng'].focus()
							return
						}
						// if (!String(_this.form.oldPassword).trim()) {
						// 	_this.$message.error('请输入原密码')
						// 	_this.$refs['yuanmima'].focus()
						// 	return
						// }
						if (!String(_this.form.password).trim()) {
							_this.$message.error('请输入新密码')
							_this.$refs['xinmima'].focus()
							return
						}
						if (String(_this.form.password).trim() != String(_this.form.comfirmPass).trim()) {
							_this.$message.error('新密码和确认新密码不一致！')
							_this.$refs['querenmima'].focus()
							return
						}
						if (!String(_this.form.adminType).trim()) {
							_this.$message.error('请输入类别')
							_this.$refs['zhanghao'].focus()
							return
						}
						if (!String(_this.form.status).trim()) {
							_this.$message.error('请输入状态')
							_this.$refs['zhanghao'].focus()
							return
						}

						let params = {
							id: _this.form.id,
							userName: String(_this.form.userName).trim(),
							adminType: String(_this.form.adminType).trim(),
							// oldpass: String(_this.form.oldPassword).trim(),
							password: String(_this.form.password).trim(),
							status: String(_this.form.status).trim()
						}

						_this.$axios({
								method: "put",
								url: "/diseaseRight/adminInfo/update",
								headers: {
									'Admin-Token': this.token,
									'Content-type': 'application/json; charset=utf-8'
								},
								data: params
							})
							.then(res => {
								console.log(res.data);
								if (res.data.success) {
									_this.editdialogFormVisible = false
									_this.$message.success('【账号】修改成功！');

									// 更新表格
									_this.updateTable()

									_this.form = {
										id: 0,
										userName: '',
										adminType: '1',
										status: '1',
										// oldPassword: '',
										password: '',
										comfirmPass: ''
									}
								} else {
									_this.$message.error('【账号】修改失败！' + res.data.msg);
								}
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('【账号】修改请求异常: ' + err);
							})
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			},
			/**
			 * 删除对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleDelete(index, row) {
				this.delDialogVisible = true
				this.del_account = row.userName
				this.del_id = row.id
			},
			/**
			 * 被删除账号的密码
			 */
			getDelPwd(formName) {
				var _this = this
				// var params = {
				// 	id: _this.del_id
				// }
				_this.$axios({
						method: "delete",
						url: "/diseaseRight/adminInfo/delete/" + _this.del_id,
						headers: {
							'Admin-Token': this.token,
							'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
						},
						// data: params
					})
					.then(res => {
						// console.log(res.data);
						if (res.data.success) {
							_this.$message.success('账号【' + this.del_account + '】删除成功！');
							_this.delDialogVisible = false
							_this.updateTable()
						} else {
							_this.$message.error('账号【' + this.del_account + '】删除失败！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('账号【' + this.del_account + '】删除请求异常: ' + err);
					})
			},
			/**
			 * 删除指定的id所在的行
			 */
			// handleDelRow() {
			// 	if (this.login_account == this.del_account) {
			// 		this.delDialogVisible = false
			// 		this.$message.error('不能删除当前登录账号！')
			// 		return
			// 	}

			// 	this.delConfirmPwdform.delPwd = ''

			// 	this.delDialogEnterPwdVisible = true

			// 	setTimeout(() => {
			// 		this.$refs['delPwd'].focus()
			// 	}, 200)
			// }
		}
	}
</script>

<style scoped>
	@import url("zhuanghaoguanli.css");
</style>