feats

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/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

@@ -31,6 +31,8 @@ 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 用来扩展自定义数据数据
@@ -42,242 +44,253 @@ import Roles from '@/pages/roles/index';
  * }
  */
 
-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: 'package/list',
+        element: <PackageList />,
+        meta: {
+          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: [
+      {
+        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: 'task',
-        element: <Container />,
+        path: 'emergency-plan',
+        element: null,
         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: 'material',
-        element: <Container />,
+        path: 'files',
+        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: 'static',
+    element: <Container />,
+    meta: {
+      title: '数据分析',
+    },
+  },
+  {
+    path: 'system',
+    element: <Container />,
+    meta: {
+      title: '系统管理',
+    },
+    children: [
       {
-        path: 'stock',
-        element: <Container />,
+        index: true,
+        element: <Navigate to='stockClassification/list' replace />,
+      },
+      {
+        path: 'stockClassification/list',
+        element: <StockClassificationList />,
         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: 'stockClassification/edit',
+        element: <StockClassificationEdit />,
         meta: {
-          title: '公告文件',
+          title: '库存分类维护',
+          hideInMenu: true,
         },
-        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: null,
-            meta: {
-              title: '应急预案',
-            },
-          },
-          {
-            path: 'files',
-            element: null,
-            meta: {
-              title: '文件管理',
-            },
-          },
-        ],
       },
       {
-        path: 'static',
-        element: <Container />,
+        path: 'log',
+        element: <StockLog />,
         meta: {
-          title: '数据分析',
+          title: '库存操作日志',
         },
       },
       {
-        path: 'system',
-        element: <Container />,
+        path: 'roles',
+        element: <Roles />,
         meta: {
-          title: '系统管理',
+          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 />,
         },
-        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: '*',
@@ -293,4 +306,33 @@ export default [
     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/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;
 }