src/ant-design.d.ts

@@ -19,7 +19,8 @@ declare global {
     type _CheckboxChangeEvent = CheckboxChangeEvent
     interface _DataNode extends DataNode {
         value: React.Key
-        fullTitle: string
+        fullTitle?: string
+        parentId?: number
         children?: _DataNode[]
     }
 }

src/global.d.ts

@@ -102,31 +102,29 @@ interface UserInfoVo {
 interface ModuleVo {
     id: number
     name: string
-    powerId: number
 }
 
 interface MenuVo {
     id: number
     name: string
     url: string
-    powerId: number
     parentId: number
     moduleId: number
+    children: MenuVo[]
 }
 
 interface ElementVo {
     id: number
     name: string
-    powerId: number
     parentId: number
     menuId: number
+    children: ElementVo[]
 }
 
 interface OperationVo {
     id: number
     name: string
     code: string
-    powerId: number
     elementId: number
 }
 

src/pages/system/Role.tsx

@@ -11,7 +11,7 @@ import {
     r_role_update,
     r_role_delete,
     r_role_delete_list
-} from '@/services/system.tsx'
+} from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -164,6 +164,14 @@ const Role: React.FC = () => {
     }
 
     const handleOnListDeleteBtnClick = () => {
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
                         setIsLoading(true)
 
                         void r_role_delete_list(tableSelectedItem)
@@ -183,6 +191,10 @@ const Role: React.FC = () => {
                                 setIsLoading(false)
                             })
                     }
