pc-admin/src/pages/System/Role/Edit.jsx

import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, notification } from 'antd';
import request from '@/utils/request';
import RoleForm from './components/Form';
import RoleMenu from './components/Menu';

export default (props) => {
  const { id } = props.location.query;
  const [loading, setLoading] = useState(false);
  const [saveLoading, setSaveLoading] = useState(false);
  const [role, setRole] = useState({});
  // 数据库授权菜单
  const [roleMenu, setRoleMenu] = useState([]);
  // 待保存菜单
  const [menuData, setMenuData] = useState([]);

  const handleFormChange = (newRole) => {
    setRole(newRole);
  };

  const handleMenuChange = (menuList) => {
    setMenuData(menuList);
  };

  const handleMenuSave = () => {
    const data = menuData.map((m) => ({ roleId: id, menuId: m.menuId }));
    setSaveLoading(true);
    request(`/role-menu/${id}`, { method: 'post', data })
      .then(() => {
        setRoleMenu(data);
        setMenuData([]);
        setSaveLoading(false);
        notification.success({ message: '操作成功' });
      })
      .catch((e) => {
        setSaveLoading(false);
        notification.error({ message: e.message });
      });
  };

  useEffect(() => {
    if (id) {
      setLoading(true);
      request(`/role/${id}`)
        .then((res) => {
          setRole(res);
          setRoleMenu(res.menuList || []);
          setMenuData([]);
          setLoading(false);
        })
        .catch((e) => {
          setLoading(false);
          notification.error({ message: e.message });
        });
    }
  }, [id]);

  return (
    <PageContainer
      header={{
        extra: [
          <Button key="1" onClick={() => history.go('-1')}>
            返回
          </Button>,
        ],
      }}
    >
      <Card style={{ width: '100%' }} loading={loading}>
        <RoleForm role={role} onChange={handleFormChange} />
      </Card>

      <Card
        title="授权菜单"
        style={{ width: '100%', marginTop: '2em' }}
        extra={
          <Button
            type="primary"
            disabled={!menuData.length}
            loading={saveLoading}
            onClick={handleMenuSave}
          >
            保存
          </Button>
        }
      >
        <RoleMenu roleMenu={roleMenu} onChange={handleMenuChange} />
      </Card>
    </PageContainer>
  );
};