Optimize role stylesheet

2023-11-15 14:55:16 +08:00
parent cd010ade48
commit 7db258e1b8
4 changed files with 118 additions and 110 deletions
--- a/src/ant-design.d.ts
+++ b/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[]
    }
 }
--- a/src/global.d.ts
+++ b/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
 }

--- a/src/pages/system/Role.tsx
+++ b/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)
-
-        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)
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
            })
+            .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}
--- a/src/utils/common.tsx
+++ b/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({
-                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
-                })
-            })
+    const elementTrees = parentToTree(
+        elements.map((element) => ({
+            title: element.name,
+            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 {
-            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
-                    })
-                }
-            ])
+            menuChildrenMap.set(String(floorNumber(element.key as number, 5)), [element])
        }
    })

-    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
-                })
-            })
+    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 {
-            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
-                    })
-                }
-            ])
+            moduleChildrenMap.set(String(floorNumber(menu.key as number, 7)), [menu])
        }
    })

-    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
+    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) => {