Merge branch 'dev' of http://git.ycjcjy.com/jgz/admin into dev

src/layouts/AuthLayout/components/Container.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
-import { Layout, Spin } from 'antd';
+import { Layout } from 'antd';
 import { Outlet } from "react-router-dom";
 import PageTransition from './PageTransition';
 import Footer from './Footer';

src/layouts/AuthLayout/components/Header/SplitMenu.jsx

@@ -1,28 +1,12 @@
 import React from 'react';
 import { Menu } from 'antd';
-import { useNavigate } from 'react-router-dom';
 
 export default (props) => {
-  const { items, onChange, location } = props;
+  const { items, location } = props;
 
-  const navigate = useNavigate();
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  const renderItems = React.useMemo(() => items.map(x => ({ ...x, children: undefined })), [items]);
-
-  const rootPath = React.useMemo(() => `/${location.pathname.split('/')[1]}`, [location.pathname]);
-
-  const onClick = (item) => {
-    onChange(item.key);
-    // navigate(item.key);
-  };
-
-  React.useEffect(() => {
-    setSelectedKeys([rootPath]);
-    onChange(rootPath);
-  }, [rootPath]);
+  const selectedKeys = React.useMemo(() => `/${location.pathname.split('/')[1]}`, [location.pathname]);
 
   return (
-    <Menu className='split-menu' mode="horizontal" items={renderItems} selectedKeys={selectedKeys} onClick={onClick} />
+    <Menu className='split-menu' mode="horizontal" items={items} selectedKeys={selectedKeys} />
   )
 }

src/layouts/AuthLayout/components/Header/index.jsx

