From 5d9483ed6358e4749251a58343f928e6ee3130a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Tue, 12 Jan 2021 20:39:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20panel=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   2 +-
 .../components/common/popBox/selectPanel.vue  | 183 ++++++++++++++++++
 .../components/page/dashboard/chartBox.vue    |  56 +++---
 .../src/components/page/dashboard/panel.vue   |  61 ++++--
 4 files changed, 261 insertions(+), 41 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/popBox/selectPanel.vue

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 95cc402c4..6d8c4e2b1 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1157,7 +1157,7 @@ li{
   padding: 0 20px 20px 20px;
   border-radius: 10px;
 }
-.nz-pop-select-area {
+.nz-pop-select-area, .nz-pop-select-panel {
   padding: 0 !important;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
 }
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
new file mode 100644
index 000000000..b4973ef00
--- /dev/null
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -0,0 +1,183 @@
+<template>
+  <el-popover :placement="placement" popper-class="nz-pop nz-pop-select-panel" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" width="400">
+    <div>
+      <div class="pop-item-wider">
+
+        <slot name="header"></slot>
+
+        <div class="select-panel-tree">
+          <el-tree
+            :data="panelData"
+            :draggable="!panelLock"
+            :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
+            check-strictly
+            default-expand-all
+            highlight-current
+            node-key="id"
+            ref="panelTree">
+            <div class="tree--node" slot-scope="{ node, data }">
+              <span>{{ node.label }}</span>
+              <span class="tree--operation" v-if="!panelLock">
+                <span @click.stop="deletePanel(data)" class="panel-dropdown-btn panel-dropdown-btn-delete"><i class="nz-icon nz-icon-delete"></i></span>
+                <span @click.stop="editPanel(data)" class="panel-dropdown-btn"><i class="nz-icon nz-icon-edit"></i></span>
+              </span>
+            </div>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <div slot="reference">
+      <slot name="trigger"></slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+    export default {
+      name: "selectPanel",
+      props:{
+        placement: {type: String},
+        isEdit: {type: Boolean, default: true},
+        panelData: {type: Array},
+        showPanel: {type: Number},
+        panelLock: {type: Boolean, default: true},
+        filterPanel: {type: String},
+      },
+      mounted() {
+        this.$refs.panelTree.setCurrentKey(this.showPanel);
+      },
+      watch: {
+        filterPanel: {
+          immediate: true,
+          handler(n) {
+            this.$refs.panelTree && this.$refs.panelTree.filter(n);
+          }
+        }
+      },
+      data(){
+        return {
+          popBox: {show: false},
+          panel: {id: '', name: ''}
+        }
+      },
+      methods:{
+        /*
+        * node: 被拖的节点
+        * relative: 发生关系的节点
+        * position: ['before', 'after', 'inner'] 与relative节点的关系
+        * */
+        nodeDrop(node, relative, position, event) {
+          if (position === 'inner') {
+            node.data.pid = relative.data.id;
+          } else {
+            node.data.pid = relative.data.pid;
+          }
+          this.updateWeight();
+        },
+        filterNode(value, data) {
+          if (!value) return true;
+          return data.name.indexOf(value) !== -1;
+        },
+        updateWeight() {
+          let toUpdate = [];
+          let count = 0;
+          handler(this.panelData);
+
+          function handler(panelData) {
+            panelData.forEach(panel => {
+              panel.weight = count++;
+              toUpdate.push({id: panel.id, pid: panel.pid, weight: panel.weight});
+              if (panel.children && panel.children.length > 0) {
+                handler(panel.children);
+              }
+            });
+          }
+
+          this.$put("/panel/tree", toUpdate);
+        },
+        deletePanel(data) {
+          this.$emit("deletePanel", data);
+        },
+        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.esc();
+        },
+        //tree设为单选
+        clearOthers(data, checked, child) {
+          if (checked) {
+            this.panel = data;
+            this.$refs.panelTree.setCheckedKeys([data.id]);
+          } else {
+            this.panel = {id: '', name: ''};
+          }
+        }
+      },
+      beforeDestroy(){
+
+      }
+    }
+</script>
+
+<style lang="scss">
+.select-panel-tree {
+  height: 350px;
+  overflow: auto;
+}
+.select-panel-tree .el-tree-node__content {
+  height: 34px;
+  line-height: 34px;
+}
+.select-panel-tree .el-tree-node__content:hover {
+  color: $global-text-color-active;
+}
+.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  background-color: #F5F7FA;
+  font-weight: bold;
+  color: $global-text-color-active;
+}
+.tree--node {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 28px);
+}
+.tree--operation {
+  opacity: 0;
+}
+.tree--node:hover .tree--operation {
+  opacity: 1;
+}
+
+.panel-dropdown-btn {
+  color: #60BEFF;
+}
+.panel-dropdown-btn:hover {
+  color: #409EFF;
+}
+.panel-dropdown-btn-delete {
+  color: #F98D9A;
+}
+
+.panel-dropdown-btn-delete:hover {
+  color: #D96D7A;
+}
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index b28ae0c21..e1f269638 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -168,7 +168,7 @@
       <div class="right-box-form-box" ref="scrollbar">
         <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position="right" label-width="120px" ref="chartForm">
           <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
