feats

src/pages/roles/index.jsx

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

src/pages/roles/list.jsx

@@ -1,28 +1,117 @@
 import React from 'react';
-import { Button, Input, List, Popconfirm, Tree, Space, Modal } from 'antd';
+import { Button, Input, List, Popconfirm, Spin, Modal, message } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import classNames from 'classnames';
+import {
+  getRoleList,
+  getRoleDetail,
+  saveRole,
+  updateRole,
+  deleteRole,
+} from '@/services/role';
+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 data = [
-    'Racing car sprays burning fuel into crowd.',
-    'Japanese princess to wed commoner.',
-    'Australian walks 100km after outback crash.',
-    'Man charged over missing wedding girl.',
-    'Los Angeles battles huge wildfires.',
-  ];
-
-  const [visible, setVisible] = React.useState(false);
+  const { current, onChange } = props;
+
+  const [loading, startLoading, cancelLoading] = useBool();
+  const [visible, openModel, hideModel] = useBool();
   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();
+    // 删除角色
+    deleteRole(item.id).then(() => {
+      setList(list.filter(x => x.id !== item.id));
+      cancelLoading();
+      hideModel();
+      onChange();
+    }).catch(() => {
+      cancelLoading();
+    })
+  }
+
+  const handleOk = () => {
+    if (!inText) {
+      message.warn('请输入角色名称');
+      return;
+    }
+    startLoading();
+    const data = { name: inText };
+
+    if (currentRef.current) {
+      // 修改角色
+      updateRole(currentRef.current.id, data).then(res => {
+        setList(list.map(x => x.id === currentRef.current.id ? res : x));
+        cancelLoading();
+        hideModel();
+      }).catch(() => {
+        cancelLoading();
+      })
+    } else {
+      // 新增角色
+      saveRole(data).then((res) => {
+        setList([res].concat(list));
+        cancelLoading();
+        hideModel();
+        onChange(res);
+      }).catch(() => {
+        cancelLoading();
+      })
+    }
+  }
+
+  const handleCancel = () => {
+    if (loading) {
+      return ;
+    }
+
+    hideModel();
+  }
+
+  React.useEffect(() => {
+    startLoading();
+    getRoleList({ pageSize: 100 }).then((res) => {
+      setList(res.records || []);
+      cancelLoading();
+    }).catch(() => {
+      cancelLoading();
+    });
+  }, []);
 
   return (
-    <>
+    <Spin spinning={loading}>
       <List
-        header='角色列表'
+        header={<Header action={<Button type='primary' onClick={onAdd}>新增</Button>}>角色列表</Header>}
         style={{ background: '#fff' }}
         bordered
-        dataSource={data}
+        dataSource={list}
         renderItem={item => (
           <List.Item
-            style={{ width: '100%' }}
+            className={classNames('role-list-item', { active: current && current.id === item.id })}
+            onClick={() => onChange(item)}
             actions={[
               <Button key='edit' type='link' onClick={() => onEdit(item)}>编辑</Button>,
               <Popconfirm key='delete' title="确认删除?" onConfirm={() => onDelete(item)}>
@@ -30,20 +119,18 @@ export default (props) => {
               </Popconfirm>
             ]}
           >
-            <div onClick={() => props.onChange(item)}>
-              {item}
-            </div>
+            {item.name}
           </List.Item>
         )}
       />
       <Modal
-        title="Basic Modal"
+        title="请输入角色名称"
         open={visible}
         onOk={handleOk}
-        onCancel={() => setVisible(false)}
+        onCancel={handleCancel}
       >
         <Input value={inText} onChange={e => setInText(e.target.value)} />
       </Modal>
-    </>
+    </Spin>
   )
 }

src/pages/roles/menus.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button, Card, Tree, Modal } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import arr2Tree from '@/utils/arr2Tree';
+
+export default (props) => {
+  const { role } = props;
+  
+  const [loading, startLoading, cancelLoading] = useBool();
+  const [list, setList] = React.useState([]);
+  const [treeData, setTreeData] = React.useState([]);
+
+  const title = role ? `${role.name} - 授权菜单` : '授权菜单';
+
+  const onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  };
+  const onCheck = (checkedKeys, info) => {
+    console.log('onCheck', checkedKeys, info);
+  };
+
+  React.useEffect(() => {
+    if (!role) {
+      setList([]);
+    }
+  }, [role]);
+  
+  React.useEffect(() => {
+    // 先转为需要的格式
+    const arr = list.map(x => ({ title: x.name, key: x.id, parentId: x.parentId }));
+    // 再转为 tree
+    setTreeData(arr2Tree(arr));
+  }, [list]);
+
+  return (
+    <Card
+      loading={loading}
+      title={title}
+      extra={<Button type='primary' ghost>保存</Button>}
+    >
+      <Tree
+        checkable
+        onSelect={onSelect}
+        onCheck={onCheck}
+        treeData={treeData}
+      />
+    </Card>
+  )
+}

