refactor(仪表板): 可视化资源树排序改为前端排序 #7741

core/core-backend/src/main/java/io/dataease/commons/utils/CoreTreeUtils.java

@@ -0,0 +1,35 @@
+package io.dataease.commons.utils;
+
+import io.dataease.constant.SortConstants;
+import io.dataease.visualization.dto.VisualizationNodeBO;
+import org.apache.commons.lang3.StringUtils;
+
+import java.text.Collator;
+import java.util.*;
+import java.util.stream.Collectors;
+
+/**
+ * @author : WangJiaHao
+ * @date : 2024/3/18 10:53
+ */
+public class CoreTreeUtils {
+
+    public static List<VisualizationNodeBO> customSortBO(List<VisualizationNodeBO> list, String sortType) {
+        Collator collator = Collator.getInstance(Locale.CHINA);
+        if (StringUtils.equalsIgnoreCase(SortConstants.NAME_DESC, sortType)) {
+            Set<VisualizationNodeBO> poSet = new TreeSet<>(Comparator.comparing(VisualizationNodeBO::getName, collator));
+            poSet.addAll(list);
+            return poSet.stream().collect(Collectors.toList());
+        } else if (StringUtils.equalsIgnoreCase(SortConstants.NAME_ASC, sortType)) {
+            Set<VisualizationNodeBO> poSet = new TreeSet<>(Comparator.comparing(VisualizationNodeBO::getName, collator).reversed());
+            poSet.addAll(list);
+            return poSet.stream().collect(Collectors.toList());
+        } else if (StringUtils.equalsIgnoreCase(SortConstants.TIME_ASC, sortType)) {
+            Collections.reverse(list);
+            return list;
+        } else {
+            // 默认时间倒序
+            return list;
+        }
+    }
+}

core/core-frontend/src/models/tree/TreeNode.ts

@@ -12,4 +12,5 @@ export interface BusiTreeRequest {
   busiFlag?: string
   leaf?: boolean
   weight?: number
+  sortType: string
 }

core/core-frontend/src/utils/treeSortUtils.ts

@@ -0,0 +1,23 @@
+import { BusiTreeNode } from '@/models/tree/TreeNode'
+import _ from 'lodash'
+
+export default function treeSort(tree: BusiTreeNode[], sortType: string, historySortType: string) {
+  const result = _.cloneDeep(tree)
+  sortPer(result, sortType, historySortType)
+  _.forEach(result, node => {
+    if (node.children && node.children.length > 0) {
+      sortPer(node.children, sortType, historySortType)
+    }
+  })
+  return result
+}
+
+export const sortPer = (subTree: BusiTreeNode[], sortType: string, historySortType: string) => {
+  if (sortType === 'name_desc') {
+    subTree.sort((a, b) => b.name.localeCompare(a.name, 'zh-Hans-CN', { sensitivity: 'accent' }))
+  } else if (sortType === 'name_asc') {
+    subTree.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', { sensitivity: 'accent' }))
+  } else if (sortType !== historySortType) {
+    return subTree.reverse()
+  }
+}

core/core-frontend/src/views/common/DeResourceTree.vue

@@ -16,10 +16,10 @@ const interactiveStore = interactiveStoreWithOut()
 import router from '@/router'
 import { useI18n } from '@/hooks/web/useI18n'
 import _ from 'lodash'
-import DeResourceCreateOpt from '@/views/common/DeResourceCreateOpt.vue'
 import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
 import { useCache } from '@/hooks/web/useCache'
 import { findParentIdByChildIdRecursive } from '@/utils/canvasUtils'
+import treeSort from '@/utils/treeSortUtils'
 const { wsCache } = useCache()
 
 const dvMainStore = dvMainStoreWithOut()
@@ -57,6 +57,7 @@ const resourceGroupOpt = ref()
 const resourceCreateOpt = ref()
 const returnMounted = ref(false)
 const state = reactive({
+  curSortType: 'time_desc',
   resourceTree: [] as BusiTreeNode[],
   folderMenuList: [
     {
@@ -76,6 +77,24 @@ const state = reactive({
       divided: true
     }
   ],
+  sortType: [
+    {
+      label: '按时间升序',
+      value: 'time_asc'
+    },
+    {
+      label: '按时间降序',
+      value: 'time_desc'
+    },
+    {
+      label: '按名称升序',
+      value: 'name_asc'
+    },
+    {
+      label: '按名称降序',
+      value: 'time_asc'
+    }
+  ],
   templateCreatePid: 0
 })
 
@@ -364,6 +383,11 @@ const getDefaultExpandedKeys = () => {
   }
 }
 
+const sortTypeChange = sortType => {
+  state.resourceTree = treeSort(state.resourceTree, sortType, state.curSortType)
+  state.curSortType = sortType
+}
+
 watch(filterText, val => {
   resourceListTree.value.filter(val)
 })
@@ -438,6 +462,43 @@ defineExpose({
           </el-icon>
         </template>
       </el-input>
+      <el-dropdown trigger="click">
+        <el-icon class="insert-filter filter-icon-span"><Filter /></el-icon>
+        <template #dropdown>
+          <el-dropdown-menu style="width: 140px">
+            <el-dropdown-item
+              class="sort-type-normal"
+              :class="{ 'sort-type-checked': state.curSortType === 'time_asc' }"
+              @click="sortTypeChange('time_asc')"
+            >
+              <span>按照时间升序</span>
+              <el-icon><Check /></el-icon>
+            </el-dropdown-item>
+            <el-dropdown-item
+              class="sort-type-normal"
+              :class="{ 'sort-type-checked': state.curSortType === 'time_desc' }"
+              @click="sortTypeChange('time_desc')"
+            >
+              <span>按照时间降序</span> <el-icon><Check /></el-icon>
+            </el-dropdown-item>
+            <el-divider />
+            <el-dropdown-item
+              class="sort-type-normal"
+              :class="{ 'sort-type-checked': state.curSortType === 'name_asc' }"
+              @click="sortTypeChange('name_asc')"
+            >
+              <span>按照名称升序</span><el-icon><Check /></el-icon>
+            </el-dropdown-item>
+            <el-dropdown-item
+              class="sort-type-normal"
+              :class="{ 'sort-type-checked': state.curSortType === 'name_desc' }"
+              @click="sortTypeChange('name_desc')"
+            >
+              <span>按照名称降序</span><el-icon><Check /></el-icon>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
     <el-scrollbar class="custom-tree">
       <el-tree
@@ -513,6 +574,43 @@ defineExpose({
   </div>
 </template>
 <style lang="less" scoped>
+.insert-filter {
+  display: inline-block;
+  font-weight: 400 !important;
+  font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--TextPrimary, #1f2329);
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  transition: 0.1s;
+  border-radius: 3px;
+
+  &:active {
+    color: #000;
+    border-color: #3a8ee6;
+    background-color: red;
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: rgba(31, 35, 41, 0.1);
+    color: #3a8ee6;
+  }
+}
+
+.filter-icon-span {
+  border: 1px solid #dcdfe6;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  padding: 7px;
+  margin-left: 8px;
+}
 .resource-tree {
   padding: 16px 0 0;
   width: 100%;
@@ -551,6 +649,7 @@ defineExpose({
   }
   .search-bar {
     padding-bottom: 10px;
+    width: calc(100% - 50px);
   }
 }
 .title-area {
@@ -630,4 +729,17 @@ defineExpose({
     border-radius: 4px;
   }
 }
+
+.sort-type-normal {
+  i {
+    display: none;
+  }
+}
+
+.sort-type-checked {
+  color: blueviolet;
+  i {
+    display: block;
+  }
+}
 </style>