+                },
+                () => {}
+            )
+    }
 
     const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
         return () => {
@@ -192,7 +204,7 @@ const Role: React.FC = () => {
             form.setFieldValue('name', value.name)
             form.setFieldValue(
                 'powerIds',
-                value.operations.map((operation) => operation.powerId)
+                value.operations.map((operation) => operation.id)
             )
             form.setFieldValue('enable', value.enable)
             void form.validateFields()
@@ -570,6 +582,7 @@ const Role: React.FC = () => {
             </FitFullScreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑角色' : '添加角色'}
+                width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
                 closable={!isSubmitting}

src/utils/common.tsx

@@ -1,7 +1,8 @@
-import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import moment from 'moment'
 import ReactDOM from 'react-dom/client'
-import LoadingMask from '@/components/common/LoadingMask.tsx'
+import _ from 'lodash'
+import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
+import LoadingMask from '@/components/common/LoadingMask'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -166,111 +167,106 @@ export const powerListToPowerTree = (
     elements: ElementVo[],
     operations: OperationVo[]
 ): _DataNode[] => {
-    const menuMap = new Map<number, _DataNode[]>()
-    const elementMap = new Map<number, _DataNode[]>()
-    const operationMap = new Map<number, _DataNode[]>()
+    const moduleChildrenMap = new Map<string, _DataNode[]>()
+    const menuChildrenMap = new Map<string, _DataNode[]>()
+    const elementChildrenMap = new Map<string, _DataNode[]>()
 
     operations.forEach((operation) => {
-        if (
-            operationMap.has(operation.elementId) &&
-            operationMap.get(operation.elementId) !== null
-        ) {
-            operationMap.get(operation.elementId)?.push({
+        if (elementChildrenMap.get(String(operation.elementId))) {
+            elementChildrenMap.get(String(operation.elementId))?.push({
                 title: operation.name,
-                fullTitle: operation.name,
-                key: operation.powerId,
-                value: operation.powerId
+                key: operation.id,
+                value: operation.id
             })
         } else {
-            operationMap.set(operation.elementId, [
+            elementChildrenMap.set(String(operation.elementId), [
                 {
                     title: operation.name,
-                    fullTitle: operation.name,
-                    key: operation.powerId,
-                    value: operation.powerId
+                    key: operation.id,
+                    value: operation.id
                 }
             ])
         }
     })
 
-    elements.forEach((element) => {
-        if (elementMap.has(element.menuId) && elementMap.get(element.menuId) !== null) {
-            elementMap.get(element.menuId)?.push({
+    const elementTrees = parentToTree(
+        elements.map((element) => ({
             title: element.name,
-                fullTitle: element.name,
-                key: element.powerId,
-                value: element.powerId,
-                children: operationMap.get(element.id)?.map((value) => {
-                    value.fullTitle = `${element.name}-${value.fullTitle}`
-                    return value
-                })
-            })
-        } else {
-            elementMap.set(element.menuId, [
-                {
-                    title: element.name,
-                    fullTitle: element.name,
-                    key: element.powerId,
-                    value: element.powerId,
-                    children: operationMap.get(element.id)?.map((value) => {
-                        value.fullTitle = `${element.name}-${value.fullTitle}`
-                        return value
-                    })
-                }
-            ])
-        }
-    })
-
-    menus.forEach((menu) => {
-        if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
-            menuMap.get(menu.moduleId)?.push({
-                title: menu.name,
-                fullTitle: menu.name,
-                key: menu.powerId,
-                value: menu.powerId,
-                children: elementMap.get(menu.id)?.map((value) => {
-                    value.fullTitle = `${menu.name}-${value.fullTitle}`
-                    value.children?.forEach((value1) => {
-                        value1.fullTitle = `${menu.name}-${value1.fullTitle}`
-                    })
-                    return value
-                })
-            })
-        } else {
-            menuMap.set(menu.moduleId, [
-                {
-                    title: menu.name,
-                    fullTitle: menu.name,
-                    key: menu.powerId,
-                    value: menu.powerId,
-                    children: elementMap.get(menu.id)?.map((value) => {
-                        value.fullTitle = `${menu.name}-${value.fullTitle}`
-                        value.children?.forEach((value1) => {
-                            value1.fullTitle = `${menu.name}-${value1.fullTitle}`
-                        })
-                        return value
-                    })
-                }
-            ])
-        }
-    })
-
-    return modules.map((module) => ({
-        title: module.name,
-        fullTitle: module.name,
-        key: module.powerId,
-        value: module.powerId,
-        children: menuMap.get(module.id)?.map((value) => {
-            value.fullTitle = `${module.name}-${value.fullTitle}`
-            value.children?.forEach((value1) => {
-                value1.fullTitle = `${module.name}-${value1.fullTitle}`
-                value1.children?.forEach((value2) => {
-                    value2.fullTitle = `${module.name}-${value2.fullTitle}`
-                })
-            })
-            return value
-        })
+            key: element.id,
+            value: element.id,
+            parentId: element.parentId,
+            children: elementChildrenMap.get(String(element.id))
         }))
+    )
+
+    elementTrees.forEach((element) => {
+        if (menuChildrenMap.get(String(floorNumber(element.key as number, 5)))) {
+            menuChildrenMap.get(String(floorNumber(element.key as number, 5)))?.push(element)
+        } else {
+            menuChildrenMap.set(String(floorNumber(element.key as number, 5)), [element])
+        }
+    })
+
+    const menuTrees = parentToTree(
+        menus.map((menu) => ({
+            title: menu.name,
+            key: menu.id,
+            value: menu.id,
+            parentId: menu.parentId,
+            children: menuChildrenMap.get(String(menu.id))
+        }))
+    )
+
+    menuTrees.forEach((menu) => {
+        if (moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))) {
+            moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))?.push(menu)
+        } else {
+            moduleChildrenMap.set(String(floorNumber(menu.key as number, 7)), [menu])
+        }
+    })
+
+    return modules.map((module) =>
+        getFullTitle({
+            title: module.name,
+            key: module.id,
+            value: module.id,
+            children: moduleChildrenMap.get(String(module.id))
+        })
+    )
+}
+
+const parentToTree = (data: _DataNode[]): _DataNode[] => {
+    const parents = data.filter((value) => !value.parentId)
+    const children = data.filter((value) => value.parentId)
+
+    const translator = (parents: _DataNode[], children: _DataNode[]) => {
+        parents.forEach((parent) => {
+            children.forEach((current, index) => {
+                if (current.parentId === parent.key) {
+                    const temp = _.cloneDeep(children)
+                    temp.splice(index, 1)
+                    translator([current], temp)
+                    typeof parent.children !== 'undefined'
+                        ? parent.children.push({ ...current })
+                        : (parent.children = [current])
+                }
+            })
+        })
+    }
+
+    translator(parents, children)
+
+    return parents
+}
+
+const getFullTitle = (data: _DataNode, preTitle?: string) => {
+    data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
+    data.children &&
+        data.children.forEach((value) => {
+            getFullTitle(value, data.fullTitle)
+        })
+
+    return data
 }
 
 export const showLoadingMask = (id: string) => {