优化提交

config/cacheRoutes.js

 const routes = [
   '/system/role',
   '/system/menu',
-  '/system/dept'
+  '/system/dept',
+  '/system/user'
 ]
 
 export default {

config/config.js

@@ -88,6 +88,12 @@ export default defineConfig({
                   icon: 'SolutionOutlined',
                   component: './dept',
                 },
+                {
+                  path: '/system/user',
+                  name: 'user',
+                  icon: 'SolutionOutlined',
+                  component: './user/manage',
+                },
               ],
             },
             {

src/components/Business/DeptTree/index.jsx

+import React, { useEffect, useState, useImperativeHandle } from 'react'
+import { SageTree } from '@/components/Common'
+import { queryDept } from '@/pages/dept/service'
+
+// 遍历所有子节点数组改变结构
+function loopTree(arr) {
+  arr.forEach(item => {
+    item.title = item.orgnName
+    item.key = item.id
+    if (item.hasSun) {
+      item.children = item.children.slice()
+      loopTree(item.children)
+    }
+  })
+}
+
+const DeptTree = (props, ref) => {
+
+  const [treeData, setTreeData] = useState([])
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [checkedKeys, setCheckedKeys] = useState([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+  const requestDept = async () => {
+    const res = await queryDept()
+    const { data } = res
+    const treeDataArr = data.slice()
+    loopTree(treeDataArr)
+    setTreeData(treeDataArr)
+    if (treeDataArr.length !== 0) {
+      setExpandedKeys([treeDataArr[0].id])
+      setAutoExpandParent(false);
+    }
+  }
+
+  const onExpand = expandedkeys => {
+    // console.log('onExpand', expandedkeys); // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+    // or, you can remove all expanded children keys.
+
+    setExpandedKeys(expandedkeys);
+    setAutoExpandParent(false);
+  };
+
+  const onCheck = checkedkeys => {
+    // console.log('onCheck', checkedkeys);
+    setCheckedKeys(checkedkeys);
+  };
+
+  const onSelect = (selectedkeys, info) => {
+    // console.log('onSelect', info);
+    setSelectedKeys(selectedkeys);
+    if (props.onSelect) {
+      props.onSelect(selectedkeys[0])
+    }
+  };
+
+  const getCheckedKeys = () => {
+    return checkedKeys
+  }
+
+  const getData = () => {
+    return treeData
+  }
+
+  useEffect(() => {
+    requestDept()
+  }, [])
+
+  // 暴露给外部的方法
+  useImperativeHandle(ref, () => ({
+    setCheckedKeys,
+    getCheckedKeys,
+    setSelectedKeys,
+    refresh: requestDept,
+    getData
+  }))
+
+  return (
+    <SageTree
+      // checkable
+      // checkStrictly
+      // showLine
+      onExpand={onExpand}
+      expandedKeys={expandedKeys}
+      autoExpandParent={autoExpandParent}
+      onCheck={onCheck}
+      checkedKeys={checkedKeys}
+      onSelect={onSelect}
+      selectedKeys={selectedKeys}
+      treeData={treeData}
+    />
+  )
+}
+
+export default React.forwardRef(DeptTree)

src/components/Business/index.jsx

 import MenuTree from './MenuTree'
+import DeptTree from './DeptTree'
 
 export {
-  MenuTree
+  MenuTree,
+  DeptTree
 }

src/components/Common/Form/index.jsx

@@ -136,6 +136,14 @@ const SageForm = (props, ref) => {
       formItemProps.initialValue = item.initialValue
     }
 
+    if (item.labelCol) {
+      formItemProps.labelCol = item.labelCol
+    }
+
+    if (item.wrapperCol) {
+      formItemProps.wrapperCol = item.wrapperCol
+    }
+
     switch (item.type) {
       case 'select':
         formCompnentNode = (
@@ -211,7 +219,7 @@ const SageForm = (props, ref) => {
     }
 
     return (
-      <Col key={`col_key_${item.name}`} span={24 / colNum}>
+      <Col key={`col_key_${item.name}`} span={item.span || (24 / colNum)}>
         <Form.Item
           {...formItemProps}
         >

src/locales/zh-CN/menu.js

@@ -54,6 +54,7 @@ export default {
   'menu.system.role': '角色管理',
   'menu.system.menu': '菜单管理',
   'menu.system.dept': '部门管理',
+  'menu.system.user': '用户管理',
   'menu.demo': '例子',
   'menu.demo.crud': 'Crud'
 };

src/models/user.js

@@ -19,7 +19,7 @@ const UserModel = {
       if (response.isSuccess) {
         const userInfo = response.data
 
-        userInfo.name = 'Serati Ma'
+        userInfo.name = userInfo.user || '创世者'
         userInfo.avatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
 
         yield put({

src/pages/demo/crud/components/CreateForm.jsx

@@ -19,17 +19,17 @@ const CreateForm = (props, ref) => {
       code: 'DEVICE_CONTROL_TYPE,DEVICE_FUNCTION_TYPE'
     })
     if (res.isSuccess) {
-      const { DEVICE_CONTROL_TYPE = [], DEVICE_FUNCTION_TYPE = [] } = res.data
-      DEVICE_CONTROL_TYPE && DEVICE_CONTROL_TYPE.forEach(item => {
+      const { DEVICE_CONTROL_TYPE, DEVICE_FUNCTION_TYPE } = res.data
+      DEVICE_CONTROL_TYPE.forEach(item => {
         item.text = item.dictValue
         item.value = item.dictKey
       })
-      DEVICE_FUNCTION_TYPE && DEVICE_FUNCTION_TYPE.forEach(item => {
+      DEVICE_FUNCTION_TYPE.forEach(item => {
         item.text = item.dictValue
         item.value = item.dictKey
       })
-      setSelectOptions1(DEVICE_CONTROL_TYPE || [])
-      setSelectOptions2(DEVICE_FUNCTION_TYPE || [])
+      setSelectOptions1(DEVICE_CONTROL_TYPE)
+      setSelectOptions2(DEVICE_FUNCTION_TYPE)
     }
   }
 

src/pages/dept/index.jsx

@@ -186,7 +186,7 @@ const DeptList = () => {
           { title: '删除', method: (e) => handleDelete(e, record), isConfirm: true, confirmInfo: '确认删除该菜单?' },
         ]
 
-        return <ActionSet actionList={actionList} record={record} />
+        return record.fatherOrgnId !== 0 ? <ActionSet actionList={actionList} record={record} /> : null
       },
       width: 120
     }

src/pages/menu/components/UpdateForm.jsx

@@ -43,6 +43,12 @@ const UpdateForm = (props, ref) => {
     }
   }
 
+  const onValuesChange = (changedValues) => {
+    if (Object.keys(changedValues)[0] === 'menuType') {
+      setMenuType(changedValues.menuType)
+    }
+  }
+
   // 表单字段设置
   const formFields = [
     {
@@ -75,12 +81,12 @@ const UpdateForm = (props, ref) => {
     },
     {
       name: 'url',
-      label: '请求地址',
+      label: menuType === '1' ? '路由地址' : '请求地址',
       type: 'input',
       props: {
         placeholder: '请输入'
       },
-      isShow: menuType === '1'
+      isShow: menuType === '1' || menuType === '2'
     },
     {
       name: 'target',
@@ -153,6 +159,7 @@ const UpdateForm = (props, ref) => {
       // colNum={2}
       // initialValues={detail}
       onFinish={onFinish}
+      onValuesChange={onValuesChange}
     />
   )
 }

src/pages/menu/index.jsx

@@ -147,7 +147,7 @@ const MenuList = () => {
       title: '菜单类型',
       dataIndex: 'menuType',
       key: 'menuType',
-      width: 200,
+      width: 100,
       render: text => {
         let renderText = ''
         switch (text) {
@@ -170,7 +170,7 @@ const MenuList = () => {
       title: '可见',
       dataIndex: 'status',
       key: 'status',
-      width: 200,
+      width: 100,
       render: text => text === '1' ? '显示' : '隐藏'
     },
     {

src/pages/menu/service.js

@@ -14,13 +14,13 @@ export async function removeMenu(params) {
   });
 }
 export async function addMenu(params) {
-  return request(`/${requestPrefix}/party/menu/saveOrEdit`, {
+  return request(`/${requestPrefix}/party/menu/save`, {
     method: 'POST',
     data: { ...params },
   });
 }
 export async function updateMenu(params) {
-  return request(`/${requestPrefix}/party/menu/saveOrEdit`, {
+  return request(`/${requestPrefix}/party/menu/edit`, {
     method: 'POST',
     data: { ...params },
   });

src/pages/role/index.jsx

 import React, { useState, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Card } from 'antd'
+import { Card, Switch, Modal } from 'antd'
 import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, sageMessage, ActionSet } from '@/components/Common'
 import { MenuTree } from '@/components/Business'
-import { PlusOutlined, CheckOutlined } from '@ant-design/icons';
-import { queryRule, updateRule, addRule, removeRule, getRuleDetail } from './service';
+import { PlusOutlined, CheckOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { queryRule, updateRule, addRule, removeRule, getRuleDetail, openOrClose } from './service';
 import CreateForm from './components/CreateForm'
 import UpdateForm from './components/UpdateForm'
 
+const { confirm } = Modal
+
 const initDetail = {
   id: null
 }
@@ -105,6 +107,32 @@ const TableList = () => {
     setRole({id})
   }
 
+  // 不通过刷新列表请求修改列表状态
+  const onChangeStatus = (checked, record) => {
+    confirm({
+      title: `此操作将 "${checked ? '启用' : '停用'}" ${record.roleName}, 是否继续？`,
+      icon: <ExclamationCircleOutlined />,
+      // content: 'Some descriptions',
+      onOk: async () => {
+        const res = await openOrClose({ id: record.id })
+        if (res.isSuccess) {
+          const tableData = tableRef.current.getDataSource()
+          for (let i = 0; i < tableData.length; i++) {
+            if (tableData[i].id === record.id) {
+              tableData[i].status = checked ? '1' : '0'
+              break;
+            }
+          }
+          tableRef.current.setDataSource(tableData)
+          sageMessage.success(checked ? '启用成功' : '禁用成功')
+        }
+      },
+      onCancel: () => {
+
+      },
+    });
+  }
+
   // 表格
   const columns = [
     {
@@ -123,7 +151,7 @@ const TableList = () => {
       title: '角色状态',
       dataIndex: 'status',
       key: 'status',
-      render: text => text === '1' ? '启用' : '禁用'
+      render: (text, record) => <Switch checked={text === '1'} onChange={(checked) => onChangeStatus(checked, record)} />
     },
     {
       title: '创建时间',
@@ -251,7 +279,7 @@ const TableList = () => {
         rightWidth={350}
         right={
           <div style={{ padding: 12, height: '100%' }}>
-            <Card title="菜单分配" extra={<SageButton disabled={Object.keys(role).length === 0} type="primary" onClick={onSaveMenuRole} icon={<CheckOutlined />}>保存</SageButton>} style={{ height: '100%' }}>
+            <Card title="菜单分配" extra={<SageButton disabled={Object.keys(role).length === 0} type="primary" onClick={onSaveMenuRole} icon={<CheckOutlined />}>保存</SageButton>} size="small" style={{ height: '100%' }}>
               <MenuTree
                 ref={menutreeRef}
               />

src/pages/role/service.js

 import request from '@/utils/request';
+import { requestPrefix } from '@/services/prefix'
 
 export async function queryRule(params) {
-  return request('/ebd/party/role/queryList', {
+  return request(`/${requestPrefix}/party/role/queryList`, {
     method: 'POST',
     data: { ...params },
   });
 }
 export async function removeRule(params) {
-  return request('/ebd/party/role/delete', {
+  return request(`/${requestPrefix}/party/role/delete`, {
     method: 'POST',
     data: { ...params },
   });
 }
 export async function addRule(params) {
-  return request('/ebd/party/role/saveOrEdit', {
+  return request(`/${requestPrefix}/party/role/save`, {
     method: 'POST',
     data: { ...params },
   });
 }
 export async function updateRule(params) {
-  return request('/ebd/party/role/saveOrEdit', {
+  return request(`/${requestPrefix}/party/role/edit`, {
     method: 'POST',
     data: { ...params },
   });
@@ -27,7 +28,14 @@ export async function updateRule(params) {
 
 // 查询
 export function getRuleDetail(params) {
-  return request('/ebd/party/role/selectById', {
+  return request(`/${requestPrefix}/party/role/selectById`, {
+    method: 'POST',
+    data: { ...params },
+  })
+}
+
+export function openOrClose(params) {
+  return request(`/${requestPrefix}/party/role/openOrClose`, {
     method: 'POST',
     data: { ...params },
   })

src/pages/user/manage/components/CreateForm.jsx

+import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
+import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
+import { SageForm } from '@/components/Common'
+import { mobile, email, idCode } from '@/utils/verify'
+import { queryDept } from '@/pages/dept/service'
+import { queryRule } from '@/pages/role/service'
+
+const CreateForm = (props, ref) => {
+  const [orgnIdOptions, setOrgnIdOptions] = useState([])
+  const [roleOptions, setRoleOptions] = useState([])
+
+  const formRef = useRef()
+
+  // 初始化菜单下拉
+  const requestDeptList = async () => {
+    const res = await queryDept()
+    if (res.isSuccess) {
+      const data = res.data.slice()
+      setOrgnIdOptions(data)
+    }
+  }
+
+  // 初始化角色数组
+  const requestRoleList = async () => {
+    const res = await queryRule({pageNum: 1, pageSize: 100})
+    if (res.isSuccess) {
+      const data = res.data.slice()
+      data.forEach(item => {
+        item.label = item.roleName;
+        item.value = item.id.toString();
+      })
+      setRoleOptions(data)
+    }
+  }
+
+  useEffect(() => {
+    requestDeptList()
+    requestRoleList()
+  }, [])
+
+  // 上传成功
+  const uploadSuccess = (field, value) => {
+    formRef.current.setFieldsValue({ [field]: value })
+  }
+
+  const onFinish = (values) => {
+    if (props.onFinish) {
+      props.onFinish(values)
+    }
+  }
+
+  const onFinishFailed = ({ values }) => {
+    console.log(values)
+  }
+
+  // 表单字段设置
+  const formFields = [
+    {
+      name: 'personName',
+      label: '用户名',
+      type: 'input',
+      rules: [{ required: true }]
+    },
+    {
+      name: 'sex',
+      label: '性别',
+      type: 'radio',
+      initialValue: '1',
+      options: [
+        { value: '1', text: '男' },
+        { value: '0', text: '女' },
+      ]
+    },
+    {
+      name: 'idNo',
+      label: '身份证号',
+      type: 'input',
+      rules: [{ pattern: idCode, message: '请输入正确的身份证号' }]
+    },
+    {
+      name: 'personNo',
+      label: '员工号',
+      type: 'input',
+      // rules: [{ required: true }]
+    },
+    {
+      name: 'entryTime',
+      label: '入职时间',
+      type: 'datepicker',
+      // rules: [{ required: true }],
+      props: {
+        style: { width: '100%' }
+      }
+    },
+    {
+      name: 'orgnId',
+      label: '归属部门',
+      type: 'treeselect',
+      // rules: [{ required: true }],
+      fieldNames: { title: 'orgnName', value: 'id' },
+      props: {
+        treeData: orgnIdOptions
+      },
+    },
+    {
+      name: 'mobile',
+      label: '手机号',
+      type: 'input',
+      rules: [
+        { required: true },
+        { pattern: mobile, message: '请输入正确的手机号' }
+      ]
+    },
+    {
+      name: 'email',
+      label: '邮箱',
+      type: 'input',
+      rules: [
+        // { required: true },
+        { pattern: email, message: '请输入正确的邮箱' }
+      ]
+    },
+    {
+      name: 'roleIds',
+      label: '角色',
+      type: 'checkbox',
+      span: 24,
+      labelCol: {span: 3},
+      options: roleOptions
+    },
+    {
+      name: 'status',
+      label: '状态',
+      type: 'switch',
+      initialValue: true,
+    },
+    {
+      name: 'headImage',
+      label: '头像',
+      span: 24,
+      labelCol: {span: 3},
+      type: 'simplepictureupload',
+      // rules: [{ required: true }],
+      props: {
+        uploadSuccess
+      },
+    },
+  ]
+
+  // 暴露外部方法
+  useImperativeHandle(ref, () => ({
+    submit: () => formRef.current.submit(),
+    validateFields: (nameList) => formRef.current.validateFields(nameList),
+    getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
+    setFieldsValue: (values) => formRef.current.setFieldsValue(values),
+    resetFields: (fields) => formRef.current.resetFields(fields)
+  }))
+
+  return (
+    <SageForm
+      ref={formRef}
+      colNum={2}
+      labelCol={ {span: 6 }}
+      wrapperCol={ {span: 18} }
+      formFields={formFields}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    />
+  )
+}
+
+export default React.forwardRef(CreateForm)

src/pages/user/manage/components/UpdateForm.jsx

+import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
+import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
+import { SageForm } from '@/components/Common'
+import { mobile, email, idCode } from '@/utils/verify'
+import { queryDept } from '@/pages/dept/service'
+import { queryRule } from '@/pages/role/service'
+
+const UpdateForm = (props, ref) => {
+  const { detail } = props
+
+  const [orgnIdOptions, setOrgnIdOptions] = useState([])
+  const [roleOptions, setRoleOptions] = useState([])
+
+  const formRef = useRef()
+
+  // 初始化菜单下拉
+  const requestDeptList = async () => {
+    const res = await queryDept()
+    if (res.isSuccess) {
+      const data = res.data.slice()
+      setOrgnIdOptions(data)
+    }
+  }
+
+  // 初始化角色数组
+  const requestRoleList = async () => {
+    const res = await queryRule({pageNum: 1, pageSize: 100})
+    if (res.isSuccess) {
+      const data = res.data.slice()
+      data.forEach(item => {
+        item.label = item.roleName;
+        item.value = item.id.toString();
+      })
+      setRoleOptions(data)
+    }
+  }
+
+  useEffect(() => {
+    requestDeptList()
+    requestRoleList()
+  }, [])
+
+  // 上传成功
+  const uploadSuccess = (field, value) => {
+    formRef.current.setFieldsValue({ [field]: value })
+  }
+
+  const onFinish = (values) => {
+    if (props.onFinish) {
+      props.onFinish(values)
+    }
+  }
+
+  const onFinishFailed = ({ values }) => {
+    console.log(values)
+  }
+
+  // 表单字段设置
+  const formFields = [
+    {
+      name: 'personName',
+      label: '用户名',
+      type: 'input',
+      rules: [{ required: true }]
+    },
+    {
+      name: 'sex',
+      label: '性别',
+      type: 'radio',
+      options: [
+        { value: '1', text: '男' },
+        { value: '0', text: '女' },
+      ]
+    },
+    {
+      name: 'idNo',
+      label: '身份证号',
+      type: 'input',
+      rules: [{ pattern: idCode, message: '请输入正确的身份证号' }]
+    },
+    {
+      name: 'personNo',
+      label: '员工号',
+      type: 'input',
+      // rules: [{ required: true }]
+    },
+    {
+      name: 'entryTime',
+      label: '入职时间',
+      type: 'datepicker',
+      // rules: [{ required: true }],
+      props: {
+        style: { width: '100%' }
+      }
+    },
+    {
+      name: 'orgnId',
+      label: '归属部门',
+      type: 'treeselect',
+      // rules: [{ required: true }],
+      fieldNames: { title: 'orgnName', value: 'id' },
+      props: {
+        treeData: orgnIdOptions
+      },
+    },
+    {
+      name: 'mobile',
+      label: '手机号',
+      type: 'input',
+      rules: [
+        { required: true },
+        { pattern: mobile, message: '请输入正确的手机号' }
+      ]
+    },
+    {
+      name: 'email',
+      label: '邮箱',
+      type: 'input',
+      rules: [
+        // { required: true },
+        { pattern: email, message: '请输入正确的邮箱' }
+      ]
+    },
+    {
+      name: 'roleIds',
+      label: '角色',
+      type: 'checkbox',
+      span: 24,
+      labelCol: {span: 3},
+      options: roleOptions
+    },
+    {
+      name: 'status',
+      label: '状态',
+      type: 'switch',
+    },
+    {
+      name: 'headImage',
+      label: '头像',
+      span: 24,
+      labelCol: {span: 3},
+      type: 'simplepictureupload',
+      // rules: [{ required: true }],
+      props: {
+        previewImage: detail.headImage ? `/ebd/sys/file/showImage?imageId=${detail.headImage}` : '',
+        uploadSuccess
+      },
+    },
+  ]
+
+  // 暴露外部方法
+  useImperativeHandle(ref, () => ({
+    submit: () => formRef.current.submit(),
+    validateFields: (nameList) => formRef.current.validateFields(nameList),
+    getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
+    setFieldsValue: (values) => formRef.current.setFieldsValue(values),
+    resetFields: (fields) => formRef.current.resetFields(fields)
+  }))
+
+  return (
+    <SageForm
+      ref={formRef}
+      colNum={2}
+      labelCol={ {span: 6 }}
+      wrapperCol={ {span: 18} }
+      formFields={formFields}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    />
+  )
+}
+
+export default React.forwardRef(UpdateForm)

src/pages/user/manage/index.jsx

+import React, { useState, useRef } from 'react'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { Card, Modal, Switch } from 'antd'
+import moment from 'moment'
+import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { DeptTree } from '@/components/Business'
+import { PlusOutlined, RedoOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { queryUser, updateUser, addUser, removeUser, getUserDetail, openOrClose } from './service';
+import CreateForm from './components/CreateForm'
+import UpdateForm from './components/UpdateForm'
+
+const { confirm } = Modal
+
+const initDetail = {
+  id: null
+}
+
+const TableList = () => {
+
+  // 状态
+  const [detail, setDetail] = useState(initDetail) // 详情
+  const [status, setStatus] = useState('') // 状态 1、add 2、update 3、detail
+  const [modalLoading, setModalLoading] = useState(false) // 窗口loading
+
+  // ref对象
+  const tableRef = useRef();
+  const modalRef = useRef();
+  const createFormRef = useRef();
+  const updateFormRef = useRef();
+  const depttreeRef = useRef();
+
+  // 查询条件
+  const searchFields = [
+    {
+      name: 'personName',
+      label: '用户名',
+      type: 'input',
+      props: {
+        placeholder: '请输入'
+      }
+    },
+    {
+      name: 'mobile',
+      label: '手机号',
+      type: 'input',
+      props: {
+        placeholder: '请输入'
+      }
+    }
+  ]
+
+  // 查询
+  const onSearchTable = (params) => {
+    if (tableRef.current) {
+      const postParams = Object.assign({ pageNum: 1 }, params)
+      tableRef.current.queryTable(postParams)
+    }
+  }
+
+  // 重置
+  const onResetTable = () => {
+    if (tableRef.current) {
+      tableRef.current.queryTable({ pageNum: 1 }, 'reset')
+    }
+  }
+
+  const tableSearchFormProps = {
+    searchFields,
+    onSearchTable,
+    onResetTable
+  }
+
+  // 编辑
+  const handleEdit = async (event, record) => {
+    event.stopPropagation()
+
+    setStatus('update')
+    const res = await getUserDetail({ id: record.loginId })
+    const { data } = res
+    setDetail(data)
+
+    modalRef.current.setTitle('编辑角色')
+    modalRef.current.setVisible(true)
+    updateFormRef.current.setFieldsValue({
+      personName: data.personName,
+      sex: data.sex,
+      idNo: data.idNo,
+      personNo: data.personNo,
+      entryTime: data.entryTime ? moment(data.entryTime) : '',
+      orgnId: data.orgnId,
+      mobile: data.mobile,
+      email: data.email,
+      roleIds: data.roleIds ? data.roleIds.split(',') : [],
+      status: data.status === '1',
+      headImage: data.headImage
+    })
+  }
+
+  // 删除
+  const handleDelete = async (event, record) => {
+    event.stopPropagation()
+
+    const res = await removeUser({ id: record.loginId })
+    if (res.isSuccess) {
+      sageMessage.success('删除成功')
+      tableRef.current.reloadTable()
+    }
+  }
+
+  // 不通过刷新列表请求修改列表状态
+  const onChangeStatus = (checked, record) => {
+    confirm({
+      title: `此操作将 "${checked ? '启用' : '停用'}" ${record.personName}, 是否继续？`,
+      icon: <ExclamationCircleOutlined />,
+      // content: 'Some descriptions',
+      onOk: async () => {
+        const res = await openOrClose({ loginId: record.loginId })
+        if (res.isSuccess) {
+          const tableData = tableRef.current.getDataSource()
+          for (let i = 0; i < tableData.length; i++) {
+            if (tableData[i].loginId === record.loginId) {
+              tableData[i].status = checked ? '1' : '0'
+              break;
+            }
+          }
+          tableRef.current.setDataSource(tableData)
+          sageMessage.success(checked ? '启用成功' : '禁用成功')
+        }
+      },
+      onCancel: () => {
+
+      },
+    });
+  }
+
+  // 表格
+  const columns = [
+    {
+      title: '用户名',
+      dataIndex: 'personName',
+      key: 'personName'
+    },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'sex',
+      render: text => text === '1' ? '男' : '女'
+    },
+    {
+      title: '手机',
+      dataIndex: 'mobile',
+      key: 'mobile',
+    },
+    {
+      title: '部门',
+      dataIndex: 'orgnName',
+      key: 'orgnName',
+    },
+    {
+      title: '入职时间',
+      dataIndex: 'entryTime',
+      key: 'entryTime',
+      width: 160
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text, record) => <Switch checked={text === '1'} onChange={(checked) => onChangeStatus(checked, record)} />
+    },
+    {
+      title: '操作',
+      dataIndex: 'button',
+      key: 'action',
+      align: 'center',
+      render: (button, record) => {
+
+        const actionList = [
+          { title: '编辑', method: (e) => handleEdit(e, record) },
+          { title: '删除', method: (e) => handleDelete(e, record), isConfirm: true, confirmInfo: '确认删除该角色?' },
+        ]
+
+        return <ActionSet actionList={actionList} record={record} />
+      },
+      width: 160
+    }
+  ]
+
+  const tableProps = {
+    rowKey: 'loginId',
+    hasNumber: true,
+    columns
+  }
+
+  // 新建
+  const onAdd = () => {
+    if (modalRef.current) {
+      setStatus('add')
+      modalRef.current.setTitle('新增角色')
+      modalRef.current.setVisible(true)
+      if (createFormRef.current) {
+        createFormRef.current.resetFields()
+      }
+    }
+  }
+
+  // 表格按钮操作
+  const tableToolProps = {
+    toolBarRender: () => {
+      return (
+        <>
+          <SageButton type="primary" icon={<PlusOutlined />} onClick={onAdd}>新增</SageButton>
+        </>
+      )
+    },
+    toolOptionConfig: ['reload', 'hiddensearch', 'density', 'fullScreen']
+  }
+
+  // 窗口确认按钮
+  const onOk = async () => {
+    if (status === 'add' && createFormRef.current) {
+      createFormRef.current.submit();
+    }
+    if (status === 'update' && updateFormRef.current) {
+      updateFormRef.current.submit();
+    }
+  }
+
+  // 表单提交成功
+  const onFinish = async (values) => {
+    const formData = Object.assign({}, values)
+    // 处理赋值表单数据
+    // TODO
+    formData.status = formData.status ? '1' : '0'
+
+    let res = null
+    setModalLoading(true)
+    switch (status) {
+      case 'add':
+        res = await addUser(formData)
+        break;
+      case 'update':
+        formData.loginId = detail.loginId
+        res = await updateUser(formData)
+        break
+      default:
+        break;
+    }
+    setModalLoading(false)
+
+    if (res.isSuccess) {
+      sageMessage.success('保存成功')
+      modalRef.current.setVisible(false)
+      tableRef.current.reloadTable()
+    }
+  }
+
+  // 刷新组织部门
+  const onRefreshDept = () => {
+    depttreeRef.current.refresh()
+    depttreeRef.current.setSelectedKeys([])
+    onSearchTable({orgnId: ''})
+  }
+
+  const onSelectDept = (orgnId) => {
+    onSearchTable({orgnId})
+  }
+
+  return (
+    <PageHeaderWrapper>
+
+      <SageLayoutLR
+        leftWidth={250}
+        left={
+          <div style={{ padding: '0 12px 12px 0', height: '100%' }}>
+            <Card
+              title="组织部门"
+              extra={
+                <RedoOutlined style={{cursor: 'pointer'}} onClick={onRefreshDept} />
+              }
+              size="small"
+              style={{ height: '100%' }}>
+                <DeptTree
+                  ref={depttreeRef}
+                  onSelect={onSelectDept}
+                />
+            </Card>
+          </div>
+        }
+        right={
+          <SageTable
+            ref={tableRef}
+            {...tableSearchFormProps}
+            {...tableToolProps}
+            {...tableProps}
+            request={(params) => queryUser(params)}
+          />
+        }
+      />
+
+      <SageModal
+        ref={modalRef}
+        onOk={onOk}
+        confirmLoading={modalLoading}
+        width={800}
+      >
+        {
+          status === 'add' ?
+          <CreateForm
+            ref={createFormRef}
+            onFinish={onFinish}
+          /> : null
+        }
+        {
+          status === 'update' ?
+          <UpdateForm
+            ref={updateFormRef}
+            detail={detail}
+            onFinish={onFinish}
+          /> : null
+        }
+      </SageModal>
+
+    </PageHeaderWrapper>
+  )
+}
+
+export default TableList

src/pages/user/manage/service.js

+import request from '@/utils/request';
+import { requestPrefix } from '@/services/prefix'
+
+export async function queryUser(params) {
+  return request(`/${requestPrefix}/party/person/queryList`, {
+    method: 'POST',
+    data: { ...params },
+  });
+}
+export async function removeUser(params) {
+  return request(`/${requestPrefix}/party/person/delete`, {
+    method: 'POST',
+    data: { ...params },
+  });
+}
+export async function addUser(params) {
+  return request(`/${requestPrefix}/party/person/save`, {
+    method: 'POST',
+    data: { ...params },
+  });
+}
+export async function updateUser(params) {
+  return request(`/${requestPrefix}/party/person/edit`, {
+    method: 'POST',
+    data: { ...params },
+  });
+}
+
+// 查询
+export function getUserDetail(params) {
+  return request(`/${requestPrefix}/party/person/selectById`, {
+    method: 'POST',
+    data: { ...params },
+  })
+}
+
+export function openOrClose(params) {
+  return request(`/${requestPrefix}/party/person/openOrClose`, {
+    method: 'POST',
+    data: { ...params },
+  })
+}