From d72e39bafa17dee525d54d7f0b37dfd54bdd4773 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 19 Jun 2020 18:35:13 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20asset=E8=AF=A6=E6=83=85=E9=A1=B5tag?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     | 36 +++++++++++++++++--
 .../components/common/rightBox/assetBox.vue   | 27 ++++++++++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 3edfd880f..911d125be 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1376,14 +1376,14 @@ li{
   margin-left: 10px;
 }
 /* start--param*/
-.param-box {
+.param-box, .tag-edit-box {
   border: 1px solid #DCDFE6;
   border-radius: 4px;
 }
 .param-box-endpoint {
   height: 325px;
 }
-.param-box-module {
+.param-box-module, .tag-edit-box {
   height: 140px;
 }
 .param-box-row {
@@ -2042,3 +2042,35 @@ li{
   font-family: NotoSans !important;
   font-size: 12px !important;
 }
+
+.tag-edit-box {
+  .tag-edit-box-head {
+    display: flex;
+    box-sizing: border-box;
+    >div {
+      font-size: 13px;
+      color: #0275b8;
+    }
+    >div:not(:last-of-type) {
+      width: calc(50% - 25px);
+      padding: 0 10px;
+    }
+    >div:last-of-type {
+      width: 50px;
+    }
+  }
+  .tag-edit-box-body {
+    display: flex;
+    box-sizing: border-box;
+    .tag-edit {
+      padding: 0 10px;
+    }
+    >div:not(:last-of-type) {
+      width: calc(50% - 25px);
+      padding: 0 10px;
+    }
+    >div:last-of-type {
+      width: 50px;
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 0035eac7e..005aa5f19 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -137,7 +137,25 @@
                 </button>
               </div>
             </template>
-            <div class="param-box param-box-module">
+            <div class="tag-edit-box">
+              <div class="tag-edit-box-head">
+                <div>Tag</div>
+                <div>Value</div>
+                <div>Action</div>
+              </div>
+              <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
+                <div class="tag-edit-box-body" v-for="(item, index) in assetData.tags">
+                  <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.tag'">
+                    <el-input placeholder="tag" size="mini" v-model="item.tag"></el-input>
+                  </el-form-item>
+                  <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
+                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                  </el-form-item>
+                  <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
+                </div>
+              </el-scrollbar>
+            </div>
+            <!--<div class="param-box param-box-module">
               <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
                 <div class="param-box-row" v-for="(item, index) in assetData.tags">
                   <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.tag'">
@@ -150,7 +168,7 @@
                   <span class="param-box-row-symbol" :id="'asset-tag-remove-param-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
                 </div>
               </el-scrollbar>
-            </div>
+            </div>-->
           </el-form-item>
           <!------------------------------------------impi---------------------------------------------->
           <!--<div v-if="assetType == 1">
@@ -504,11 +522,14 @@
       },
       addTag() {
         this.assetData.tags.push({tag: "", value: ""});
+        this.$nextTick(() => {
+          this.$refs.tagEditBoxScrollbar.update();
+        });
       },
       removeTag: function(index) {
         this.assetData.tags.splice(index, 1);
         this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
+          this.$refs.tagEditBoxScrollbar.update();
         });
       },
       clickOutSide(data) {