forked from github/dataease
refactor(仪表板): 可视化资源树排序改为前端排序 #7741
This commit is contained in:
wangjiahao
parent
689eaac1af
commit
27b81381bf
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12,4 +12,5 @@ export interface BusiTreeRequest {
|
||||
busiFlag?: string
|
||||
leaf?: boolean
|
||||
weight?: number
|
||||
sortType: string
|
||||
}
|
||||
|
||||
23
core/core-frontend/src/utils/treeSortUtils.ts
Normal file
23
core/core-frontend/src/utils/treeSortUtils.ts
Normal file
@ -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()
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user