BSFrame/src/Project/pages/PlatformMenu/index.js

import React, { useState, useEffect } from 'react';
import { message } from 'antd';
import menuStyle from './moduleMenuStyle.less';
import { connect } from 'umi';
// import {
//   UnityAction,
//   getGlobalData,
//   setGlobalData,
// } from '@/utils/utils';
// import router from 'umi/router';
// import {
//   platformPageConfig,
//   BuildNodeCode,
//   OpsNodeCode,
// } from '@/utils/constants';
const noIcon = require('@/Project/assets/platformMenu/noIcon.png');
const newIcon = require('@/Project/assets/platformMenu/ICON/newModel.png');

function PlatformMenu(props) {
  const {
    dispatch,
    access,
    initState,
    // location: { query = {} },
  } = props;
  console.log(props);
  let query = {};
  const [curMenu, setCurMenu] = useState([]);
  useEffect(() => {
    dispatch({
      type: 'menu/getPlatformMenu',
      callback: (menus) => {
        initMenu(menus);
      },
      payload: { version: 2 },
    });
    // dispatch({
    //   type: 'user/fetchCurrent',
    // });
  }, []);

  const getIcon = (item) => {
    if (item.active && item.Icon) return item.Icon;
    let current = find((icon) => icon.code === item.Code)?.iconPath;
    if (current) return current;
    return newIcon;
  };

  const initMenu = (menus) => {
    console.log(access);
    let newMenus = menus.filter((item) => {
      if (item.Type == 1 && access[item.Code]) {
        item.name = item.Name;
        item.active =
          item.children != undefined ||
          item.WebPath != '' ||
          item.UnityPath != '';

        item.iconPath = getIcon(item);
        return item;
      }
    });
    newMenus.push({
      name: '新增功能',
      ID: '新增功能',
      Code: '',
      Type: 1,
      iconPath: require('@/Project/assets/platformMenu/ICON/newModel.png'),
      WebPath: '',
      UnityPath: '',
      active: false,
    });
    setCurMenu(newMenus);
  };

  const initMenu1 = (parent, permission) => {
    console.log(parent, permission);
    if (parent?.children) {
      let menu = parent.children;
      for (let i = 0; i < menu.length; i++) {
        let element = menu[i];
        if (element.Type != 1 || !permission[element.Code]) {
          menu.splice(i, 1);
          i--; //i
          continue;
        }
        element.name = element.Name;
        element.iconPath = element.Icon || noIcon;
        element.active =
          element.children != undefined ||
          element.WebPath != '' ||
          element.UnityPath != '';
        if (!element.active) continue;
      }
      menu = menu.concat([
        {
          name: '新增功能',
          ID: '新增功能',
          Code: '',
          Type: 1,
          iconPath: require('@/Project/assets/platformMenu/newModel.png'),
          WebPath: '',
          UnityPath: '',
          active: false,
        },
      ]);
      setCurMenu(menu);
    }
  };
  const handleMenuClick = (element) => {
    if (element.Name == '运营平台' || element.Name == '建设平台') {
      if (query.unity == undefined) {
        message.error('请使用客户端进入');
        return;
      }
      const subModule = element.Name == '运营平台' ? 2 : 1;
      // const forbiddenModel = getGlobalData('forbiddenModel');
      // 设置全局变量
      // setGlobalData('curApp', subModule);
      // UnityAction.sendMsg('EnterApp', element.Code);
      // PageAction.sendMsg('HTML_changePage', {
      //   code: 'projectSelect',
      //   urlParams: {
      //     subModule,
      //     forbiddenModel,
      //   },
      // });
      // PageAction.sendMsg('HTML_changeState', {
      //   curMenu: null,
      // });
    } else {
      //网页端跳转页面
      if (query.unity == undefined) {
        let curHref = window.location.href;
        let sign = '?';
        if (curHref.indexOf('?') != -1) {
          sign = '&';
        }
        if (element.WebPath == undefined) return;
        let isUrl =
          element.WebPath.indexOf('http') != -1 ||
          element.WebPath.indexOf('https') != -1;
        // console.log(isUrl);
        if (isUrl)
          window.location.href =
            element.WebPath + sign + 'JWT-TOKEN=' + localStorage['JWT-TOKEN'];
      } else {
        // UnityAction.sendMsg('EnterApp', element.Code);
      }
    }
  };
  const grayIcon = [
    {
      code: 'func-01-point-bom',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-point-bom.png'),
      name: 'BOM清单',
    },
    {
      code: 'func-01-build',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-build.png'),
      name: '建设平台',
    },
    {
      code: 'func-01-ops',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-ops.png'),
      name: '运营平台',
    },
    {
      code: 'func-06-ManDay',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-06-ManDay.png'),
      name: '人日系统',
    },
    {
      code: 'func-06-globalCockpit',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-06-globalCockpit.png'),
      name: '全局驾驶舱',
    },
    {
      code: 'func-01-DirectDrinking',
      iconPath: require('@/Project/assets/platformMenu/ICON/func-01-DirectDrinking.png'),
      name: '直饮水平台',
    },
    {
      code: '',
      iconPath: require('@/Project/assets/platformMenu/ICON/newModel.png'),
      name: '新增功能',
    },
  ];
  const getProjectSelectionUrl = (subModule) => {
    // TODO 获取全局变量forbiddenModel
    // const forbiddenModel = getGlobalData('forbiddenModel');
    // return `#/smart-water/platform/projectSelect?subModule=${subModule}&forbiddenModel=${forbiddenModel}`;
  };

  // return <Menu onClickMenu={menu => handleMenuClick(menu)} menuData={curMenu}></Menu>;
  return (
    <div className={menuStyle.background}>
      <div className={menuStyle.menuContent}>
        <div className={menuStyle.wrap}>
          {curMenu.map((item) => (
            <div className={menuStyle.item}>
              <div
                onClick={() => handleMenuClick(item)}
                className={menuStyle.menu}
                style={item.active ? null : { cursor: 'not-allowed' }}
              >
                <img
                  className={menuStyle.pic}
                  src={item.iconPath}
                  style={item.active ? {} : { cursor: 'not-allowed' }}
                />
              </div>
              <div
                style={{
                  marginTop: '22px',
                  width: '152px',
                  textAlign: 'center',
                }}
              >
                <span
                  onClick={() => item.click?.(item)}
                  className={menuStyle.menuFriName}
                  style={
                    item.active
                      ? {}
                      : { color: '#6081B2', cursor: 'not-allowed' }
                  }
                >
                  {item.name}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
export default connect(({ loading }) => ({
  // waterMenuData: menu.waterMenuData,
  // loading: loading.models.menu,
  // currentUser: user.currentUser,
  // Permission: user.currentUser.Permission,
}))(PlatformMenu);