From d5f41c9ad060b3e2de16e43c2370930d08774a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <523037378@qq.com>
Date: Wed, 26 Feb 2020 18:26:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=80=E6=9C=89=E4=BE=A7=E6=BB=91?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=82=B9=E5=87=BB=E5=A4=96=E9=83=A8=E5=90=8E?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=9A=84=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss           |  4 ++++
 .../components/common/rightBox/addEndpointBox.vue   |  6 +++++-
 .../components/common/rightBox/alertConfigBox.vue   |  2 +-
 .../src/components/common/rightBox/assetBox.vue     |  5 ++++-
 .../src/components/common/rightBox/dcBox.vue        |  2 +-
 .../components/common/rightBox/editEndpointBox.vue  |  6 +++++-
 .../src/components/common/rightBox/moduleBox.vue    |  6 +++++-
 .../src/components/common/rightBox/panelBox.vue     |  5 ++++-
 .../src/components/common/rightBox/projectBox.vue   |  6 +++++-
 .../src/components/page/dashboard/chartBox.vue      |  5 ++++-
 nezha-fronted/src/main.js                           | 13 ++++++-------
 11 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index a59c0c64f..c2fb4dadc 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1134,3 +1134,7 @@ li{
 .el-textarea textarea {
   height: 140px !important;
 }
+/*el-data-picker选中背景色*/
+.el-date-table td.current:not(.disabled) span {
+  background-color: $global-text-color-active;
+}
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 56365f56c..4ce404603 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box-840">
-    <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
+    <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
       </div>
@@ -337,6 +337,10 @@
         this.editParamBox.show = show;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index 987ebfdf5..e2dd2eee8 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -36,7 +36,7 @@
             </el-form-item>
             <!--linkedId-->
             <el-form-item :label="$t('alert.config.link')" prop="linkId">
-              <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small">
+              <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small" popper-class="config-dropdown">
                 <el-option :id="'alert-linke-'+item.id" v-for="item in linkObjList" :key="item.id" :label="alertRule.type == 3 ? item.host : item.name" :value="item.id"></el-option>
               </el-select>
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 261c85f97..15a1f929f 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box-580">
-    <div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit">
+    <div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit" v-clickoutside="clickos">
       <!--顶部按钮-->
       <div class="right-box-top-btns">
         <button v-if="!tabView && pageObj.id" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del"
@@ -650,6 +650,9 @@
       }
     },
     methods: {
+      clickos() {
+        this.sendStateData('close');
+      },
       cancelEdit(data) {
         if (data === false) {
           this.getAssetTypeOptionData();
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index cc470742a..37a135a4d 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -164,7 +164,7 @@
         this.rightBox.isEdit = isEdit;
       },
       clickos() {
-        //this.rightBox.show = false;
+        this.rightBox.show = false;
       },
       /*关闭弹框*/
       esc() {
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 88927766f..d9cafa50d 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
+    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -235,6 +235,10 @@
         this.subBox.show = false;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       // 清除param
       clearAllParam() {
         this.endpoint.paramObj = [];
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 8fb501bca..b6bab7a9e 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-module" v-if="rightBox.show">
+    <div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="module-del" type="button" v-if="module.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -140,6 +140,10 @@
         this.rightBox.show = false;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*保存*/
       save() {
         this.module.param = this.paramToJson(this.module.paramObj);
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 703f1b6e3..bac40d8b2 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -1,6 +1,6 @@
 <template key="panelBox">
   <transition name="right-box-580">
-    <div class="right-box right-box-panel z-top" v-if="rightBox.show">
+    <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -59,6 +59,9 @@
       setTitle(title) {
         this.rightBox.title = title;
       },
+      clickos() {
+        this.esc();
+      },
       //面板相关方法
       del: function(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 6585f8e4d..e7bf3646c 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-project" v-if="rightBox.show">
+    <div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -71,6 +71,10 @@
         this.rightBox.isEdit=isEdit;
       },
 
+      clickos() {
+        this.esc();
+      },
+
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index c18228de4..e1c34c1e7 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -53,7 +53,7 @@
   }
 </style>
 <template key="chartBox">
-  <div>
+  <div v-clickoutside="clickos">
     <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
 
     <transition name="right-box">
@@ -270,6 +270,9 @@
       show(show) {
         this.rightBox.show = show;
       },
+      clickos() {
+        this.esc();
+      },
       toAddPanel() {
         this.$refs.panelBox2.show(true);
         this.panel = {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 81f96adaa..4204a68cc 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -65,7 +65,7 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
-const exceptClassName = []; //clickoutside排除的class
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
@@ -73,14 +73,13 @@ const clickoutside = {
       if (el.contains(e.target)) {
         return false;
       } else {
+        console.info(e)
         let flag = true;
-        let attrs = e.target.attributes;
-        for (let i = 0; i < attrs.length; i++) {
-          if (attrs[i].name == 'class') {
-
-            if ((attrs[i].value + '').indexOf("el-select-dropdown") != -1) {
+        top: for (let i = 0; i < e.path.length; i++) {
+          for (let j = 0; j < exceptClassName.length; j++) {
+            if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
               flag = false;
-              break;
+              break top;
             }
           }
         }