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,24 +164,36 @@ const Role: React.FC = () => {
     }
 
     const handleOnListDeleteBtnClick = () => {
-        setIsLoading(true)
+        modal
-
+            .confirm({
-        void r_role_delete_list(tableSelectedItem)
+                title: '确定删除',
-            .then((res) => {
+                content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
-                const data = res.data
-
-                if (data.code === DATABASE_DELETE_SUCCESS) {
-                    void message.success('删除成功')
-                    setTimeout(() => {
-                        getRole()
-                    })
-                } else {
-                    void message.error('删除失败，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setIsLoading(false)
             })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setIsLoading(true)
+
+                        void r_role_delete_list(tableSelectedItem)
+                            .then((res) => {
+                                const data = res.data
+
+                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    void message.success('删除成功')
+                                    setTimeout(() => {
+                                        getRole()
+                                    })
+                                } else {
+                                    void message.error('删除失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setIsLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
     }
 
     const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
@@ -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 moduleChildrenMap = new Map<string, _DataNode[]>()
-    const elementMap = new Map<number, _DataNode[]>()
+    const menuChildrenMap = new Map<string, _DataNode[]>()
-    const operationMap = new Map<number, _DataNode[]>()
+    const elementChildrenMap = new Map<string, _DataNode[]>()
 
     operations.forEach((operation) => {
-        if (
+        if (elementChildrenMap.get(String(operation.elementId))) {
-            operationMap.has(operation.elementId) &&
+            elementChildrenMap.get(String(operation.elementId))?.push({
-            operationMap.get(operation.elementId) !== null
-        ) {
-            operationMap.get(operation.elementId)?.push({
                 title: operation.name,
-                fullTitle: operation.name,
+                key: operation.id,
-                key: operation.powerId,
+                value: operation.id
-                value: operation.powerId
             })
         } else {
-            operationMap.set(operation.elementId, [
+            elementChildrenMap.set(String(operation.elementId), [
                 {
                     title: operation.name,
-                    fullTitle: operation.name,
+                    key: operation.id,
-                    key: operation.powerId,
+                    value: operation.id
-                    value: operation.powerId
                 }
             ])
         }
     })
 
-    elements.forEach((element) => {
+    const elementTrees = parentToTree(
-        if (elementMap.has(element.menuId) && elementMap.get(element.menuId) !== null) {
+        elements.map((element) => ({
-            elementMap.get(element.menuId)?.push({
+            title: element.name,
-                title: element.name,
+            key: element.id,
-                fullTitle: element.name,
+            value: element.id,
-                key: element.powerId,
+            parentId: element.parentId,
-                value: element.powerId,
+            children: elementChildrenMap.get(String(element.id))
-                children: operationMap.get(element.id)?.map((value) => {
+        }))
-                    value.fullTitle = `${element.name}-${value.fullTitle}`
+    )
-                    return value
+
-                })
+    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 {
-            elementMap.set(element.menuId, [
+            menuChildrenMap.set(String(floorNumber(element.key as number, 5)), [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
-                    })
-                }
-            ])
         }
     })
 
-    menus.forEach((menu) => {
+    const menuTrees = parentToTree(
-        if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
+        menus.map((menu) => ({
-            menuMap.get(menu.moduleId)?.push({
+            title: menu.name,
-                title: menu.name,
+            key: menu.id,
-                fullTitle: menu.name,
+            value: menu.id,
-                key: menu.powerId,
+            parentId: menu.parentId,
-                value: menu.powerId,
+            children: menuChildrenMap.get(String(menu.id))
-                children: elementMap.get(menu.id)?.map((value) => {
+        }))
-                    value.fullTitle = `${menu.name}-${value.fullTitle}`
+    )
-                    value.children?.forEach((value1) => {
+
-                        value1.fullTitle = `${menu.name}-${value1.fullTitle}`
+    menuTrees.forEach((menu) => {
-                    })
+        if (moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))) {
-                    return value
+            moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))?.push(menu)
-                })
-            })
         } else {
-            menuMap.set(menu.moduleId, [
+            moduleChildrenMap.set(String(floorNumber(menu.key as number, 7)), [menu])
-                {
-                    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) => ({
+    return modules.map((module) =>
-        title: module.name,
+        getFullTitle({
-        fullTitle: module.name,
+            title: module.name,
-        key: module.powerId,
+            key: module.id,
-        value: module.powerId,
+            value: module.id,
-        children: menuMap.get(module.id)?.map((value) => {
+            children: moduleChildrenMap.get(String(module.id))
-            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
         })
-    }))
+    )
+}
+
+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) => {