Merge pull request #8763 from dataease/pr@dev@feat_tree-sort
feat(仪表板): 资源树增加排序功能
This commit is contained in:
王嘉豪
GitHub
commit
73a3b984f7
@ -199,7 +199,7 @@
|
||||
and panel_group.level = #{level}
|
||||
</if>
|
||||
</where>
|
||||
ORDER BY panel_group.node_type desc, CONVERT(panel_group.name using gbk)
|
||||
ORDER BY panel_group.create_time desc
|
||||
</select>
|
||||
|
||||
<delete id="deleteLinkDefaultCircle">
|
||||
|
||||
6
core/frontend/src/icons/svg/dv-sort-asc.svg
Normal file
6
core/frontend/src/icons/svg/dv-sort-asc.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.25 3.55664C6.11193 3.55664 6 3.66857 6 3.80664V4.63997C6 4.77805 6.11193 4.88997 6.25 4.88997H11.0833C11.2214 4.88997 11.3333 4.77805 11.3333 4.63997V3.80664C11.3333 3.66857 11.2214 3.55664 11.0833 3.55664H6.25Z" />
|
||||
<path d="M6 8.02878C6 7.89071 6.11193 7.77878 6.25 7.77878H13.0833C13.2214 7.77878 13.3333 7.89071 13.3333 8.02878V8.86211C13.3333 9.00018 13.2214 9.11211 13.0833 9.11211H6.25C6.11193 9.11211 6 9.00018 6 8.86211V8.02878Z" />
|
||||
<path d="M6.25 12.0009C6.11193 12.0009 6 12.1128 6 12.2509V13.0842C6 13.2223 6.11193 13.3342 6.25 13.3342H15.0833C15.2214 13.3342 15.3333 13.2223 15.3333 13.0842V12.2509C15.3333 12.1128 15.2214 12.0009 15.0833 12.0009H6.25Z" />
|
||||
<path d="M5.03981 14.5684C4.9773 14.6309 4.89251 14.666 4.80411 14.666H4.19677C4.153 14.666 4.10965 14.6574 4.06921 14.6406C4.02877 14.6239 3.99202 14.5993 3.96107 14.5684C3.93012 14.5374 3.90557 14.5007 3.88881 14.4602C3.87206 14.4198 3.86344 14.3765 3.86344 14.3327L3.86344 3.83902L2.39244 5.37235C2.33134 5.43523 2.24792 5.47151 2.16026 5.47332C2.0726 5.47513 1.98775 5.44232 1.92411 5.38202L1.43711 4.92068C1.40532 4.89057 1.37977 4.85449 1.36193 4.8145C1.34409 4.77452 1.3343 4.73141 1.33313 4.68764C1.33195 4.64387 1.33941 4.6003 1.35508 4.55941C1.37075 4.51852 1.39432 4.48112 1.42444 4.44935L3.98677 1.70768C4.40144 1.27001 5.13744 1.56335 5.13744 2.16602L5.13744 14.3327C5.13744 14.4211 5.10232 14.5059 5.03981 14.5684Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
6
core/frontend/src/icons/svg/dv-sort-desc.svg
Normal file
6
core/frontend/src/icons/svg/dv-sort-desc.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.25 11.1222C6.11193 11.1222 6 11.2341 6 11.3722V12.2055C6 12.3436 6.11193 12.4555 6.25 12.4555H11.0833C11.2214 12.4555 11.3333 12.3436 11.3333 12.2055V11.3722C11.3333 11.2341 11.2214 11.1222 11.0833 11.1222H6.25Z" />
|
||||
<path d="M6 7.1478C6 7.00973 6.11193 6.8978 6.25 6.8978H13.0833C13.2214 6.8978 13.3333 7.00973 13.3333 7.1478V7.98113C13.3333 8.1192 13.2214 8.23113 13.0833 8.23113H6.25C6.11193 8.23113 6 8.1192 6 7.98113V7.1478Z" />
|
||||
<path d="M6.25 2.67773C6.11193 2.67773 6 2.78966 6 2.92773V3.76107C6 3.89914 6.11193 4.01107 6.25 4.01107H15.0833C15.2214 4.01107 15.3333 3.89914 15.3333 3.76107V2.92773C15.3333 2.78966 15.2214 2.67773 15.0833 2.67773H6.25Z" />
|
||||
<path d="M3.98898 14.4564C4.40365 14.8941 5.13965 14.6007 5.13965 13.9981L5.13965 1.83139C5.13965 1.74298 5.10453 1.6582 5.04202 1.59569C4.9795 1.53317 4.89472 1.49806 4.80632 1.49806H4.13965C4.05124 1.49806 3.96646 1.53317 3.90395 1.59569C3.84143 1.6582 3.80632 1.74298 3.80632 1.83139L3.80632 12.3247L2.39432 10.7977C2.36423 10.7659 2.32816 10.7403 2.28819 10.7225C2.24822 10.7046 2.20511 10.6948 2.16134 10.6936C2.11757 10.6924 2.07399 10.6998 2.03309 10.7154C1.9922 10.7311 1.95478 10.7546 1.92298 10.7847L1.43932 11.2434C1.4075 11.2735 1.38193 11.3095 1.36406 11.3495C1.34619 11.3895 1.33637 11.4326 1.33517 11.4764C1.33396 11.5201 1.34139 11.5637 1.35703 11.6046C1.37267 11.6455 1.39621 11.6829 1.42631 11.7147L3.98898 14.4564Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
24
core/frontend/src/utils/treeSortUtils.js
Normal file
24
core/frontend/src/utils/treeSortUtils.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default function treeSort(tree, sortType) {
|
||||
const result = deepCopy(tree)
|
||||
sortPer(result, sortType)
|
||||
result.forEach(node => {
|
||||
if (node.children && node.children.length > 0) {
|
||||
sortPer(node.children, sortType)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
export function sortPer(subTree, sortType) {
|
||||
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 === 'time_asc') {
|
||||
return subTree.reverse()
|
||||
} else {
|
||||
return subTree
|
||||
}
|
||||
}
|
||||
@ -26,6 +26,62 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-input>
|
||||
<el-dropdown trigger="click" @command="sortTypeChange">
|
||||
<div class="insert-filter filter-icon-span">
|
||||
<svg-icon
|
||||
v-show="curSortType.includes('asc')"
|
||||
class="opt-icon"
|
||||
icon-class="dv-sort-asc"
|
||||
/>
|
||||
<svg-icon
|
||||
v-show="curSortType.includes('desc')"
|
||||
class="opt-icon"
|
||||
icon-class="dv-sort-desc"
|
||||
/>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu style="width: 160px">
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': curSortType === 'time_asc' }"
|
||||
:command="beforeClickItem('time_asc')"
|
||||
>
|
||||
<span>按创建时间升序</span>
|
||||
<i style="margin-left: 4px; line-height: 32px"
|
||||
class="el-icon-check"
|
||||
/>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': curSortType === 'time_desc' }"
|
||||
:command="beforeClickItem('time_desc')"
|
||||
>
|
||||
<span>按创建时间降序</span><i style="margin-left: 4px; line-height: 32px"
|
||||
class="el-icon-check"
|
||||
/>
|
||||
</el-dropdown-item>
|
||||
<el-divider class="custom-driver"/>
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': curSortType === 'name_asc' }"
|
||||
:command="beforeClickItem('name_asc')"
|
||||
>
|
||||
<span>按照名称升序</span><i style="margin-left: 4px; line-height: 32px"
|
||||
class="el-icon-check"
|
||||
/>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="sort-type-normal"
|
||||
:class="{ 'sort-type-checked': curSortType === 'name_desc' }"
|
||||
:command="beforeClickItem('name_desc')"
|
||||
>
|
||||
<span>按照名称降序</span><i style="margin-left: 4px; line-height: 32px"
|
||||
class="el-icon-check"
|
||||
/>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="de-tree">
|
||||
@ -459,7 +515,8 @@ import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
||||
import TreeSelector from '@/components/treeSelector'
|
||||
import { queryAuthModel } from '@/api/authModel/authModel'
|
||||
import msgCfm from '@/components/msgCfm/index'
|
||||
import { updateCacheTree } from '@/components/canvas/utils/utils'
|
||||
import { deepCopy, updateCacheTree } from '@/components/canvas/utils/utils'
|
||||
import treeSort from '@/utils/treeSortUtils'
|
||||
|
||||
export default {
|
||||
name: 'PanelList',
|
||||
@ -467,6 +524,8 @@ export default {
|
||||
mixins: [msgCfm],
|
||||
data() {
|
||||
return {
|
||||
originResourceTree: [],
|
||||
curSortType: 'time_desc',
|
||||
lastActiveDefaultPanelId: null, // 激活的节点 在这个节点下面动态放置子节点
|
||||
responseSource: 'panelQuery',
|
||||
defaultExpansion: false,
|
||||
@ -595,7 +654,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
// 切换展示页面后 重新点击一下当前节点
|
||||
'$store.state.panel.mainActiveName': function(newVal, oldVal) {
|
||||
'$store.panel.mainActiveName': function(newVal, oldVal) {
|
||||
if (newVal === 'PanelMain' && this.lastActiveNodeData) {
|
||||
this.activeNodeAndClickOnly(this.lastActiveNodeData)
|
||||
}
|
||||
@ -637,6 +696,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeClickItem(type) {
|
||||
return {
|
||||
sortType: type
|
||||
}
|
||||
},
|
||||
sortTypeChange(params) {
|
||||
this.tData = treeSort(this.originResourceTree, params.sortType)
|
||||
this.curSortType = params.sortType
|
||||
},
|
||||
activeLastNode() {
|
||||
this.$nextTick(() => {
|
||||
document.querySelector('.is-current').firstChild.click()
|
||||
@ -674,8 +742,8 @@ export default {
|
||||
updateCacheTree(this.editPanel.optType,
|
||||
panelInfo.panelType === 'system' ? 'panel-default-tree' : 'panel-main-tree', panelInfo,
|
||||
panelInfo.panelType === 'system' ? this.defaultData : this.tData)
|
||||
if (this.editPanel.optType === 'rename' && panelInfo.id === this.$store.state.panel.panelInfo.id) {
|
||||
this.$store.state.panel.panelInfo.name = panelInfo.name
|
||||
if (this.editPanel.optType === 'rename' && panelInfo.id === this.$store.panel.panelInfo.id) {
|
||||
this.$store.panel.panelInfo.name = panelInfo.name
|
||||
}
|
||||
// 默认展开 同时点击 新增的节点
|
||||
if (
|
||||
@ -852,7 +920,7 @@ export default {
|
||||
},
|
||||
|
||||
delete(data) {
|
||||
const title = data.source ? 'commons.cancel_this_dashboard':(data.nodeType === 'folder' ? 'commons.delete_this_folder' : 'commons.delete_this_dashboard')
|
||||
const title = data.source ? 'commons.cancel_this_dashboard' : (data.nodeType === 'folder' ? 'commons.delete_this_folder' : 'commons.delete_this_dashboard')
|
||||
const params = {
|
||||
title: title,
|
||||
type: 'danger',
|
||||
@ -899,11 +967,13 @@ export default {
|
||||
const userCache = modelInfo && cache
|
||||
if (userCache) {
|
||||
this.tData = JSON.parse(modelInfo)
|
||||
this.originResourceTree = deepCopy(this.tData)
|
||||
}
|
||||
groupTree(this.groupForm, !userCache).then((res) => {
|
||||
localStorage.setItem('panel-main-tree', JSON.stringify(res.data || []))
|
||||
if (!userCache) {
|
||||
this.tData = res.data || []
|
||||
this.originResourceTree = deepCopy(this.tData)
|
||||
}
|
||||
if (this.responseSource === 'appApply') {
|
||||
this.fromAppActive()
|
||||
@ -1185,6 +1255,7 @@ export default {
|
||||
}
|
||||
|
||||
.main-area-input {
|
||||
width: calc(100% - 40px);
|
||||
::v-deep.el-input-group__append {
|
||||
width: 70px;
|
||||
background: transparent;
|
||||
@ -1249,4 +1320,69 @@ export default {
|
||||
.link-dialog ::v-deep .el-dialog__headerbtn {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.menu-outer-dv_popper {
|
||||
width: 140px;
|
||||
margin-top: -2px !important;
|
||||
|
||||
.ed-icon {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-type-normal {
|
||||
display: flex;
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-type-checked {
|
||||
color: #3370ff;
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-driver {
|
||||
margin: 12px 0
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user