machinery-admin/src/pages/Machinery/Person/index.jsx

import React, { useState, useEffect, useRef } from 'react';
import {
  Button,
  Popconfirm,
  Modal,
  Form,
  message,
  Row,
  Col,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {
  getUserList,
  deleteUser,
  updateUser,
  getUserDetail,
} from '@/services/user';
import { getUserRoleList } from '@/services/userRole';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable';
import moment from 'moment';
import './index.less';
import OrgTree from './components/OrgTree';
import UserModal from './components/UserModal';
import RoleModel from './components/RoleModel';

const formatterTime = (val) => {
  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
};
export default (props) => {
  //编辑弹窗
  const [form] = Form.useForm();
  const [editModal, setEditModal] = useState(false);
  const [userId, setuserId] = useState();
  const [cooperativeList, setCooperativeList] = useState([]);

  const [editRoleModal, setEditRoleModal] = useState(false);
  const [rUserId, setRUserId] = useState();
  const [currentCheckbox, setCurrentCheckbox] = useState();
  //列表数据
  const actionRef = useRef();
  const [orgId, setOrgId] = useState();

  //表单点击取消按钮
  const onCancel = () => {
    setuserId();
    form.resetFields();
    setEditModal(false);
  };

  // 列表点击编辑按钮
  const handleEdit = (val) => {
    setuserId(val.userId);
    if (!userId && orgId) {
      form.setFieldsValue({ orgId: orgId })
    }
    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);
          });
      },
    });
  };
  //点击授权角色方法
  const handleRole = (val) => {
    setRUserId(val.userId);
    getUserRoleList({ user_id: val.userId })
      .then((res) => {
        if (res.length !== 0) {
          setCurrentCheckbox(res.map((item) => item.roleId));
        }
      })
      .catch((err) => {
        console.log(err.message);
      });
    setEditRoleModal(true);
  };

  //监控
  useEffect(() => {
    if (userId) {
      getUserDetail(userId)
        .then((res) => {
          if (res.orgId === '-1') {
            form.setFieldsValue({ ...res, orgId: cooperativeList[0].orgId });
          } else {
            form.setFieldsValue(res);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    } else {
      if (orgId) {
        form.setFieldsValue({ orgId: orgId })
      } else {
        form.resetFields();
      }
    }
  }, [orgId, userId]);

  const actions = () => [
    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={handleEdit}>
      新增
    </Button>,
  ];
  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'nickName',
      search: false,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 80,
      render: (_, record) => {
        return record.sex === 1 ? '男' : record.sex === 0 ? '女' : '未知';
      },
      search: false,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: 120,
    },
    {
      title: '注册时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: formatterTime,
      search: false,
      width: 80,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      search: false,
      render: (_, record) => {
        return record.status === 1 ? '启用' : '未启用';
      },
    },
    {
      title: '管理员',
      dataIndex: 'isOrgManager',
      key: 'isOrgManager',
      width: 80,
      search: false,
      render: (_, record) => {
        return record.isOrgManager && record.isOrgManager == 1 ? '管理员' : '非管理员';
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 160,
      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>,
        <Button style={{ padding: 0 }} type="link" key={3} onClick={() => handleRole(record)}>
          授权角色
        </Button>,
        <Popconfirm
          key={4}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.userId)}
          okText="确定"
          cancelText="取消"
        >
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper>
      <Row gutter={16}>
        <Col span={6}>
          <OrgTree setOrgId={setOrgId} setCooperativeList={setCooperativeList} />
        </Col>
        <Col span={18}>
          <PageTable
            request={getUserList}
            params={{ org_id: orgId }}
            // expfunc={exportPersonList}
            columns={columns}
            actionRef={actionRef}
            rowKey="userId"
            options={false}
            toolBarRender={actions}
            scroll={{ x: 1000 }}
          />
        </Col>
      </Row>
      <UserModal editModal={editModal} onCancel={onCancel} actionRef={actionRef} form={form} orgId={orgId} userId={userId} />
      <RoleModel rUserId={rUserId} setRUserId={setRUserId} currentCheckbox={currentCheckbox} setCurrentCheckbox={setCurrentCheckbox} editRoleModal={editRoleModal} setEditRoleModal={setEditRoleModal} />
    </PageHeaderWrapper>
  );
};