fix: asset弹框交互bug修复

1.asset新增、修改dc后，左侧列表和顶部菜单同步
2.修复alert、project点开asset弹框后无法关闭的问题

nezha-fronted/src/components/common/header.vue

@@ -474,7 +474,7 @@
         return this.$store.state.projectListChange;
       },
       getIdcData() {
-        return this.$store.state.assetData.idcData
+        return this.$store.state.assetDcList;
       }
     },
     watch: {

nezha-fronted/src/components/page/alert/config.vue

@@ -1,10 +1,10 @@
 <style scoped>
-  .account {
+  .config {
     height: 100%;
   }
 </style>
 <template>
-    <div class="account">
+    <div class="config">
         <div class="content-left">
             <div class="sidebar-title">{{$t('alert.alert')}}</div>
             <div class="sidebar-info">
@@ -34,7 +34,7 @@
                   show-overflow-tooltip
                 >
                     <template slot-scope="scope" :column="item">
-                        <div v-if="item.prop == 'option'" class="account-list-options">
+                        <div v-if="item.prop == 'option'" class="content-right-options">
                           <span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
                           <span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
                           <span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
@@ -49,8 +49,8 @@
                         </span>
 <!--                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
                       <div v-else-if="item.prop == 'linkObject'">
-                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                        <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                        <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
                       </div>
                         <span v-else>{{scope.row[item.prop]}}</span>
                     </template>
@@ -61,7 +61,7 @@
         <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
         <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
         <module-box  :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
-        <asset-edit-unit :edit-unit-show='viewAsset' @refreshData="" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
+        <asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
     </div>
 
 </template>
@@ -219,6 +219,13 @@ export default {
         })
       });
     },
+    //asset弹框控制
+    tabControl(data) {
+      if (data === 'close') {
+        this.viewAsset = false
+        this.$refs['assetEditUnit'].tabView = false
+      }
+    },
     toAdd: function() {
       this.cleanAlertRule();
       this.$refs.alertConfigBox.show(true, true);

nezha-fronted/src/components/page/alert/list.vue

@@ -1,165 +1,10 @@
 <style scoped>
-  .account {
+  .list {
     height: 100%;
   }
-  .account-list-option {
-    cursor: pointer;
-    display: inline-block;
-    margin-right: 6px;
-  }
-  .account-list-option .el-icon-delete {
-    color: #F98D9A;
-  }
-  .account-list-option .el-icon-delete:hover {
-    color: #D96D7A;
-  }
-  .account-list-option .el-icon-view {
-    color: #60BEFF;
-  }
-  .account-list-option .el-icon-view:hover {
-    color: #409EFF;
-  }
-  /* begin--右侧弹框*/
-  .right-box {
-    position: fixed;
-    top: 80px;
-    right: 15px;
-    z-index: 1;
-    border-radius: 8px;
-    box-shadow: 0 0 15px #ccc;
-    background-color: white;
-    padding: 0 20px;
-  }
-  .right-box-account {
-    width: 550px;
-    height: calc(100% - 100px);
-  }
-  /* begin--右侧弹框--顶部按钮*/
-  .right-box-top-btns {
-    text-align: center;
-  }
-  .right-box-top-btn {
-    border-radius: 0 0 9px 9px;
-    float: right;
-    color: #656565;
-    height: 30px;
-    font-size: 12px;
-    padding: 3px 8px 1px 8px;
-    border: 1px solid #aaaaaa;
-    border-top: none;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-  .right-box-top-btn-full {
-    background-color: #656565;
-    border: 1px solid #656565;
-    border-top: none;
-    color: white;
-   }
-  /* end--右侧弹框--顶部按钮*/
-
-  /* begin--右侧弹框--内容*/
-  .right-box-title {
-    height: 30px;
-    line-height: 40px;
-    text-align: left;
-  }
-  .right-box-form {
-    margin-top: 35px;
-  }
-  .right-box-form-row {
-    margin-top: 25px;
-  }
-  .right-box-form-label {
-    margin-bottom: 8px;
-    text-align: left;
-  }
-  .right-box-form-content {
-    line-height: 32px;
-    text-align: left;
-    width: 100%;
-  }
-  .right-box-form-content-txt {
-    padding-left: 11px;
-  }
-  .right-box-form-content .el-select {
-    width: calc(100% - 38px);
-    vertical-align: top;
-  }
-  .el-select-add-btn {
-    width: 33px;
-    height: 33px;
-    display: inline-block;
-    text-align: center;
-    border-radius: 5px;
-    border: 1px solid #DCDFE6;
-    box-sizing: border-box;
-    color: #C7C9CE;
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-  }
-  .el-select-add-btn:hover {
-    border: 1px solid #C0C4CC;
-    cursor: pointer;
-  }
-  /* end--右侧弹框--内容*/
-
-  /* begin--右侧弹框--底部按钮*/
-  .right-box-bottom-btns {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    left: 0;
-    text-align: center;
-  }
-  .right-box-bottom-btn:first-of-type {
-    border-bottom-left-radius: 8px;
-  }
-  .right-box-bottom-btn:last-of-type{
-    border-bottom-right-radius: 8px;
-  }
-  .right-box-bottom-btn {
-    display: inline-block;
-    background-color: #656565;
-    color: white;
-    height: 100%;
-    line-height: 40px;
-    cursor: pointer;
-    width: 100%;
-  }
-  .config-dropdown-label-input {
-    width: 50%;
-    display: inline-block;
-  }
-  .right-box-bottom-btn-cancel {
-    background-color: #DADADA;
-    color: #656565;
-  }
-  .right-box-bottom-btn-50 {
-    width: 50%;
-  }
-  /* end--右侧弹框--底部按钮*/
-  /* end--右侧弹框*/
-
-  /* begin--右弹框滑入滑出动画*/
-  @keyframes slide-in-from-right {
-    from {right: -800px}
-    to {right: 0}
-  }
-  @keyframes slide-out-to-right {
-    from {right: 0}
-    to {right: -800px}
-  }
-  .right-box-enter-active {
-    animation: slide-in-from-right 0.4s;
-  }
-  .right-box-leave-active {
-    animation: slide-out-to-right 0.4s;
-  }
-  /* end--右弹框滑入滑出动画*/
 </style>
 <template>
-    <div class="account">
+    <div class="list">
         <div class="content-left">
             <div class="sidebar-title">{{$t('alert.alert')}}</div>
             <div class="sidebar-info">
@@ -185,10 +30,10 @@
                   :label="item.label"
                 >
                     <template slot-scope="scope" :column="item">
-                      <span v-if="item.prop == 'alertRule'" class="account-list-option" @click="viewRule(scope.row[item.prop].id)">
+                      <span v-if="item.prop == 'alertRule'" class="content-right-option" @click="viewRule(scope.row[item.prop].id)">
                           {{scope.row[item.prop].alertName}}
                         </span>
-                        <div v-else-if="item.prop == 'type'" class="account-list-options">
+                        <div v-else-if="item.prop == 'type'" class="content-right-options">
                             <span v-if="scope.row[item.prop] == 1" >Project</span>
                             <span v-if="scope.row[item.prop] == 2" >Module</span>
                             <span v-if="scope.row[item.prop] == 3" >Device</span>
@@ -199,11 +44,11 @@
                             <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
                         </span>
                         <div v-else-if="item.prop == 'linkObject'">
-                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                            <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                            <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
                         </div>
                         <div v-else-if="item.prop == 'state'">
-                            <span class="account-list-option">
+                            <span class="">
                                 {{scope.row['state'] == 1 ? "Pending" : ""}}
                                 {{scope.row['state'] == 2 ? "Expired" : ""}}
                             </span>
@@ -217,7 +62,7 @@
       <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
       <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
       <module-box  :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
-      <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
+      <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
     </div>
 
 </template>
@@ -344,6 +189,13 @@ export default {
         }
       })
     },
