From 05cf68fe6e103f6db0e562926e84f43af198de7b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 22 Apr 2021 10:36:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BF=AE=E6=94=B9inputTags?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=20=E5=8E=BB=E9=99=A4=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=81=87=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/package.json                    |  1 +
 .../src/components/common/clickSearch.vue     |  4 +-
 .../common/rightBox/editEndpointBoxNew.vue    | 48 ++++++++++++------
 .../components/common/rightBox/moduleBox.vue  | 49 +++++++++++++------
 .../page/monitor/endpoint/endpointList.vue    |  9 ++--
 5 files changed, 78 insertions(+), 33 deletions(-)

diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 56912b3d8..8c735f170 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -11,6 +11,7 @@
     "lint": "eslint --fix --ext .js,.vue src"
   },
   "dependencies": {
+    "@johmun/vue-tags-input": "^2.1.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "@svgdotjs/svg.js": "^3.0.16",
     "@svgdotjs/svg.panzoom.js": "^2.1.1",
diff --git a/nezha-fronted/src/components/common/clickSearch.vue b/nezha-fronted/src/components/common/clickSearch.vue
index 535d38066..f6ab9db71 100644
--- a/nezha-fronted/src/components/common/clickSearch.vue
+++ b/nezha-fronted/src/components/common/clickSearch.vue
@@ -109,9 +109,9 @@ export default {
       this.titleSearchListCopy[key].showMore = !this.titleSearchListCopy[key].showMore
     }
   },
-  destroyed() {
+  destroyed () {
     window.removeEventListener('resize', this.needMore)
-  },
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index f7352db24..3b8246fbe 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -167,19 +167,25 @@
                 </el-form-item>
                 <span class="param-box-row-eq">=</span>
                 <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
-                  <el-select
-                    v-model="item.value"
-                    multiple
-                    filterable
-                    allow-create
-                    :ref="'select'+ index"
-                    placeholder="value" size="mini"
-                    default-first-option
-                    popper-class="config-dropdown hide-element"
-                    @change="(val)=>{paramObjchange(val,index)}"
-                  >
-                    <span slot="empty" class=""></span>
-                  </el-select>
+<!--                  <el-select-->
+<!--                    v-model="item.value"-->
+<!--                    multiple-->
+<!--                    filterable-->
+<!--                    allow-create-->
+<!--                    :ref="'select'+ index"-->
+<!--                    placeholder="value" size="mini"-->
+<!--                    default-first-option-->
+<!--                    popper-class="config-dropdown hide-element"-->
+<!--                    @change="(val)=>{paramObjchange(val,index)}"-->
+<!--                  >-->
+<!--                    <span slot="empty" class=""></span>-->
+<!--                  </el-select>-->
+                  <vue-tags-input
+                    v-model="item.tags"
+                    :tags="item.value"
+                    :maxlength="32"
+                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                  />
                 </el-form-item>
                 <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
@@ -255,6 +261,7 @@
 <script>
 import { noSpecialChar, port, nzNumber } from '../js/validate'
 import selectWalk from '../popBox/selectWalk'
+import VueTagsInput from '@johmun/vue-tags-input'
 
 export default {
   name: 'editEndpointBoxNew',
@@ -275,7 +282,8 @@ export default {
     }
   },
   components: {
-    'select-walk': selectWalk
+    'select-walk': selectWalk,
+    VueTagsInput
   },
   data () {
     return {
@@ -562,6 +570,9 @@ export default {
       }
       this.editEndpoint.labelModule.splice(index, 1)
     },
+    tagsChange (newTags, index) {
+      this.editEndpoint.paramObj[index].value = newTags.map(item => item.text)
+    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}
@@ -840,6 +851,15 @@ export default {
     top: 14px;
     cursor: pointer;
   }
+  /deep/ .ti-input{
+    min-height: 30px;
+    overflow-x: hidden;
+    border-radius: 2px;
+    padding: 0;
+  }
+  /deep/ .ti-tag{
+    background-color: #FA901C;
+  }
 </style>
 <style>
   .sub-label {
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 1804db3bc..87911d1c4 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -159,19 +159,26 @@
                 </el-form-item>
                 <span class="param-box-row-eq">=</span>
                 <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
-                  <el-select
-                    v-model="item.value"
-                    multiple
-                    filterable
-                    allow-create
-                    :ref="'select'+ index"
-                    placeholder="value" size="mini"
-                    default-first-option
-                    popper-class="config-dropdown hide-element"
-                    @change="(val)=>{paramObjchange(val,index)}"
-                  >
-                    <span slot="empty" class=""></span>
-                  </el-select>
+<!--                  <el-select-->
+<!--                    v-model=""-->
+<!--                    multiple-->
+<!--                    filterable-->
+<!--                    allow-create-->
+<!--                    :ref="'select'+ index"-->
+<!--                    placeholder="value" size="mini"-->
+<!--                    default-first-option-->
+<!--                    popper-class="config-dropdown hide-element"-->
+<!--                    @change="(val)=>{paramObjchange(val,index)}"-->
+<!--                  >-->
+<!--                    <span slot="empty" class=""></span>-->
+<!--                  </el-select>-->
+                  <vue-tags-input
+                    v-model="item.tags"
+                    :tags="item.value"
+                    :maxlength="32"
+                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                  />
+
                 </el-form-item>
                 <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
@@ -247,6 +254,7 @@
 <script>
 import { noSpecialChar, port, nzNumber } from '../js/validate'
 import selectWalk from '../popBox/selectWalk'
+import VueTagsInput from '@johmun/vue-tags-input'
 
 export default {
   name: 'moduleBox',
@@ -255,7 +263,8 @@ export default {
     currentProject: Object
   },
   components: {
-    'select-walk': selectWalk
+    'select-walk': selectWalk,
+    VueTagsInput
   },
   data () {
     return {
@@ -541,6 +550,9 @@ export default {
       }
       this.editModule.labelModule.splice(index, 1)
     },
+    tagsChange (newTags, index) {
+      this.editModule.paramObj[index].value = newTags.map(item => item.text)
+    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}
@@ -818,6 +830,15 @@ export default {
     top: 14px;
     cursor: pointer;
   }
+  /deep/ .ti-input{
+    min-height: 30px;
+    overflow-x: hidden;
+    border-radius: 2px;
+    padding: 0;
+  }
+  /deep/ .ti-tag{
+    background-color: #FA901C;
+  }
 </style>
 <style>
   .sub-label {
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 05d4f1eb6..7c4f496ca 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -158,9 +158,13 @@ export default {
         },
         state: {
           label: 'state',
-          key: 'state',
+          key: 'states',
           type: 'checkBox',
-          children: [],
+          children: [
+            { key: 'Down', value: 0, name: 'Down' },
+            { key: 'Up', value: 1, name: 'Up' },
+            { key: 'Suspended', value: 0, name: 'Suspended' }
+          ],
           show: true,
           showMore: false,
           width: 0,
@@ -277,7 +281,6 @@ export default {
           })
         }
       })
-      this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
     },
     batchModify () {
       if (!this.batchDeleteObjs.length) {