-            <el-autocomplete
+            <!--<el-autocomplete
               :fetch-suggestions="panelSuggestion"
               @input="inputPanel"
               placeholder=""
@@ -178,7 +178,18 @@
               v-model.trim="editChart.panelName"
               value-key="name"
             >
-            </el-autocomplete>
+            </el-autocomplete>-->
+            <select-panel :filter-panel="filterPanel" :panel-lock="true" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel" ref="selectPanel"
+                          v-if="!editChart.id">
+              <template v-slot:header>
+                <div class="panel-select-header">
+                  <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel"></el-input>
+                </div>
+              </template>
+              <template v-slot:trigger>
+                <el-input placeholder="" readonly="readonly" size="small" v-model="panelName"></el-input>
+              </template>
+            </select-panel>
             <el-input :value="editChart.panelName" readonly="readonly" size="small" v-if="editChart.id"></el-input>
 
           </el-form-item>
@@ -495,6 +506,8 @@
   import promqlInput from "./explore/promqlInput";
   import {nzNumber} from "../../common/js/validate";
   import richTextEditor from "../../charts/richTextEditor";
+  import selectPanel from "../../common/popBox/selectPanel";
+
   var rz = {
     methods: {
       rz(e) {
@@ -518,7 +531,7 @@
           save:false,
         },
         editChart: {},
-
+        filterPanel: "",
         statisticsList: this.$CONSTANTS.statisticsList,
 
         promqlCount: 1,
@@ -625,7 +638,8 @@
       'chart-preview':chartPreview,
       'alert-chart-param':alertChartParam,
       'promql-input': promqlInput,
-      'rich-text-editor':richTextEditor
+      'rich-text-editor':richTextEditor,
+      selectPanel,
     },
     mounted() {
       this.$nextTick(() => {
@@ -641,6 +655,10 @@
       clickOutside() {
         this.esc(false);
       },
+      selectPanel(panel) {
+        this.panelName = panel.name;
+        this.panelId = panel.id;
+      },
       toAddPanel() {
         this.$refs.panelBox2.show(true);
         this.panel = {
@@ -829,10 +847,8 @@
       },
       // 新建图表
       addCharts(params) {
-        let panelId;
-        let panel;
         //先处理panel
-        let panelPromise=new Promise(resolve => {
+        /*let panelPromise=new Promise(resolve => {
           if (this.panelId) {
             panelId = this.panelId;
             panel=this.panelData.find(p => p.id === this.panelId);
@@ -861,17 +877,16 @@
               });
             }
           }
-        });
+        });*/
 
-        panelPromise.then(()=>{
-          if (panelId) {
-            this.panelId = panelId;
+        //panelPromise.then(()=>{
+          if (this.panelId) {
             this.$post('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response => {
               if (response.code === 200) {
                 this.esc();
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                 this.$refs.chartForm.resetFields();//清空表单
-                this.$emit('on-create-success', 'create', response.data, params, panel);
+                this.$emit('on-create-success', 'create', response.data, params, {id: this.panelId, name: this.panelName});
               } else {
                 if (response.msg) {
                   this.$message.error(response.msg);
@@ -882,7 +897,7 @@
               this.prevent_opt.save=false
             });
           }
-        })
+        //})
       },
       // 更新图表
       updateCharts(params) {
@@ -1684,21 +1699,6 @@
           }
         }
       },
-      editChart: {
-        deep: true,
-        immediate: true,
-        handler(n) {
-          let panel = this.panelData.find(p => {
-            return p.name == n.panelName;
-          });
-
-          if(panel){
-            this.panelId = panel.id;
-          }else{
-            this.panelId = null;
-          }
-        }
-      }
     },
     beforeDestroy() {
       if(this.$refs.chartTag){
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 854948247..8787adc15 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -6,13 +6,27 @@
       </div>
       <template v-else>
         <div class="top-tool-main-left">
-          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
+          <select-panel :current-panel="showPanel" :filter-panel="filterPanel" :panel-lock="panelLock" :panelData="panelData" :placement="'bottom-start'" @deletePanel="del" @editPanel="edit"
+                        @selectPanel="panelChange" ref="selectPanel" style="width: 300px;">
+            <template v-slot:header>
+              <div class="panel-select-header">
+                <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel"></el-input>
+                <span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" class="panel-select-add" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span>
+              </div>
+            </template>
+            <template v-slot:trigger>
+              <el-input class="panel-name input-x-mini-26" placeholder="" readonly="readonly" v-model="showPanel.name">
+                <i class="el-icon-menu" slot="prefix"></i>
+              </el-input>
+            </template>
+          </select-panel>
+          <!--<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
             <el-row  :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
               <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
               <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
             </el-row>
             <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
-              <!--<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>-->
+              &lt;!&ndash;<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>&ndash;&gt;
               <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
                 <el-dropdown-item >
                   <el-row class="panel-list-width" :gutter="10" >
@@ -47,7 +61,7 @@
                 </draggable>
               </div>
             </el-dropdown-menu>
-          </el-dropdown>
+          </el-dropdown>-->
         </div>
         <div class="top-tool-main-right">
           <div class="top-tool-search relative-position margin-r-20">
@@ -108,6 +122,8 @@
   import draggable from 'vuedraggable'
   import pickTime from "../../common/pickTime";
   import exportXLSX from "../../common/exportXLSX";
+  import selectPanel from "../../common/popBox/selectPanel";
+  
   export default {
     name: "panel",
     data() {
@@ -192,6 +208,7 @@
       draggable,
       'pick-time':pickTime,
       'export-excel':exportXLSX,
+      selectPanel,
     },
     methods: {
       //刷新
@@ -217,8 +234,8 @@
         //this.$refs.chartList.initCurrentRecordNum();
         this.$refs.chartList.cleanData();
         this.getData(this.filter);
-
       },
+
       del(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
@@ -696,7 +713,7 @@
         panelContent.style.background = '#d8dce1';
 
       },
-      filterPanelFocus:function(e){
+      /*filterPanelFocus:function(e){
         e.stopPropagation();
       },
       filterPanelFunc:function(){
@@ -706,7 +723,7 @@
         }else{
           this.showPanelList = this.panelData;
         }
-      },
+      },*/
       tableListEnter(){
         this.tableHover = true;
       },
@@ -751,8 +768,7 @@
   }
 
   .panel-list-width {
-    width:240px;
-    overflow: hidden;
+    width: 400px;
   }
 
   .panel-dropdown-title {
@@ -857,10 +873,6 @@
   }
 
   /* end--Panel-自定义可编辑的el-select下拉框样式*/
-  .panel-select-width {
-    width: 150px;
-  }
-
   .panel-refresh-interval {
     margin-right: 5px;
     float: right;
@@ -949,6 +961,31 @@
   }
 </style>
 <style lang="scss">
+  .panel-name {
+    position: relative;
+
+    .el-input__prefix i {
+      position: absolute;
+      left: 3px;
+      top: calc(50% + 1px);
+      transform: translateY(-50%);
+    }
+  }
+  .panel-name>input {
+    cursor: pointer;
+    padding-left: 27px !important;
+  }
+  .panel-select-header {
+    padding: 0 0 10px 16px;
+    width: 400px;
+  }
+  .panel-select-add {
+    cursor: pointer;
+  }
+  .panel-select-add:hover {
+    color: $global-text-color-active;
+  }
+
   .panel .top-tools input {
     background-color: $content-right-background-color;
   }