diff --git a/src/views/system/Menu/Setting/index.vue b/src/views/system/Menu/Setting/index.vue index bc08f9cf..1fed0fda 100644 --- a/src/views/system/Menu/Setting/index.vue +++ b/src/views/system/Menu/Setting/index.vue @@ -22,7 +22,12 @@
- 一键拷贝 + 一键拷贝
@@ -37,11 +42,11 @@
@@ -77,8 +82,7 @@ draggable autoExpandParent :tree-data="transfer.data.rightTreeData" - @drop="transfer.onDrop" - @dragenter="transfer.onDragEnter" + @drop="transfer.onRightDrop" > @@ -124,14 +140,14 @@ import { import { getMenuTree_api } from '@/api/system/menu'; import { getSystemPermission as getSystemPermission_api } from '@/api/initHome'; -import { filterMenu } from './utils'; +import { filterMenu, getKeys, loop } from './utils'; import BaseTreeData from './baseMenu'; import type { - AntTreeNodeDragEnterEvent, AntTreeNodeDropEvent, TreeDataItem, TreeProps, } from 'ant-design-vue/es/tree'; + const transfer = { data: reactive({ // 左侧树 @@ -142,8 +158,19 @@ const transfer = { rightSearchValue: '', rightTreeData: [] as any[], }), + leftSourceData: [] as any[], + rightSourceData: [] as any[], init: () => { + // 源菜单 + const sourceMenu = getSystemPermission_api().then((resp: any) => { + const newTree = filterMenu( + resp.result.map((item: any) => JSON.parse(item).id), + BaseTreeData, + ); + transfer.leftSourceData = [...newTree]; + transfer.data.leftTreeData = newTree; + }); const params = { paging: false, terms: [ @@ -165,35 +192,33 @@ const transfer = { ], }; // 系统菜单 - getMenuTree_api(params).then((resp: any) => { + const systemMenu = getMenuTree_api(params).then((resp: any) => { transfer.data.rightTreeData = resp.result; - transfer.data.rightTreeData[2].disabled = true; - }); - // 源菜单 - getSystemPermission_api().then((resp: any) => { - const newTree = filterMenu( - resp.result.map((item: any) => JSON.parse(item).id), - BaseTreeData, - ); - transfer.data.leftTreeData = newTree; + transfer.rightSourceData = [...resp.result]; }); + // 当两个菜单的源数据都获取到之后,对左侧菜单进行更新,更新每项是否需要禁用 + Promise.all([sourceMenu, systemMenu]).then(() => transfer.updateTree()); + }, + copy: () => { + transfer.data.rightTreeData = [...toRaw(transfer.data.leftTreeData)]; + dialogShow.value = false; }, removeItem: (row: any) => { - transfer.loop( + loop( transfer.data.rightTreeData, row.id, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => { arr?.splice(index, 1); }, ); + transfer.updateTree(); }, - onDrop: (info: AntTreeNodeDropEvent) => { + onRightDrop: (info: AntTreeNodeDropEvent) => { const dropKey = info.node.id; const dragKey = info.dragNode.id; const dropPos = (info.node.pos && info.node.pos.split('-')) || []; const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); - const loop = transfer.loop; const data = [...transfer.data.rightTreeData]; let dragObj: TreeDataItem = { key: '' }; loop( @@ -245,23 +270,13 @@ const transfer = { } transfer.data.rightTreeData = data; }, - onDragEnter: (info: AntTreeNodeDragEnterEvent) => { - // console.log('onDragEnter', info); - }, - - // 树辅助函数 - loop: (data: TreeProps['treeData'], id: string | number, callback: any) => { - data?.forEach((item, index) => { - if (item.id === id) { - return callback(item, index, data); - } - if (item.children) { - return transfer.loop(item.children, id, callback); - } - }); + updateTree: () => { + console.log(getKeys(transfer.data.rightTreeData)); }, }; transfer.init(); + +const dialogShow = ref(false);