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

1.增加：config-account、config-promserver、alert-rule
---
 .../common/rightBox/alertConfigBox.vue        |  7 +++++--
 .../src/components/common/rightBox/dcBox.vue  |  8 +++++--
 .../src/components/page/config/account.vue    |  5 ++++-
 .../src/components/page/config/promServer.vue |  5 ++++-
 nezha-fronted/src/main.js                     | 21 ++++++++++++++++---
 5 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index f83bb3ea7..987ebfdf5 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-alert-config" v-if="rightBox.show">
+    <div class="right-box right-box-alert-config" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button type="button" v-if="alertRule.id != '' && rightBox.isEdit" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -57,7 +57,7 @@
             <el-form-item :label="$t('alert.severity')" prop="severity">
               <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.severity" placeholder=""  size="small">
                 <el-option :id="'alert-severity-'+item.key" v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
-                  <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
+                  <template v-if="!item.isEdit">{{item.value}}</template>
                   <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
                     <el-input type="text" v-model="item.name" size="mini"></el-input>
                   </span>
@@ -207,6 +207,9 @@
       }
     },
     methods: {
+      clickos() {
+        this.rightBox.show = false;
+      },
       show(show, isEdit) {
         this.rightBox.show = show;
         this.rightBox.isEdit = isEdit;
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index b67fc02dd..cc470742a 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-dc" v-if="rightBox.show">
+    <div class="right-box right-box-dc" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <button id="dc-del" type="button" v-if="currentDc.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">
@@ -101,6 +101,7 @@
         },
         rightBox: {
           show: false,
+          firstShow: false,
           title: '',
           isEdit: false
         },
@@ -162,10 +163,13 @@
         this.rightBox.show = show;
         this.rightBox.isEdit = isEdit;
       },
-
+      clickos() {
+        //this.rightBox.show = false;
+      },
       /*关闭弹框*/
       esc() {
         this.rightBox.show = false;
+        this.rightBox.firstShow = false;
       },
 
       /*弹出选择area弹框*/
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index e1aba6591..54d9b2306 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -85,7 +85,7 @@
     </div>
 
     <transition name="right-box">
-      <div class="right-box right-box-account" v-if="rightBox.show">
+      <div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->
         <div class="right-box-top-btns">
           <button type="button" v-if="user.userId != '' && rightBox.isEdit" @click="del(user)"
@@ -308,6 +308,9 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
+      clickos() {
+        this.rightBox.show = false;
+      },
       edit: function (u) {
         this.user = Object.assign({}, u);
         this.rightBox.isEdit = true;
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index c980ed2f8..00f0ab4d5 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -78,7 +78,7 @@
     </div>
 
     <transition name="right-box">
-      <div class="right-box right-box-prom" v-if="rightBox.show">
+      <div class="right-box right-box-prom" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->
         <div class="right-box-top-btns">
           <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)"
@@ -364,6 +364,9 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
+      clickos() {
+        this.rightBox.show = false;
+      },
       toEdit: function (u) {
         this.promServer = Object.assign({}, u);
         this.rightBox.isEdit = true;
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index ac9ced199..bfcea9013 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -65,13 +65,28 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
+const exceptClassName = [];
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {
     function documentHandler(e) {
-      // 这里判断点击的元素是否是本身，是本身，则返回
       if (el.contains(e.target)) {
         return false;
+      } else {
+        let flag = true;
+        let attrs = e.target.attributes;
+        for (let i = 0; i < attrs.length; i++) {
+          if (attrs[i].name == 'class') {
+            console.info(attrs[i].value)
+            if ((attrs[i].value + '').indexOf("el-select-dropdown") != -1) {
+              flag = false;
+              break;
+            }
+          }
+        }
+        if (!flag) {
+          return false;
+        }
       }
       // 判断指令中是否绑定了函数
       if (binding.expression) {
@@ -87,11 +102,11 @@ const clickoutside = {
 
     // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
     el.__vueClickOutside__ = documentHandler;
-    document.addEventListener('click', documentHandler);
+    document.addEventListener('mousedown', documentHandler);
   },
   unbind(el, binding) {
     // 解除事件监听
-    document.removeEventListener('click', el.__vueClickOutside__);
+    document.removeEventListener('mousedown', el.__vueClickOutside__);
     delete el.__vueClickOutside__;
   },
 };