Browse Source

设备设施,index页面和 eqDialog组件修改,
添加ShowDialog标识,防止

yx 4 years ago
parent
commit
b707fd41d0
2 changed files with 30 additions and 5 deletions
  1. 7 1
      src/views/equipment/eqDialog.vue
  2. 23 4
      src/views/equipment/index.vue

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

@@ -1,7 +1,7 @@
 <template>
     <!-- 设备设施的三级路由的tabs ,八大系统和7个二级菜单共用了一个全屏弹框-->
     <div class='dialog-container'>
-        <el-dialog :visible.sync='visible' :fullscreen='true'>
+        <el-dialog :visible.sync='visible' :fullscreen='true' @close='closeModal'>
             <!-- 除了清单和原理页面,别的都有记录事项detailDialog页面 -->
             <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
                 <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span>
@@ -251,6 +251,12 @@ export default {
                 })
                 this.$emit('emitCount', this.tabCount)
             })
+        },
+        /**
+         *  关闭弹窗,传回父组件,在父组件内 处理逻辑(关闭弹窗)
+         */
+        closeModal() {
+            this.$emit('closeModal', true)
         }
     }
 }

+ 23 - 4
src/views/equipment/index.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- 设备设施 -->
     <div id='equipment'>
+        <!-- 顶部八个子系统导航 -->
         <div class='eq-top'>
             <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
                 <img :src='item.id==systemId?item.icon1:item.icon' />
@@ -8,6 +9,7 @@
             </span>
         </div>
         <div class='eq-bottom'>
+            <!-- 左侧选择,系统原理图等,点击进入弹窗 -->
             <div class='eq-left'>
                 <ul v-for='(eve,index) in everySystem' :key='"o"+index'>
                     <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
@@ -16,6 +18,7 @@
                     </li>
                 </ul>
             </div>
+            <!-- 右侧楼层图主体 -->
             <div class='eq-right'>
                 <div class='eq-right-bottom'>
                     <div class='title-box'>
@@ -44,12 +47,13 @@
                             </el-collapse-transition>
                         </div>
                     </div>
-
+                    <!-- 楼层切换组件 -->
                     <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
                 </div>
             </div>
         </div>
-        <eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount'></eq-dialog>
+        <!-- 使用 v-if解决弹窗未展示时,会调用接口的问题 -->
+        <eq-dialog v-if='ShowDialog' ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount' @closeModal='closeModal'></eq-dialog>
     </div>
 </template>
 
@@ -82,7 +86,8 @@ export default {
             loadName: '',
             type: '',
             objCount: [],
-            keyFL: 'keyFL' + new Date().getTime()
+            keyFL: 'keyFL' + new Date().getTime(),
+            ShowDialog: false //是否显示弹窗
         }
     },
     components: { floorList, eqDialog, floorMap, editList },
@@ -126,7 +131,21 @@ export default {
             this.querySmsxt()
         },
         dialogVisible(eve) {
-            this.$refs.dialog.showModal(eve)
+            // console.log('dialogVisible')
+            // console.log(eve)
+            // 点击后显示弹窗组件
+            this.ShowDialog = true
+            this.$nextTick(() => {
+                this.$refs.dialog.showModal(eve)
+            })
+        },
+        /**
+         * 关闭弹窗,子组件传回父组件,
+         * 在父组件(本组件)内将 ShowDialog 置为false
+         * @param {Boolean} flag 弹窗组件传回的标志: 一直传回 true
+         */
+        closeModal(flag) {
+            this.ShowDialog = false
         },
         //附加数据图片查看 showView为3展示状态
         additionalColl() {