Browse Source

fix: 修复 右侧筛选组件bug

yunxing 4 years ago
parent
commit
8cd4560709

+ 9 - 3
src/components/floorMap/index.vue

@@ -7,7 +7,7 @@
         <div class='strip-bottom'>
             <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
         </div>
-        <room-box ref='boxRoom'></room-box>
+        <room-box :key='`rommBox${roomKey}`' ref='boxRoom'></room-box>
         <equip-detail ref='equipDetail' :key='equipKey'></equip-detail>
         <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
             <!-- <div style="text-align: right;margin-bottom: 10px;">
@@ -158,6 +158,7 @@ export default {
             count: 0, // 顶楼为多张图时计数器
             equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
             statusDisabled: ['已拆除'], //禁止跳转的设备状态
+            roomKey: 1,
         }
     },
     props: {
@@ -234,7 +235,7 @@ export default {
                 })
             }
         },
-        // 查看浮层设备详情
+        // 查看浮层设备详情 
         handleClickEquipDetail: debounce(function (row, column, event) {
             // 设备状态为停用或已拆除时,弹出消息
             if (this.statusDisabled.includes(row?.sb_status)) {
@@ -272,7 +273,12 @@ export default {
         // },
         // 查看浮层位置详情
         handleClickPointDeatil(point) {
-            if (point.id && this.activeItem) this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
+            if (point.id && this.activeItem) {
+                this.roomKey++
+                this.$nextTick(() => {
+                    this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
+                })
+            }
         },
         handleClickHightLight(pointData) {
             this.clearHightLight()

+ 17 - 7
src/views/equipment/eqDialog.vue

@@ -68,17 +68,25 @@
                             major='暖通'
                         ></tableList>
                         <!-- 重要维保表格 -->
-                        <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt' :tabLabel='tabLabel' :assetnum='""' :diff='diff' :size='10'></wb-table>
+                        <wb-table
+                            :key='`wb${key}`'
+                            v-else-if='value.id.slice(2,4)=="WB"'
+                            :smsxt='smsxt'
+                            :tabLabel='tabLabel'
+                            :assetnum='""'
+                            :diff='diff'
+                            :size='10'
+                        ></wb-table>
                         <!-- 日常维保表格 -->
-                        <rcwb-table v-else-if='value.id=="RB"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwb-table>
+                        <rcwb-table :key='`rcwb${key}`' v-else-if='value.id=="RB"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwb-table>
                         <!-- 重要维修的表格 -->
-                        <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :tabLabel='tabLabel' :assetnum='""' :diff='diff' :size='10'></wx-table>
+                        <wx-table :key='`wx${key}`' v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :tabLabel='tabLabel' :assetnum='""' :diff='diff' :size='10'></wx-table>
                         <!-- 日常维修的表格 -->
-                        <rcwx-table v-else-if='value.id=="RX"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwx-table>
+                        <rcwx-table :key='`rcwx${key}`' v-else-if='value.id=="RX"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :assetnum='""' :size='10'></rcwx-table>
                         <!-- 专维 -->
-                        <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='difference' :major='dialogInfo.id'></zw-table>
+                        <zw-table :key='`zw${key}`' v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='difference' :major='dialogInfo.id'></zw-table>
                         <!-- 其他 -->
-                        <other-table v-else-if='value.id.slice(2,4)=="QT"' ref='qtList' :tabLabel='tabLabel' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
+                        <other-table :key='`other${key}`' v-else-if='value.id.slice(2,4)=="QT"' ref='qtList' :tabLabel='tabLabel' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
                     </el-tab-pane>
                     <template v-for='(value,index) in dialogInfo.children'>
                         <template v-for='(eve,index1) in tabCount'>
@@ -146,6 +154,7 @@ export default {
             sizePic: '',
             imgInfo: {},
             showFenbuPic: false, //显示楼层分布组件
+            key: 1, //弹窗key值,重新渲染table组件
         }
     },
     mounted() {},
@@ -197,6 +206,7 @@ export default {
         //点击tab函数
         handleClick(tab) {
             console.log(tab)
+            this.key++
             if (this.param) {
                 this.param = tab.name
             }
@@ -319,7 +329,7 @@ export default {
                     })
                 })
             }
-            if(this.smsxt != '1008'){
+            if (this.smsxt != '1008') {
                 data.onlyMainAsset = true
             }
             queryTab({ data, postParams }).then((res) => {

+ 29 - 4
src/views/equipment/table/equipDetail.vue

@@ -56,20 +56,36 @@
                 <div v-if='activeId==1'>
                     <el-tabs v-model='activeName1' @tab-click='handleClickWb'>
                         <el-tab-pane label='重要维保' name='wb1' v-if='Object.keys(this.row).length>0'>
-                            <wbTable ref='wb1' :smsxt='smsxt' tabLabel='重要维保' :diff='diff' :assetnum='row.assetnum' :size='size'></wbTable>
+                            <wbTable :key='`wb${key}`' ref='wb1' :smsxt='smsxt' tabLabel='重要维保' :diff='diff' :assetnum='row.assetnum' :size='size'></wbTable>
                         </el-tab-pane>
                         <el-tab-pane label='日常维保' name='wb2' v-if='Object.keys(this.row).length>0'>
-                            <rcwbTable ref='wb2' :smsxt='smsxt' tabLabel='日常维保' :diff='diff' :assetnum='row.assetnum' :size='size'></rcwbTable>
+                            <rcwbTable
+                                :key='`rcwb${key}`'
+                                ref='wb2'
+                                :smsxt='smsxt'
+                                tabLabel='日常维保'
+                                :diff='diff'
+                                :assetnum='row.assetnum'
+                                :size='size'
+                            ></rcwbTable>
                         </el-tab-pane>
                     </el-tabs>
                 </div>
                 <div v-if='activeId==2'>
                     <el-tabs v-model='activeName2' @tab-click='handleClickWx'>
                         <el-tab-pane label='重要维修' name='wx1' v-if='Object.keys(this.row).length>0'>
-                            <wxTable ref='wx1' :smsxt='smsxt' tabLabel='重要维修' :diff='diff' :assetnum='row.assetnum' :size='size'></wxTable>
+                            <wxTable :key='`wx${key}`' ref='wx1' :smsxt='smsxt' tabLabel='重要维修' :diff='diff' :assetnum='row.assetnum' :size='size'></wxTable>
                         </el-tab-pane>
                         <el-tab-pane label='日常维修' name='wx2' v-if='Object.keys(this.row).length>0'>
-                            <rcwxTable ref='wx2' :smsxt='smsxt' tabLabel='日常维修' :diff='diff' :assetnum='row.assetnum' :size='size'></rcwxTable>
+                            <rcwxTable
+                                :key='`rcwx${key}`'
+                                ref='wx2'
+                                :smsxt='smsxt'
+                                tabLabel='日常维修'
+                                :diff='diff'
+                                :assetnum='row.assetnum'
+                                :size='size'
+                            ></rcwxTable>
                         </el-tab-pane>
                     </el-tabs>
                 </div>
@@ -119,6 +135,7 @@ export default {
             smsxt: '',
             diff: '',
             size: 5, //下部表格使用
+            key: 1, //表格使用key值,重新渲染table组件
         }
     },
     components: {
@@ -153,12 +170,20 @@ export default {
         tabClick(item) {
             this.activeId = item
         },
+        /**
+         * @description 点击维保,切换维保table
+         */
         handleClickWb(label) {
+            this.key++
             if (this.$refs[`${label.name}`]) {
                 this.$refs[`${label.name}`].startMethods()
             }
         },
+        /**
+         * @description 点击维修,切换维修table
+         */
         handleClickWx(label) {
+            this.key++
             if (this.$refs[`${label.name}`]) {
                 this.$refs[`${label.name}`].startMethods()
             }

+ 0 - 1
src/views/equipment/table/rcwxTable.vue

@@ -261,7 +261,6 @@ export default {
     },
     //多余输入框监听
     confirm(reportdate, real, locationName, people) {
-        debugger
       this.reportdate = reportdate;
       this.sjjssj = real;
       this.locationName = locationName;

+ 18 - 15
src/views/room/index.vue

@@ -615,6 +615,8 @@ export default {
         }
     },
     handleClick(tab) {
+        // 关闭右侧筛选弹窗
+        this.dialogFormVisible = false
         const tabDict = {
             '机房布置图': 1,
             '配电室低压柜及出线明细表': 2,
@@ -622,22 +624,23 @@ export default {
             '核心设备日常维修': 4,
             '核心设备日常维保' :5
         }
+        // 清空筛选条件
         this.clearQuery(tabDict[tab.label])
-      if (tab.label == "机房布置图") {
-        this.Index(this.smsxtArr.smsxt);
-      } else if (tab.label == "配电室低压柜及出线明细表") {
-        this.Index1Emit(1);
-        this.$refs.roomTable2.computedHeight();
-      } else if (tab.label == "机房内核心设备") {
-        this.Index2();
-        this.$refs.roomTable3.computedHeight();
-      } else if (tab.label == "核心设备日常维修") {
-        this.changeSelect("核心设备日常维修");
-        // this.$refs.roomTable4.computedHeight();
-      } else if (tab.label == "核心设备日常维保") {
-        this.changeSelect("核心设备日常维保");
-        this.$refs.roomTable5.computedHeight();
-      }
+        if (tab.label == "机房布置图") {
+            this.Index(this.smsxtArr.smsxt);
+        } else if (tab.label == "配电室低压柜及出线明细表") {
+            this.Index1Emit(1);
+            this.$refs.roomTable2.computedHeight();
+        } else if (tab.label == "机房内核心设备") {
+            this.Index2();
+            this.$refs.roomTable3.computedHeight();
+        } else if (tab.label == "核心设备日常维修") {
+            this.changeSelect("核心设备日常维修");
+            // this.$refs.roomTable4.computedHeight();
+        } else if (tab.label == "核心设备日常维保") {
+            this.changeSelect("核心设备日常维保");
+            this.$refs.roomTable5.computedHeight();
+        }
     },
     // 右上角的筛选点击按钮
     show() {