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, connect, Dispatch, history, Outlet, useLocation, useKeepOutlets } from '@umijs/max';
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, getSessionUserData } from '@/utils/session';

import {
  HomeOutlined,
  DesktopOutlined,
  NotificationOutlined,
  BookOutlined,
  ProfileOutlined,
  CommentOutlined,
  MacCommandOutlined,
  ProjectOutlined,
  PartitionOutlined,
  PayCircleOutlined,
  ContactsOutlined,
  WalletOutlined,
  AppstoreOutlined,
  ShopOutlined,
  FundProjectionScreenOutlined,
  PlaySquareOutlined,
  BankOutlined,
  IdcardOutlined,
} from '@ant-design/icons';

const menuIconMap = {
  "HomeOutlined": <HomeOutlined />,
  "ContactsOutlined": <ContactsOutlined />,
  "DesktopOutlined": <DesktopOutlined />,
  "NotificationOutlined": <NotificationOutlined />,
  "BookOutlined": <BookOutlined />,
  "ProfileOutlined": <ProfileOutlined />,
  "CommentOutlined": <CommentOutlined />,
  "MacCommandOutlined": <MacCommandOutlined />,
  "ProjectOutlined": <ProjectOutlined />,
  "PartitionOutlined": <PartitionOutlined />,
  "PayCircleOutlined": <PayCircleOutlined />,
  "WalletOutlined": <WalletOutlined />,
  "AppstoreOutlined": <AppstoreOutlined />,
  "ShopOutlined": <ShopOutlined />,
  "FundProjectionScreenOutlined": <FundProjectionScreenOutlined />,
  "PlaySquareOutlined": <PlaySquareOutlined />,
  "BankOutlined": <BankOutlined />,
  "IdcardOutlined": <IdcardOutlined />,
}

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,
    settings,
  } = props;
  const location = useLocation()
  const [menuData, setMenuData] = React.useState<any>();
  const [menuShow, setmenuShow] = React.useState<any>(false);
  const menuDataRef = useRef<MenuDataItem[]>([]);
  const mall3_token: any = sessionStorage.getItem('Authorization');//当前登录token
  const userData: any = getSessionUserData();//当前登录人信息
  const children = useKeepOutlets();
  useEffect(() => {
    if (getSessionRoleData()?.roleId) {
      // let params = {
      //   roleIdList: [getSessionRoleData()?.roleId]
      // }
      const res = {
        "code": "1",
        "success": true,
        "message": "操作成功",
        "data": [
          {
            "menuId": "2",
            "path": "",
            "name": "我的工作台",
            "icon": "DesktopOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/workbench/files",
                "name": "共享文档下载",
                "frame": "N"
              },
              {
                "path": "/SystemMessage/message",
                "name": "系统消息",
                "frame": "N"
              },
              {
                "path": "/api/auth/oauth/authorize?response_type\u003dcode\u0026client_id\u003d3FjMVIzt\u0026redirect_uri\u003dhttps://10.242.31.158:18023/Expertlibraryworkbench/MyExpertHome/Extract?proxyCompanyNo\u003d{organizationId}\u0026sign\u003dprocure\u0026urlSign\u003dSubagenT\u0026mall3_token\u003d{mall3_token}",
                "name": "代理机构信息管理",
                "frame": "S"
              },
              {
                "path": "/api/auth/oauth/authorize?response_type\u003dcode\u0026client_id\u003dCOsHJydx\u0026redirect_uri\u003dhttps://uat-uscm.chinaunicom.cn:8631/redirect?page\u003dcustomerservice/support/conversation/index\u0026mall3_token\u003d{mall3_token}",
                "name": "我的客服",
                "frame": "S"
              },
              {
                "path": "/Lowcode/LowcodeRedirect",
                "name": "我的服务单",
                "frame": "Y"
              },
              {
                "path": "/api/auth/oauth/authorize?response_type\u003dcode\u0026client_id\u003ds3FXwGQh\u0026redirect_uri\u003dhttps://uat-uscm.chinaunicom.cn:18024/supplierInfo/redirect?page\u003d/supplier-info-ordinary\u0026mall3_token\u003d{mall3_token}",
                "name": "智企查",
                "frame": "S"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "3",
            "path": "",
            "name": "通知公告",
            "icon": "NotificationOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/notice/noticeList",
                "name": "通知公告查看",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "41",
            "path": "",
            "name": "分派项目管理",
            "icon": "BookOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Project/EntrustAssign/Operator",
                "name": "分派给我的项目",
                "frame": "N"
              },
              {
                "path": "/Project/EntrustWithdraw",
                "name": "委托撤回记录",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1000001",
            "path": "",
            "name": "招标项目管理",
            "icon": "ProfileOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Bid/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1000006",
            "path": "Negotiation",
            "name": "谈判项目管理",
            "icon": "CommentOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Negotiation/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1843567845937700866",
            "path": "DirectProc",
            "name": "直接采购管理",
            "icon": "SelectOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/DirectProc/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "100009",
            "path": "ComparisonProc",
            "name": "询比采购管理",
            "icon": "PartitionOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/ComparisonProc/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1000008",
            "path": "Inquiry",
            "name": "询价项目管理",
            "icon": "ProjectOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Inquiry/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1000007",
            "path": "Recruit",
            "name": "招募项目管理",
            "icon": "MacCommandOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Recruit/Manage",
                "name": "项目管理",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "11111111",
            "path": "Finance",
            "name": "财务管理",
            "icon": "PayCircleOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Finance/ProjectManager/RevenueRecognition",
                "name": "招标收入确认",
                "frame": "N"
              },
              {
                "path": "/Finance/EnsureAmount",
                "name": "投标保证金查询",
                "frame": "N"
              },
              {
                "path": "/Finance/EnsureAmountRefund",
                "name": "保证金退还",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "11",
            "path": "Invoice",
            "name": "发票管理",
            "icon": "WalletOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/Invoice/Manager",
                "name": "发票列表",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1565509326829727746",
            "path": "ExpertManage",
            "name": "专家管理",
            "icon": "IdcardOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/api/auth/oauth/authorize?response_type\u003dcode\u0026client_id\u003d3FjMVIzt\u0026redirect_uri\u003dhttps://10.242.31.158:18023/Expertlibraryworkbench/MyExpertHome/Extract?proxyCompanyNo\u003d{organizationId}\u0026sign\u003dprocure\u0026mall3_token\u003d{mall3_token}",
                "name": "专家抽取",
                "frame": "S"
              },
              {
                "path": "/api/auth/oauth/authorize?response_type\u003dcode\u0026client_id\u003d3FjMVIzt\u0026redirect_uri\u003dhttps://10.242.31.158:18023/Expertlibraryworkbench/MyExpertHome/Extract?proxyCompanyNo\u003d{organizationId}\u0026sign\u003dprocure\u0026urlSign\u003dEvaluate\u0026mall3_token\u003d{mall3_token}",
                "name": "专家评价",
                "frame": "S"
              },
              {
                "path": "/ExpertInfo/ExpertInformationManage",
                "name": "专家信息管理",
                "frame": "N"
              },
              {
                "path": "/ExpertInfo/ExpertExtractionAvoidance",
                "name": "专家抽取回避",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1565574276328947714",
            "path": "VideoMonitor",
            "name": "视频监控查询",
            "icon": "PlaySquareOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/HistoryVideo",
                "name": "历史视频上传列表",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1722061270189662209",
            "path": "PurchaseReOffer",
            "name": "采购复盘与检查",
            "icon": "BookOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/PurchaseReOffer",
                "name": "采购复盘与检查表",
                "frame": "N"
              }
            ],
            "feignFlag": null
          },
          {
            "menuId": "1767358998249476098",
            "path": "UnbalancedBid",
            "name": "不均衡报价分析",
            "icon": "BookOutlined",
            "menuScope": "EBTP",
            "menuOu": null,
            "isTop": 0,
            "children": [
              {
                "path": "/UnbalancedBidList",
                "name": "不均衡报价分析表",
                "frame": "N"
              }
            ],
            "feignFlag": null
          }
        ]
      }
      setMenuData(res.data || [])
      if (dispatch) {
        dispatch({
          type: 'user/saveMenuData',
          payload: res.data || [],
        });
      }
      setmenuShow(true)
      // getMenu(params).then(res => {
      //   if (res.code == 1) {
      //     setMenuData(res.data || [])
      //     setmenuShow(true)
      //   } else {
      //     message.error("数据错误请联系管理员")
      //   }
      // })
    }
  }, []);

  const menuICon = (menus: any[]): any[] =>
    menus && menus.map(({ icon, ...item }) => ({
      ...item,
      icon: icon && menuIconMap[icon as string],
    }));

  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],
  );
  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') {
        const initPath = menuItemProps.path;
        const rePath = initPath?.replace("{mall3_token}", mall3_token).replace("{loginName}", userData.loginName).replace("{organizationId}", userData.organizationId);
        return <Link onClick={() => window.open(rePath)} to="#">{defaultDom}</Link>;
      } else {
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }
    }}
    breadcrumbRender={(routers = []) => [
      {
        path: '/',
        breadcrumbName: '首页',
      },
      ...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 || [];
    }}
    contentStyle={{
      backgroundColor: '#F5F7FA',
    }}
    {...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);