From e52db65057009bb1c4551c5029008c0eb0137139 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 28 Mar 2024 11:40:30 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E8=B5=84?= =?UTF-8?q?=E6=BA=90=E6=A0=91=E5=A2=9E=E5=8A=A0=E6=8E=92=E5=BA=8F=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../io/dataease/ext/ExtPanelGroupMapper.xml | 2 +- core/frontend/src/icons/svg/dv-sort-asc.svg | 6 + core/frontend/src/icons/svg/dv-sort-desc.svg | 6 + core/frontend/src/utils/treeSortUtils.js | 24 +++ .../src/views/panel/list/PanelList.vue | 146 +++++++++++++++++- 5 files changed, 178 insertions(+), 6 deletions(-) create mode 100644 core/frontend/src/icons/svg/dv-sort-asc.svg create mode 100644 core/frontend/src/icons/svg/dv-sort-desc.svg create mode 100644 core/frontend/src/utils/treeSortUtils.js diff --git a/core/backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.xml b/core/backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.xml index 6e54ab20fb..a8e0e6f3c4 100644 --- a/core/backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.xml +++ b/core/backend/src/main/java/io/dataease/ext/ExtPanelGroupMapper.xml @@ -199,7 +199,7 @@ and panel_group.level = #{level} - ORDER BY panel_group.node_type desc, CONVERT(panel_group.name using gbk) + ORDER BY panel_group.create_time desc diff --git a/core/frontend/src/icons/svg/dv-sort-asc.svg b/core/frontend/src/icons/svg/dv-sort-asc.svg new file mode 100644 index 0000000000..253a3ce5ae --- /dev/null +++ b/core/frontend/src/icons/svg/dv-sort-asc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/core/frontend/src/icons/svg/dv-sort-desc.svg b/core/frontend/src/icons/svg/dv-sort-desc.svg new file mode 100644 index 0000000000..4b666610da --- /dev/null +++ b/core/frontend/src/icons/svg/dv-sort-desc.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/core/frontend/src/utils/treeSortUtils.js b/core/frontend/src/utils/treeSortUtils.js new file mode 100644 index 0000000000..0819b69bec --- /dev/null +++ b/core/frontend/src/utils/treeSortUtils.js @@ -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 + } +} diff --git a/core/frontend/src/views/panel/list/PanelList.vue b/core/frontend/src/views/panel/list/PanelList.vue index a65f0bde3c..cdec02406b 100644 --- a/core/frontend/src/views/panel/list/PanelList.vue +++ b/core/frontend/src/views/panel/list/PanelList.vue @@ -26,6 +26,62 @@ /> + +
+ + +
+ + @@ -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 +}