单击底部筛选列表记录查看building/Houser

src/store/getters.js

@@ -32,7 +32,7 @@ const getters = {
   houseItem: (state) => state.xiaoqu.houseItem,
   refreshBuild: (state) => state.xiaoqu.refreshBuild,
   personNum: (state) => state.xiaoqu.personNum,
-
   resetBtn: (state) => state.xiaoqu.reset,
+  clickResult: (state) => state.xiaoqu.clickResult,
 };
 export default getters;

src/store/modules/xiaoqu.js

@@ -12,8 +12,12 @@ const xiaoqu = {
     refreshBuild: 1,
     personNum: {},
     reset: false,
+    clickResult: {}, //通过列表单机查看building + Houser
   },
   mutations: {
+    SET_CLICK_RESULT: (state, data) => {
+      state.clickResult = data;
+    },
     SET_PERSON_NUM: (state, data) => {
       state.personNum = data;
     },
@@ -96,6 +100,7 @@ const xiaoqu = {
         zz: 0,
         cz: 0,
       };
+      state.clickResult = {};
     },
   },
   actions: {

src/views/components/xiaoqu/bottomList.vue

@@ -36,6 +36,7 @@
             class="body-rows"
             v-for="(item, index) in list"
             :key="'rows' + index"
+            @click="handlerClcick(item)"
           >
             <div class="table-cell0">{{ index + 1 }}</div>
             <div class="table-cell1">{{ item.parentname }}</div>
@@ -133,32 +134,28 @@ export default {
     "queryParamsXiaoqu.type"(newValue, oldValue) {
       this.handleChange();
     },
-    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
-      this.handleChange();
-    },
+    // "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
+    //   this.handleChange();
+    // },
   },
   created() {
     this.handleChange();
   },
   methods: {
+    handlerClcick(item) {
+      this.$store.commit("SET_CLICK_RESULT", {
+        id: item.houseId,
+        buildingId: item.buildingId,
+        name: item.housename,
+        keyId: item.houseId,
+      });
+      this.$store.commit("CHANGE_QUERY", { buildingId: item.buildingId });
+    },
     handleChange(newValue) {
       this.reset();
       this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu };
-      setTimeout(() => {
-        const list = document.getElementsByClassName("foldPane-bottom")[0];
-        const build = document.getElementsByClassName("building-container")[0];
-        if (this.queryParams.buildingId) {
-          list.style.left = `390px`;
-          list.style.width = `calc(100% - (390px + ${build.offsetWidth}px) )`;
-          list.style.transform = `translateX(0)`;
-        } else {
-          list.style.left = ``;
-          list.style.width = ``;
-          list.style.transform = ``;
-        }
-      }, 500);
 
-      // this.queryParams.buildingid = undefined;
+      this.queryParams.buildingId = undefined;
       // this.queryParams.deptId = undefined;
       this.disabled = false;
       this.load();
@@ -178,6 +175,7 @@ export default {
     },
     async getList() {
       this.loading = true;
+
       let res = await inputSearch(this.queryParams);
       let handleColor = this.handleColor(res.data.xinxilist.rows);
       this.list = [...this.list, ...handleColor];

src/views/components/xiaoqu/building.vue

@@ -25,7 +25,7 @@
             :item="house"
             v-for="(house, houseIndex) in item"
             :key="houseIndex"
-            @clickHouse="clickHouse(house, house.id)"
+            @clickHouse="clickHouse(house)"
           ></colorCell>
         </div>
       </div>
@@ -56,6 +56,7 @@ export default {
       "rightTopColor",
       "houseItem",
       "refreshBuild",
+      "clickResult",
     ]),
     groupedRooms() {
       if (this.list.length == 0) return;
@@ -109,6 +110,11 @@ export default {
       } else {
         this.reset();
         this.show = false;
+        const list = document.getElementsByClassName("foldPane-bottom")[0];
+
+        list.style.left = ``;
+        list.style.width = ``;
+        list.style.transform = ``;
       }
     },
     "houseItem.id"(newValue, oldValue) {
@@ -128,7 +134,7 @@ export default {
       this.list = [];
       this.currentIndex = 0;
     },
-    clickHouse(item, keyId) {
+    clickHouse(item) {
       this.$store.commit("SET_BUILDING_WIDTH", {
         id: item.id,
         buildingId: item.building_id,
@@ -138,9 +144,10 @@ export default {
             ? this.houseItem.buildingWidth
             : window.innerWidth - this.$refs.houseItem.offsetWidth,
         name: item.name,
-        keyId: keyId,
+        keyId: item.id,
       });
-      this.currentIndex = keyId;
+      this.currentIndex = item.id;
+      this.$store.commit("SET_CLICK_RESULT", {});
     },
     async getBuildingInfo() {
       let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
@@ -158,6 +165,19 @@ export default {
       this.list = res.data;
       this.loading = false;
       this.$store.commit("SET_REFRESH", 1);
+
+      this.$nextTick(() => {
+        const list = document.getElementsByClassName("foldPane-bottom")[0];
+        const build = document.getElementsByClassName("building-container")[0];
+        if (this.queryParamsXiaoqu.buildingId) {
+          list.style.left = `390px`;
+          list.style.width = `calc(100% - (390px + ${build.offsetWidth}px) )`;
+          list.style.transform = `translateX(0)`;
+        }
+        if (this.clickResult.id) {
+          this.clickHouse(this.clickResult);
+        }
+      });
     },
 
     // 颜色处理