feat: 添加初始化页-角色、菜单保存

src/pages/init-home/components/data/RoleData.ts

@@ -1,5 +1,13 @@
+export enum ROLEKEYS {
+  'device' = 'device',
+  'link' = 'link',
+  'complex' = 'complex',
+}
+
+export type roleKeysType = keyof typeof ROLEKEYS;
+
 export default {
-  device: [{
+  [ROLEKEYS.device]: [{
     "id": "1508369752477196288",
     "parentId": "1507167185484652544",
     "path": "5Lhl-pvIx-LS9j",
@@ -647,7 +655,7 @@ export default {
     "accessDescription": "此菜单不支持数据权限控制",
     "granted": true
   }],
-  link: [{
+  [ROLEKEYS.link]: [{
     "id": "1508388133506965504",
     "parentId": "1507162853817495552",
     "path": "5Lhl-ba0F",
@@ -1300,7 +1308,7 @@ export default {
     "granted": true,
     "children": []
   }],
-  complex: [{
+  [ROLEKEYS.complex]: [{
     "id": "1508369752477196288",
     "parentId": "1507167185484652544",
     "path": "5Lhl-pvIx-LS9j",

src/pages/init-home/components/menu.tsx

@@ -56,7 +56,7 @@ const Menu = forwardRef((_, ref) => {
   }
 
   useImperativeHandle(ref, () => ({
-    save: () => {
+    save: async () => {
       console.log(menuRef.current)
     }
   }))

src/pages/init-home/components/role.tsx

@@ -1,29 +1,52 @@
 import {Checkbox} from 'antd'
 import { useState, forwardRef, useImperativeHandle} from "react";
 import classNames from "classnames";
-
+import RoleData, {roleKeysType, ROLEKEYS} from "./data/RoleData"
 import '../index.less';
+import {MenuDataModel} from "@/pages/init-home/components/menu";
 
 const Role = forwardRef((_, ref) => {
 
-  const [ keys, setKeys ] = useState<string[]>([])
+  const [ keys, setKeys ] = useState<roleKeysType[]>([])
+
+  const findMenuByRole = (menu: any[], code: string): boolean => {
+    return menu.some(item => {
+      if (item.code === code) {
+        return true
+      }
+
+      if (item.children) {
+        return findMenuByRole(item.children, code)
+      }
+
+      return false
+    })
+  }
 
   useImperativeHandle(ref, () => ({
-    save: () => {
+    save: async () => {
       console.log(keys)
     // 获取当前选中的角色
+      const newRole = keys.map(item => {
+
+        const _roleData = (RoleData[item] as []).filter((roleItem: any) => {
+          return findMenuByRole(MenuDataModel.menuData, roleItem.code)
+        })
+        return { menus: _roleData }
+      })
+      console.log(newRole)
     }
   }), [keys])
 
   return (
     <div className={'init-home-role'}>
       <Checkbox.Group onChange={(e) => {
-        setKeys(e as string[])
+        setKeys(e as roleKeysType[])
       }}>
         <div className={'init-home-role-content'}>
           <div className={classNames('role-item role-image-1', {active: keys.includes('device')})}>
             <div className={'role-item-title'} >
-              <Checkbox value={'device'}></Checkbox>
+              <Checkbox value={ROLEKEYS.device}></Checkbox>
               <div>设备接入岗</div>
             </div>
             <div className={'role-item-content'}></div>
@@ -31,7 +54,7 @@ const Role = forwardRef((_, ref) => {
           </div>
           <div className={classNames('role-item role-image-2', {active: keys.includes('link')})}>
             <div className={'role-item-title'} >
-              <Checkbox value={'link'}></Checkbox>
+              <Checkbox value={ROLEKEYS.link}></Checkbox>
               <div>运维管理岗</div>
             </div>
             <div className={'role-item-content'}></div>
@@ -39,7 +62,7 @@ const Role = forwardRef((_, ref) => {
           </div>
           <div className={classNames('role-item role-image-3', {active: keys.includes('complex')})}>
             <div className={'role-item-title'} >
-              <Checkbox value={'complex'}></Checkbox>
+              <Checkbox value={ROLEKEYS.complex}></Checkbox>
               <div>综合管理岗</div>
             </div>
             <div className={'role-item-content'}></div>