From 99bd4727edbb3d7f8a3a42a325bca47c4578de71 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 24 Jun 2021 18:21:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AFtree=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=EF=BC=9Bname=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/common/DatasetGroupSelector.vue   | 39 ++++++++++++-------
 .../common/DatasetGroupSelectorTree.vue       |  2 +-
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index fc5a2ce319..d3174bfab1 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -9,27 +9,29 @@
       </el-row>
       <el-divider />
 
-      <!--      <el-row>-->
-      <!--        <el-form>-->
-      <!--          <el-form-item class="form-item">-->
-      <!--            <el-input-->
-      <!--              v-model="search"-->
-      <!--              size="mini"-->
-      <!--              :placeholder="$t('dataset.search')"-->
-      <!--              prefix-icon="el-icon-search"-->
-      <!--              clearable-->
-      <!--            />-->
-      <!--          </el-form-item>-->
-      <!--        </el-form>-->
-      <!--      </el-row>-->
+      <el-row>
+        <el-form>
+          <el-form-item class="form-item">
+            <el-input
+              v-model="filterText"
+              size="mini"
+              :placeholder="$t('dataset.search')"
+              prefix-icon="el-icon-search"
+              clearable
+            />
+          </el-form-item>
+        </el-form>
+      </el-row>
 
       <el-col class="custom-tree-container">
         <div class="block" :style="treeStyle">
           <el-tree
+            ref="tree"
             :default-expanded-keys="expandedArray"
             :data="data"
             node-key="id"
             :expand-on-click-node="false"
+            :filter-node-method="filterNode"
             @node-click="nodeClick"
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
@@ -172,7 +174,8 @@ export default {
       treeStyle: this.fixHeight ? {
         height: '200px',
         overflow: 'auto'
-      } : {}
+      } : {},
+      filterText: ''
     }
   },
   computed: {},
@@ -198,6 +201,9 @@ export default {
       } else {
         this.tableData = JSON.parse(JSON.stringify(this.tables))
       }
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val)
     }
   },
   mounted() {
@@ -208,6 +214,10 @@ export default {
     this.kettleState()
   },
   methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
     kettleState() {
       isKettleRunning(false).then(res => {
         this.kettleRunning = res.data
@@ -270,6 +280,7 @@ export default {
 
     nodeClick(data, node) {
       // if (data.type === 'scene') {
+      this.filterText = ''
       this.sceneMode = true
       this.currGroup = data
       this.tableTree()
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index fc41c663f9..ad521c8736 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -113,7 +113,7 @@
 import { isKettleRunning, post } from '@/api/dataset/dataset'
 
 export default {
-  name: 'DatasetGroupSelector',
+  name: 'DatasetGroupSelectorTree',
   props: {
     customType: {
       type: Array,