feats

config/routes.js

@@ -202,7 +202,14 @@ export default [
                     path: '/system/user',
                     name: '用户管理',
                     menuCode: 'system.user',
-                    component: '../layouts/BlankLayout',
+                    component: './user/List',
+                  },
+                  {
+                    path: '/system/user/edit',
+                    name: '用户编辑',
+                    menuCode: 'system.user',
+                    component: './user/Edit',
+                    hideInMenu: true,
                   },
                   {
                     path: '/system/role',

src/models/user.js

@@ -1,4 +1,5 @@
-import { queryCurrent, query as queryUsers } from '@/services/user';
+import { notification } from 'antd'
+import { queryCurrent, query as queryUsers, queryRoles } from '@/services/user';
 import { setAuthority } from '@/utils/authority';
 
 const UserModel = {
@@ -6,6 +7,7 @@ const UserModel = {
   state: {
     currentUser: {},
     menus: [],
+    roles: [],
   },
   effects: {
     *fetch(_, { call, put }) {
@@ -27,6 +29,20 @@ const UserModel = {
         //
       }
     },
+
+    *fetchRoles(_, { call, put }) {
+      try {
+        const response = yield call(queryRoles);
+        yield put({
+          type: 'updateRoles',
+          payload: response.records,
+        });
+      } catch (e) {
+        notification.error({
+          message: `获取角色失败: ${e.message}`
+        })
+      }
+    }
   },
   reducers: {
     saveCurrentUser(state, action) {
@@ -37,6 +53,10 @@ const UserModel = {
       return { ...state, currentUser: user, menus };
     },
 
+    updateRoles(state, { payload }) {
+      return { ...state, roles: payload || [] };
+    },
+
     changeNotifyCount(
       state = {
         currentUser: {},

src/pages/Post/Edit/index.jsx

@@ -26,16 +26,18 @@ const PostEdit = (props) => {
   }
 
   useEffect(() => {
-    setLoading(true);
-    request(`/post/${id}`)
-      .then((res) => {
-        setPost(res);
-        setLoading(false);
-      })
-      .catch((e) => {
-        setLoading(false);
-        notification.error({ message: e.message });
-      });
+    if (id) {
+      setLoading(true);
+      request(`/post/${id}`)
+        .then((res) => {
+          setPost(res);
+          setLoading(false);
+        })
+        .catch((e) => {
+          setLoading(false);
+          notification.error({ message: e.message });
+        });
+    }
   }, [id]);
 
   useEffect(() => {

src/pages/Post/List/index.jsx

@@ -1,16 +1,29 @@
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useMemo, useCallback, useRef } from 'react';
 import { connect, 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 } from 'antd';
-import { queryTable } from '@/utils/request';
+import { Button, notification } from 'antd';
+import request, { queryTable } from '@/utils/request';
 
 const PostList = (props) => {
+  const tableRef = useRef()
+
   const handlePostClick = useCallback((post) => {
     history.push(post ? `/post/edit?id=${post.postId}` : '/post/edit');
   }, []);
 
+  const emitPublishOrNot = (post) => {
+    // 1 变成 0, 0 变成 1
+    const status = Math.abs(post.status - 1)
+    request(`/post/${post.postId}`, { method: 'put', data: { ...post, status } }).then(() => {
+      notification.success({ message: '操作成功' })
+      tableRef.current.reload()
+    }).catch((e) => {
+      notification.warn({ message: e.message })
+    })
+  }
+
   const actions = [
     <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => handlePostClick()}>
       新建
@@ -79,11 +92,11 @@ const PostList = (props) => {
       valueType: 'select',
       valueEnum: {
         0: {
-          text: '未发布',
-          status: 'Default',
+          text: '下架',
+          status: 'Processing',
         },
         1: {
-          text: '已发布',
+          text: '上架',
           status: 'Success',
         },
       },
@@ -104,7 +117,7 @@ const PostList = (props) => {
           编辑
         </a>,
         <a key="up" onClick={() => emitPublishOrNot(item)}>
-          下架
+          {item.status === 1 ? '下架' : '上架'}
         </a>,
       ],
     },
@@ -122,6 +135,7 @@ const PostList = (props) => {
   return (
     <PageContainer>
       <ProTable
+        actionRef={tableRef}
         columns={columns}
         request={queryTable('/post')}
         rowKey="postId"

src/pages/Student/School/Edit/Specialty.jsx

@@ -1,6 +1,5 @@
-import React, { useRef, useCallback, useState } from 'react';
-import { connect, history } from 'umi';
-import { PageContainer } from '@ant-design/pro-layout';
+import React, { useRef, useState } from 'react';
+import { connect } from 'umi';
 import ProTable from '@ant-design/pro-table';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Popconfirm, Modal, Space, notification } from 'antd';
@@ -52,7 +51,7 @@ const Specialty = (props) => {
   //       });
   //   };
 
-  const deleteSchoolClick = (id) => {
+  const deleteSchoolClick = () => {
       console.log(ref)
     ref.current.reload();
     //   request(`/specialty/${id}`, { method: 'delete' })

src/pages/Student/School/Edit/components/SchoolFrom.jsx

@@ -3,49 +3,42 @@ import { connect } from 'umi';
 
 import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
 import UploadImage from '@/components/UploadImage';
-import {  Form } from 'antd';
+import { Form } from 'antd';
 
 const SchoolFrom = (props) => {
-
   const [form] = Form.useForm();
   //   const [bannerData, setBannerData] = useState({});
 
   useEffect(() => {
- 
-        form.setFieldsValue(props.data);
-     
-  }, [props.data]);
-
+    form.setFieldsValue(props.data);
+  }, [props, form]);
 
   return (
-
-    
-        <ProForm form={form} onFinish={props.handleSubmit}>
-          <Form.Item
-            name="logo"
-            label="logo"
-            placeholder="请选择logo"
-            extra="支持jpg/png文件，且不超过500kb"
-            rules={[{ required: true, message: '请上传logo' }]}
-          >
-            <UploadImage />
-          </Form.Item>
-
-          <ProFormText
-            label="名称"
-            placeholder="输入名称"
-            name="name"
-            rules={[{ required: true, message: '请填写名称' }]}
-          />
-
-          <ProFormTextArea
-            label="简介"
-            placeholder="输入简介"
-            name="desc"
-            rules={[{ required: true, message: '请填写简介' }]}
-          />
-        </ProForm>
-
+    <ProForm form={form} onFinish={props.handleSubmit}>
+      <Form.Item
+        name="logo"
+        label="logo"
+        placeholder="请选择logo"
+        extra="支持jpg/png文件，且不超过500kb"
+        rules={[{ required: true, message: '请上传logo' }]}
+      >
+        <UploadImage />
+      </Form.Item>
+
+      <ProFormText
+        label="名称"
+        placeholder="输入名称"
+        name="name"
+        rules={[{ required: true, message: '请填写名称' }]}
+      />
+
+      <ProFormTextArea
+        label="简介"
+        placeholder="输入简介"
+        name="desc"
+        rules={[{ required: true, message: '请填写简介' }]}
+      />
+    </ProForm>
   );
 };
 

src/pages/Student/School/Edit/components/SpecialtyModel.jsx

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
-import { connect } from 'umi';
+import React from 'react';
 
-import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import ProForm, { ProFormText } from '@ant-design/pro-form';
 
 import { Form } from 'antd';
 

src/pages/Student/Student/List/index.jsx

@@ -1,24 +1,15 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { connect, 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, Image, Space, notification } from 'antd';
-import request, { queryTable } from '@/utils/request';
+import { Space } from 'antd';
+import { queryTable } from '@/utils/request';
 
 const StudentList = () => {
-  const [, setLoading] = useState(false);
   const handleStudentClick = useCallback((id) => {
     history.push(id ? `/student/student/edit?id=${id}` : '/student/student/edit');
   }, []);
 
-  const actions = [
-    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => handleBannerClick()}>
-      新建
-    </Button>,
-  ];
-
-
   const columns = [
     {
       title: '编号',

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

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import { connect } from 'umi'
+import { Button, Checkbox, Row, Col, Divider, notification } from 'antd'
+import request from '@/utils/request';
+
+const UserRole = (props) => {
+  const [loading, setLoading] = useState(false);
+  const [checkedList, setCheckedList] = useState([])
+  const [indeterminate, setIndeterminate] = useState(true);
+  const [checkAll, setCheckAll] = useState(false);
+  const [allRoles, setAllRoles] = useState([])
+
+  const handleChange = (list) => {
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < allRoles.length);
+    setCheckAll(list.length === allRoles.length);
+  }
+
+  const handleCheckAll = (e) => {
+    setCheckedList(e.target.checked ? allRoles : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  }
+
+  const handleSubmit = () => {
+    if (props.user.userId) {
+      const data = checkedList.map((roleId) => ({ userId: props.user.userId, roleId }))
+      setLoading(true)
+      request(`/user-role/${props.user.userId}`, { method: 'post',  data })
+        .then((res) => {
+          props.onSubmit(res);
+          setLoading(false);
+          notification.success({ message: '操作成功' });
+        })
+        .catch((e) => {
+          setLoading(false);
+          notification.error({ message: e.message });
+        });
+    } else {
+      notification.error({ message: '请先保存用户信息' });
+    }
+  }
+
+  useEffect(() => {
+    if (!props.roleList?.length) {
+      props.dispatch({
+        type: 'user/fetchRoles',
+      })
+    } else {
+      setAllRoles(props.roleList.map((r) => r.roleId))
+    }
+
+    if (props.user.roleList) {
+      setCheckedList(props.user.roleList?.map((r) => r.roleId))
+    }
+
+    setIndeterminate(props.user.roleList?.length < props.roleList?.length);
+    setCheckAll(props.user.roleList?.length === props.roleList?.length);
+  }, [props])
+
+  return (
+    <div>
+      <Checkbox indeterminate={indeterminate} onChange={handleCheckAll} checked={checkAll}>
+        全选
+      </Checkbox>
+      <Divider />
+      <Checkbox.Group value={checkedList} onChange={handleChange} style={{ width: '100%' }}>
+        <Row>
+          {
+            (props.roleList || []).map((role) => {
+              return (
+                <Col span={8} key={role.roleId}>
+                  <Checkbox value={role.roleId}>{role.name}</Checkbox>
+                </Col>
+              )
+            })
+          }
+        </Row>
+      </Checkbox.Group>
+      <div style={{ marginTop: '3em' }}>
+        <Button type="primary" onClick={handleSubmit} loading={loading}>确定</Button>
+      </div>
+    </div>
+  )
+}
+
+export default connect((s) => ({
+  roleList: s.user.roles,
+}))(UserRole)

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

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react'
+import ProForm, {
+  ProFormText,
+} from '@ant-design/pro-form';
+import UploadImage from '@/components/UploadImage';
+import { notification, Form } from 'antd';
+import request from '@/utils/request';
+
+export default (props) => {
+  const [form] = Form.useForm();
+
+  const handleSubmit = (values) => {
+    if (!props.user?.userId) {
+      // 新增
+      request('/user', { method: 'post', data: values }).then(res => {
+        notification.success({ message: '新增用户成功' })
+        props.onChange(res)
+      }).catch((e) => {
+        notification.error({ message: e.message })
+      })
+    } else {
+      //
+    }
+  }
+
+  useEffect(() => {
+    if (props.user && props.user.userId) {
+      form.setFieldsValue(props.user);
+    }
+  }, [props.user, form]);
+
+  return (
+    <ProForm form={form} onFinish={handleSubmit}>
+      <ProFormText
+        label="姓名"
+        placeholder="请输入姓名"
+        name="userName"
+        rules={[{ required: true, message: '请填写姓名' }]}
+      />
+
+      <Form.Item name="avatar" label="头像" placeholder="请设置头像">
+        <UploadImage />
+      </Form.Item>
+
+      <ProFormText
+        label="手机号"
+        placeholder="请输入手机号"
+        name="phone"
+      />
+
+      <ProFormText
+        label="登录名"
+        placeholder="请设置用户登录名"
+        name="loginName"
+        rules={[{ required: true, message: '请设置用户登录名' }]}
+        extra="默认密码 abc@123 "
+      />
+    </ProForm>
+  )
+}

src/pages/User/Edit/index.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import { PageContainer } from '@ant-design/pro-layout';
+import { notification, Tabs } from 'antd';
+import Container from '@/components/Container';
+import request from '@/utils/request';
+import UserForm from './components/User'
+import UserRole from './components/Role'
+
+const { TabPane } = Tabs;
+
+export default (props) => {
+  const { id } = props.location.query;
+  const [loading, setLoading] = useState(false);
+  const [user, setUser] = useState({});
+
+  const handleRoleSubmit = (roleList) => {
+    setUser({
+      ...user,
+      roleList,
+    })
+  }
+
+  useEffect(() => {
+    if (id) {
+      setLoading(true);
+      request(`/user/${id}`)
+        .then((res) => {
+          setUser(res);
+          setLoading(false);
+        })
+        .catch((e) => {
+          setLoading(false);
+          notification.error({ message: e.message });
+        });
+    }
+  }, [id]);
+
+  return (
+    <PageContainer>
+    <Container>
+      <Tabs>
+        <TabPane tab="基本信息" key="1">
+          <Container loading={loading}>
+            <UserForm user={user} onChange={setUser} />
+          </Container>
+        </TabPane>
+        <TabPane tab="角色设置" key="2">
+          <Container>
+            <UserRole user={user} onSubmit={handleRoleSubmit} />
+          </Container>
+        </TabPane>
+      </Tabs>
+    </Container>
+    </PageContainer>
+  )
+}

src/pages/User/List/index.jsx

@@ -0,0 +1,99 @@
+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 = (user) => {
+    request(`/user/${user.userId}`, { method: 'delete' } ).then(() => {
+      notification.success({ message: '操作成功' })
+      tableRef.current.reload()
+    }).catch((e) => {
+      notification.error({ message: e.message })
+    })
+  }
+
+  const handleEdit = (user) => {
+    const url = user && user.userId ? `/system/user/edit?id=${user.userId}` : '/system/user/edit'
+    history.push(url)
+  }
+
+  const columns = [
+    {
+      title: '编号',
+      key: 'userId',
+      dataIndex: 'userId',
+      width: 200,
+      hideInSearch: true,
+    },
+    {
+      title: '姓名',
+      key: 'userName',
+      dataIndex: 'userName',
+    },
+    {
+      title: '电话',
+      key: 'phone',
+      dataIndex: 'phone',
+    },
+    {
+      title: '登录名',
+      key: 'loginName',
+      dataIndex: 'loginName',
+      hideInSearch: true,
+    },
+    {
+      title: '角色',
+      key: 'roleName',
+      dataIndex: 'roleName',
+      hideInSearch: true,
+    },
+    {
+      title: '创建时间',
+      key: 'createDate',
+      dataIndex: 'createDate',
+      valueType: 'date',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      key: 'option',
+      valueType: 'option',
+      // 不能操作超级管理员
+      render: (_, user) => [
+        user.userId !== '1' && <a key="edit" onClick={() => handleEdit(user)}>修改</a>,
+        user.userId !== '1' && <a key="disable">禁用</a>,
+        user.userId !== '1' && <Popconfirm key="delete" title="确定删除当前人员?" onConfirm={() => handleDelete(user)}>
+          <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('/user')}
+        rowKey="userId"
+        headerTitle="用户列表"
+        search={{
+          labelWidth: '4em',
+        }}
+        toolBarRender={() => actions}
+      />
+    </PageContainer>
+  )
+}

src/services/user.js

@@ -9,3 +9,7 @@ export async function queryCurrent() {
 export async function queryNotices() {
   return request('/notices');
 }
+
+export async function queryRoles() {
+  return request('/role', { params: { pageSize: 500 } });
+}