From 48c7a47b008ce98b81c72968bc152d42eb0e690c Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 30 Jun 2021 18:13:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=8D=A2=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9B=86=E6=8F=90=E7=A4=BA=E4=BC=98=E5=8C=96=EF=BC=9B=E6=A8=AA?=
 =?UTF-8?q?=E3=80=81=E7=BA=B5=E8=BD=B4=E5=AD=97=E4=BD=93=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=EF=BC=9B=E8=A7=86=E5=9B=BE=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86tree=E5=A2=9E=E5=8A=A0=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/XAxisSelector.vue         |   2 +-
 .../component-style/YAxisSelector.vue         |   2 +-
 frontend/src/views/chart/group/Group.vue      |   2 +-
 frontend/src/views/chart/view/ChartEdit.vue   |   2 +-
 .../src/views/chart/view/TableSelector.vue    |  10 +-
 .../common/DatasetGroupSelectorTree.vue       | 205 +++++++++++-------
 frontend/src/views/dataset/group/Group.vue    |   2 +-
 7 files changed, 141 insertions(+), 84 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index d3b0e6c7ec..e09920ce16 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -123,7 +123,7 @@ export default {
   methods: {
     init() {
       const arr = []
-      for (let i = 10; i <= 40; i = i + 2) {
+      for (let i = 6; i <= 40; i = i + 2) {
         arr.push({
           name: i + '',
           value: i + ''
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index ff50ae1ce3..2614d39d2e 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -123,7 +123,7 @@ export default {
   methods: {
     init() {
       const arr = []
-      for (let i = 10; i <= 40; i = i + 2) {
+      for (let i = 6; i <= 40; i = i + 2) {
         arr.push({
           name: i + '',
           value: i + ''
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 823ae8da75..2aafc83748 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -808,7 +808,7 @@ export default {
           }
         }
       } else {
-        node.data.children && resolve(node.data.children)
+        node.data.children ? resolve(node.data.children) : resolve([])
       }
     },
 
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index fdd0e459d7..c48209a865 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -345,7 +345,7 @@
       :destroy-on-close="true"
     >
       <table-selector @getTable="getTable" />
-      <span>{{ $t('chart.change_ds_tip') }}</span>
+      <p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
         <el-button type="primary" size="mini" :disabled="!table.id" @click="changeChart">{{ $t('chart.confirm') }}</el-button>
diff --git a/frontend/src/views/chart/view/TableSelector.vue b/frontend/src/views/chart/view/TableSelector.vue
index 5ce2a2610b..9986e4575c 100644
--- a/frontend/src/views/chart/view/TableSelector.vue
+++ b/frontend/src/views/chart/view/TableSelector.vue
@@ -18,6 +18,7 @@ import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 // import DatasetGroupSelector from '../../dataset/common/DatasetGroupSelector'
 import DatasetGroupSelectorTree from '../../dataset/common/DatasetGroupSelectorTree'
 import DatasetTableData from '../../dataset/common/DatasetTableData'
+import { getTable } from '@/api/dataset/dataset'
 
 export default {
   name: 'TableSelector',
@@ -37,8 +38,13 @@ export default {
   },
   methods: {
     getTable(table) {
-      this.table = table
-      this.$emit('getTable', table)
+      // this.table = table
+      getTable(table.id).then(response => {
+        this.table = response.data
+        this.$emit('getTable', this.table)
+      }).catch(res => {
+        this.table = {}
+      })
     }
   }
 }
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
index ad521c8736..7f5904dda5 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
@@ -9,6 +9,20 @@
       </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-col class="custom-tree-container">
         <div class="block">
           <el-tree
@@ -56,61 +70,12 @@
         </div>
       </el-col>
     </el-col>
-
-    <!--scene-->
-    <!--    <el-col v-if="sceneMode" v-loading="dsLoading">-->
-    <!--      <el-row class="title-css scene-title">-->
-    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
-    <!--          {{ currGroup.name }}-->
-    <!--        </span>-->
-    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
-    <!--          &lt;!&ndash;          {{ $t('dataset.back') }}&ndash;&gt;-->
-    <!--        </el-button>-->
-    <!--      </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-tree-->
-    <!--        :data="tableData"-->
-    <!--        node-key="id"-->
-    <!--        :expand-on-click-node="true"-->
-    <!--        class="tree-list"-->
-    <!--        highlight-current-->
-    <!--        @node-click="sceneClick"-->
-    <!--      >-->
-    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list">-->
-    <!--          <span :id="data.id" style="display: flex;flex: 1;width: 0;">-->
-    <!--            <span>-->
-    <!--              <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />-->
-    <!--              <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />-->
-    <!--              <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />-->
-    <!--              <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />-->
-    <!--            </span>-->
-    <!--            <span v-if="data.type === 'db' || data.type === 'sql'">-->
-    <!--              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
-    <!--              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
-    <!--            </span>-->
-    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
-    <!--          </span>-->
-    <!--        </span>-->
-    <!--      </el-tree>-->
-    <!--    </el-col>-->
   </el-col>
 </template>
 
 <script>
 import { isKettleRunning, post } from '@/api/dataset/dataset'
+import { authModel } from '@/api/system/sysAuth'
 
 export default {
   name: 'DatasetGroupSelectorTree',
@@ -172,8 +137,11 @@ export default {
       treeProps: {
         label: 'name',
         children: 'children',
-        isLeaf: 'isLeaf'
-      }
+        isLeaf: 'isLeaf',
+        id: 'id',
+        parentId: 'pid'
+      },
+      isTreeSearch: false
     }
   },
   computed: {},
@@ -194,11 +162,15 @@ export default {
       }
     },
     search(val) {
-      if (val && val !== '') {
-        this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
-      } else {
-        this.tableData = JSON.parse(JSON.stringify(this.tables))
+      this.$emit('switchComponent', { name: '' })
+      this.data = []
+      this.expandedArray = []
+      if (this.timer) {
+        clearTimeout(this.timer)
       }
+      this.timer = setTimeout(() => {
+        this.getTreeData(val)
+      }, (val && val !== '') ? 500 : 0)
     }
   },
   mounted() {
@@ -376,32 +348,111 @@ export default {
     },
 
     loadNode(node, resolve) {
-      if (node.data.id) {
-        this.dsLoading = true
-        post('/dataset/table/listAndGroup', {
-          sort: 'type asc,name asc,create_time desc',
-          sceneId: node.data.id,
-          mode: this.mode < 0 ? null : this.mode,
-          typeFilter: this.customType ? this.customType : null
-        }, false).then(response => {
-          this.tables = response.data
-          for (let i = 0; i < this.tables.length; i++) {
-            if (this.tables[i].mode === 1 && this.kettleRunning === false) {
-              this.$set(this.tables[i], 'disabled', true)
+      if (!this.isTreeSearch) {
+        if (node.data.id) {
+          this.dsLoading = true
+          post('/dataset/table/listAndGroup', {
+            sort: 'type asc,name asc,create_time desc',
+            sceneId: node.data.id,
+            mode: this.mode < 0 ? null : this.mode,
+            typeFilter: this.customType ? this.customType : null
+          }, false).then(response => {
+            this.tables = response.data
+            for (let i = 0; i < this.tables.length; i++) {
+              if (this.tables[i].mode === 1 && this.kettleRunning === false) {
+                this.$set(this.tables[i], 'disabled', true)
+              }
             }
-          }
-          this.tableData = JSON.parse(JSON.stringify(this.tables))
+            this.tableData = JSON.parse(JSON.stringify(this.tables))
 
-          this.$nextTick(function() {
-            this.unionDataChange()
+            this.$nextTick(function() {
+              this.unionDataChange()
+            })
+            this.dsLoading = false
+            resolve(this.tableData)
+          }).catch(res => {
+            this.dsLoading = false
           })
-          this.dsLoading = false
-          resolve(this.tableData)
-        }).catch(res => {
-          this.dsLoading = false
+        }
+      } else {
+        node.data.children ? resolve(node.data.children) : resolve([])
+      }
+    },
+
+    refreshNodeBy(id) {
+      if (this.isTreeSearch) {
+        this.data = []
+        this.expandedArray = []
+        this.searchTree(this.search)
+      } else {
+        if (!id || id === '0') {
+          this.treeNode(this.groupForm)
+        } else {
+          const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
+          node.loaded = false
+          node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
+        }
+      }
+    },
+
+    searchTree(val) {
+      const queryCondition = {
+        withExtend: 'parent',
+        modelType: 'dataset',
+        name: val
+      }
+      authModel(queryCondition).then(res => {
+        this.data = this.buildTree(res.data)
+      })
+    },
+
+    buildTree(arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el[this.treeProps.id]] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点 ###
+        el.type = el.modelInnerType
+        el.isLeaf = el.leaf
+        if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el[this.treeProps.parentId]]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
+
+        // 设置展开节点 如果没有子节点则不进行展开
+        if (parentEl.children.length > 0) {
+          this.expandedArray.push(parentEl[this.treeProps.id])
+        }
+      })
+      return roots
+    },
+
+    // 高亮显示搜索内容
+    highlights(data) {
+      if (data && this.search && this.search.length > 0) {
+        const replaceReg = new RegExp(this.search, 'g')// 匹配关键字正则
+        const replaceString = '<span style="color: #0a7be0">' + this.search + '</span>' // 高亮替换v-html值
+        data.forEach(item => {
+          item.name = item.name.replace(replaceReg, replaceString) // 开始替换
+          item.label = item.label.replace(replaceReg, replaceString) // 开始替换
         })
       }
-      // }
+    },
+
+    getTreeData(val) {
+      if (val) {
+        this.isTreeSearch = true
+        this.searchTree(val)
+      } else {
+        this.isTreeSearch = false
+        this.treeNode(this.groupForm)
+      }
     }
   }
 }
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 27859b5136..e5e9bff173 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -828,7 +828,7 @@ export default {
           }
         }
       } else {
-        node.data.children && resolve(node.data.children)
+        node.data.children ? resolve(node.data.children) : resolve([])
       }
     },