refactor: 优化数据集查询

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml

@@ -160,7 +160,7 @@
                 and panel_group.level = #{level}
             </if>
         </where>
-     ORDER BY CONVERT(panel_group.name using gbk)
+     ORDER BY panel_group.node_type desc, CONVERT(panel_group.name using gbk)
     </select>
 
     <delete id="deleteCircle">

backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.xml

@@ -33,7 +33,7 @@
 						`sys_auth`.`id` = `sys_auth_detail`.`auth_id`
 					)))
 		WHERE
-			sys_auth_detail.privilege_value = #{request.userId}
+			sys_auth_detail.privilege_value = 1
 			AND sys_auth.auth_source_type = #{request.modelType}
 			AND (
 				(
@@ -54,7 +54,7 @@
 		) authInfo ON v_auth_model.id = authInfo.auth_source
 	WHERE
 		FIND_IN_SET( v_auth_model.id, cids )
-		ORDER BY CONVERT(v_auth_model.label using gbk) asc
+		ORDER BY v_auth_model.node_type desc, CONVERT(v_auth_model.label using gbk) asc
   </select>
 
 </mapper>

frontend/src/views/dataset/group/Group.vue

 <template>
   <el-col class="tree-style">
     <!-- group -->
-    <el-col v-if="!sceneMode">
+    <el-col>
       <el-row class="title-css">
         <span class="title-text">
           {{ $t('dataset.datalist') }}
@@ -10,36 +10,44 @@
       </el-row>
       <el-divider />
 
-      <el-row>
-        <el-form>
-          <el-form-item class="form-item">
+      <el-row style="margin-bottom: 10px">
+        <el-col :span="16">
           <el-input
-              v-model="search"
+            v-model="filterText"
             size="mini"
-              :placeholder="$t('dataset.search')"
+            :placeholder="$t('commons.search')"
             prefix-icon="el-icon-search"
             clearable
             class="main-area-input"
           />
-          </el-form-item>
-        </el-form>
+        </el-col>
+        <el-col :span="8">
+          <el-dropdown>
+            <el-button size="mini" type="primary">
+              {{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="searchTypeClick('folder')">{{ this.$t('commons.folder') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
       </el-row>
 
       <el-col class="custom-tree-container">
         <div class="block">
           <el-tree
-            ref="asyncTree"
+            ref="datasetTreeRef"
             :default-expanded-keys="expandedArray"
             :data="tData"
             node-key="id"
-            :expand-on-click-node="true"
-            :load="loadNode"
-            lazy
-            :props="treeProps"
             highlight-current
+            :expand-on-click-node="true"
+            :filter-node-method="filterNode"
             @node-click="nodeClick"
           >
-            <span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
+            <span v-if="data.modelInnerType === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span>
                   <i class="el-icon-folder" />
@@ -47,7 +55,7 @@
                 <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
               </span>
               <span v-if="hasDataPermission('manage',data.privileges)" class="child">
-                <span v-if="data.type ==='group'" @click.stop>
+                <span v-if="data.modelInnerType ==='group'" @click.stop>
                   <el-dropdown trigger="click" size="small" @command="clickAdd">
                     <span class="el-dropdown-link">
                       <el-button
@@ -86,10 +94,10 @@
                               {{ $t('dataset.custom_data') }}
                             </el-dropdown-item>
                             <!--此处菜单暂时隐藏，后续功能完整后再放开-->
-<!--                            <el-dropdown-item :command="beforeClickAddData('union',data)">-->
-<!--                              <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
-<!--                              {{ $t('dataset.union_data') }}-->
-<!--                            </el-dropdown-item>-->
+                            <!--                            <el-dropdown-item :command="beforeClickAddData('union',data)">-->
+                            <!--                              <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
+                            <!--                              {{ $t('dataset.union_data') }}-->
+                            <!--                            </el-dropdown-item>-->
                           </el-dropdown-menu>
                         </el-dropdown>
                       </el-dropdown-item>
@@ -123,12 +131,12 @@
             <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span 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" />
+                  <svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
+                  <svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+                  <svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+                  <svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
                 </span>
-                <span v-if="data.type === 'db' || data.type === 'sql'">
+                <span v-if="data.modelInnerType === 'db' || data.modelInnerType === '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>
@@ -216,6 +224,7 @@
 import { loadTable, getScene, addGroup, delGroup, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
 import GroupMoveSelector from './GroupMoveSelector'
 import DsMoveSelector from './DsMoveSelector'
+import { queryAuthModel } from '@/api/authModel/authModel'
 
 export default {
   name: 'Group',
@@ -287,25 +296,29 @@ export default {
         parentId: 'pid'
       },
       isTreeSearch: false,
-      kettleRunning: false
+      kettleRunning: false,
+      searchPids: [], // 查询命中的pid
+      filterText: '',
+      searchType: 'all',
+      searchMap: {
+        all: this.$t('commons.all'),
+        folder: this.$t('commons.folder')
+      }
     }
   },
   computed: {
   },
   watch: {
-    search(val) {
-      this.$emit('switchComponent', { name: '' })
-      this.tData = []
-      this.expandedArray = []
-      if (this.timer) {
-        clearTimeout(this.timer)
-      }
-      this.timer = setTimeout(() => {
-        this.getTreeData(val)
-      }, (val && val !== '') ? 500 : 0)
-    },
     saveStatus() {
-      this.refreshNodeBy(this.saveStatus.sceneId)
+      this.treeNode()
+    },
+    filterText(val) {
+      this.searchPids = []
+      this.$refs.datasetTreeRef.filter(val)
+    },
+    searchType(val) {
+      this.searchPids = []
+      this.$refs.datasetTreeRef.filter(this.filterText)
     }
   },
   created() {
@@ -337,7 +350,7 @@ export default {
     clickMore(param) {
       switch (param.type) {
         case 'rename':
-          this.add(param.data.type)
+          this.add(param.data.modelInnerType)
           this.groupForm = JSON.parse(JSON.stringify(param.data))
           break
         case 'move':
@@ -393,7 +406,8 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.refreshNodeBy(group.pid)
+            this.expandedArray.push(group.pid)
+            this.treeNode(group.pid)
           })
         } else {
           return false
@@ -403,6 +417,7 @@ export default {
 
     saveTable(table) {
       table.mode = parseInt(table.mode)
+      const _this = this
       this.$refs['tableForm'].validate((valid) => {
         if (valid) {
           table.isRename = true
@@ -413,7 +428,9 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.refreshNodeBy(table.sceneId)
+            _this.expandedArray.push(response.data.sceneId)
+            _this.$refs.datasetTreeRef.setCurrentKey(response.data.id)
+            _this.treeNode()
             this.$store.dispatch('dataset/setTable', new Date().getTime())
           })
         } else {
@@ -434,7 +451,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.refreshNodeBy(data.pid)
+          this.treeNode(data.pid)
         })
       }).catch(() => {
       })
@@ -452,7 +469,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.refreshNodeBy(data.sceneId)
+          this.treeNode(data.sceneId)
           this.$store.dispatch('dataset/setTable', new Date().getTime())
         })
       }).catch(() => {
@@ -480,7 +497,7 @@ export default {
     },
 
     treeNode(group) {
-      post('/dataset/group/treeNode', group).then(res => {
+      queryAuthModel({ modelType: 'dataset' }).then(res => {
         this.tData = res.data
       })
     },
@@ -500,9 +517,17 @@ export default {
     },
 
     nodeClick(data, node) {
-      if (data.type !== 'group') {
+      if (data.modelInnerType !== 'group') {
         this.$emit('switchComponent', { name: 'ViewTable', param: data })
       }
+      if (node.expanded) {
+        this.expandedArray.push(data.id)
+      } else {
+        const index = this.expandedArray.indexOf(data.id)
+        if (index > -1) {
+          this.expandedArray.splice(index, 1)
+        }
+      }
     },
 
     back() {
@@ -588,7 +613,7 @@ export default {
       this.groupForm.pid = this.tGroup.id
       addGroup(this.groupForm).then(res => {
         this.closeMoveGroup()
-        this.refreshNodeBy(this.groupForm.pid)
+        this.treeNode()
       })
     },
     targetGroup(val) {
@@ -612,14 +637,13 @@ export default {
       }
     },
     saveMoveDs() {
-      const oldSceneId = this.dsForm.sceneId
       const newSceneId = this.tDs.id
       this.dsForm.sceneId = newSceneId
       this.dsForm.isRename = true
       alter(this.dsForm).then(res => {
         this.closeMoveDs()
-        this.refreshNodeBy(oldSceneId)
-        this.refreshNodeBy(newSceneId)
+        this.expandedArray.push(newSceneId)
+        this.treeNode()
       })
     },
     targetDs(val) {
@@ -652,77 +676,35 @@ export default {
       }
     },
 
-    refreshNodeBy(id) {
-      if (this.isTreeSearch) {
-        this.tData = []
-        this.expandedArray = []
-        this.searchTree(this.search)
+    getTreeData(val) {
+      if (val) {
+        this.isTreeSearch = true
+        this.searchTree(val)
       } else {
-        if (!id || id === '0') {
+        this.isTreeSearch = false
         this.treeNode(this.groupForm)
-        } else {
-          const node = this.$refs.asyncTree.getNode(id) // 通过节点id找到对应树节点对象
-          node.loaded = false
-          node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
-        }
-      }
-    },
-
-    searchTree(val) {
-      const queryCondition = {
-        name: val
       }
-
-      post('/dataset/table/search', queryCondition).then(res => {
-        this.tData = 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 => {
-        // 判断根节点 ###
-        if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
-          roots.push(el)
-          return
+    filterNode(value, data) {
+      if (!value) return true
+      if (this.searchType === 'folder') {
+        if (data.modelInnerType === 'group' && data.label.indexOf(value) !== -1) {
+          this.searchPids.push(data.id)
+          return true
         }
-        // 用映射表找到父元素
-        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])
+        if (this.searchPids.indexOf(data.pid) !== -1) {
+          if (data.modelInnerType === 'group') {
+            this.searchPids.push(data.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) // 开始替换
-        })
+          return true
         }
-    },
-
-    getTreeData(val) {
-      if (val) {
-        this.isTreeSearch = true
-        this.searchTree(val)
       } else {
-        this.isTreeSearch = false
-        this.treeNode(this.groupForm)
+        return data.label.indexOf(value) !== -1
       }
+      return false
+    },
+    searchTypeClick(searchTypeInfo) {
+      this.searchType = searchTypeInfo
     }
   }
 }