@@ -10,7 +10,7 @@ import SplitMenu from './SplitMenu';
 const { Header } = Layout;
 
 export default (props) => {
-  const { menus, theme, location, onMenuChange } = props;
+  const { menus, theme, location } = props;
 
   const className = useMemo(() => classNames({
     'layout-header': true,
@@ -20,7 +20,7 @@ export default (props) => {
   return (
     <Header className={className}>
       <Logo />
-      <SplitMenu items={menus} location={location} onChange={onMenuChange} />
+      <SplitMenu items={menus} location={location} />
       <Space>
         <User />
         <Exit />

src/layouts/AuthLayout/components/Menus.jsx

@@ -1,39 +1,10 @@
 import React, { useState } from 'react';
-import { useNavigate, useLocation } from "react-router-dom";
 import { Menu } from 'antd';
 
-const linkTo = url => {
-  const a = document.createElement('a');
-  a.href = item.key;
-  a.target = '_blank';
-  a.click();
-}
-
 const menuStyle = { height: '100%' };
 
 export default (props) => {
   const { theme, items, location } = props;
-  // const [selectedKeys, setSelectedKeys] = useState([]);
-
-  const navigate = useNavigate();
-
-  const onClick = (item) => {
-    // console.log(item);
-
-    if (item.key.indexOf('http') === 0) {
-      // http 开头说明是外部链接
-      linkTo(item.key);
-    } else {
-      // setSelectedKeys([item.key]);
-      navigate(item.key);
-    }
-  }
-
-  // React.useEffect(() => {
-  //   if (location.pathname) {
-  //     setSelectedKeys([location.pathname]);
-  //   }
-  // }, [location.pathname]);
 
   return (
     <Menu style={menuStyle} theme={theme} items={items} selectedKeys={[location.pathname]} />

src/layouts/AuthLayout/components/RequireLogin.jsx

@@ -1,16 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { useLocation, Navigate } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { useModel } from '@/store';
-import { queryCurrentUser } from '@/services/user';
 
 export default (props) => {
-  const { user, setUser } = useModel('user');
+  const { user, getCurrentUser } = useModel('user');
   const [userStatus, setUserStatus] = useState(user && user.id ? 1 : 0);
 
   useEffect(() => {
     if (!user || !user.id) {
-      queryCurrentUser().then((res) => {
-        setUser(res);
+      getCurrentUser().then(() => {
         setUserStatus(1);
       }).catch(() => {
         setUserStatus(-1);

src/layouts/AuthLayout/index.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
 import { useLocation, Outlet } from "react-router-dom";
 import { useModel } from '@/store';
-import { getItems } from '@/routes/menus';
+import { getMenuItems } from '@/routes/menus';
 import useRoute from '@/utils/hooks/useRoute';
 import RequireLogin from './components/RequireLogin';
 import SiderBar from './components/SiderBar';
@@ -14,20 +14,15 @@ import './style.less';
 
 export default (props) => {
   const { theme } = useModel('system');
-  const { user } = useModel('user');
-
-  const allMenus = useMemo(() => getItems(), []);
-  const [siderMenus, setSiderMenus] = useState([]);
-
+  const { user, menus } = useModel('user');
   const location = useLocation();
   const currentRoute = useRoute();
 
-  const onSplitMenuChange = (key) => {
-    const target = allMenus.filter(x => x.key === key)[0];
-    if (target) {
-      setSiderMenus(target.children || []);
-    }
-  }
+  const splitMenus = useMemo(() => menus.map(x => ({ ...x, children: undefined })), [menus]);
+  const siderMenus = useMemo(() => {
+    const target = menus.filter(x => location.pathname.indexOf(x.key) === 0)[0];
+    return target ? target.children :  [];
+  }, [menus, location.pathname]);
 
   return (
     <Spin spinning={!user} size="large">
@@ -38,7 +33,7 @@ export default (props) => {
             ? <Outlet />
             : (
               <Layout style={{ minHeight: '100vh' }}>
-                <Header theme={theme} menus={allMenus} location={location} onMenuChange={onSplitMenuChange} />
+                <Header theme={theme} menus={splitMenus} location={location} />
                 <Layout>
                   <SiderBar theme={theme} menus={siderMenus} location={location} />
                   <Container location={location} />

src/layouts/Container.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from 'antd';
 import { Outlet } from 'react-router-dom';
 import useRoute from '@/utils/hooks/useRoute';
 
@@ -6,14 +7,15 @@ const containerStyle = {
   margin: '24px 24px 0 24px',
   height: '100%',
 }
+const { Title } = Typography;
 
 export default (props) => {
-
-  const currentRoute = useRoute();
-  const style = currentRoute.meta && currentRoute.meta.noLayout ? { height: '100%' } : containerStyle;
+  const { meta = {} } = useRoute() || {};
+  const style = meta.noLayout ? { height: '100%' } : containerStyle;
 
   return (
     <div style={style}>
+      {/* { meta.title && !meta.noLayout && <Title level={4} style={{ paddingBottom: '12px' }}>{ meta.title }</Title> } */}
       <Outlet />
     </div>
   )

src/pages/roles/list.jsx

@@ -93,8 +93,8 @@ export default (props) => {
 
   React.useEffect(() => {
     startLoading();
-    getRoleList({ pageSize: 100 }).then((res) => {
-      setList(res.records || []);
+    getRoleList().then((res = []) => {
+      setList(res);
       cancelLoading();
     }).catch(() => {
       cancelLoading();

src/pages/roles/menus.jsx

@@ -2,59 +2,92 @@ import React from 'react';
 import { Button, Card, Tree, message } from 'antd';
 import useBool from '@/utils/hooks/useBool';
 import { arr2Tree, uniq } from '@/utils/array';
-import { getResourceList } from '@/services/role';
+import { getResourceList, authRoleResource } from '@/services/role';
 
 export default (props) => {
   const { role } = props;
   
   const [loading, startLoading, cancelLoading] = useBool();
   const [list, setList] = React.useState([]);
+  const [expandedKeys, setExpandedKeys] = React.useState([]);
   const [treeData, setTreeData] = React.useState([]);
   const treeDictRef = React.useRef();
-  const [checkedKeys, setCheckedKeys] = React.useState([]);
-  const checkedNodesRef = React.useState([]);
+  const [checkedKeys, setCheckedKeys] = React.useState({ checked: [], halfChecked: [] });
+  const keys = checkedKeys.checked.concat(checkedKeys.halfChecked);
 
   const title = role ? `${role.name} - 授权菜单` : '授权菜单';
 
-  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 getListData = () => {
+    return new Promise((resolve, reject) => {
+      getResourceList({ type: 'menu' }).then((res = []) => {
+        setList(res);
+        resolve(res)
+      }).catch(reject);
+    });
+  }
+
+  const onCheck = (keys, { halfCheckedKeys }) => {
+    setCheckedKeys({ checked: keys, halfChecked: halfCheckedKeys });
   };
 
   const onSubmit = () => {
-    if (!checkedNodesRef.current) {
-      return;
-    }
-
-    if (checkedNodesRef.current.length !== checkedKeys.length) {
-      message.warn('未知错误, 请刷新重试');
-      return;
+    // 如果一个都不选，代表清空授权
+    const data = [];
+    const roleId = role.id;
+    for (let resourceId of keys) {
+      data.push({ roleId, resourceId });
     }
-
-    const keys = checkedNodesRef.current.map(node => getKeysWithParent(node, treeDictRef.current));
-
-  }
-
-  React.useEffect(() => {
     startLoading();
-    getResourceList({ pageSize: 500, type: 'menu' }).then((res) => {
+    authRoleResource(roleId, data).then((res) => {
       cancelLoading();
-      setList(res.records || []);
     }).catch(() => {
       cancelLoading();
     })
-  }, []);
+  }
 
   React.useEffect(() => {
-    if (!role) {
-      setList([]);
+    const p = !list.length ? getListData : () => Promise.resolve(list);
+    if (!role || !role.id) {
+      p();
+    } else {
+      startLoading();
+      p().then((allData) => {
+        getResourceList({ type: 'menu', roleId: role.id }).then((res = []) => {
+          cancelLoading();
+          
+          // 数据分为2部分, 一部分叶子节点, 一部分非叶子节点
+          const checked = [], halfChecked = [];
+          for (let item of res) {
+            // 获取子节点, 没有的话则为叶子节点, 否则为非叶子节点
+            const children = allData.filter(x => x.parentId === item.id);
+            if (!children.length) {
+              // 没有子节点, 则为叶子节点, 算入选中节点
+              checked.push(item.id);
+            } else {
+              // 获取选中子节点
+              const checkedChildren = res.filter(x => x.parentId === item.id);
+              if (checkedChildren.length === children.length) {
+                // 非叶子节点如果 子节点全部包含, 那么算入选中节点
+                checked.push(item.id);
+              } else {
+                halfChecked.push(item.id);
+              }
+            }
+          }
+
+          setCheckedKeys({ checked, halfChecked });
+        }).catch(() => {
+          cancelLoading();
+        })
+      }).catch(() => {
+        cancelLoading();
+      })
     }
   }, [role]);
   
   React.useEffect(() => {
+    // 展开节点
+    setExpandedKeys((list).filter(x => x.parentId === -1).map(x => x.id));
     // 先转为需要的格式
     const arr = list.map(x => ({ title: x.name, key: x.id, parentId: x.parentId }));
     // 再转为 tree
@@ -67,15 +100,17 @@ export default (props) => {
     <Card
       loading={loading}
       title={title}
-      extra={<Button type='primary' ghost onClick={onSubmit}>保存</Button>}
+      extra={<Button type='primary' disabled={!role || !role.id} ghost onClick={onSubmit}>保存</Button>}
     >
       <Tree
         checkable
         autoExpandParent
+        expandedKeys={expandedKeys}
         checkStrictly={false}
         selectable={false}
         checkedKeys={checkedKeys}
         onCheck={onCheck}
+        onExpand={setExpandedKeys}
         treeData={treeData}
       />
     </Card>

src/pages/user/Edit.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { Button, Card, Form, Input, Select } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { getRoleList } from '@/services/role';
+import { saveUser, getUser } from '@/services/user';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import md5 from 'md5';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+const { Option } = Select;
+
+export default (props) => {
+  const [loading, startLoading, cancelLoading] = useBool();
+  const [submiting, startSubmit, cancelSubmit] = useBool();
+  const [roleList, setRoleList] = React.useState([]);
+  const [searchParams] = useSearchParams();
+  const [form] = Form.useForm();
+  const userRef = React.useRef();
+  const navigate = useNavigate();
+
+  const id = searchParams.get('id');
+
+  const onFinish = (values) => {
+    const password = values.password ? md5(values.password) : undefined;
+    const loginName = values.phone;
+    const rolesList = (values.rolesList || []).map(x => ({ id: x }));
+
+    startSubmit();
+    saveUser({ ...values, loginName, password, rolesList, id }).then(res => {
+      cancelSubmit();
+      navigate(-1);
+    }).catch(() => {
+      cancelSubmit();
+    });
+  }
+
+  React.useEffect(() => {
+    getRoleList().then(setRoleList);
+  }, []);
+  
+  React.useEffect(() => {
+    if (id) {
+      startLoading();
+      getUser(id).then(user => {
+        userRef.current = user;
+        form.setFieldsValue({
+          ...user,
+          rolesList: (user.rolesList || []).map(x => `${x.id}`),
+        });
+        cancelLoading();
+      }).catch(() => {
+        cancelLoading();
+      });
+    } else {
+      form.setFieldsValue({ password: '123456' });
+    }
+  }, [id]);
+
+  return (
+    <Card loading={loading}>
+      <Form onFinish={onFinish} form={form} {...formItemLayout} scrollToFirstError>
+        <Form.Item
+          name="name"
+          label="姓名"
+          rules={[
+            {
+              required: true,
+              message: '请填写姓名',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="dept"
+          label="部门"
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="phone"
+          label="手机号"
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item label="账号">
+          系统账号与手机号相同
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+          extra={id ? '填写密码意味着重置该账户密码' : '默认密码 123456'}
+          hasFeedback
+        >
+          <Input.Password allowClear />
+        </Form.Item>
+        <Form.Item
+          name="rolesList"
+          label="角色"
+        >
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: '100%' }}
+            placeholder="请选择角色"
+          >
+            {
+              roleList.map(role => (<Option key={role.id}>{role.name}</Option>))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button loading={submiting} type="primary" htmlType="submit">
+            保存
+          </Button>
+          <Button style={{ marginLeft: '2em' }} onClick={() => navigate(-1)}>
+            返回
+          </Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  )
+}
+
+

src/pages/user/Role.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Button, Row, Col, Card, List, Popconfirm, Tree, Space, Modal } from 'antd';
-import List from './list';
-
-export default (props) => {
-
-  const treeData = [
-    {
-      title: 'parent 1',
-      key: '0-0',
-      children: [
-        {
-          title: 'parent 1-0',
-          key: '0-0-0',
-          disabled: true,
-          children: [
-            {
-              title: 'leaf',
-              key: '0-0-0-0',
-              disableCheckbox: true,
-            },
-            {
-              title: 'leaf',
-              key: '0-0-0-1',
-            },
-          ],
-        },
-        {
-          title: 'parent 1-1',
-          key: '0-0-1',
-          children: [
-            {
-              title: (
-                <span
-                  style={{
-                    color: '#1890ff',
-                  }}
-                >
-                  sss
-                </span>
-              ),
-              key: '0-0-1-0',
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const onSelect = (selectedKeys, info) => {
-    console.log('selected', selectedKeys, info);
-  };
-  const onCheck = (checkedKeys, info) => {
-    console.log('onCheck', checkedKeys, info);
-  };
-
-  return (
-    <div>
-      <Row gutter={24}>
-        <Col span={8}>
-        </Col>
-        <Col span={16}>
-          <Card title='授权菜单' extra={<Button type='primary' ghost>保存</Button>}>
-            <Tree
-              checkable
-              defaultExpandedKeys={['0-0-0', '0-0-1']}
-              defaultSelectedKeys={['0-0-0', '0-0-1']}
-              defaultCheckedKeys={['0-0-0', '0-0-1']}
-              onSelect={onSelect}
-              onCheck={onCheck}
-              treeData={treeData}
-            />
-          </Card>
-        </Col>
-      </Row>
-
-    </div>
-  )
-}

src/pages/user/index.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { queryTable } from '@/utils/request';
+import { ProTable } from '@ant-design/pro-components';
+import { Button, message, Popconfirm } from 'antd';
+import { getUserList, updateUserStatus } from '@/services/user';
+
+const queryUserList = queryTable(getUserList);
+
+export default (props) => {
+  const actionRef = React.useRef();
+  const navigate = useNavigate();
+
+  const updateStatus = (user) => {
+    const status = user.status === 1 ? 0 : 1;
+    const hide = message.loading('请稍候...', 0);
+    updateUserStatus(user.id, status).then(res => {
+      hide();
+      actionRef.current.reload();
+    }).catch(() => {
+      hide();
+    })
+  }
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: false,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+    },
+    {
+      title: '部门',
+      dataIndex: 'dept',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+    },
+    {
+      title: '账号',
+      dataIndex: 'loginName',
+      search: false,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      search: false,
+      valueEnum: {
+        1: {
+          text: '正常',
+          status: 'Processing',
+        },
+        0: {
+          text: '禁用',
+          status: 'Error',
+        },
+      },
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 200,
+      render: (_, record) => [
+        <Button
+          key={1}
+          style={{ padding: 0 }}
+          type="link"
+          onClick={() => {
+            updateStatus(record);
+          }}
+        >
+          {record.status === 1 ? '禁用' : '启用'}
+        </Button>,
+        <Button
+          key={2}
+          style={{ padding: 0 }}
+          type="link"
+          onClick={() => {
+            console.log(record, ']]');
+            navigate(`/system/user/edit?id=${record.id}`);
+          }}
+        >
+          编辑
+        </Button>,
+      ],
+    },
+  ]
+
+  return (
+    <ProTable
+      actionRef={actionRef}
+      rowKey="id"
+      toolBarRender={() => [
+        <Button
+          key="1"
+          type="primary"
+          onClick={() => {
+            navigate('/system/user/edit');
+          }}
+        >
+          新增
+        </Button>,
+      ]}
+      request={queryUserList}
+      columns={columns}
+    />
+  )
+}

src/routes/Router.jsx

@@ -1,9 +1,18 @@
+import React from "react";
 import { createHashRouter, RouterProvider } from "react-router-dom";
-import routes from './routes'
-
-const router = createHashRouter(routes);
-export const hashRouter = true;
+import { useModel } from "@/store";
+import { defaultRoutes } from './routes';
 
 export default (props) => {
+  const { routes } = useModel('user');
+
+  const router = React.useMemo(() => {
+    if (!routes || routes.length < 1) {
+      return createHashRouter(defaultRoutes);
+    } else {
+      return createHashRouter(routes);
+    }
+  }, [routes]);
+
   return <RouterProvider router={router} />
 }

src/routes/menus.jsx

@@ -1,8 +1,4 @@
 import { Link } from 'react-router-dom';
-import routes from './routes';
-import { hashRouter } from './Router';
-
-let routeArr = [];
 
 // 菜单是否显示
 // 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
@@ -20,55 +16,30 @@ const getPath = (parent, current = '') => {
   return `${parent}/${current}`.replace(/\/\//g, '/');
 }
 
-const getMenuItems = (dts = [], fullPath = '/') => {
-  return dts.map(item => {
-    const path = getPath(fullPath, item.path);
+export const getMenuItems = (routes = [], fullPath = '/') => {
+  return routes.map(route => {
+    const path = getPath(fullPath, route.path);
 
     //
-    if (!isShow(item)) return false;
+    if (!isShow(route)) return false;
     
-    const children = hasChildren(item.children) ? getMenuItems(item.children, path) : false;
+    const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
+
+    const { target, title, icon } = route.meta || {}
 
     // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
-    const label = hashRouter && item.meta && item.meta.target === '_blank' ?
-      <a href={`${window.location.pathname}#${path}`} target={item.meta.target}>{item.meta.title}</a>
-      : <Link to={path} target={item.meta.target}>{item.meta.title}</Link>;
+    const label = target === '_blank' ?
+      <a href={`${window.location.pathname}#${path}`} target={target}>{title}</a>
+      : <Link to={path} target={target}>{title}</Link>;
 
     return Object.assign(
       {
         key: path,
         label,
-        title: item.meta.title,
-        icon: item.meta.icon,
+        title,
+        icon,
       },
       children && { children },
     )
   }).filter(Boolean);
 }
-
-const flatten = (routes, parent) => {
-  (routes || []).forEach((route) => {
-    const path = getPath(parent, route.path);
-    routeArr.push({
-      ...route,
-      path
-    });
-
-    if (route.children) {
-      flatten(route.children, path);
-    }
-  });
-}
-
-const getItems = () => getMenuItems(routes[0]?.children);
-const getRouteArr = () => {
-  if (routeArr.length < 1) {
-    flatten(routes, '/');
-  }
-  return routeArr;
-}
-// 
-export {
-  getItems,
-  getRouteArr,
-};

src/routes/permissions.js

@@ -0,0 +1,14 @@
+
+export const getAuthedRoutes = (routes, permissions) => {
+  if (!routes || routes.length < 1) return [];
+
+  return routes.map(route => {
+    if (route.meta && route.meta.permission && permissions.indexOf(route.meta.permission) < 0) return false;
+
+    if (route.children) {
+      route.children = getAuthedRoutes(route.children, permissions);
+    }
+
+    return route;
+  }).filter(Boolean);
+}

src/routes/routes.jsx

@@ -1,3 +1,36 @@
+
+首页
+探索
+帮助
+注册
+登录
+ jgz / admin
+关注
+3
+ 
+点赞
+0
+ 
+派生
+0
+代码
+工单
+0
+合并请求
+0
+版本发布
+0
+百科
+动态
+ 55 提交
+ 2 分支
+ 分支: dev 
+admin/src/routes/routes.jsx
+routes.jsx 7.5KB
+永久链接
+文件历史
+原始文件
+  
 import {
   AppstoreOutlined,
   ContainerOutlined,
@@ -6,37 +39,33 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   PieChartOutlined,
-} from "@ant-design/icons";
-import { Navigate } from "react-router-dom";
-import AuthLayout from "@/layouts/AuthLayout";
-import Container from "@/layouts/Container";
-import Login from "@/pages/login";
-import Page404 from "@/pages/404";
-import Home from "@/pages/sample/home";
-import BasicForm from "@/pages/sample/form";
-import BasicTable from "@/pages/sample/table";
-import GuaranteeTaskList from "@/pages/guaranteeTask";
-import GuaranteeTaskEdit from "@/pages/guaranteeTask/Edit";
-import GuaranteeTaskPrint from "@/pages/guaranteeTask/print";
-import EmergencyPlanList from "@/pages/cms/emergencyPlan/list";
-import EmergencyPlanEdit from "@/pages/cms/emergencyPlan/edit";
-import DishList from "@/pages/dish/list";
-import DishEdit from "@/pages/dish/edit";
-import PackageList from "@/pages/package/List";
-import StockList from "@/pages/stock/list";
-import StockEdit from "@/pages/stock/edit";
-import StockInOut from "@/pages/stock/outAndIn";
-import StockLog from "@/pages/stock/stockLog";
-import StockClassificationList from "@/pages/stockClassification/list";
-import StockClassificationEdit from "@/pages/stockClassification/edit";
-import RotationChartList from "@/pages/rotationChart/list";
-import RotationChartEdit from "@/pages/rotationChart/edit";
-import RotationChartIntroduction from "@/pages/rotationChart/introduction";
-import Roles from "@/pages/roles/index";
-import PurchasePlanList from "@/pages/purchase/plan/list";
-import PurchasePlanEdit from "@/pages/purchase/plan/edit";
-import PurchaseBillEdit from "@/pages/purchase/bill/edit";
-import PurchaseInStoreEdit from "@/pages/purchase/inStore/edit";
+} from '@ant-design/icons';
+import { Navigate } from 'react-router-dom';
+import AuthLayout from '@/layouts/AuthLayout';
+import Container from '@/layouts/Container';
+import Login from '@/pages/login';
+import Page404 from '@/pages/404';
+import Home from '@/pages/sample/home';
+import BasicForm from '@/pages/sample/form';
+import BasicTable from '@/pages/sample/table';
+import GuaranteeTaskList from '@/pages/guaranteeTask';
+import GuaranteeTaskEdit from '@/pages/guaranteeTask/Edit';
+import GuaranteeTaskPrint from '@/pages/guaranteeTask/print';
+import DishList from '@/pages/dish/list';
+import DishEdit from '@/pages/dish/edit';
+import PackageList from '@/pages/package/List';
+import StockList from '@/pages/stock/list';
+import StockEdit from '@/pages/stock/edit';
+import StockInOut from '@/pages/stock/outAndIn';
+import StockLog from '@/pages/stock/stockLog';
+import StockClassificationList from '@/pages/stockClassification/list';
+import StockClassificationEdit from '@/pages/stockClassification/edit';
+import RotationChartList from '@/pages/rotationChart/list';
+import RotationChartEdit from '@/pages/rotationChart/edit';
+import RotationChartIntroduction from '@/pages/rotationChart/introduction';
+import Roles from '@/pages/roles/index';
+import UserList from '@/pages/user';
+import UserEdit from '@/pages/user/Edit';
 
 /**
  * meta 用来扩展自定义数据数据
@@ -48,321 +77,295 @@ import PurchaseInStoreEdit from "@/pages/purchase/inStore/edit";
  * }
  */
 
-export default [
+export const authRoutes = [
   {
-    path: "/",
-    element: <AuthLayout />,
+    path: 'task',
+    element: <Container />,
+    meta: {
+      title: '军供任务',
+      icon: <AppstoreOutlined />,
+    },
     children: [
       {
         index: true,
-        element: <Home />,
+        element: <Navigate to='guaranteeTask' replace />,
       },
       {
-        path: "home",
-        element: <Home />,
+        path: 'guaranteeTask',
+        element: <GuaranteeTaskList />,
         meta: {
-          title: "首页",
-          icon: <DesktopOutlined />,
+          title: '军供通报',
+        },
+      },
+      {
+        path: 'guaranteeTask/edit',
+        element: <GuaranteeTaskEdit />,
+        meta: {
+          title: '任务配置',
+        },
+      },
+      {
+        path: 'guaranteeTask/print',
+        element: <GuaranteeTaskPrint />,
+        meta: {
+          hideInMenu: true,
+          noLayout: true,
+          target: '_blank',
+          title: '任务执行',
+        },
+      }
+    ]
+  },
+  {
+    path: 'material',
+    element: <Container />,
+    meta: {
+      title: '物资管理',
+      icon: <AppstoreOutlined />,
+    },
+    children: [
+      {
+        index: true,
+        element: <Navigate to='dish/list' replace />,
+      },
+      {
+        path: 'dish/list',
+        element: <DishList />,
+        meta: {
+          title: '菜肴管理',
+        },
+      },
+      {
+        path: 'dish/edit',
+        element: <DishEdit />,
+        meta: {
+          hideInMenu: true,
+          title: '菜肴维护',
         },
       },
       {
-        path: "task",
-        element: <Container />,
+        path: 'package/list',
+        element: <PackageList />,
         meta: {
-          title: "军供任务",
-          icon: <AppstoreOutlined />,
+          title: '套餐管理',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="guaranteeTask" replace />,
-          },
-          {
-            path: "guaranteeTask",
-            element: <GuaranteeTaskList />,
-            meta: {
-              title: "军供通报",
-            },
-          },
-          {
-            path: "guaranteeTask/edit",
-            element: <GuaranteeTaskEdit />,
-            meta: {
-              title: "任务配置",
-            },
-          },
-          {
-            path: "guaranteeTask/print",
-            element: <GuaranteeTaskPrint />,
-            meta: {
-              hideInMenu: true,
-              noLayout: true,
-              target: "_blank",
-              title: "任务执行",
-            },
-          },
-        ],
       },
+    ]
+  },
+  {
+    path: 'stock',
+    element: <Container />,
+    meta: {
+      title: '库存管理',
+      icon: <AppstoreOutlined />,
+    },
+    children: [
+      {
+        index: true,
+        element: <Navigate to='list' replace />,
+      },
+      {
+        path: 'list',
+        element: <StockList />,
+        meta: {
+          title: '库存列表',
+        },
+      },
+      {
+        path: 'add',
+        element: <StockEdit />,
+        meta: {
+          title: '库存维护',
+        },
+      },
+    ],
+  },
+  {
+    path: 'cms',
+    element: <Container />,
+    meta: {
+      title: '公告文件',
+    },
+    children: [
       {
-        path: "material",
-        element: <Container />,
+        index: true,
+        element: <Navigate to='rotationChart/list' replace />,
+      },
+      {
+        path: 'station',
+        element: null,
         meta: {
-          title: "物资管理",
-          icon: <AppstoreOutlined />,
+          title: '本站信息',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="dish/list" replace />,
-          },
-          {
-            path: "dish/list",
-            element: <DishList />,
-            meta: {
-              title: "菜肴管理",
-            },
-          },
-          {
-            path: "dish/edit",
-            element: <DishEdit />,
-            meta: {
-              hideInMenu: true,
-              title: "菜肴维护",
-            },
-          },
-          {
-            path: "package/list",
-            element: <PackageList />,
-            meta: {
-              title: "套餐管理",
-            },
-          },
-        ],
       },
       {
-        path: "stock",
-        element: <Container />,
+        path: 'rotationChart/list',
+        element: <RotationChartList />,
         meta: {
-          title: "库存管理",
-          icon: <AppstoreOutlined />,
+          title: '公告内容',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="list" replace />,
-          },
-          {
-            path: "list",
-            element: <StockList />,
-            meta: {
-              title: "库存列表",
-            },
-          },
-          {
-            path: "add",
-            element: <StockEdit />,
-            meta: {
-              title: "库存维护",
-            },
-          },
-        ],
       },
       {
-        path: "cms",
-        element: <Container />,
+        path: 'rotationChart/edit',
+        element: <RotationChartEdit />,
         meta: {
-          title: "公告文件",
+          title: '公告维护',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="rotationChart/list" replace />,
-          },
-          {
-            path: "station",
-            element: null,
-            meta: {
-              title: "本站信息",
-            },
-          },
-          {
-            path: "rotationChart/list",
-            element: <RotationChartList />,
-            meta: {
-              title: "公告内容",
-            },
-          },
-          {
-            path: "rotationChart/edit",
-            element: <RotationChartEdit />,
-            meta: {
-              title: "公告维护",
-            },
-          },
-          {
-            path: "rotationChart/introduction",
-            element: <RotationChartIntroduction />,
-            meta: {
-              title: "本站信息简介",
-            },
-          },
-          {
-            path: "regulation",
-            element: null,
-            meta: {
-              title: "规章制度",
-            },
-          },
-          {
-            path: "emergency-plan",
-            element: <EmergencyPlanList />,
-            meta: {
-              title: "应急预案",
-            },
-          },
-          {
-            path: "emergency-plan/edit",
-            element: <EmergencyPlanEdit />,
-            meta: {
-              title: "应急预案维护",
-              hideInMenu: true,
-            },
-          },
-          {
-            path: "files",
-            element: null,
-            meta: {
-              title: "文件管理",
-            },
-          },
-        ],
       },
       {
-        path: "static",
-        element: <Container />,
+        path: 'rotationChart/introduction',
+        element: <RotationChartIntroduction />,
         meta: {
-          title: "数据分析",
+          title: '本站信息简介',
         },
       },
       {
-        path: "system",
-        element: <Container />,
+        path: 'regulation',
+        element: null,
         meta: {
-          title: "系统管理",
+          title: '规章制度',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="stockClassification/list" replace />,
-          },
-          {
-            path: "stockClassification/list",
-            element: <StockClassificationList />,
-            meta: {
-              title: "库存分类管理",
-            },
-          },
-          {
-            path: "stockClassification/edit",
-            element: <StockClassificationEdit />,
-            meta: {
-              title: "库存分类维护",
-              hideInMenu: true,
-            },
-          },
-          {
-            path: "log",
-            element: <StockLog />,
-            meta: {
-              title: "库存操作日志",
-            },
-          },
-          {
-            path: "roles",
-            element: <Roles />,
-            meta: {
-              title: "系统角色管理",
-            },
-          },
-          {
-            path: "user",
-            element: null,
-            meta: {
-              title: "系统用户管理",
-            },
-          },
-        ],
       },
       {
-        path: "purchase",
-        element: <Container />,
+        path: 'emergency-plan',
+        element: null,
         meta: {
-          title: "采购管理",
+          title: '应急预案',
         },
-        children: [
-          {
-            index: true,
-            element: <Navigate to="plan/list" replace />,
-          },
-          {
-            path: "plan/list",
-            element: <PurchasePlanList type="plan" />,
-            meta: {
-              title: "采购计划",
-            },
-          },
-          {
-            path: "plan/edit",
-            element: <PurchasePlanEdit />,
-            meta: {
-              title: "采购计划维护",
-              hideInMenu: true,
-            },
-          },
-          {
-            path: "bill/list",
-            element: <PurchasePlanList type="bill" />,
-            meta: {
-              title: "采购账单",
-            },
-          },
-          {
-            path: "bill/edit",
-            element: <PurchaseBillEdit />,
-            meta: {
-              title: "采购账单维护",
-              hideInMenu: true,
-            },
-          },
-          {
-            path: "inStore/list",
-            element: <PurchasePlanList type="inStore" />,
-            meta: {
-              title: "采购入库",
-            },
-          },
-          {
-            path: "inStore/edit",
-            element: <PurchaseInStoreEdit  />,
-            meta: {
-              title: "采购入库维护",
-              hideInMenu: true,
-            },
-          },
-        ],
       },
       {
-        path: "*",
-        element: <Page404 />,
+        path: 'files',
+        element: null,
+        meta: {
+          title: '文件管理',
+        },
       },
     ],
   },
   {
-    path: "/login",
-    element: <Login />,
+    path: 'static',
+    element: <Container />,
+    meta: {
+      title: '数据分析',
+    },
+  },
+  {
+    path: 'system',
+    element: <Container />,
+    meta: {
+      title: '系统管理',
+    },
+    children: [
+      {
+        index: true,
+        element: <Navigate to='stockClassification/list' replace />,
+      },
+      {
+        path: 'stockClassification/list',
+        element: <StockClassificationList />,
+        meta: {
+          title: '库存分类管理',
+        },
+      },
+      {
+        path: 'stockClassification/edit',
+        element: <StockClassificationEdit />,
+        meta: {
+          title: '库存分类维护',
+          hideInMenu: true,
+        },
+      },
+      {
+        path: 'log',
+        element: <StockLog />,
+        meta: {
+          title: '库存操作日志',
+        },
+      },
+      {
+        path: 'roles',
+        element: <Roles />,
+        meta: {
+          title: '系统角色管理',
+        },
+      },
+      {
+        path: 'user',
+        element: <UserList />,
+        meta: {
+          title: '系统用户管理',
+        },
+      },
+      {
+        path: 'user/edit',
+        element: <UserEdit />,
+        meta: {
+          hideInMenu: true,
+          title: '系统用户编辑',
+        },
+      }
+    ],
+  },
+]
+
+export const defaultRoutes = [
+  {
+    path: '/',
+    element: <AuthLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: 'home',
+        element: <Home />,
+        meta: {
+          title: '首页',
+          icon: <DesktopOutlined />,
+        },
+      },
+      {
+        path: '*',
+        element: <Page404 />
+      }
+    ],
   },
   {
-    path: "*",
-    element: <Page404 />,
+    path: '/login',
+    element: <Login />,
   },
+  {
+    path: '*',
+    element: <Page404 />
+  }
 ];
+
+export function mergeAuthRoutes (r1, r2) {
+  const r = r1.slice();
+  const children = r1[0].children.slice();
+  r[0].children = children.concat(r2);
+  return r;
+}
+
+// 全部路由
+export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
+
+function getPath(parent = '/', current = '') {
+  if (current.indexOf('/') === 0 || current.indexOf('http') === 0) return current;
+  return `${parent}/${current}`.replace(/\/\//g, '/');
+}
+
+// 路由数组, 一维数组
+export const routeArr = (() => {
+  const flatten = (routes, parentPath = '/') => {
+    return routes.reduce((acc, route) => {
+      const path = getPath(parentPath, route.path);
+      const children = route.children ? flatten(route.children, path) : [];
+      
+      return acc.concat([{ ...route, path }].concat(children));
+    }, []);
+  }
+
+  return flatten(routes);
+})();

src/services/role.js

@@ -1,4 +1,4 @@
-import { restful } from '@/utils/request';
+import request,  { restful } from '@/utils/request';
 
 /**
  * 构造 Service
@@ -35,3 +35,6 @@ import { restful } from '@/utils/request';
   updateResource,
   deleteResource,
  }
+
+// 授权菜单
+ export const authRoleResource = (roleId, data) => request.post(`/role/${roleId}/Resources`, data);

src/services/user.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request';
+import request, { restful } from '@/utils/request';
 
 /**
  * 获取当前人员
@@ -17,3 +17,27 @@ import request from '@/utils/request';
   */
   export const login = (data) => request('/login', { data, method: 'post' });
 
+
+  const [
+    getUserList,
+    getUser,
+    saveUser,
+    updateUser,
+    deleteUser,
+   ] = restful('/users');
+
+  export {
+    getUserList,
+    getUser,
+    saveUser,
+    updateUser,
+    deleteUser,
+  }
+
+  /**
+   * 更新用户状态
+   * @param {*} id 
+   * @param {*} status 
+   * @returns 
+   */
+  export const updateUserStatus = (id, status) => request.put(`/users/${id}/status?status=${status}`);

src/store/models/user.js

@@ -1,12 +1,36 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
+import { queryCurrentUser } from "@/services/user";
+import { defaultRoutes, authRoutes, mergeAuthRoutes } from '@/routes/routes';
+import { getMenuItems } from "@/routes/menus";
+import { getAuthedRoutes } from "@/routes/permissions";
 
 export default function useUser() {
-
   const [user, setUser] = useState();
+  const menusRef = useRef();
+  const routesRef = useRef();
+
+  const getCurrentUser = () => new Promise((resolve, reject) => {
+    queryCurrentUser().then(res => {
+      const permissions = (res.resourcesList || []).map(x => x.code);
+
+      // authRoutes 是所有待验证授权的路由
+      // authedRoutes 是已经被授权的路由
+      const authedRoutes = getAuthedRoutes(authRoutes, permissions);
+
+      menusRef.current = getMenuItems(authedRoutes);
+      routesRef.current = mergeAuthRoutes(defaultRoutes, authedRoutes);
+
+      setUser(res);
+      resolve(res);
+    })
+  });
 
   return {
     user,
     setUser,
+    getCurrentUser,
+    menus: menusRef.current || [],
+    routes: routesRef.current || [],
   }
 
 }

src/utils/hooks/useRoute.jsx

@@ -1,12 +1,9 @@
 import { useLocation } from "react-router-dom";
-import { getRouteArr } from '@/routes/menus';
+import { routeArr } from '@/routes/routes';
 
 // 获取当前的 route 信息
 export default function useRoute() {
   const location = useLocation();
-  const routeArr = getRouteArr();
-
   const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
-
   return currentRoute;
 }