forgeplus-react/src/forge/Head/Header.js

import React, { Component } from 'react';
import AccountProfile from "../../modules/user/AccountProfile";
import { getImageUrl } from 'educoder'
import axios from 'axios';
import cookie from 'react-cookies';
import { notification , Dropdown , Menu , Icon } from 'antd';
import { Link } from 'react-router-dom';

import LoginDialog from '../../modules/login/LoginDialog';
import { getOrzCompanyList } from '../../forge/Information/api';

import AddProjectModal from './AddProjectModal';
import '../../modules/tpm/TPMIndex.css';
import CheckProfile from '../Component/ProfileModal/Profile';

import './header.scss';
// TODO 这部分脚本从公共脚本中直接调用
const { SubMenu } = Menu

window._header_componentHandler = null;
// 非trustie链接则新开页跳转
const str = ['www.trustie.net','forgeplus.trustie.net','forum.trustie.net','testforgeplus.trustie.net']
class NewHeader extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Addcoursestypes: false,
      tojoinitemtype: false,
      tojoinclasstitle: undefined,
      rolearr: ["", ""],
      Checkboxteacherchecked: false,
      Checkboxstudentchecked: false,
      Checkboxteachingchecked: false,
      Checkboxteachertype: false,
      Checkboxteachingtype: false,
      code_notice: false,
      RadioGroupvalue: undefined,
      submitapplications: false,
      isRender: false,
      showTrial: false,
      occupation: 0,
      mydisplay: false,
      settings: null,
      visiblemyss: false,
      openSearch:false,
      visible:false,  //浮动消息框展示控制
      showSubMenu: false,
      zoneList: [], // 专区列表
      companyList:[] //已开通工作台列表
    }
  }
  componentDidMount() {
    // 用personal判断是否需要再次请求settings接口，解决登录注册之后无设置按钮的情况
    let settings = localStorage.chromesetting&&JSON.parse(localStorage.chromesetting);
    if(settings){
      this.setState({
        settings
      })
    }
    window._header_componentHandler = this;

    this.getZoneList(settings && settings.common.zone +'/api')
    this.getComlist();

    try {
      window.sessionStorage.setItem("yslgeturls", JSON.stringify(window.location.href))
    } catch (e) {}
  }


  openNotification = (messge) => {
    notification.open({
      message: "提示",
      description:
        messge,
    });
  };

  componentWillReceiveProps(newProps, oldProps) {
    this.setState({
      user: newProps.user
    })
    // if(!newProps.user ||(newProps.user && !newProps.user.login)){
    //   cookie.remove("login");
    // }
  }

  educoderlogin = () => {
    //登录账号
    if(window.location.pathname === "/"){
      window.location.href="/login";
    }else{
      this.setState({
        isRender: true
      })
    }
  }
  educoderloginysl = () => {
    //退出账号时清除登录页面的下次自动登录（用户再次打开登录页面时下次自动登录框不勾选）
    cookie.remove("autologin");
    cookie.remove("login");
    //退出账号
    var url = `/accounts/logout.json`;
    axios.get((url)).then((result) => {
      if (result) {
        this.props.history.push("/login");
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  hideAddcoursestypes = () => {
    this.setState({
      Addcoursestypes: false
    })
  };
  HideAddcoursestypess = (i) => {
    this.setState({
      Addcoursestypes: false,
      mydisplay: true,
      occupation: i,
    })
  };
  ModalCancelsy = () => {
    this.setState({
      mydisplay: false,
    })
  };

  // 关闭
  cancelModulationModels = () => {
    this.setState({ isRenders: false })
  }

  //修改登录方法
  Modifyloginvalue = () => {
    this.setState({
      isRender: false,
    })
  }

  hideAccountProfile = () => {
    this.setState({
      AccountProfiletype: false
    })
  };
  //获取数据为空的时候
  gettablogourlnull = () => {
    this.setState({
      settings: undefined
    });
    var link = document.createElement('link'),
      oldLink = document.getElementById('dynamic-favicon');
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
    link.href = "/react/build/./favicon.ico";
    if (oldLink) {
      document.head.removeChild(oldLink);
    }
    document.head.appendChild(link);
  };

  //获取数据的时候
  gettablogourldata = (response) => {
    document.title = response.data.setting.name;
    var link = document.createElement('link'),
      oldLink = document.getElementById('dynamic-favicon');
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
    link.href = '/' + response.data.setting.tab_logo_url;
    if (oldLink) {
      document.head.removeChild(oldLink);
    }
    document.head.appendChild(link);
  }

  handleVisibleChanges = (boll) => {
    this.setState({
      visiblemyss: boll,
    })
  }

  geturlsdata = () => {
    let url = "/setting.json";
    axios.get(url).then((response) => {
      if (response && response.data) {
        this.setState({ settings: response.data.setting });
        localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
        localStorage.setItem('chromesettingresponse', JSON.stringify(response));
      } else {
        this.gettablogourlnull();
      }
    }).catch((error) => {
      this.gettablogourlnull();
    });
  }

  getZoneList = (httpUrl) =>{
    const url = `${httpUrl}/zone/open/list`
    axios.get(url).then((response) => {
      if (response && response.data && response.data.data && response.data.data.length > 0) {
        let newArray = [];
        response.data.data.forEach((e, i) => {
          newArray[i] = {
            name: e.name,
            link: `/zone/${e.key}`
          }
        });
        this.setState({ zoneList: newArray })
      } else {
      }
    }).catch((error) => {
    });
  }

  matchpaths = (url) => {
    const { match } = this.props;
    const isDev = window.location.port == 3007;
    const isdev2= isDev ?'https://testforgeplus.trustie.net':`https://${window.location.hostname}`;
    let str = "";
    if(url.indexOf("http")>-1){
      str = isdev2+match.url;
    }else{
      str = match.path;
    }
    if (url && (str === url || (str === url+'/'))) {
      return true
    }else {
      return false
    }
  }

  matchZone = () => {
    return window.location.href.includes('/zone/')
  }
  
  checkProfile=(url)=>{
    const { showCompeleteDialog , completeProfile } = this.props;
    if(!completeProfile){
      showCompeleteDialog && showCompeleteDialog();
    }else{
      window.location.href(url);
    }
  }

  addMenu=(list)=>{
    return(
      list && list.length >0 && 
      <div className="dropdownFlex">
        <Menu> 
          {
            list.map((item,key)=>{
              return(
                (item.name !=="加入课堂" && item.name !=="加入开发项目") && 
                <Menu.Item key={item.name+key}>
                  <CheckProfile {...this.props} sureFunc={()=>{window.location.href=item.url}}>{item.name}</CheckProfile>
                </Menu.Item>
              )
            })
          }
          <Menu.Item>
            <AddProjectModal {...this.props} showNotification={this.props.showNotification}/>
          </Menu.Item>
        </Menu>
      </div>
    )
  }

  renderMenu=(personal)=>{
    const { mygetHelmetapi } = this.props;
    const { companyList } = this.state;
    return(
      <Menu className="currentMenu">
        {/* <Menu.Item>
          <span className="currentName" title={current_user && current_user.username}>{current_user && current_user.username}</span>
        </Menu.Item> */}
        {/* <Menu.Item>
          <a href={`/${this.props.current_user && this.props.current_user.login}`}>首页</a>
        </Menu.Item> */}
        <Menu.Item>
          <a href={`/${this.props.current_user  && this.props.current_user.login}`}>代码库主页</a>
        </Menu.Item>
          {
            personal && personal.length > 0 && personal.map((item,key)=>{
              return(
                <li key={key}><a href={item.url} target="_blank">{item.name}</a></li>
              )
            })
          }
          
        <SubMenu title={<span>我的工作台<Icon type="right" /></span>} Icon={null} popupClassName='subMyworkList'>
          {
            companyList && companyList.length>0 ?
            companyList.map((i,k)=>{
              return(
                <Menu.Item><a href={`${ mygetHelmetapi && mygetHelmetapi.common.zone }/${i.enterpriseIdentifier}`} target='_blank'>{i.enterpriseName}</a></Menu.Item>
              )
            })
            :<Menu.Item>暂无工作台</Menu.Item>
          }
        </SubMenu>
        <Menu.Item><a onClick={() => this.educoderloginysl()}>退出登录</a></Menu.Item>
      </Menu>
    )
  }

  handleVisibleChange = visible => {
    this.setState({ visible });
  };

  getComlist=()=>{
    getOrzCompanyList().then(res=>{
      if(res){
        this.setState({
          companyList:res.data.rows
        })
      }
    })
  }

  render() {
    const { resetUserInfo ,showNotification,publicNav,mygetHelmetapi} = this.props;
    let settings = mygetHelmetapi;
    let current_user = this.props.user;
    let {
      AccountProfiletype,
      user,
      isRender,
      visible,
      showSubMenu,
      zoneList
    } = this.state;
    let search_url = settings && settings.common && settings.common.search;
    return (
      <div className={publicNav ? `newHeaders publicNav`:`newHeaders`} id="nHeader">
        <div className="headerContent">
          {isRender === true ?
            <LoginDialog
              {...this.props}
              {...this.state}
              Modifyloginvalue={() => this.Modifyloginvalue()}
            /> : ""}

          {AccountProfiletype === true ?
            <AccountProfile
              hideAccountProfile={() => this.hideAccountProfile()}
              {...this.props}
              {...this.state}
            /> : ""}
            {/* {
              settings && settings.nav_logo_url ?
              <a href={settings && settings.new_course.default_url} className={"fl mr30"}>
                <img alt="可控开源社区" className="logoimg" src={getImageUrl(`/${settings.nav_logo_url}`)}></img>
              </a>
              :
              ""
            } */}
             {/*{
              settings && settings.navbar && settings.navbar.length > 0 ?
              <ul id="header-nav" className="head-nav pr">
                {
                  settings.navbar && settings.navbar.map((item, key) => {
                    var new_link = item.link;
                    var is_hidden = item.hidden;
                    var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) );
                    var wl = waiLian && waiLian.length>0;
                    if (item.name === '特色专区') {
                      // 特色专区下拉菜单
                      return zoneList && zoneList.length > 0 ? <li
                        className={`${this.matchZone() === true ? 'active drop-li' : 'drop-li'}`}
                        onMouseOver={ () => { this.setState( {showSubMenu: true }) } }
                        onMouseOut={ () => { this.setState( {showSubMenu: false }) } }
                      >
                        <a onClick={ () => { this.setState( {showSubMenu: true }) } }>特色专区</a>
                        <ul className={ `drop-down ${ showSubMenu ? 'drop-down-show' : '' }` } style={{ height : showSubMenu ? `${ current_user && current_user.login ? ((zoneList.length+1) * 46) : (zoneList.length * 46)}px` : 0 }}>
                          {
                            zoneList.map((e, k) => {
                              return <li className="drop-down-item" key={ k }><a href={ e.link } className="task-hide" title={ e.name } target="_blank">{ e.name }</a></li>
                            })
                          }
                          {current_user && current_user.login && <li className="drop-down-item"><Link to="/zone/apply" target="_blank">+申请创建</Link></li> }
                        </ul>
                      </li> : ''
                    } else {
                      return (
                        <li key={key} 
                          className={`${this.matchpaths(new_link) === true ? 'pr active' : 'pr'}`}
                          style={{display:!is_hidden ? 'flex' : 'none'} }
                        >
                          <a href={new_link} target={wl ? "_self":"_blank"}>{item.name}</a>
                        </li>
                      )
                    }
                  })
                } 
              </ul>
            : ""
            }*/}
          {/*<div className="head-right">
             { search_url && <HeadSearch {...this.props}/>} */}
            {/* {
              current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
              <Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
                <img src={require(`./img/add.png`)} alt="" width="16px" className="mr15 ml30"/>
              </Dropdown>:""
            } */}
            
            {/* { (settings && settings.common && settings.common.notice) && (current_user && current_user.login)?
              <Popover
                overlayClassName="notice-popover"
                placement={`bottomRight`}
                content={<NoticeContent visible={visible} current_user={current_user} showNotification={showNotification} resetUserInfo={resetUserInfo}/>}
                visible={visible}
                onVisibleChange={this.handleVisibleChange}
                destroyTooltipOnHide
              >
                <Link to={"/settings/notice"} className="message-icon">
                  {current_user && <Badge count={current_user.message_unread_total}>
                    <img src={require(`./img/ring.png`)} alt="" width="16px" className="ml15 mr15"/>
                  </Badge>}
                </Link>
              </Popover>
              : ""
            } 
          </div>*/}
          {!user || (user && !user.login)  ?
            <span className="font-15 ml30">
              <Link to="/login" className="mr5 color-white">登录</Link>
              {
                (settings && settings.common && settings.common.register) ?
                  publicNav ? 
                  <a href='/register' className="regBtn">立即注册</a>
                  :
                  <span><em className="vertical-line"></em><a className="ml5 color-white" href='/register'>注册</a></span>
                :""
              }
            </span>
            :
            <Dropdown placement={`bottomRight`} overlay={this.renderMenu(settings && settings.personal)}>
              <img alt="头像" src={getImageUrl(`/${user.image_url}`)} className="currentImg"></img>
            </Dropdown>
          }
        </div>
      </div>
    );
  }
}

export default NewHeader;