效果图:
完整代码:
import React, { useRef, useState } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useAccess, Access, FormattedMessage } from 'umi';
import { ActionType, ProColumns } from '@ant-design/pro-table/lib/typing';
import { Button, Space, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons/lib';
import { sysMenuTree } from '@/services/intelligent-operation-platform/sysApi';
import SysMenuEdit from './components/Edit';
const SysMenu: React.FC = () => {
/** 权限 */
const access = useAccess();
/** ProTable的ref */
const actionRef = useRef<ActionType>();
/** 编辑弹窗显隐 */
const [editModalVisible, handle_editModalVisible] = useState<boolean>(false);
/** 当前选中行数据 */
const [currentRow, setCurrentRow] = useState<API.SysMenuItem>({});
/** 列 */
const columns: ProColumns<API.SysMenuItem>[] = [
{
title: '名称',
dataIndex: 'name',
},
{
title: '图标',
dataIndex: 'icon',
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateTime',
},
{
title: '类型',
dataIndex: 'type',
renderFormItem: (_, { defaultRender }) => {
return defaultRender(_);
},
render: (_, record) => (
<Space>
{
record.type === 0 ?