KC-MiddlePlatform/src/pages/platform/_layout.tsx

/*
 * @Author: your name
 * @Date: 2022-01-06 15:25:39
 * @LastEditTime: 2022-07-08 16:29:17
 * @LastEditors: code4eat awesomedema@gmail.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /KC-MiddlePlatform/src/pages/platform/_layout.tsx
 */

import { IRouteComponentProps, useModel, Helmet } from 'umi';
// import { CrownOutlined, UserOutlined, SmileOutlined } from '@ant-design/icons';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import { getPlatformMenu } from '@/service/menu';
import './index.less';
import { TreeItemType } from '@/utils';
import { SpacicalPageParamsType } from '@/typings';
import { useEffect, useState } from 'react';

export default function Layout({ children, location, route, history, match, ...rest }: IRouteComponentProps) {
  const { initialState, setInitialState } = useModel('@@initialState');
  const [openKeys, set_openKeys] = useState<string[]>([]);
  const [selectedKeys, set_selectedKeys] = useState<string[]>([]);
  const [emptyPageContent, set_emptyPageContent] = useState('');
  const isShowMenu = localStorage.getItem('isChildShowMenu');
  // console.log({ children, location, route, history, match});


  return (
    <ProLayout
      style={{
        height: 'calc(100vh - 50px)',
      }}
      logoStyle={{
        display: 'none',
      }}
      location={{

      }}
      siderWidth={isShowMenu == 'true' ? 220 : 0}
      pageTitleRender={false}
      disableContentMargin
      menuItemRender={(item, dom) => {
        return (
          <a
            onClick={() => {
              // console.log('_layout',item);
              set_emptyPageContent(item.description);
              history.push(`${item.path}${item.contentType == 4 ? `?isEmpty=true&menuId=${item.key}` : ''}` || '/');
            }}
          >
            {dom}
          </a>
        )
      }}
      menuProps={{
        openKeys: [...openKeys],
        selectedKeys: [...selectedKeys],
        onSelect: ({ key, keyPath, selectedKeys, domEvent }) => {
          set_selectedKeys(selectedKeys)
        },
        onOpenChange: (keys: string[]) => {
          set_openKeys([...keys]);
        },
      }}
      menu={{
        autoClose: false,
        params: {
          initialState
        },
        request: async () => {
          if (initialState) {
            const systemId = initialState.currentSelectedSys?.menuId;
            if (systemId) {
              const menuData = await getPlatformMenu(Number(systemId));
              // console.log({menuData});
              if (menuData.length > 0) {
                set_openKeys([menuData[0].key]);
                set_selectedKeys([menuData[0].key]);
              }

              const getVFromTree = (data: TreeItemType[], key: string) => {
                let result: SpacicalPageParamsType[] = [];
                function looper(data: TreeItemType[], key: string) {
                  data.forEach((t) => {
                    if (t[key] && t[key] != 0) {
                      //非一般页面
                      result.push({
                        contentType: t[key],
                        path: t['path'],
                        reportId: t['reportId'],
                        url: t['youshuUrl'],
                      });
                    }
                    if (t.children && t.children.length > 0) {
                      looper(t.children, key);
                    }
                  });
                }
                looper(data, key);
                return result;
              };

              const _menu = getVFromTree(menuData, 'contentType');

              setInitialState((t) => ({ ...t, spacicalPageParamsType: _menu }));

              return [...menuData, {
                name: 'SQL编辑器',
                path: '/platform/sqlEditer'
              }];


            }
            return [];
          }
          return [];
        },
      }}
      onPageChange={(location) => { }}
      layout="side"
      headerRender={false}
      navTheme="light"
    >
      {
        location.query.isEmpty == 'true' && (
          <div style={{ textAlign: 'center', paddingTop: 100 }}>
            <h1>{emptyPageContent}</h1>
          </div>
        )
      }
      {
        location.query.isEmpty != 'true' && (
          <PageContainer
            className="kcmpPageContainer"
            header={{
              title: false,
            }}
            style={{
              margin: 0,
            }}
          >

            <Helmet>
              <title>精益管理中台</title>
            </Helmet>

            <div className="page" style={{ height: 'calc(100vh - 98px)', overflowY: 'scroll' }}>
              {children}
            </div>
          </PageContainer>
        )
      }
    </ProLayout>
  );
}