hotWaterManagerWeb/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="number" label="账号" align="center"></el-table-column>
					<el-table-column prop="password" label="密码" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="80">
						<el-button type="text" class="del-btn" slot-scope="scope"
							@click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</el-table-column>
					<el-table-column width="130">
						<el-button type="text" slot-scope="scope" @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">
						<el-form-item label="昵称：" :label-width="formLabelWidth">
							<el-input v-model="addform.name" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="账号：" :label-width="formLabelWidth">
							<el-input v-model="addform.number" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="密码：" :label-width="formLabelWidth">
							<el-input v-model="addform.password" type="password" autocomplete="off" maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认密码：" :label-width="formLabelWidth">
							<el-input v-model="addform.comfirmPass" type="password" autocomplete="off" maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="adddialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleAddRow">确 定</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>
						<el-form-item label="昵称：" :label-width="formLabelWidth">
							<el-input v-model="form.name" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="账号：" :label-width="formLabelWidth">
							<el-input v-model="form.number" autocomplete="off" maxlength="16"></el-input>
						</el-form-item>
						<el-form-item label="密码：" :label-width="formLabelWidth">
							<el-input v-model="form.password" autocomplete="off" type="password" maxlength="16">
							</el-input>
						</el-form-item>
						<el-form-item label="确认密码：" :label-width="formLabelWidth">
							<el-input v-model="form.comfirmPass" autocomplete="off" type="password" maxlength="16">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleEditRow">确 定</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="handleDelRow">确 定</el-button>
					</span>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				account: '', // 需要查找的账号
				del_account: '',
				del_id: 0,
				adddialogFormVisible: false,
				editdialogFormVisible: false, // 控制编辑对话框显示、隐藏
				delDialogVisible: false, // 控制删除对话框显示、隐藏
				form: { // 编辑框的数据绑定
					id: 0,
					name: '',
					number: '',
					password: '',
					comfirmPass: ''
				},
				addform: { // 添加框的数据绑定
					name: '',
					number: '',
					password: '',
					comfirmPass: ''
				},
				formLabelWidth: '120px',
				// 表格数据
				tableData: [],
				current_page: 1, // 当前所在页码
				page_rows: 8, // 每页显示的记录数
				total_rows: 0 // 总记录数
			}
		},
		created() {
			// 获取账号列表
			this.updateTable()
		},
		methods: {
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.current_page = val

				// 查询账号相关信息
				this.updateTable()
			},
			/**
			 * 获取账号数据，填充表格变量
			 */
			updateTable() {
				var _this = this
				_this.tableData = []
				let params = {
					page: this.current_page,
					rows: this.page_rows
				}
				if (this.account) {
					params.number = this.account
				}
				// _this.rows_total = 0
				this.$axios.get('/api/HotWaters/waterqueryAdmin.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.total_rows = res.data.total
						} 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() {
				// console.log(this.addform);
				if (!String(this.addform.name).trim()) {
					this.$message.error('请输入昵称')
					return
				}
				if (!String(this.addform.number).trim()) {
					this.$message.error('请输入账号')
					return
				}
				if (!String(this.addform.password).trim()) {
					this.$message.error('请输入密码')
					return
				}
				if (String(this.addform.password).trim() != String(this.addform.comfirmPass).trim()) {
					this.$message.error('密码与确认密码不一致！')
					return
				}
				var _this = this
				this.$axios.get('/api/HotWaters/wateraddAdmin.action', {
						params: {
							name: String(this.addform.name).trim(),
							number: String(this.addform.number).trim(),
							password: String(this.addform.password).trim()
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '添加成功' && JSON
							.stringify(res.data) != '{}') {
							_this.$message.success('【账号添加】成功！');
							_this.addform.name = ''
							_this.addform.number = ''
							_this.addform.password = ''
							_this.addform.comfirmPass = ''
							// 更新列表
							this.updateTable()
						} else {
							_this.$message.error('【账号添加】失败！' + res.data.msg);
						}
						this.adddialogFormVisible = false
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【账号添加】请求异常: ' + err);
					})
			},
			/**
			 * 编辑对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				this.editdialogFormVisible = true
				this.form.id = row.id
				this.form.name = row.name
				this.form.number = row.number
				this.form.password = row.password
			},
			/**
			 * 更新指定的id所在的行
			 */
			handleEditRow() {
				if (!String(this.form.name).trim()) {
					this.$message.error('请输入昵称')
					return
				}
				if (!String(this.form.number).trim()) {
					this.$message.error('请输入账号')
					return
				}
				if (!String(this.form.password).trim()) {
					this.$message.error('请输入密码')
					return
				}
				if (String(this.form.password).trim() != String(this.form.comfirmPass).trim()) {
					this.$message.error('密码和确认密码不一致！')
					return
				}
				var _this = this
				this.$axios.get('/api/HotWaters/waterupdateAdmin.action', {
						params: {
							id: this.form.id,
							name: String(this.form.name).trim(),
							number: String(this.form.number).trim(),
							password: String(this.form.password).trim()
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '更新成功' && JSON
							.stringify(res.data) != '{}') {
							_this.$message.success('【账号更新】成功！');
							
							// 更新表格
							this.updateTable()
							
							_this.form.id = ''
							_this.form.name = ''
							_this.form.number = ''
							_this.form.password = ''
							_this.form.comfirmPass = ''
						} else {
							_this.$message.error('【账号更新】失败！' + res.data.msg);
						}
						this.editdialogFormVisible = false
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【账号更新】请求异常: ' + err);
					})
			},
			/**
			 * 删除对话框
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleDelete(index, row) {
				this.delDialogVisible = true
				this.del_account = row.number
				this.del_id = row.id
			},
			/**
			 * 删除指定的id所在的行
			 */
			handleDelRow() {
				var _this = this
				this.$axios.get('/api/HotWaters/waterdelAdmin.action', {
						params: {
							id: this.del_id
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '删除成功' && JSON
							.stringify(res.data) != '{}') {
							_this.$message.success('【账号删除】成功！');
							this.updateTable()
						} else {
							_this.$message.error('【账号删除】失败！');
						}
						this.delDialogVisible = false
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【账号删除】请求异常: ' + err);
					})
			}
		}
	}
</script>

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