fix: 修复删除子panel后顶部依然显示被删名称的问题

nezha-fronted/src/components/common/popBox/selectPanel.vue

@@ -12,7 +12,6 @@
             :expand-on-click-node="false"
             :filter-node-method="filterNode"
             :props="{label: 'name', children: 'children'}"
-            @check-change="clearOthers"
             @node-click="selectPanel"
             @node-drop="nodeDrop"
             check-on-click-node
@@ -50,7 +49,7 @@
         filterPanel: {type: String},
       },
       mounted() {
-        this.$refs.panelTree.setCurrentKey(this.showPanel);
+        this.$refs.panelTree.setCurrentKey(this.panel);
       },
       watch: {
         filterPanel: {
@@ -62,16 +61,23 @@
         showPanel: {
           immediate: true,
           handler(n) {
-            if (n && n.id) {
-              this.$refs.panelTree.setCurrentKey(this.showPanel);
-            }
+            this.panel = JSON.parse(JSON.stringify(n));
+          }
+        },
+        /*panel: {
+          immediate: true,
+          handler(n) {
+            if (this.$refs.panelTree) {
+              console.info(n.id, n.name)
+              this.$refs.panelTree.setCurrentKey(n);
             }
           }
+        }*/
       },
       data(){
         return {
           popBox: {show: false},
-          panel: {id: '', name: ''}
+          panel: {id: 0, name: ""},
         }
       },
       methods:{
@@ -115,35 +121,25 @@
         editPanel(data) {
           this.$emit("editPanel", data);
         },
-        openBox(panel){
-          if (panel) {
-            this.panel = panel;
-            this.$refs.panelTree.setChecked(this.panel.id, true, false);
-          }
-        },
         esc(){
           this.popBox.show = false;
         },
         //确认选择某个节点，与父组件交互
         selectPanel(data, checked, child) {
-          this.panel = data;
-          this.$emit('selectPanel', this.panel);
-          this.$refs.panelTree.setCurrentKey(this.panel);
+          this.$emit('selectPanel', data);
+          this.$refs.panelTree.setCurrentKey(data);
           this.esc();
         },
         //tree设为单选
-        clearOthers(data, checked, child) {
+        /*clearOthers(data, checked, child) {
           if (checked) {
             this.panel = data;
             this.$refs.panelTree.setCheckedKeys([data.id]);
           } else {
             this.panel = {id: '', name: ''};
           }
-        }
+        }*/
       },
-      beforeDestroy(){
-
-      }
     }
 </script>
 

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -6,7 +6,7 @@
       </div>
       <template v-else>
         <div class="top-tool-main-left">
-          <select-panel :current-panel="showPanel" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
+          <select-panel :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
                         @deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;">
             <template v-slot:header>
               <div class="panel-select-header">
@@ -171,7 +171,6 @@
         chartsData: [], //中间部分图表相关数据
         panelData: [],
         panelDataDragTmp:[],
-        dataTotalListBak:[],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
           searchLabelList: [
@@ -196,7 +195,6 @@
         },
         panelId: 0,
         filterPanel:'',
-        showPanelList:[],
         //---图表相关参数--end
         scrollbarWrap: null,
       }
@@ -249,10 +247,7 @@
                 type: 'success',
                 message: this.$t("tip.deleteSuccess")
               });
-              if (this.showPanel.id === u.id) {
-                this.showPanel.id = '';
-              }
-              this.getTableData();
+              this.getTableData(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -442,7 +437,6 @@
         this.$get('panel').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
-            this.showPanelList = this.panelData;
             for (let i = 0; i < this.panelData.length; i++) {
               if (this.panelData[i].id == this.showPanel.id) {
                 this.showPanel.name = this.panelData[i].name;
@@ -454,11 +448,11 @@
       },
 
       getTableData(clearShowPanel) {
+        let vm = this;
+
         this.$get('panel?type=dashboard').then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
-            this.showPanelList = this.panelData;
-            this.dataTotalListBak = [...response.data.list];
             let isInitData = false;
             if (response.data.list.length > 0) {
               if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
@@ -474,8 +468,11 @@
                 isInitData = true;
               }else{
                 handler(response.data.list);
-              }
                 this.filter.panelId = this.showPanel.id;
+              }
+              this.$nextTick(() => {
+                this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel);
+              });
             } else {
               this.showPanel.id = '';
               this.filter.panelId = '';
@@ -504,8 +501,6 @@
           }
         });
 
-        let vm = this;
-
         function handler(panelData) {
           panelData.forEach(panel => {
             if (panel.id == vm.showPanel.id) {
@@ -586,7 +581,7 @@
       clearInput() {
         this.$refs.queryPanel.focus();
       },
-      start (event) {
+      /*start (event) {
         // console.log('start', event, this.panelData);
 
         event.item.querySelector('.panelContent').style.background = '#d8dce1';
@@ -728,7 +723,7 @@
         let panelContent = dragClass.querySelector('.panelContent');
         panelContent.style.background = '#d8dce1';
 
-      },
+      },*/
       /*filterPanelFocus:function(e){
         e.stopPropagation();
       },