fe_service_ebtp_frontend/src/layouts/BasicLayout.tsx

import ProLayout, {
  MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
} from '@ant-design/pro-layout';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { Result, Button, message } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { ConnectState } from '@/models/connect';
import { getMatchMenu } from '@umijs/route-utils';
import { getMenu } from './services'
import logo from '../assets/logo.svg';
import { getSessionRoleData } from '@/utils/session';

import {
  HomeOutlined,
  DesktopOutlined,
  NotificationOutlined,
  BookOutlined,
  ProfileOutlined,
  CommentOutlined,
  MacCommandOutlined,
  ProjectOutlined,
  PartitionOutlined,
  PayCircleOutlined,
  ContactsOutlined,
  WalletOutlined,
  AppstoreOutlined,
  ShopOutlined,
} from '@ant-design/icons';
import { getAuthority } from '@/utils/authority';
import { JumpToOutside } from '@/utils/CommonUtils';

const menuImgList = [
  {
    key: 'HomeOutlined',
    value: <HomeOutlined />
  },
  {
    key: 'ContactsOutlined',
    value: <ContactsOutlined />
  },
  {
    key: 'DesktopOutlined',
    value: <DesktopOutlined />
  },
  {
    key: 'NotificationOutlined',
    value: <NotificationOutlined />
  },
  {
    key: 'BookOutlined',
    value: <BookOutlined />
  },
  {
    key: 'ProfileOutlined',
    value: <ProfileOutlined />
  },
  {
    key: 'CommentOutlined',
    value: <CommentOutlined />
  },
  {
    key: 'MacCommandOutlined',
    value: <MacCommandOutlined />
  },
  {
    key: 'ProjectOutlined',
    value: <ProjectOutlined />
  },
  {
    key: 'PartitionOutlined',
    value: <PartitionOutlined />
  },
  {
    key: 'PayCircleOutlined',
    value: <PayCircleOutlined />
  },
  {
    key: 'WalletOutlined',
    value: <WalletOutlined />
  },
  {
    key: 'AppstoreOutlined',
    value: <AppstoreOutlined />
  },
  {
    key: 'ShopOutlined',
    value: <ShopOutlined />
  },
]
const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="对不起，您没有访问本页面的权限。"
    extra={
      <Button type="primary">
        {/* <Link to="/user/login">Go Login</Link> */}
        <Link to="/usercooper/login">登录</Link>
      </Button>
    }
  />
);

export interface BasicLayoutProps extends ProLayoutProps {
  breadcrumbNameMap: {
    [path: string]: MenuDataItem;
  };
  route: ProLayoutProps['route'] & {
    authority: string[];
  };
  settings: Settings;
  dispatch: Dispatch;
}
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
  breadcrumbNameMap: {
    [path: string]: MenuDataItem;
  };
};
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
  menuList.map((item) => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : undefined,
    };
    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
  });
const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;
  const [menuData, setMenuData] = React.useState<any>();
  const [menuShow, setmenuShow] = React.useState<any>(false);
  const menuDataRef = useRef<MenuDataItem[]>([]);
  useEffect(() => {
    if (getSessionRoleData()?.roleId) {
      let params = {
        roleIdList: [getSessionRoleData()?.roleId]
      }
      getMenu(params).then(res => {
        if (res.code == 1) {
          setMenuData(res.data || [])
          setmenuShow(true)
        } else {
          message.error("数据错误请联系管理员")
        }
      })
    }
  }, []);

  function menuICon(menuData: any) {
    if (menuData != undefined && menuData != null && menuData.length > 0) {
      let data: any[] = [...menuData]
      let arr3 = data.map((item: any) => {
        menuImgList.forEach((item3: any) => {
          if (item.icon == item3.key) {
            item.icon = item3.value
          }
        })
        return item
      })
      return arr3
    } else {
      return []
    }
  }
  const handleMenuCollapse = (payload: boolean): void => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };
  const authorized = useMemo(
    () =>
      getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
        authority: undefined,
      },
    [location.pathname],
  );
  const { formatMessage } = useIntl();
  return menuShow ? (<ProLayout
    menuDataRender={() => menuICon(menuData)}
    logo={logo}
    // formatMessage={formatMessage}
    onCollapse={handleMenuCollapse}
    onMenuHeaderClick={() => history.push('/')}
    menuItemRender={(menuItemProps, defaultDom) => {
      if (menuItemProps.isUrl || !menuItemProps.path) {
        return defaultDom;
      }
      if (menuItemProps.projectType != undefined) {
        menuItemProps.path = menuItemProps.path + `?projectType=${menuItemProps.projectType}`;
      }
      if (menuItemProps.frame && menuItemProps.frame == 'N') {
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      } else if (menuItemProps.frame && menuItemProps.frame == 'Y') {
        return <Link onClick={() => window.open(menuItemProps.path)} to="#">{defaultDom}</Link>;
      } else if (menuItemProps.frame && menuItemProps.frame == 'S') {
        return <Link onClick={() => window.open(menuItemProps.path + '&mall3_token=' + sessionStorage.getItem('Authorization'))} to="#">{defaultDom}</Link>;
      } else {
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }
    }}
    breadcrumbRender={(routers = []) => [
      {
        path: '/',
        breadcrumbName: formatMessage({ id: 'menu.home' }),
      },
      ...routers,
    ]}
    itemRender={(route, params, routes, paths) => {
      const first = routes.indexOf(route) === 0;
      return first ? (
        <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
      ) : (
        <span>{route.breadcrumbName}</span>
      );
    }}
    rightContentRender={() => <RightContent />}
    postMenuData={(menuData) => {
      menuDataRef.current = menuData || [];
      return menuData || [];
    }}
    {...props}
    {...settings}
  >
    <Authorized authority={authorized!.authority} noMatch={noMatch}>
      <div style={{ width: "100%" }}>
        {children}
      </div>
    </Authorized>
  </ProLayout>) : null
}

export default connect(({ global, settings }: ConnectState) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);