feats

config/routes.js

@@ -215,7 +215,13 @@ export default [
                     path: '/system/role',
                     name: '角色管理',
                     menuCode: 'system.role',
-                    component: '../layouts/BlankLayout',
+                    component: './System/Role',
+                  },
+                  {
+                    path: '/system/role/edit',
+                    name: '角色编辑',
+                    menuCode: 'system.role',
+                    component: './System/Role/Edit',
                   },
                   {
                     path: '/system/params',

src/pages/Post/Edit/components/Form.jsx

@@ -37,6 +37,7 @@ export default (props) => {
       return request('/post', { method: 'post', data })
         .then((res) => {
           props.onChange(res);
+          notification.success({ message: '操作成功' });
         })
         .catch((e) => {
           notification.error({ message: e.message });
@@ -48,6 +49,7 @@ export default (props) => {
     return request(`/post/${data.postId}`, { method: 'put', data })
     .then((res) => {
       props.onChange(res);
+      notification.success({ message: '操作成功' });
     })
     .catch((e) => {
       notification.error({ message: e.message });

src/pages/System/Role/Edit.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+import { PageContainer } from '@ant-design/pro-layout';
+import { Button, Card, Divider, notification } from 'antd';
+import request from '@/utils/request';
+import RoleForm from './components/Form'
+
+export default (props) => {
+  const { id } = props.location.query;
+  const [loading, setLoading] = useState(false);
+  const [role, setRole] = useState({});
+  
+  const handleFormChange = (newRole) => {
+    setRole(newRole);
+  };
+  
+  useEffect(() => {
+    if (id) {
+      setLoading(true);
+      request(`/role/${id}`)
+        .then((res) => {
+          setRole(res);
+          setLoading(false);
+        })
+        .catch((e) => {
+          setLoading(false);
+          notification.error({ message: e.message });
+        });
+    }
+  }, [id]);
+
+  return (
+    <PageContainer>
+      <Card style={{ width: '100%' }} loading={loading}>
+        <RoleForm role={role} onChange={handleFormChange} />
+      </Card>
+
+      <Card title="授权菜单" style={{ width: '100%', marginTop: '2em' }}>
+        
+      </Card>
+    </PageContainer>
+  )
+}

src/pages/System/Role/components/Form.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import ProForm, { ProFormText } from '@ant-design/pro-form';
+import request from '@/utils/request';
+import { notification, Form } from 'antd';
+
+export default (props) => {
+  const [form] = Form.useForm();
+
+  const handleSubmit = (values) => {
+    const data = {
+      ...props.role || {},
+      ...values,
+    }
+
+    if (!data.roleId) {
+      // 新增
+      return request('/role', { method: 'post', data })
+        .then((res) => {
+          notification.success({ message: '操作成功' });
+          props.onChange(res);
+        })
+        .catch((e) => {
+          notification.error({ message: e.message });
+          return Promise.reject(e.message);
+        });
+    }
+
+    // 编辑
+    return request(`/role/${data.roleId}`, { method: 'put', data })
+    .then((res) => {
+      notification.success({ message: '操作成功' });
+      props.onChange(res);
+    })
+    .catch((e) => {
+      notification.error({ message: e.message });
+      return Promise.reject(e.message);
+    });
+  };
+
+  useEffect(() => {
+    if (props.role && props.role.roleId) {
+      form.setFieldsValue(props.role);
+    }
+  }, [props, form]);
+
+  return (
+    <ProForm form={form} onFinish={handleSubmit}>
+      <ProFormText
+        label="角色名称"
+        placeholder="请输入角色名称"
+        name="name"
+        rules={[{ required: true, message: '请填写角色名称' }]}
+      />
+      <ProFormText label="创建日期" name="createDate" readonly />
+    </ProForm>
+  );
+};

src/pages/System/Role/index.jsx

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react'
+import { history } from 'umi';
+import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Popconfirm, notification } from 'antd';
+import request, { queryTable } from '@/utils/request';
+
+export default () => {
+  const tableRef = useRef()
+
+  const handleDelete = (role) => {
+    request(`/role/${role.roleId}`, { method: 'delete' } ).then(() => {
+      notification.success({ message: '操作成功' })
+      tableRef.current.reload()
+    }).catch((e) => {
+      notification.error({ message: e.message })
+    })
+  }
+
+  const handleEdit = (role) => {
+    const url = role && role.roleId ? `/system/role/edit?id=${role.roleId}` : '/system/role/edit'
+    history.push(url)
+  }
+
+  const columns = [
+    {
+      title: '名称',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '创建时间',
+      key: 'createDate',
+      dataIndex: 'createDate',
+      valueType: 'date',
+    },
+    {
+      title: '操作',
+      key: 'option',
+      valueType: 'option',
+      // 不能操作超级管理员
+      render: (_, role) => [
+        role.roleId !== '1' && <a key="edit" onClick={() => handleEdit(role)}>修改</a>,
+        role.roleId !== '1' && <Popconfirm key="delete" title="确定删除当前角色?" onConfirm={() => handleDelete(role)}>
+          <a href="#">删除</a>
+        </Popconfirm>,
+      ].filter(Boolean)
+    },
+  ]
+  
+  const actions = [
+    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={handleEdit}>
+      新建
+    </Button>,
+  ];
+
+  return (
+    <PageContainer>
+      <ProTable
+        actionRef={tableRef}
+        columns={columns}
+        request={queryTable('/role')}
+        rowKey="roleId"
+        headerTitle="角色列表"
+        search={false}
+        toolBarRender={() => actions}
+      />
+    </PageContainer>
+  )
+}

src/pages/User/Edit/components/User.jsx

@@ -20,6 +20,12 @@ export default (props) => {
       })
     } else {
       //
+      request(`/user/${props.user.userId}`, { method: 'put', data: { ...props.user, ...values} }).then(res => {
+        notification.success({ message: '操作成功' })
+        props.onChange(res)
+      }).catch((e) => {
+        notification.error({ message: e.message })
+      })
     }
   }
 

src/pages/User/List/index.jsx

@@ -23,6 +23,17 @@ export default () => {
     history.push(url)
   }
 
+  const changeStatus = (user) => {
+    // 0 变 1, 1 变 0
+    const status = user.status ^ 1
+    request(`/user/${user.userId}`, { method: 'put', data: { ...user, status } } ).then(() => {
+      notification.success({ message: '操作成功' })
+      tableRef.current.reload()
+    }).catch((e) => {
+      notification.error({ message: e.message })
+    })
+  }
+
   const columns = [
     {
       title: '编号',
@@ -67,7 +78,7 @@ export default () => {
       // 不能操作超级管理员
       render: (_, user) => [
         user.userId !== '1' && <a key="edit" onClick={() => handleEdit(user)}>修改</a>,
-        user.userId !== '1' && <a key="disable">禁用</a>,
+        user.userId !== '1' && <a key="disable" onClick={() => changeStatus(user)}>{user.status === 1 ? '禁用' : '启用'}</a>,
         user.userId !== '1' && <Popconfirm key="delete" title="确定删除当前人员?" onConfirm={() => handleDelete(user)}>
           <a href="#">删除</a>
         </Popconfirm>,