【进度】基本完成

src/components/dev_mgr/DevMgr.vue

@@ -166,19 +166,14 @@
 			}
 		},
 		created() {
-			var statue = sessionStorage.getItem('uname')
-			if (!statue || typeof(statue) == 'undefined' || statue == '' || statue == 'null') {
-				this.$router.replace('/')
-			} else {
-				let params = {
-					page: this.currentPage,
-					rows: this.pageRows
-				}
-				// 更新表格
-				this.updateTable('/HotWaters/waterlist.action', params)
-				// 取得楼栋号，填充下拉列表
-				this.getBuildsFillSelect()
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
 			}
+			// 更新表格
+			this.updateTable('/HotWaters/waterlist.action', params)
+			// 取得楼栋号，填充下拉列表
+			this.getBuildsFillSelect()
 		},
 		methods: {
 			/**
@@ -404,12 +399,24 @@
 			 */
 			handleAddRow() {
 				// console.log(this.addform);
+				if (!String(this.addform.user_id).trim()) {
+					this.$message.error('请输入水表ID')
+					return
+				}
+				if (!String(this.addform.build).trim()) {
+					this.$message.error('请输入楼栋号')
+					return
+				}
+				if (!String(this.addform.dom).trim()) {
+					this.$message.error('请输入宿舍号')
+					return
+				}
 				var _this = this
 				this.$axios.get('/api/HotWaters/wateraddBuild.action', {
 						params: {
-							user_id: this.addform.user_id,
-							dom: this.addform.dom,
-							build: this.addform.build
+							user_id: String(this.addform.user_id).trim(),
+							dom: String(this.addform.dom).trim(),
+							build: String(this.addform.build).trim()
 						}
 					})
 					.then(res => {
@@ -438,17 +445,29 @@
 			 * 更新指定的id所在的行
 			 */
 			handleEditRow() {
+				if (!String(this.form.user_id).trim()) {
+					this.$message.error('请输入水表ID')
+					return
+				}
+				if (!String(this.form.build).trim()) {
+					this.$message.error('请输入楼栋号')
+					return
+				}
+				if (!String(this.form.dom).trim()) {
+					this.$message.error('请输入宿舍号')
+					return
+				}
 				var _this = this
 				this.$axios.get('/api/HotWaters/waterupdateBuild.action', {
 						params: {
 							id: this.form.id,
-							user_id: this.form.user_id,
-							dom: this.form.dom,
-							build: this.form.build
+							user_id: String(this.form.user_id).trim(),
+							dom: String(this.form.dom).trim(),
+							build: String(this.form.build).trim()
 						}
 					})
 					.then(res => {
-						console.log(res.data);
+						// console.log(res.data);
 						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '修改成功' && JSON
 							.stringify(res.data) != '{}') {
 							_this.$message.success('【数据修改】成功！');
@@ -483,9 +502,9 @@
 			searchBtnSubmit() {
 				// console.log(this.query_shuibiaoId);
 				this.currentPage = 1
-				
+
 				var params = {}
-				if (this.query_shuibiaoId.trim()) {
+				if (String(this.query_shuibiaoId).trim()) {
 					// 查询指定水表id的信息
 					if (this.form_select.value == 0) {
 						params = {

src/components/feilvset/feilvset.css

@@ -160,9 +160,9 @@
 }
 
 .pages {
-	width: 1000px;
+	width: 100%;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
 }
 
 >>>.el-pager li.active {

src/components/feilvset/feilvset.vue

@@ -7,7 +7,7 @@
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="second-row">
-				<div class="total_balance">当前费率：3元/吨</div>
+				<div class="total_balance">当前费率：{{current_feilv}}元/吨</div>
 				<div class="show-detail" @click="modify_feilv">修改费率</div>
 			</el-col>
 		</el-row>
@@ -16,14 +16,16 @@
 		<el-row>
 			<el-col :span="24" class="third-row">
 				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
-					@selection-change="handleSelectionChange" highlight-current-row :row-class-name="rowClassName">
+					highlight-current-row :row-class-name="rowClassName">
 					<el-table-column prop="id" label="序号" width="300" align="center"></el-table-column>
 					<el-table-column prop="feilv" label="费率（元/吨）" align="center"></el-table-column>
 					<el-table-column prop="dt" label="时间" align="center"></el-table-column>
 				</el-table>
 				<div style="margin-top: 20px" class="table-footer">
 					<div class="pages">
-						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+						<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>
@@ -31,19 +33,20 @@
 		<el-row>
 			<el-col :span="24" class="forth-row">
 				<!-- 修改费率对话框 -->
-				<el-dialog title="修改费率" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
+				<el-dialog title="修改费率" :visible.sync="editdialogFormVisible" width="640px" 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 :inline="true" :model="formInline" class="demo-form-inline">
-							<el-form-item label="费率：" class="shuibiaoId">
-								<el-input v-model="formInline.user" placeholder="请输入费率"></el-input>
-							</el-form-item>
-							<div class="yuan">元/吨</div>
-						</el-form>
-						<div slot="footer" class="dialog-footer">
-							<el-button @click="editdialogFormVisible = false">取 消</el-button>
-							<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
-						</div>
+					<el-form :inline="true" class="demo-form-inline">
+						<el-form-item label="费率：" class="shuibiaoId">
+							<el-input v-model="input_feilv" placeholder="请输入费率" maxlength="4"></el-input>
+						</el-form-item>
+						<div class="yuan">元/吨</div>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="editdialogFormVisible = false">取 消</el-button>
+						<el-button type="primary" @click="handle_modify_feilv">确 定</el-button>
+					</div>
 				</el-dialog>
 			</el-col>
 		</el-row>
@@ -54,96 +57,136 @@
 	export default {
 		data() {
 			return {
-				editdialogFormVisible: false,
-				delDialogVisible: false,
-				form: {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				},
-				formLabelWidth: '120px',
-				formInline: {
-					user: '',
-					options: [{
-						value: '选项1',
-						label: '全部'
-					}, {
-						value: '选项2',
-						label: '黄金糕'
-					}],
-					value: '选项1'
-				},
-				tableData: [{
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}, {
-					id: 1,
-					feilv: 0.8,
-					dt: '2021-01-01 ~ 2021-07-01'
-				}],
-				multipleSelection: []
+				current_feilv: 0.0.toFixed(2), // 当前费率
+				editdialogFormVisible: false, // 控制费率对话框显示、隐藏
+				input_feilv: '', // 修改费率
+				tableData: [], // 表格数据
+				total_rows: 0, // 表格记录总数
+				current_page: 1, // 当前所在页码
+				page_rows: 7 // 每页显示的记录数
 			}
 		},
+		created() {
+			// 获取当前费率
+			this.get_current_feilv()
+
+			// 获取历史费率
+			this.get_history_feilv()
+		},
 		methods: {
+			/**
+			 * 获取当前费率
+			 */
+			get_current_feilv() {
+				this.$axios.get('/api/HotWaters/watercurrentRate.action')
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rate) != 'undefined' && res.data.rate != '' && JSON.stringify(res
+								.data) != '{}') {
+							this.current_feilv = parseFloat(res.data.rate).toFixed(2)
+						} else {
+							_this.$message.success('【获取当前费率】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取当前费率】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 获取历史费率
+			 */
+			get_history_feilv() {
+				this.tableData = []
+				var _this = this
+				this.$axios.get('/api/HotWaters/waterqueryPrice.action', {
+						params: {
+							page: this.current_page,
+							rows: this.page_rows
+						}
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res
+								.data) != '{}') {
+							for (var i = 0; i < res.data.rows.length; i++) {
+								let tmp = {
+									id: i,
+									feilv: parseFloat(res.data.rows[i].price).toFixed(2),
+									dt: res.data.rows[i].time.split(' ')[0] + ' ~ ' + res.data.rows[i].time2.split(
+										' ')[0]
+								}
+								_this.tableData.push(tmp)
+
+								_this.total_rows = res.data.total
+							}
+						} else {
+							_this.$message.success('【获取当前费率】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取当前费率】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 改变页码
+			 * @param {Object} val
+			 */
+			handleCurrentChange(val) {
+				this.current_page = val
+				// 查询该栋的信息
+				this.get_history_feilv()
+			},
+			/**
+			 * 把每一行的索引放进row.id
+			 */
 			rowClassName({
 				row,
 				rowIndex
 			}) {
-				//把每一行的索引放进row.id
 				row.id = rowIndex + 1;
 			},
+			/**
+			 * 打开修改费率对话框
+			 */
 			modify_feilv() {
 				this.editdialogFormVisible = true
 			},
-			onSubmit() {
-				console.log('submit!');
-			},
-			handleOpen(key, keyPath) {
-				console.log(key, keyPath);
-			},
-			handleClose(key, keyPath) {
-				console.log(key, keyPath);
-			},
-			toggleSelection(rows) {
-				if (rows) {
-					rows.forEach(row => {
-						this.$refs.multipleTable.toggleRowSelection(row);
-					});
+			/**
+			 * 修改费率
+			 */
+			handle_modify_feilv() {
+				var _this = this
+				if (this.input_feilv) {
+					this.$axios.get('/api/HotWaters/waterupdatePrice.action', {
+							params: {
+								rate: this.input_feilv
+							}
+						})
+						.then(res => {
+							// console.log(res.data);
+							if (typeof(res.data.msg) != 'undefined' && res.data.msg == '修改成功') {
+								this.$message.success('【修改费率】修改成功！')
+
+								this.editdialogFormVisible = false
+
+								// 获取当前费率
+								this.get_current_feilv()
+
+								// 获取历史费率
+								this.get_history_feilv()
+							} else {
+								_this.$message.error('【修改费率】失败！');
+							}
+						})
+						.catch(err => {
+							// console.log(err);
+							_this.$message.error('【修改费率】请求异常: ' + err);
+						})
 				} else {
-					this.$refs.multipleTable.clearSelection();
+					this.$message.error('请输入费率！')
 				}
-			},
-			handleSelectionChange(val) {
-				this.multipleSelection = val;
-			},
-			handleEdit(index, row) {
-				this.editdialogFormVisible = true
-				console.log(index, row);
-			},
-			handleDelete(index, row) {
-				this.delDialogVisible = true
-				console.log(index, row);
 			}
 		}
 	}

src/components/index/Index.vue

@@ -84,6 +84,13 @@
 
 			}
 		},
+		created() {
+			var statue = sessionStorage.getItem('uname')
+			if (!statue || typeof(statue) == 'undefined' || statue == '' || statue == 'null') {
+				this.$router.replace('/')
+				return
+			}
+		},
 		methods: {
 			logout() {
 				var _this = this

src/components/login/Login.vue

@@ -34,8 +34,8 @@
 					return callback(new Error('请输入账号'));
 				}
 				setTimeout(() => {
-					if (value.length < 6) {
-						callback(new Error('账号长度不小于6位'));
+					if (value.length < 5) {
+						callback(new Error('账号长度不小于5位'));
 					} else {
 						callback();
 					}
@@ -47,8 +47,8 @@
 					callback(new Error('请输入密码'));
 				}
 				setTimeout(() => {
-					if (value.length < 6) {
-						callback(new Error('密码长度不小于6位'));
+					if (value.length < 5) {
+						callback(new Error('密码长度不小于5位'));
 					} else {
 						callback();
 					}
@@ -73,35 +73,46 @@
 		},
 		methods: {
 			submitForm(formName) {
-				// console.log(_this.$qs.stringify(_this.ruleForm));
 				let _this = this;
-				// _this.$refs[formName].validate((valid) => {
-				// 	_this.$axios.get('?', {
-				// 			params: _this.$qs.stringify(_this.ruleForm)
-				// 		})
-				// 		.then(res => {
-				// 			if (res.data.code == 200) {
-				// 				let token = res.data.data.token.access_token;
-				// 				//存储用户名到数据库。
-				// 				db.set("userName", res.data.data.user.name);
-				// 				//发送登录成功的action
-				// 				_this.loginAction(token);
-								sessionStorage.setItem('uname', 'admin1')
-								_this.$message.success("登陆成功!");
-								_this.$router.replace('/index'); //跳转到首页
-				// 			} else {
-				// 				_this.$message({
-				// 					showClose: true,
-				// 					message: "登陆异常：" + res.data.msg,
-				// 					type: 'error'
-				// 				});
-				// 			}
-
-				// 		})
-				// 		.catch(err => {
-				// 			_this.$message.error('捕捉异常：' + err.message)
-				// 		})
-				// });
+				let params = {
+					page: 1,
+					rows: 8
+				}
+				var username = String(_this.ruleForm.uname).trim()
+				var userpass = String(_this.ruleForm.upass).trim()
+				if (username) {
+					params.number = username
+				}
+				_this.$refs[formName].validate((valid) => {
+					_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) !=
+								'{}') {
+								for (var i = 0; i < res.data.rows.length; i++) {
+									if (username == res.data.rows[i].number && userpass == res.data.rows[i]
+										.password) {
+										_this.$message.success("登陆成功!");
+										sessionStorage.setItem('uname', JSON.stringify(username))
+										_this.$router.replace('/index'); //跳转到首页
+									}
+								}
+							} else {
+								_this.$message({
+									showClose: true,
+									message: "登陆异常：" + res.data.msg,
+									type: 'error'
+								});
+							}
+						})
+						.catch(err => {
+							// console.log(err);
+							_this.$message.error('捕捉异常：' + err)
+						})
+				});
 			}
 		}
 	}

src/components/yongshuifenxi/yongshuifenxi.vue

@@ -134,7 +134,7 @@
 			 */
 			handleCurrentChange(val) {
 				this.control_table.detail_current_page = val
-				
+
 				this.show_detail()
 			},
 			/**
@@ -195,8 +195,17 @@
 			 * 获取用水总量
 			 */
 			get_total_yongshuizongliang() {
+				let params = {}
+				if (this.drom) {
+					params.build = this.drom
+				}
+				if (this.room_value) {
+					dom: this.room_value
+				}
 				var _this = this
-				this.$axios.get('/api/HotWaters/waterwaterTotal.action')
+				this.$axios.get('/api/HotWaters/waterwaterTotal.action', {
+						params: params
+					})
 					.then(res => {
 						// console.log(res.data);
 						if (typeof(res.data.size) != 'undefined' && res.data.size != '' && JSON.stringify(res
@@ -349,6 +358,9 @@
 
 				// 共用部分
 				this.updateData()
+
+				// 获取用水总量
+				this.get_total_yongshuizongliang()
 			},
 			/**
 			 * 失去焦点更新数据

src/components/zhanghaoguanli/zhanghaoguanli.vue

@@ -1,183 +0,0 @@
-<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" :model="formInline" class="demo-form-inline">
-					<el-form-item label="账号：" class="shuibiaoId">
-						<el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
-					</el-form-item>
-					<el-form-item>
-						<el-button type="primary" @click="onSubmit">查找</el-button>
-					</el-form-item>
-				</el-form>
-				<div class="btn-add">
-					<el-button type="primary" icon="el-icon-add">添加</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%"
-					@selection-change="handleSelectionChange" highlight-current-row>
-					<el-table-column label="昵称" align="center">
-						<template slot-scope="scope">{{ scope.row.id }}</template>
-					</el-table-column>
-					<el-table-column prop="account" label="账号" align="center"></el-table-column>
-					<el-table-column prop="pass" 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="9000"></el-pagination>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-		<el-row>
-			<el-col :span="24" class="forth-row">
-				<!-- 编辑对话框 -->
-				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
-					<hr style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
-					<el-form :model="form">
-						<el-form-item label="昵称" :label-width="formLabelWidth">
-							<el-input v-model="form.id" autocomplete="off"></el-input>
-						</el-form-item>
-						<el-form-item label="账号：" :label-width="formLabelWidth">
-							<el-input v-model="form.account" autocomplete="off"></el-input>
-						</el-form-item>
-						<el-form-item label="密码：" :label-width="formLabelWidth">
-							<el-input v-model="form.pass" autocomplete="off"></el-input>
-						</el-form-item>
-						<el-form-item label="确认密码：" :label-width="formLabelWidth">
-							<el-input v-model="form.pass" autocomplete="off"></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="editdialogFormVisible = false">确 定</el-button>
-					</div>
-				</el-dialog>
-				<!-- 删除对话框 -->
-				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
-					<div class="box-icon"></div>
-					<span class="del-msg">确定删除该学生信息吗？</span>
-					<span slot="footer" class="dialog-footer">
-						<el-button @click="delDialogVisible = false">取 消</el-button>
-						<el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
-					</span>
-				</el-dialog>
-			</el-col>
-		</el-row>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				editdialogFormVisible: false,
-				delDialogVisible: false,
-				form: {
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},
-				formLabelWidth: '120px',
-				formInline: {
-					user: '',
-					options: [{
-						value: '选项1',
-						label: '全部'
-					}, {
-						value: '选项2',
-						label: '黄金糕'
-					}],
-					value: '选项1'
-				},
-				tableData: [{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				},{
-					id: '随风飘荡',
-					account: 'admi123',
-					pass: '*******'
-				}],
-				multipleSelection: []
-			}
-		},
-		methods: {
-			onSubmit() {
-				console.log('submit!');
-			},
-			handleOpen(key, keyPath) {
-				console.log(key, keyPath);
-			},
-			handleClose(key, keyPath) {
-				console.log(key, keyPath);
-			},
-			toggleSelection(rows) {
-				if (rows) {
-					rows.forEach(row => {
-						this.$refs.multipleTable.toggleRowSelection(row);
-					});
-				} else {
-					this.$refs.multipleTable.clearSelection();
-				}
-			},
-			handleSelectionChange(val) {
-				this.multipleSelection = val;
-			},
-			handleEdit(index, row) {
-				this.editdialogFormVisible = true
-				console.log(index, row);
-			},
-			handleDelete(index, row) {
-				this.delDialogVisible = true
-				console.log(index, row);
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	@import url("zhanghaoguanli.css");
-</style>

src/components/zhuanghaoguanli/zhuanghaoguanli.vue

@@ -0,0 +1,375 @@
+<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.account).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>

src/main.js

@@ -7,7 +7,7 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import echarts from 'echarts'
 import axios from "axios"
-import qs from "qs"
+// import qs from "qs"
 
 // axios.defaults.timeout = 3000 //响应时间
 // axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; //配置请求头
@@ -18,7 +18,7 @@ console.log(process.env.NODE_ENV)
 
 Vue.use(ElementUI);
 
-Vue.prototype.$qs = qs;
+// Vue.prototype.$qs = qs;
 Vue.prototype.$axios = axios;
 Vue.prototype.$echarts = echarts
 

src/router/index.js

@@ -7,7 +7,7 @@ import Balance from '@/components/balance/Balance'
 import SJDZ from '@/components/shangjiaduizhang/shangjiaduizhang'
 import YSFX from '@/components/yongshuifenxi/yongshuifenxi'
 import FLSZ from '@/components/feilvset/feilvset'
-import ZHGL from '@/components/zhanghaoguanli/zhanghaoguanli'
+import ZHGL from '@/components/zhuanghaoguanli/zhuanghaoguanli'
 
 Vue.use(Router)