空调管理，删除楼栋、楼层，各种优化，前端刷新数据，减少接口请求，对以后其他项目总结前端开发经验。

src/api/serveAC.js

@@ -224,7 +224,21 @@ export function delFloors(forData) {
 	}
 
 	return request({
-		url: '/airManage/builddelDoms11111.action',
+		url: '/airManage/builddelFloors.action',
+		method: 'post',
+		data
+	})
+}
+
+// 删除楼层
+export function delBuilds(forData) {
+	let data = {
+		school: forData.school,
+		build: forData.build
+	}
+
+	return request({
+		url: '/airManage/builddelBuilds.action',
 		method: 'post',
 		data
 	})

src/views/operationRecord/index.vue

@@ -73,7 +73,7 @@
 									<span>{{ scope.row.oper_remark }}</span>
 								</template>
 							</el-table-column>
-							<el-table-column label="操作" align="center" width="100">
+							<el-table-column label="操作" align="center" width="180">
 								<template slot-scope="scope">
 									<span v-if="scope.row.oper_way.includes('失败')" class="txt-cell-red">{{ scope.row.oper_way }}</span>
 									<span v-else-if="scope.row.oper_way.includes('用户行为')">{{ scope.row.oper_way }}</span>

src/views/serveAC/index.vue

@@ -11,7 +11,16 @@
 						</div>
 						<div class="item-loudong" v-for="(item1, index1) in item0.children" :key="index1" :style="{display: item0.isShow ? '' : 'none'}">
 							<el-tooltip class="item" effect="dark" :content="item1.label" placement="right">
-								<div class="loudong" @click="loudong_toggle(item1.id + '|' + item0.id, item1.label + '|'+ item0.label)">
+								<div class="loudong" @click="loudong_toggle(item1.id + '|' + item0.id, item1.label + '|' + item0.label)">
+									<el-tooltip class="item" effect="light" content="有楼层，不能删除！" placement="left">
+										<div class="del-loudong-none" v-if="item1.children.length > 0" @click.stop="del_loudong_none($event)">
+											<i class="el-icon-delete"></i>
+										</div>
+									</el-tooltip>
+									<div class="del-loudong" v-if="item1.children.length == 0"
+										@click.stop="del_loudong($event, item1.id + '|' + item0.id, item1.label + '|' + item0.label)">
+										<i class="el-icon-delete"></i>
+									</div>
 									<div class="louidong_text">{{item1.label}}</div>
 									<i v-if="item1.isShow" class="el-icon-arrow-down"></i>
 									<i v-else class="el-icon-arrow-right"></i>
@@ -19,11 +28,16 @@
 							</el-tooltip>
 							<div class="item-louceng" v-for="(item2, index2) in item1.children" :key="index2" :style="{display: item1.isShow ? '' : 'none'}">
 								<div :id="`louceng${index0}${index1}${index2}`" class="louceng" :class="louceng_click_id == item2.id ? 'louceng-clicked' : '' "
-									@click="louceng_click($event, item2.id + '|' + item1.id + '|' + item0.id, item2.label + '|' + item1.label + '|'+ item0.label, item2.rooms)">
+									@click="louceng_click($event, item2.id + '|' + item1.id + '|' + item0.id, item2.label + '|' + item1.label + '|' + item0.label, item2.rooms)">
 									{{item2.label}}
 								</div>
-								<div class="louceng-del"
-									@click="del_louceng_click($event, item2.id + '|' + item1.id + '|' + item0.id, item2.label + '|' + item1.label + '|'+ item0.label, item2.rooms)">
+								<el-tooltip class="item" effect="light" content="有房间，不能删除！" placement="right">
+									<div class="louceng-del-none" v-if="item2.rooms.length > 0">
+										<i class="el-icon-delete"></i>
+									</div>
+								</el-tooltip>
+								<div class="louceng-del" v-if="item2.rooms.length == 0"
+									@click="del_louceng($event, item2.id + '|' + item1.id + '|' + item0.id, item2.label + '|' + item1.label + '|' + item0.label, item2.rooms)">
 									<i class="el-icon-delete"></i>
 								</div>
 							</div>
@@ -562,7 +576,8 @@
 		stopAirs,
 		selAirsStatus,
 		getDevices,
-		delFloors
+		delFloors,
+		delBuilds
 	} from '@/api/serveAC';
 	export default {
 		data() {
@@ -1466,10 +1481,9 @@
 			 * @param {Object} label
 			 * @param {Object} rooms
 			 */
-			del_louceng_click(e, id, label, rooms) {
+			del_louceng(e, id, label, rooms) {
 				// console.log(e, id, label, rooms);
 				// console.log(this.navData)
-				let ids = id.split('|');
 				let labels = label.split('|');
 				let _this = this;
 				this.$confirm('此操作将永久删除该楼层, 是否继续?', '提示', {
@@ -1477,57 +1491,109 @@
 					cancelButtonText: '取消',
 					type: 'warning'
 				}).then(() => {
-					for (var i = 0; i < _this.navData.length; i++) {
-						if (_this.navData[i].id == ids[2]) {
+					let indexs = _this.navData_positioning(id, 'id', 3);
+					if (indexs.length > 0) {
+						let i = indexs[0];
+						let j = indexs[1];
+						let k = indexs[2];
+						if (_this.navData[i].children[j].children[k].rooms.length > 0) {
+							_this.$message.error('该楼层中有房间，暂不能删除！');
+						} else {
+							// 调用删除楼层接口
+							delFloors({
+								school: labels[2],
+								build: labels[1],
+								floors: labels[0]
+							}).then((res) => {
+								// console.log(res);
+								if (typeof res.code == 'undefined' || res.code == '') {
+									// this.$message.error('返回数据格式问题，code未获取到！')
+									return
+								}
+								if (res.code == 200) {
+									_this.navData[i].children[j].children.splice(k, 1);
+									this.$message.success(res.message);
+								} else {
+									_this.$message.error(res.message);
+								}
+							}).catch((err) => {
+								this.$message.error(err.message)
+							});
+						}
+					} else {
+						this.$message.error('未找到要删除的楼层')
+					}
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除楼层'
+					});
+				});
+			},
+			/**
+			 * 本地数据定位
+			 * @param {Object} arr
+			 */
+			navData_positioning(arr, option, num) {
+				// console.log(arr, option, num);
+				if (option == 'id') { // 如果传的是id
+					let ids = arr.split('|');
+					let xq = ids.length == 3 ? ids[2] : ids[1];
+					let ld = ids.length == 3 ? ids[1] : ids[0];
+					let lc = ids.length == 3 ? ids[0] : 0;
+
+					for (var i = 0; i < this.navData.length; i++) {
+						if (this.navData[i].id == xq) {
 							// 校区
-							var xiaoqu = _this.navData[i].children;
+							var xiaoqu = this.navData[i].children;
 							for (var j = 0; j < xiaoqu.length; j++) {
 								// 楼栋
-								if (xiaoqu[j].id == ids[1]) {
+								if (xiaoqu[j].id == ld) {
+									if (num == 2) {
+										// 返回坐标
+										return [i, j];
+									}
+
 									var loudong = xiaoqu[j].children;
 									for (var k = 0; k < loudong.length; k++) {
 										// 楼层
-										if (loudong[k].id == ids[0]) {
-											// 删除楼层
-											// console.log(i, j, k);
-											if (_this.navData[i].children[j].children[k].rooms.length == 0) {
-												// 调用删除楼层接口
-												delFloors({
-													school: labels[2],
-													build: labels[1],
-													floors: labels[0]
-												}).then((res) => {
-													// console.log(res);
-													if (typeof res.code == 'undefined' || res.code == '') {
-														// this.$message.error('返回数据格式问题，code未获取到！')
-														return
-													}
-													if (res.code == 200) {
-														_this.navData[i].children[j].children.splice(k, 1);
-														this.$message.success('楼层删除成功!');
-													} else {
-														_this.$message.error(res.message);
-													}
-												}).catch((err) => {
-													// console.log(err);
-													this.$message.error(err.message)
-												});
-											} else {
-												_this.$message.error('该楼层中有房间，暂不能删除！');
-											}
-											break;
+										if (loudong[k].id == lc && num == 3) {
+											// 返回坐标
+											return [i, j, k];
 										}
 									}
 								}
 							}
 						}
 					}
-				}).catch(() => {
-					this.$message({
-						type: 'info',
-						message: '已取消删除楼层'
-					});
-				});
+				} else if (option == 'label') { // 如果传的是label
+					let labels = arr.split('|');
+					let xq = labels.length == 2 ? labels[1] : labels[0];
+					let ld = labels.length == 2 ? labels[0] : 0;
+					for (var i = 0; i < this.navData.length; i++) {
+						if (this.navData[i].label == xq) {
+							if (num == 1) {
+								// 返回坐标
+								return [i];
+							}
+							// 校区
+							var xiaoqu = this.navData[i].children;
+							for (var j = 0; j < xiaoqu.length; j++) {
+								// 楼栋
+								if (xiaoqu[j].label == ld) {
+									if (num == 2) {
+										// 返回坐标
+										return [i, j];
+									}
+								}
+							}
+						}
+					}
+				} else {
+					this.$message.error('查找本地数据参数错误！');
+				}
+
+				return [];
 			},
 			/**
 			 * 刷新顶部数据
@@ -1848,33 +1914,105 @@
 				}, 500)
 			},
 			/**
+			 * 删除楼栋
+			 * @param {Object} event
+			 * @param {Object} id
+			 * @param {Object} label
+			 */
+			del_loudong(event, id, label) {
+				event.stopPropagation();
+				// console.log(id, label);
+				let labels = label.split('|');
+				let _this = this;
+				this.$confirm('此操作将永久删除该楼栋, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					let indexs = _this.navData_positioning(id, 'id', 2);
+					if (indexs.length > 0) {
+						let i = indexs[0];
+						let j = indexs[1];
+						if (_this.navData[i].children[j].children.length > 0) {
+							_this.$message.error('该楼栋中有楼层，暂不能删除！');
+						} else {
+							// 调用删除楼层接口
+							delBuilds({
+								school: labels[1],
+								build: labels[0]
+							}).then((res) => {
+								// console.log(res);
+								if (typeof res.code == 'undefined' || res.code == '') {
+									// this.$message.error('返回数据格式问题，code未获取到！')
+									return
+								}
+								if (res.code == 200) {
+									_this.navData[i].children.splice(j, 1);
+									this.$message.success(res.message);
+								} else {
+									_this.$message.error(res.message);
+								}
+							}).catch((err) => {
+								this.$message.error(err.message)
+							});
+						}
+					} else {
+						this.$message.error('未找到要删除的楼栋')
+					}
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除楼栋'
+					});
+				});
+			},
+			/**
+			 * 阻止冒泡
+			 * @param {Object} event
+			 */
+			del_loudong_none(event) {
+				event.stopPropagation();
+			},
+			/**
 			 * 添加楼栋对话框
 			 */
 			dialog_add_loudong_click() {
+				let _this = this;
 				this.$refs["add_loudong_form"].validate(validate => {
 					if (validate) {
-						// console.log(this.form_add_loudong);
-						addBuild(this.form_add_loudong).then((res) => {
+						// console.log(_this.form_add_loudong);
+						addBuild(_this.form_add_loudong).then((res) => {
 							// console.log(res);
 							if (typeof res.code == 'undefined' || res.code == '') {
-								this.$message.error('返回数据格式问题，code未获取到！')
+								_this.$message.error('返回数据格式问题，code未获取到！')
 								return
 							}
 
 							if (res.code == 200) {
-								this.get_loudong_data()
-								this.$message.success('楼栋添加成功！')
-								this.dialog_add_loudong = false
+								let labels = _this.form_add_loudong.school;
+								let indexs = _this.navData_positioning(labels, 'label', 1);
+								let i = indexs[0];
+								_this.navData[i].children.push({
+									// id: res.data.id, 
+									id: 100000,
+									label: _this.form_add_loudong.building,
+									isShow: false,
+									children: []
+								});
+								_this.navData[i].children.sort((a, b) => a.label.localeCompare(b.label));
+								// _this.get_loudong_data()
+								_this.$message.success('楼栋添加成功！');
+								_this.dialog_add_loudong = false;
 							} else {
-								this.$message.error(res.message)
+								_this.$message.error(res.message);
 							}
 						}).catch((err) => {
 							// console.log(err);
-							this.$message.error(err.message)
+							_this.$message.error(err.message);
 						})
 					} else {
-						this.$message.error('验证不通过')
-						return false
+						_this.$message.error('验证不通过');
+						return false;
 					}
 				})
 			},
@@ -1882,30 +2020,44 @@
 			 * 添加楼层对话框
 			 */
 			dialog_add_louceng_click() {
+				let _this = this;
 				this.$refs["add_louceng_form"].validate(validate => {
 					if (validate) {
-						// console.log(this.form_add_louceng);
-						addFloors(this.form_add_louceng).then((res) => {
+						// console.log(_this.form_add_louceng);
+						addFloors(_this.form_add_louceng).then((res) => {
 							// console.log(res);
 							if (typeof res.code == 'undefined' || res.code == '') {
-								this.$message.error('返回数据格式问题，code未获取到！')
-								return
+								_this.$message.error('返回数据格式问题，code未获取到！');
+								return;
 							}
 
 							if (res.code == 200) {
-								this.get_loudong_data()
-								this.$message.success('楼层添加成功！')
-								this.dialog_add_louceng = false
+								let labels = _this.form_add_louceng.building + '|' + _this.form_add_louceng.school;
+								let indexs = _this.navData_positioning(labels, 'label', 2);
+								let i = indexs[0];
+								let j = indexs[1];
+								_this.navData[i].children[j].children.push({
+									// id: res.data.id, 
+									id: 1,
+									label: _this.form_add_louceng.floor,
+									rooms: []
+								});
+								_this.navData[i].children[j].children.sort(function(a, b) {
+									return a.label - b.label;
+								});
+								_this.$message.success('楼层添加成功！');
+								_this.dialog_add_louceng = false;
+								// this.get_loudong_data();
 							} else {
-								this.$message.error(res.message)
+								_this.$message.error(res.message);
 							}
 						}).catch((err) => {
 							// console.log(err);
-							this.$message.error(err.message)
+							_this.$message.error(err.message);
 						})
 					} else {
-						this.$message.error('验证不通过')
-						return false
+						_this.$message.error('验证不通过');
+						return false;
 					}
 				})
 			},
@@ -2288,31 +2440,50 @@
 								display: flex;
 								justify-content: space-between;
 								align-items: center;
-								padding: 10px 10px 10px 20px;
+								padding: 10px 0;
 								background: #EDF0F5;
 								font-family: Microsoft YaHei-3970(82674968);
 								font-weight: bold;
 								color: #2B4CFE;
 								cursor: pointer;
 
+								.del-loudong-none,
+								.del-loudong {
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									padding: 5px 10px;
+								}
+
+								.del-loudong-none {
+									color: #CCCCCC;
+									cursor: not-allowed;
+								}
+
+								.del-loudong:hover {
+									color: #FFFFFF;
+									background-color: #ff4e51;
+								}
+
 								.louidong_text {
 									white-space: nowrap;
 									width: 260px;
 									overflow: hidden;
 									text-overflow: ellipsis;
+									padding-left: 3px;
 								}
 							}
 
 							.item-louceng {
 								display: flex;
-								// flex-direction: column;
 								justify-content: space-around;
+								flex-grow: 5;
 								margin-left: 40px;
 
 								.louceng {
 									display: flex;
 									align-items: center;
-									// justify-content: space-between;
+									flex-grow: 4;
 									padding: 10px;
 									height: 30px;
 									width: 80%;
@@ -2332,15 +2503,25 @@
 									color: #FFFFFF;
 								}
 
+								.louceng-del-none,
 								.louceng-del {
 									display: flex;
 									align-items: center;
+									flex-grow: 2;
 									padding: 10px;
 									height: 30px;
 									font-size: 18px;
 									cursor: pointer;
 								}
 
+								.louceng-del-none {
+									color: #CCCCCC;
+								}
+
+								.louceng-del-none:hover {
+									cursor: not-allowed;
+								}
+
 								.louceng-del:hover {
 									background-color: #ff4e51;
 									color: #FFFFFF;
@@ -2371,7 +2552,7 @@
 					.add-loudong {
 						display: flex;
 						align-items: center;
-						padding: 10px 0 10px 20px;
+						padding: 10px 20px;
 						cursor: pointer;
 
 						.add-loudong-txt {