src/pages/roles/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/Role.jsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { Button, Row, Col, Card, List, Popconfirm, Tree, Space, Modal } from 'antd';
+import List from './list';
 
 export default (props) => {
-  const data = [
-    'Racing car sprays burning fuel into crowd.',
-    'Japanese princess to wed commoner.',
-    'Australian walks 100km after outback crash.',
-    'Man charged over missing wedding girl.',
-    'Los Angeles battles huge wildfires.',
-  ];
 
   const treeData = [
     {
@@ -64,27 +58,6 @@ export default (props) => {
     <div>
       <Row gutter={24}>
         <Col span={8}>
-          <List
-            header='角色列表'
-            style={{ background: '#fff' }}
-            bordered
-            dataSource={data}
-            renderItem={item => (
-              <List.Item
-                style={{ width: '100%' }}
-                actions={[
-                  <Button key='edit' type='link' onClick={() => onEdit(item)}>编辑</Button>,
-                  <Popconfirm key='delete' title="确认删除?" onConfirm={() => onDelete(item)}>
-                    <Button type='link' danger>删除</Button>
-                  </Popconfirm>
-                ]}
-              >
-                <div onClick={() => setCurrent(item)}>
-                  {item}
-                </div>
-              </List.Item>
-            )}
-          />
         </Col>
         <Col span={16}>
           <Card title='授权菜单' extra={<Button type='primary' ghost>保存</Button>}>
@@ -100,6 +73,7 @@ export default (props) => {
           </Card>
         </Col>
       </Row>
+
     </div>
   )
 }

src/routes/routes.jsx

@@ -29,7 +29,7 @@ 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 Roles from '@/pages/user/Role';
+import Roles from '@/pages/roles/index';
 
 /**
  * meta 用来扩展自定义数据数据

src/services/role.js

@@ -0,0 +1,22 @@
+import { restful } from '@/utils/request';
+
+/**
+ * 构造 Service
+ * @returns
+ */
+ const [
+  getRoleList,
+  getRoleDetail,
+  saveRole,
+  updateRole,
+  deleteRole,
+ ] = restful('/roles');
+
+
+ export {
+  getRoleList,
+  getRoleDetail,
+  saveRole,
+  updateRole,
+  deleteRole,
+ }

src/utils/arr2Tree.js

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

src/utils/hooks/useBool.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function useLoading(initial = false) {
+  const [loading, setLoading] = React.useState(initial);
+  const loadingRef = React.useRef();
+  loadingRef.current = loading;
+
+  const setTrue = React.useCallback(() => setLoading(true), []);
+  const setFalse = React.useCallback(() => setLoading(false), []);
+  const toggle = React.useCallback(() => setLoading(!loadingRef.current), []);
+
+  return [loading, setTrue, setFalse, setLoading, toggle];
+}

src/utils/request.js

@@ -9,12 +9,13 @@ const instance = axios.create({
 
 // 添加请求拦截器
 instance.interceptors.request.use(function (config) {
-  const { headers = {}, responseType = 'json', download = false } = config;
+  const { headers = {}, responseType = 'json', download = false, successTip = true } = config;
   const token = sessionStorage.getItem('token') || '';
 
   // 在发送请求之前做些什么
   return {
     ...config,
+    successTip,
     headers: {
       ...headers,
       responseType: download ? 'blob' : responseType,
@@ -41,6 +42,10 @@ instance.interceptors.response.use(function (response) {
       sessionStorage.setItem('token', data.data.token);
     }
 
+    if (config.successTip) {
+      message.success(typeof success === 'string' ? successTip : '操作成功');
+    }
+
     return data.data;
   } else if (data.code === 1001) {
     if (!config.silent) {
@@ -111,6 +116,16 @@ export function queryDict(apiRequest) {
   };
 }
 
+export function restful(url) {
+  const list = params => instance.get(url, { params, successTip: false });
+  const get = id => instance.get(`${url}/${id}`);
+  const add = data => instance.post(url, data);
+  const update = (id, data) => instance.put(`${url}/${id}`, data);
+  const del = id => instance.delete(`${url}/${id}`);
+
+  return [list, get, add, update, del];
+}
+
 function downloadBlob(response) {
   let fileName = '未知文件';
   const contentDisposition = response.headers['content-disposition'];