pc-admin/src/pages/User/List/index.jsx

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 changeStatus = (user) => {
    // 0 变 1, 1 变 0
    // eslint-disable-next-line no-bitwise
    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 handleResetPassword = (user) => {
    request(`/reset-password/${user.userId}`, { method: 'put' }).then(() => {
      notification.success({ message: '操作成功' })
    }).catch((e) => {
      notification.error({ message: e.message })
    })
  }

  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>,
        <a key="disable" onClick={() => changeStatus(user)}>{user.status === 1 ? '禁用' : '启用'}</a>,
        <Popconfirm key="delete" title="确定删除当前人员?" onConfirm={() => handleDelete(user)}>
          <a href="#">删除</a>
        </Popconfirm>,
        <Popconfirm key="reset" title="确定重置用户密码?" onConfirm={() => handleResetPassword(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>
  )
}