From 7db258e1b85b4cc90386de196a9852992a0a7b3b Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 15 Nov 2023 14:55:16 +0800 Subject: [PATCH] Optimize role stylesheet --- src/ant-design.d.ts | 3 +- src/global.d.ts | 6 +- src/pages/system/Role.tsx | 51 +++++++----- src/utils/common.tsx | 168 +++++++++++++++++++------------------- 4 files changed, 118 insertions(+), 110 deletions(-) diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts index 3de2a01..d3f35af 100644 --- 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[] } } diff --git a/src/global.d.ts b/src/global.d.ts index af0ed9f..0ec2d7b 100644 --- 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 } diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx index baf55a8..237b0ea 100644 --- 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 = () => { { const query = window.location.search.substring(1) @@ -166,111 +167,106 @@ export const powerListToPowerTree = ( elements: ElementVo[], operations: OperationVo[] ): _DataNode[] => { - const menuMap = new Map() - const elementMap = new Map() - const operationMap = new Map() + const moduleChildrenMap = new Map() + const menuChildrenMap = new Map() + const elementChildrenMap = new Map() 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) => {