top-block-game-frontend/src/pages/System/Role/List/index.tsx

import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getRoleList, deleteRole, createRole, updateRole } from '@/services/system/role';
import { fetchTableData } from '@/utils/table';
import DeleteButton from '@/components/Table/DeleteButton';
import AddRoleModal from '../components/AddRoleModal';
import EditRoleModal from '../components/EditRoleModal';
import AuthPermissionsDrawer from '../components/AuthPermissionsDrawer';
import { Access, useAccess } from 'umi';

const RoleList = () => {
  const tableRef = useRef<ActionType>();
  const access = useAccess();

  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditModal, setIsEditModal] = useState(false);
  const [modalData, setModalData] = useState({});
  const [rowData, setRowData] = useState({});

  const handleEdit = (row: any) => {
    setModalData(row);
    setIsEditModal(true);
  };
  const handleAuth = (row: any) => {
    setRowData(row);
    setIsDrawerVisible(true);
  };
  const handleDelete = async (id: any) => {
    await deleteRole({ id: id });
    tableRef.current?.reload();
  };

  const columns: ProColumns<any>[] = [
    {
      title: '角色名称',
      dataIndex: 'role_name',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 180,
      render: (_, row) => [
        <Access accessible={access.canShowButton('角色编辑')}>
          <a
            key="edit"
            onClick={() => {
              handleEdit(row);
            }}
          >
            编辑
          </a>
        </Access>,
        <Access accessible={access.canShowButton('角色授权')}>
          <a
            key="auth"
            onClick={() => {
              handleAuth(row);
            }}
          >
            授权
          </a>
        </Access>,
        <Access accessible={access.canShowButton('角色删除')}>
          <DeleteButton
            key="delete"
            onDelete={() => {
              handleDelete(row.id);
            }}
          />
        </Access>,
      ],
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        search={false}
        toolBarActions={[
          {
            type: 'add',
            permission: '角色添加',
            onConfirm: () => {
              setIsModalVisible(true);
            },
          },
        ]}
        actionRef={tableRef}
        request={async (params) => {
          const res = await fetchTableData(getRoleList, params);
          return res;
        }}
      />
      <AddRoleModal
        visible={isModalVisible}
        onCancel={function () {
          setIsModalVisible(false);
        }}
        onOk={async function (val): Promise<void> {
          await createRole(val);
          setIsModalVisible(false);
          tableRef.current?.reload();
        }}
      />
      <EditRoleModal
        visible={isEditModal}
        editModalData={modalData}
        onCancel={function () {
          setIsEditModal(false);
        }}
        onOk={async function (val): Promise<void> {
          await updateRole(val);
          setIsEditModal(false);
          tableRef.current?.reload();
        }}
      />
      <AuthPermissionsDrawer
        visible={isDrawerVisible}
        rowData={rowData}
        onCancel={function () {
          setIsDrawerVisible(false);
        }}
        onOk={async function (val) {
          await updateRole(val);
          setIsDrawerVisible(false);
        }}
      />
    </div>
  );
};

export default RoleList;