feats

src/layouts/AuthLayout/components/SiderBar.jsx

@@ -15,7 +15,7 @@ export default (props) => {
 
 
   return (
-    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
+    <Sider className='layout-sidebar' theme={theme} defaultCollapsed collapsible width={width}>
       <Menus theme={theme} items={menus} location={location} />
     </Sider>
   );

src/layouts/PageContainer.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Typography } from 'antd';
-import { Outlet } from 'react-router-dom';
-import useRoute from '@/utils/hooks/useRoute';
-
-const containerStyle = {
-  // margin: '24px 24px 0 24px',
-  margin: '24px',
-  minHeight: 'calc(100% - 48px)',
-}
-const { Title } = Typography;
-
-export default (props) => {
-  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/role/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import Page from '@/components/Page';
+import RoleList from './list';
+import MenuList from './menus';
+
+export default (props) => {
+
+  const [current, setCurrent] = React.useState();
+
+  return (
+    <Page>
+      <Row gutter={24}>
+        <Col span={8}>
+          <RoleList onChange={setCurrent} current={current} />
+        </Col>
+        <Col span={16}>
+          <MenuList role={current} />
+        </Col>
+      </Row>
+    </Page>
+  )
+}

src/pages/role/list.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Button, Input, List, Popconfirm, Spin, Modal, message } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import classNames from 'classnames';
+import {
+  getSysRole,
+  postSysRole,
+  putSysRole,
+  deleteSysRole,
+} from '@/service/sysrole';
+import './style.less';
+
+const Header = (props) => {
+  return (
+    <div className='role-list-header'>
+      <div className='role-list-header-body'>{props.children}</div>
+      <div className='role-list-header-action'>{props.action}</div>
+    </div>
+  )
+}
+
+export default (props) => {
+  const { current, onChange } = props;
+
+  const [loading, startLoading, cancelLoading] = useBool();
+  const [visible, openModel, hideModel] = useBool();
+  const [finished, setFinished] = React.useState(false);
+  const [inText, setInText] = React.useState();
+  const [list, setList] = React.useState([]);
+
+  const onAdd = () => {
+    openModel();
+    setInText();
+    onChange();
+  }
+
+  const onEdit = (item) => {
+    openModel();
+    setInText(item.name);
+    onChange(item);
+  }
+
+  const onDelete = (item) => {
+    startLoading();
+    // 删除角色
+    deleteSysRole(item.roleId).then(() => {
+      setList(list.filter(x => x.roleId !== item.roleId));
+      cancelLoading();
+      hideModel();
+      onChange();
+    }).catch(() => {
+      cancelLoading();
+    })
+  }
+
+  const handleOk = () => {
+    if (!inText) {
+      message.warn('请输入角色名称');
+      return;
+    }
+    startLoading();
+    const data = { name: inText };
+
+    if (current) {
+      // 修改角色
+      putSysRole(current.roleId, data).then(res => {
+        setList(list.map(x => x.roleId === current.roleId ? res : x));
+        cancelLoading();
+        hideModel();
+      }).catch(() => {
+        cancelLoading();
+      })
+    } else {
+      // 新增角色
+      postSysRole(data).then((res) => {
+        setList([res].concat(list));
+        cancelLoading();
+        hideModel();
+        onChange(res);
+      }).catch(() => {
+        cancelLoading();
+      })
+    }
+  }
+
+  const handleCancel = () => {
+    if (loading) {
+      return ;
+    }
+
+    hideModel();
+  }
+
+  const queryRoles = React.useCallback((params) => {
+    startLoading();
+    getSysRole(params).then(res => {
+      setList(res.records);
+      cancelLoading();
+      setFinished(res.current >= res.pages);
+    }).catch(() => {
+      cancelLoading();
+    });
+  }, []);
+
+  React.useEffect(() => {
+    queryRoles({ pageNum: 1, pageSize: 500 });
+  }, []);
+
+  return (
+    <Spin spinning={loading}>
+      <List
+        header={<Header action={<Button type='primary' onClick={onAdd}>新增</Button>}>角色列表</Header>}
+        style={{ background: '#fff' }}
+        bordered
+        dataSource={list}
+        renderItem={item => (
+          <List.Item
+            className={classNames('role-list-item', { active: current && current.roleId === item.roleId })}
+            onClick={() => onChange(item)}
+            actions={[
+              <Button key='edit' type='link' onClick={() => onEdit(item)}>编辑</Button>,
+              <Popconfirm key='delete' title="确认删除?" onConfirm={() => onDelete(item)}>
+                <Button type='link' danger>删除</Button>
+              </Popconfirm>
+            ]}
+          >
+            {item.name}
+          </List.Item>
+        )}
+      />
+      <Modal
+        title="请输入角色名称"
+        open={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Input value={inText} onChange={e => setInText(e.target.value)} />
+      </Modal>
+    </Spin>
+  )
+}

src/pages/role/menus.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Button, Card, Tree, message } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { arr2Tree } from '@/utils/array';
+import { getSysResource } from '@/service/sysresource';
+import { authRoleResource } from '@/service/sysroleresource';
+
+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({ checked: [], halfChecked: [] });
+  const keys = checkedKeys.checked.concat(checkedKeys.halfChecked);
+
+  const title = role ? `${role.name} - 授权菜单` : '未选角色 - 授权菜单';
+
+  const getListData = () => {
+    return new Promise((resolve, reject) => {
+      getSysResource({ typeCode: 'menu' }).then((res = []) => {
+        setList(res);
+        resolve(res)
+      }).catch(reject);
+    });
+  }
+
+  const onCheck = (keys, { halfCheckedKeys }) => {
+    setCheckedKeys({ checked: keys, halfChecked: halfCheckedKeys });
+  };
+
+  const onSubmit = () => {
+    // 如果一个都不选，代表清空授权
+    const data = [];
+    const roleId = role.roleId;
+    for (let resourceId of keys) {
+      data.push({ roleId, resourceId });
+    }
+    startLoading();
+    authRoleResource(roleId, data).then((res) => {
+      cancelLoading();
+    }).catch(() => {
+      cancelLoading();
+    })
+  }
+
+  React.useEffect(() => {
+    const p = !list.length ? getListData : () => Promise.resolve(list);
+    if (!role || !role.roleId) {
+      p();
+    } else {
+      startLoading();
+      p().then((allData) => {
+        getSysResource({ typeCode: 'menu', roleId: role.roleId }).then((res = []) => {
+          cancelLoading();
+          
+          // 数据分为2部分, 一部分叶子节点, 一部分非叶子节点
+          const checked = [], halfChecked = [];
+          for (let item of res) {
+            // 获取子节点, 没有的话则为叶子节点, 否则为非叶子节点
+            const children = allData.filter(x => x.parentId === item.resourceId);
+            if (!children.length) {
+              // 没有子节点, 则为叶子节点, 算入选中节点
+              checked.push(item.resourceId);
+            } else {
+              // 获取选中子节点
+              const checkedChildren = res.filter(x => x.parentId === item.resourceId);
+              if (checkedChildren.length === children.length) {
+                // 非叶子节点如果 子节点全部包含, 那么算入选中节点
+                checked.push(item.resourceId);
+              } else {
+                halfChecked.push(item.resourceId);
+              }
+            }
+          }
+
+          setCheckedKeys({ checked, halfChecked });
+        }).catch(() => {
+          cancelLoading();
+        })
+      }).catch(() => {
+        cancelLoading();
+      })
+    }
+  }, [role]);
+  
+  React.useEffect(() => {
+    // 展开节点
+    setExpandedKeys((list).filter(x => x.parentId === '-1').map(x => x.resourceId));
+    // 先转为需要的格式
+    const arr = list.map(x => ({ title: x.name, key: x.resourceId, parentId: x.parentId }));
+    // 再转为 tree
+    const [tree, dict] = arr2Tree(arr);
+    setTreeData(tree);
+    treeDictRef.current = dict;
+  }, [list]);
+
+  return (
+    <Card
+      loading={loading}
+      title={title}
+      extra={<Button type='primary' disabled={!role || !role.roleId} ghost onClick={onSubmit}>保存</Button>}
+    >
+      <Tree
+        checkable
+        autoExpandParent
+        expandedKeys={expandedKeys}
+        checkStrictly={false}
+        selectable={false}
+        checkedKeys={checkedKeys}
+        onCheck={onCheck}
+        onExpand={setExpandedKeys}
+        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/pages/role/style.less

@@ -0,0 +1,19 @@
+
+.role-list-header {
+  width: 100%;
+  display: flex;
+
+  .role-list-header-body {
+    flex: 1;
+  }
+
+  .role-list-header-action {
+    flex: 0
+  }
+}
+
+.role-list-item {
+  &.active {
+    background: #e6f7ff;
+  }
+}

src/pages/user/Account.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Modal, Form, Input, Button } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { getSysLogin, postSysLogin } from '@/service/syslogin';
+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 defaultPass = '123456';
+
+export default (props) => {
+  const { user, onSuccess, onCancel, ...leftProps } = props;
+
+  const [loading, startLoading, cancelLoading] = useBool();
+  const [form] = Form.useForm();
+  const [account, setAccount] = React.useState();
+
+  const onFinish = (values) => {
+    const loginId = account ? account.loginId : undefined;
+    const password = values.password ? md5(values.password) : (
+      loginId ? undefined : md5(defaultPass)
+    );
+
+    const data = {
+      ...values,
+      password,
+      loginId,
+      userId: user.userId,
+    }
+
+    startLoading();
+    postSysLogin(data).then(res => {
+      onSuccess();
+      cancelLoading();
+    }).catch(() => {
+      cancelLoading();
+    });
+  };
+
+  React.useEffect(() => {
+    if (user?.userId) {
+      startLoading();
+      getSysLogin(user.userId).then(res => {
+        console.log('res', res)
+        if (res) {
+          setAccount(res);
+          form.setFieldsValue(res);
+        } else {
+          form.setFieldsValue({ account: user.phone })
+        }
+        cancelLoading();
+      }).catch((err) => {
+        console.error(err)
+        cancelLoading();
+      });
+    }
+  }, [user, form])
+
+  return (
+    <Modal title="账号维护" footer={null} width={600} onCancel={onCancel} {...leftProps}>
+      <Form {...formItemLayout} form={form} scrollToFirstError style={{ width: '480px' }} onFinish={onFinish}>
+        <Form.Item
+          name="account"
+          label="账号"
+          rules={[
+            {
+              required: true,
+              message: '请填写姓名',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+          help={`默认密码 ${defaultPass}`}
+        >
+          <Input.Password allowClear/>
+        </Form.Item>
+          <Form.Item {...tailFormItemLayout}>
+            <Button loading={loading} type="primary" htmlType="submit">
+              保存
+            </Button>
+            <Button style={{ marginLeft: '2em' }} onClick={onCancel}>
+              取消
+            </Button>
+          </Form.Item>
+      </Form>
+    </Modal>
+  )
+}

src/pages/user/Edit.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Button, Card, Form, Input, Select } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { getSysRole } from '@/service/sysrole';
+import { postSysUser, getSysUserById } from '@/service/sysuser';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import Page from '@/components/Page';
+import Account from './Account';
+
+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 [open, setShow, setHidden] = useBool(false);
+  const [roleList, setRoleList] = React.useState([]);
+  const [searchParams] = useSearchParams();
+  const [form] = Form.useForm();
+  const [user, setUser] = React.useState();
+  const navigate = useNavigate();
+
+  const id = searchParams.get('id');
+
+  const onFinish = (values) => {
+    const rolesList = (values.rolesList || []).map(x => ({ roleId: x }));
+
+    startSubmit();
+    postSysUser({ ...values, rolesList, userId: id }).then(res => {
+      cancelSubmit();
+      if (id) {
+        navigate(-1);
+      } else {
+        navigate(`/system/user/edit?id=${res.userId}`, { replace: true })
+      }
+    }).catch(() => {
+      cancelSubmit();
+    });
+  }
+
+  React.useEffect(() => {
+    getSysRole({ pageSize: 500 }).then(res => setRoleList(res.records));
+  }, []);
+  
+  React.useEffect(() => {
+    if (id) {
+      startLoading();
+      getSysUserById(id).then(res => {
+        setUser(res);
+        form.setFieldsValue({
+          ...res,
+          rolesList: (res.rolesList || []).map(x => x.roleId),
+        });
+        cancelLoading();
+      }).catch(() => {
+        cancelLoading();
+      });
+    } else {
+      // form.setFieldsValue({ password: '123456' });
+    }
+  }, [id]);
+
+  return (
+    <Page>
+      <Card loading={loading}>
+        <Form onFinish={onFinish} form={form} {...formItemLayout} scrollToFirstError style={{ maxWidth: '1000px' }}>
+          <Form.Item
+            name="name"
+            label="姓名"
+            rules={[
+              {
+                required: true,
+                message: '请填写姓名',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="phone"
+            label="手机号"
+            rules={[
+              {
+                required: true,
+                message: '请填写手机号',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="orgId"
+            label="单位"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="positionId"
+            label="岗位"
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="rolesList"
+            label="角色"
+          >
+            <Select
+              mode="multiple"
+              allowClear
+              style={{ width: '100%' }}
+              placeholder="请选择角色"
+            >
+              {
+                roleList.map(role => (<Option key={role.roleId}>{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>
+            <Button disabled={!id} style={{ marginLeft: '2em' }} onClick={setShow}>
+              登录账户
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+      <Account open={open} user={user} onSuccess={setHidden} onCancel={setHidden} />
+    </Page>
+  )
+}
+
+

src/pages/user/index.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { queryTable } from "@/utils/request";
+import { ProTable } from "@ant-design/pro-components";
+import Page from "@/components/Page";
+import { Button, message, Popconfirm } from "antd";
+import { getSysUser, updateUserStatus, deleteSysUser } from "@/service/sysuser";
+
+const queryUserList = queryTable(getSysUser);
+
+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 handleDelete = (id) => {
+    if (id) {
+      deleteSysUser(id).then((res) => {
+        actionRef.current.reload();
+      });
+    }
+  };
+
+  const columns = [
+    {
+      title: "单位",
+      dataIndex: "orgId",
+    },
+    {
+      title: "姓名",
+      dataIndex: "name",
+    },
+    {
+      title: "手机号",
+      dataIndex: "phone",
+    },
+    {
+      title: "岗位",
+      dataIndex: "positionId",
+    },
+    {
+      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.userId}`);
+          }}
+        >
+          编辑
+        </Button>,
+        <Popconfirm
+          key={3}
+          title="您是否确认删除 ?"
+          onConfirm={() => handleDelete(record.userId)}
+          okText="确定"
+          cancelText="取消"
+        >
+          {/* manualPush */}
+          <Button style={{ padding: 0 }} type="link">
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  return (
+    <Page>
+      <ProTable
+        actionRef={actionRef}
+        rowKey="userId"
+        toolBarRender={() => [
+          <Button
+            key="1"
+            type="primary"
+            onClick={() => {
+              navigate("/system/user/edit");
+            }}
+          >
+            新增
+          </Button>,
+        ]}
+        request={queryUserList}
+        columns={columns}
+      />
+    </Page>
+  );
+};

src/routes/routes.jsx

@@ -6,11 +6,17 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   PieChartOutlined,
+  SettingOutlined,
 } from '@ant-design/icons';
+import { Outlet } from 'react-router-dom';
 import AuthLayout from "@/layouts/AuthLayout";
-import PageContainer from "@/layouts/PageContainer";
 import Login from '@/pages/login';
 import Page404 from '@/pages/404';
+import Role from '@/pages/role/index';
+import User from '@/pages/user/index';
+import UserEdit from '@/pages/user/Edit';
+
+
 import Index from '@/pages/index';
 import Home from "@/pages/sample/home";
 import BasicForm from '@/pages/sample/form';
@@ -36,25 +42,35 @@ export const authRoutes = [
   },
   {
     path: "system",
-    element: <PageContainer />,
+    element: <Outlet />,
     meta: {
       title: '系统管理',
-      // icon: <AppstoreOutlined />,
+      icon: <SettingOutlined />,
       // permission: 'form',
     },
     children: [
       {
         path: "user",
-        element: <Index />,
+        element: <User />,
         meta: {
           title: '人员管理',
           // icon: <AppstoreOutlined />,
           // permission: 'form',
         },
       },
+      {
+        path: "user/edit",
+        element: <UserEdit />,
+        meta: {
+          title: '人员维护',
+          hideInMenu: true,
+          // icon: <AppstoreOutlined />,
+          // permission: 'form',
+        },
+      },
       {
         path: "role",
-        element: <Index />,
+        element: <Role />,
         meta: {
           title: '角色管理',
           // icon: <AppstoreOutlined />,

src/service/syslogin.js

@@ -3,7 +3,7 @@ import request from '@/utils/request';
 /*
  * 分页查询
  */
-export const getSysLogin = (params) => request('/api/sysLogin', { params });
+export const getSysLogin = (userId) => request(`/api/sysLogin?userId=${userId}`);
 
 /*
  * 新增数据

src/service/sysroleresource.js

@@ -1,26 +1,4 @@
 import request from '@/utils/request';
 
-/*
- * 分页查询
- */
-export const getSysRoleResource = (params) => request('/api/sysRoleResource', { params });
-
-/*
- * 新增数据
- */
-export const postSysRoleResource = (data) => request('/api/sysRoleResource', { data, method: 'post' });
-
-/*
- * 通过ID查询单条数据
- */
-export const getSysRoleResourceById = (id) => request(`/api/sysRoleResource/${id}`);
-
-/*
- * 更新数据
- */
-export const putSysRoleResource = (id, data) => request(`/api/sysRoleResource/${id}`, { data, method: 'put' });
-
-/*
- * 通过主键删除数据
- */
-export const deleteSysRoleResource = (id) => request(`/api/sysRoleResource/${id}`, { method: 'delete' });
+// 授权菜单
+export const authRoleResource = (roleId, data) => request.post(`/api/role/${roleId}/resources`, data);

src/service/sysuser.js

@@ -29,3 +29,8 @@ export const putSysUser = (id, data) => request(`/api/sysUser/${id}`, { data, me
  * 通过主键删除数据
  */
 export const deleteSysUser = (id) => request(`/api/sysUser/${id}`, { method: 'delete' });
+
+/*
+ * 更新状态
+ */
+export const updateUserStatus = (id, status) => request(`/api/sysUser/${id}?status=${status}`, { method: 'put' });

src/utils/array.js

@@ -6,7 +6,7 @@
  * @param {*} key 
  * @returns 
  */
-export function arr2Tree(arr = [], parent = 'parentId', key = 'key') {
+export function arr2Tree(arr = [], parent = 'parentId', key = 'key', rootId = '-1') {
   // 转换为字典
   const dict = arr.reduce((acc, item) => {
     return {
@@ -19,7 +19,6 @@ export function arr2Tree(arr = [], parent = 'parentId', key = 'key') {
   }, {});
 
   // 挂载父子节点
-  const rootId = -1;
   const tree = [];
   for (let item of arr) {
     const parentNodeId = item[parent];

src/utils/request.js

@@ -46,7 +46,7 @@ instance.interceptors.response.use(function (response) {
   }
 
   if (data.code === 1000) {
-    if (data.data.token) {
+    if (data.data?.token) {
       localStorage.setItem('token', data.data.token);
     }