feats

src/pages/roles/menus.jsx

@@ -1,7 +1,7 @@
 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) => {
@@ -11,16 +11,33 @@ export default (props) => {
   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) => {
@@ -50,14 +67,23 @@ export default (props) => {
     <Card
       loading={loading}
       title={title}
-      extra={<Button type='primary' ghost>保存</Button>}
+      extra={<Button type='primary' ghost onClick={onSubmit}>保存</Button>}
     >
       <Tree
         checkable
+        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/utils/arr2Tree.js

@@ -1,34 +0,0 @@
-
-export default 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);
-      }
-    }
-  }
-
-  console.log(tree, dict)
-
-  return [tree, dict];
-}
-

src/utils/array.js

@@ -0,0 +1,61 @@
+
+/**
+ * 数组 转 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)
+  }, []);
+}