0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复菜单配置无法调整顺序的问题

This commit is contained in:
XieYongHong 2023-04-28 17:23:44 +08:00 committed by GitHub
parent a0e46a7dff
commit baea9bd5aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/system/Menu/Setting/index.vue
View File

@ -10,30 +10,31 @@
<div class="content"> <div class="content">
<j-card title="菜单配置" style="width: 80%"> <j-card title="菜单配置" style="width: 80%">
<div class="tree"> <div class="tree">
<j-scrollbar>
<j-tree <j-tree
v-if="treeData.length !== 0" v-if="treeData.length !== 0"
show-line show-line
defaultExpandAll defaultExpandAll
multiple multiple
draggable draggable
:tree-data="treeData" :tree-data="treeData"
:height="520" @select="onSelect"
@select="onSelect" :selectedKeys="selectedKeys"
:selectedKeys="selectedKeys" @drop="onDrop"
@drop="onDrop" @dragend="onDragend"
@dragend="onDragend"
> >
<template #title="row"> <template #title="row">
<div class="tree-content"> <div class="tree-content">
<div class="tree-content-title"> <div class="tree-content-title">
<AIcon type="HolderOutlined" /> <AIcon type="HolderOutlined" />
<div style="margin-left: 8px"> <div style="margin-left: 8px">
{{ row.name }} {{ row.name }}
</div>
</div>
</div> </div>
</template> </div>
</div>
</template>
</j-tree> </j-tree>
</j-scrollbar>
</div> </div>
</j-card> </j-card>
</div> </div>
@ -70,6 +71,7 @@ import {
getMaxDepth, getMaxDepth,
mergeArr, mergeArr,
findAllParentsAndChildren, findAllParentsAndChildren,
handleSorts
} from './utils'; } from './utils';
import BaseMenu from '@/views/init-home/data/baseMenu'; import BaseMenu from '@/views/init-home/data/baseMenu';
import type { AntTreeNodeDropEvent } from 'ant-design-vue/es/tree'; import type { AntTreeNodeDropEvent } from 'ant-design-vue/es/tree';
@ -134,9 +136,9 @@ function filterTree(nodes: Array<any>, selectedKeys: Array<any>) {
const handleOk = async () => { const handleOk = async () => {
const _dataArr = filterTree(cloneDeep(treeData.value), selectedKeys.value); const _dataArr = filterTree(cloneDeep(treeData.value), selectedKeys.value);
const _dataSorts = handleSorts(_dataArr)
loading.value = true; loading.value = true;
const res = await updateMenus(_dataArr).catch(() => {}); const res = await updateMenus(_dataSorts).catch(() => {});
if (res?.status === 200) { if (res?.status === 200) {
onlyMessage('操作成功', 'success'); onlyMessage('操作成功', 'success');
} }
@ -260,6 +262,7 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 540px;
&-content { &-content {
display: flex; display: flex;

14
src/views/system/Menu/Setting/utils.ts
View File

@ -304,3 +304,17 @@ export const getNodeDepth = (node: any) => {
} }
return depth; return depth;
}; };
export const handleSorts = (node: any[]) => {
if (!node) return []
return node.map((item, index) => {
if (item.index !== index) {
item.sortIndex = index
if (item.children) {
item.children = handleSorts(item.children)
}
}
return item
})
}