feats

src/pages/roles/menus.jsx

 import React from 'react';
-import { Button, Card, Tree, Modal } from 'antd';
+import { Button, Card, Tree, message } from 'antd';
 import useBool from '@/utils/hooks/useBool';
-import arr2Tree from '@/utils/arr2Tree';
+import { arr2Tree, uniq } from '@/utils/array';
+import { getResourceList } from '@/services/role';
 
 export default (props) => {
   const { role } = props;
   const [loading, startLoading, cancelLoading] = useBool();
   const [list, setList] = React.useState([]);
   const [treeData, setTreeData] = React.useState([]);
+  const treeDictRef = React.useRef();
+  const [checkedKeys, setCheckedKeys] = React.useState([]);
+  const checkedNodesRef = React.useState([]);
 
   const title = role ? `${role.name} - 授权菜单` : '授权菜单';
 
-  const onSelect = (selectedKeys, info) => {
-    console.log('selected', selectedKeys, info);
-  };
-  const onCheck = (checkedKeys, info) => {
-    console.log('onCheck', checkedKeys, info);
+  const onCheck = (keys, info) => {
+    const { checkedNodes } = info;
+    checkedNodesRef.current = checkedNodes;
+    // const keys = checkedNodes.map(node => getKeysWithParent(node, treeDictRef.current));
+    // setCheckedKeys(uniq(keys));
+    setCheckedKeys(keys);
   };
 
+  const onSubmit = () => {
+    if (!checkedNodesRef.current) {
+      return;
+    }
+
+    if (checkedNodesRef.current.length !== checkedKeys.length) {
+      message.warn('未知错误, 请刷新重试');
+      return;
+    }
+
+    const keys = checkedNodesRef.current.map(node => getKeysWithParent(node, treeDictRef.current));
+
+  }
+
+  React.useEffect(() => {
+    startLoading();
+    getResourceList({ pageSize: 500, type: 'menu' }).then((res) => {
+      cancelLoading();
+      setList(res.records || []);
+    }).catch(() => {
+      cancelLoading();
+    })
+  }, []);
+
   React.useEffect(() => {
     if (!role) {
       setList([]);
     // 先转为需要的格式
     const arr = list.map(x => ({ title: x.name, key: x.id, parentId: x.parentId }));
     // 再转为 tree
-    setTreeData(arr2Tree(arr));
+    const [tree, dict] = arr2Tree(arr);
+    setTreeData(tree);
+    treeDictRef.current = dict;
   }, [list]);
 
   return (
     <Card
       loading={loading}
       title={title}
-      extra={<Button type='primary' ghost>保存</Button>}
+      extra={<Button type='primary' ghost onClick={onSubmit}>保存</Button>}
     >
       <Tree
         checkable
-        onSelect={onSelect}
+        autoExpandParent
+        checkStrictly={false}
+        selectable={false}
+        checkedKeys={checkedKeys}
         onCheck={onCheck}
         treeData={treeData}
       />
     </Card>
   )
 }
+
+function getKeysWithParent(node, dict) {
+  if (node.parentId === -1) return [node.key];
+  const parentKeys = getKeysWithParent(dict[node.parentId], dict);
+  return parentKeys ? [node.key].concat(parentKeys) : [node.key];
+}

src/routes/routes.jsx

               title: '库存维护',
             },
           },
-          {
-            path: 'log',
-            element: <StockLog />,
-            meta: {
-              title: '库存日志',
-            },
-          },
         ],
       },
       {
             index: true,
             element: <Navigate to='rotationChart/list' replace />,
           },
+          {
+            path: 'station',
+            element: null,
+            meta: {
+              title: '本站信息',
+            },
+          },
           {
             path: 'rotationChart/list',
             element: <RotationChartList />,
             meta: {
-              title: '轮播图管理',
+              title: '公告内容',
             },
           },
           {
             path: 'rotationChart/edit',
             element: <RotationChartEdit />,
             meta: {
-              title: '轮播图维护',
+              title: '公告维护',
             },
           },
           {
               title: '本站信息简介',
             },
           },
+          {
+            path: 'regulation',
+            element: null,
+            meta: {
+              title: '规章制度',
+            },
+          },
+          {
+            path: 'emergency-plan',
+            element: null,
+            meta: {
+              title: '应急预案',
+            },
+          },
+          {
+            path: 'files',
+            element: null,
+            meta: {
+              title: '文件管理',
+            },
+          },
         ],
       },
       {
               hideInMenu: true,
             },
           },
+          {
+            path: 'log',
+            element: <StockLog />,
+            meta: {
+              title: '库存操作日志',
+            },
+          },
           {
             path: 'roles',
             element: <Roles />,
             meta: {
               title: '系统角色管理',
             },
+          },
+          {
+            path: 'user',
+            element: null,
+            meta: {
+              title: '系统用户管理',
+            },
           }
         ],
       },

src/services/role.js

   deleteRole,
  ] = restful('/roles');
 
+ 
+ const [
+  getResourceList,
+  getResourceDetail,
+  saveResource,
+  updateResource,
+  deleteResource,
+ ] = restful('/resources');
+
 
  export {
   getRoleList,
   saveRole,
   updateRole,
   deleteRole,
+  
+  getResourceList,
+  getResourceDetail,
+  saveResource,
+  updateResource,
+  deleteResource,
  }

src/utils/arr2Tree.js

-
-export default function arr2Tree(arr = [], parent = 'parentId') {
-  // 转换为字典
-  const dict = arr.reduce((acc, item) => {
-    return {
-      ...acc,
-      [item.id]: {
-        ...item,
-        children: []
-      }
-    }
-  }, {});
-
-  // 挂载父子节点
-  const rootId = -1;
-  const tree = [];
-  for (let item of arr) {
-    const parentNodeId = item[parent];
-
-    if (parentNodeId === rootId) {
-      tree.push(item);
-    } else {
-      const parentNode = dict[parentNodeId];
-      if (parentNode) {
-        parentNode.children.push(item);
-      }
-    }
-  }
-
-  return tree;
-}
-

src/utils/array.js

+
+/**
+ * 数组 转 Tree
+ * @param {*} arr 
+ * @param {*} parent 
+ * @param {*} key 
+ * @returns 
+ */
+export function arr2Tree(arr = [], parent = 'parentId', key = 'key') {
+  // 转换为字典
+  const dict = arr.reduce((acc, item) => {
+    return {
+      ...acc,
+      [item[key]]: {
+        ...item,
+        children: []
+      }
+    }
+  }, {});
+
+  // 挂载父子节点
+  const rootId = -1;
+  const tree = [];
+  for (let item of arr) {
+    const parentNodeId = item[parent];
+
+    if (parentNodeId === rootId) {
+      tree.push(dict[item[key]]);
+    } else {
+      const parentNode = dict[parentNodeId];
+      if (parentNode) {
+        parentNode.children.push(item);
+      }
+    }
+  }
+
+  return [tree, dict];
+}
+
+/**
+ * 深度展平数组
+ * @param {*} arr 
+ * @returns 
+ */
+export function flatten(arr = []) {
+  return arr.reduce((acc, it) => {
+    const list = Array.isArray(it) ? flatten(it) : it
+    return acc.concat(list);
+  }, []);
+}
+
+/**
+ * 深度数组去重
+ * @param {*} arr 
+ */
+export function uniq(arr = []) {
+  const list = flatten(arr);
+  return list.reduce((acc, it) => {
+    return acc.indexOf(it) > -1 ? acc : acc.concat(it)
+  }, []);
+}