+    //asset弹框控制
+    tabControl(data) {
+      if (data === 'close') {
+        this.viewAssetState = false
+        this.$refs['assetEditUnit'].tabView = false
+      }
+    },
     jumpTo(data,id) {
       this.$store.state.assetData.moduleData = data
       this.$store.state.assetData.selectedData = id

nezha-fronted/src/components/page/asset/assetAddUnit.vue

@@ -887,7 +887,7 @@
           if (response.code === 200) {
             this.IDCOptionData = response.data.list;
             this.markOptionData(this.IDCOptionData)
-            //this.$store.state.assetData.idcData = this.IDCOptionData;
+            this.$store.commit('assetDcListChange');
             this.$emit('refreshData');
           }
         })

nezha-fronted/src/components/page/asset/assetEditUnit.vue

@@ -960,8 +960,8 @@
         this.$get('idc').then(response => {
           if (response.code === 200) {
             this.IDCOptionData = response.data.list;
-            this.markOptionData(this.IDCOptionData)
+            this.markOptionData(this.IDCOptionData);
-            //this.$store.state.assetData.idcData = this.IDCOptionData
+            this.$store.commit('assetDcListChange');
             this.$emit('refreshData');
           }
         })

nezha-fronted/src/components/page/project/project.vue

@@ -79,7 +79,7 @@
           :label="item.label"
         >
           <template slot-scope="scope" :column="item">
-            <span  v-if="item.prop == 'asset' && scope.row[item.prop]"  @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+            <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="content-right-option" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
             <span v-else-if="item.prop == 'param'">
               <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
             </span>
@@ -103,7 +103,7 @@
     <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
     <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
     <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-    <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
+    <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
   </div>
 </template>
 
@@ -355,6 +355,14 @@
         this.rightBoxHandler(2);
       },
 
+      //asset弹框控制
+      tabControl(data) {
+        if (data === 'close') {
+          this.viewAssetState = false
+          this.$refs['assetEditUnit'].tabView = false
+        }
+      },
+
       //搜索
       endpointSearch: function(searchObj) {
         this.endpointSearchLabel = {};

nezha-fronted/src/store/index.js

@@ -8,6 +8,7 @@ const store = new Vuex.Store({
       selectedData:'',
       step: 0
     },
+    assetDcList: 0,
     currentProject: {
       id: '',
       name: '',
@@ -35,6 +36,9 @@ const store = new Vuex.Store({
     },
     panelListChange(state,status){
       state.panelListReload = status;
+    },
+    assetDcListChange(state) {
+      state.assetDcList++;
     }
   },
   actions: {