From b9370a784945616c740252c3b8153ad4e95d13dc Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Tue, 9 May 2023 16:35:13 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2817=20fix=EF=BC=9Adashboard=20=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8823.01=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rightBox/chartRightBox/chartRightBox.scss |  1 +
 .../components/common/rightBox/panelBox.scss  |  4 ++
 .../components/common/rightBox/panelBox.vue   | 44 +++++++++++++++++--
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 9bf37ab4d..134c4171c 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -70,6 +70,7 @@
       margin-bottom: 10px;
       box-sizing: border-box;
       height: 32px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       .chart-title-content{
         flex: 1;
         display: flex;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index 8b90d5c42..6dc465091 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -172,6 +172,7 @@
       justify-content: space-between;
       box-sizing: border-box;
       height: 32px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       .variable-title-left{
         width: 450px;
         text-overflow: ellipsis;
@@ -198,6 +199,9 @@
         font-size: 17px;
       }
     } 
+    .is-item-box-error .variable-title {
+      border-color: #F56C6C
+    }
     .add-variable{
       border: 1px solid $--border-color-light;
       border-radius: 2px;
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 7a647d786..73fd9d27c 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -81,6 +81,7 @@
                 v-for="(item,index) of editPanel.param.variables"
                 :key="item.uid"
                 style="margin-top: 10px"
+                :class="item.error? 'is-item-box-error' : ''"
               >
                 <div class="variable-title">
                   <span class="variable-title-left">
@@ -107,7 +108,7 @@
                   </span>
                 </div>
                 <transition name="el-zoom-in-top">
-                  <div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
+                  <div class="form-items--half-width-group" v-show="!item.collapse" style="margin-top: 16px">
                     <!-- Name -->
                     <el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
                       :rules="[
@@ -116,7 +117,7 @@
                       { validator: variableValidator,trigger: 'blur'},
                       ]"
                     >
-                      <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
+                      <el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"  @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Type -->
                     <el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
@@ -152,7 +153,7 @@
                           </span>
                         </el-popover>
                       </div>
-                      <el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
+                      <el-input v-model="item.expression" placeholder="labels_names()" size="small" @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Regex -->
                     <el-form-item v-if="item.type==='query'" :label="$t('dashboard.dashboard.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
@@ -160,7 +161,7 @@
                     </el-form-item>
                     <!-- Custom values -->
                     <el-form-item v-if="item.type==='custom'" :label="$t('dashboard.dashboard.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
-                      <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
+                      <el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small" @change="hideError('variables', index)"/>
                     </el-form-item>
                     <!-- Multi-value -->
                     <el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
@@ -563,6 +564,39 @@ export default {
       this.esc(false)
     },
 
+    showError () {
+      this.$refs.form.validate((blooen, object) => {
+        Object.keys(object).forEach(item => {
+          const keyArr = item.split('.')
+          if (keyArr.length >= 4) {
+            this.editPanel[keyArr[0]][keyArr[1]][keyArr[2]].error = true
+          }
+        })
+        if (!blooen) {
+          this.$forceUpdate()
+        }
+      })
+    },
+    hideError (key, index) {
+      if (!this.editPanel.param[key] || !this.editPanel.param[key].length) {
+        return
+      }
+      this.$refs.form.validate((blooen, object) => {
+        console.log(Object.keys(object))
+        let flag = true
+        Object.keys(object).forEach(item => {
+          console.log(`param.${key}.${index}.`)
+          if (item.startsWith(`param.${key}.${index}.`)) {
+            flag = false
+          }
+        })
+        if (flag) {
+          this.editPanel.param[key][index].error = false
+          this.$forceUpdate()
+        }
+      })
+    },
+
     /* 保存 */
     save () {
       // 保存时把无用属性删除 再传入后台
@@ -570,6 +604,7 @@ export default {
         const temp = JSON.parse(JSON.stringify(item))
         delete temp.collapse
         delete temp.uid
+        delete temp.error
         return temp
       })
       const params = {
@@ -628,6 +663,7 @@ export default {
             })
           }
         } else {
+          this.showError()
           this.prevent_opt.save = false
           return false
         }