pc-admin/src/pages/person/index.jsx

import React, { useState, useEffect, useRef } from 'react';
import {
  Button,
  Popconfirm,
  Modal,
  Form,
  Input,
  message,
  Select,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable';
import md5 from 'md5';
import {
  getUserList,
  addUser,
  deleteUser,
  updateUser,
  getUserDetail,
} from '@/services/user';
import './index.less';

const FormItem = Form.Item;
const { Option } = Select;
export default (props) => {
  //编辑弹窗
  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
  const [form] = Form.useForm();
  const [editModal, setEditModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [userId, setuserId] = useState();

  //列表数据
  const actionRef = useRef();

  // 编辑弹窗的表单提交
  const Submit = (values) => {
    const newData = { ...values };
    if (!newData.sex && newData.sex !== 0) {
      newData.sex = 1;
    }
    setLoading(true);
    if (!/^1[0-9]{10}$/.test(newData.phone)) {
      message.warning('请输入正确的十一位手机号');
      setLoading(false);
      return false;
    }
    newData.password=md5(newData.password);
    if (userId) {
      updateUser(userId, newData).then(() => {
        setLoading(false);
        message.success(`修改成功`);
        onCancel();
        actionRef.current.reload();
      }).catch((err) => {
        setLoading(false);
        console.log(err.message)
      });
    } else {
      addUser(newData)
        .then(() => {
          setLoading(false);
          message.success(`保存成功`);
          onCancel();
          actionRef.current.reload();
        })
        .catch((err) => {
          setLoading(false);
          message.error(err.message || err);
        });
    }
  };
  //表单点击取消按钮
  const onCancel = () => {
    setuserId();
    form.resetFields();
    setEditModal(false);
  };

  // 列表点击编辑按钮
  const handleEdit = (val) => {
    setuserId(val.userId);
    setEditModal(true);
  };
  //列表点击删除按钮
  const handleDelete = (id) => {
    deleteUser(id)
      .then(() => {
        message.success('删除成功');
        actionRef.current.reload();
      })
      .catch((err) => {
        console.log(err.message)
      });
  };
  //列表切换人员状态方法
  const handleOK = (record, data) => {
    const title = record.status
      ? '您确定要将该人员状态变更为禁用吗? 禁用后该人员将不能登录'
      : '您确定要将该人员状态变更为启用吗? 启用后该人员可以登录!';
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        updateUser(record.userId, { ...record, status: record.status === 1 ? 0 : 1 })
          .then((res) => {
            message.success('操作成功');
            actionRef.current.reload();
          })
          .catch((err) => {
            console.log(err.message)
          });
      },
    });
  };
  useEffect(() => {
    if (userId) {
      getUserDetail(userId).then((res) => {
        form.setFieldsValue(res);
      }).catch((err) => {
        console.log(err.message)
      });
    } else {
      form.resetFields();
    }
  }, [userId]);

  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
      新增
    </Button>,
  ];
  const columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      search:false
    },
    {
      title: '角色',
      dataIndex: 'roleName',
      key: 'roleName',
      render: (_, record) => {
        return record.roleName === 'auditor' ? '审核员' : '证件发放员';
      },
      search:false
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      search: false,
      render: (_, record) => {
        return record.status === 1 ? '启用' : '未启用';
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => handleOK(record)}>
          {record.status === 0 ? '启用' : '禁用'}
        </Button>,
        <Button style={{ padding: 0 }} type="link" key={2} onClick={() => handleEdit(record)}>
          编辑
        </Button>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.userId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper>
      <PageTable
        request={getUserList}
        columns={columns}
        actionRef={actionRef}
        rowKey="userId"
        options={false}
        toolBarRender={actions}
      />
      <Modal
        forceRender
        title={userId ? '人员编辑' : '人员新增'}
        visible={editModal}
        onCancel={onCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={Submit} form={form}>
          <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="手机号" name="phone" rules={[{ required: true, message: '请输入' }]}>
            <Input maxLength="11" placeholder="请输入" />
          </FormItem>
          <FormItem label="登录账号" name="loginName" rules={[{ required: true, message: '请输入登录账号' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="密码" name="password" rules={[{ required: true, message: '请输入登录密码' }]}>
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem label="角色" name="roleName" rules={[{ required: true, message: '请选择' }]}>
            <Select placeholder="请选择角色">
              <Option value='manager'>管理员</Option>
              <Option value='auditor'>审核员</Option>
              <Option value='maker'>证件发放员</Option>
            </Select>
          </FormItem>
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={onCancel}>
              取消
            </Button>
            <Button
              type="primary"
              loading={loading}
              htmlType="Submit"
              style={{ marginLeft: '4em' }}
            >
              确认
            </Button>
          </FormItem>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};