绩效总览 (列表、详情)、绩效指标 (配置)

Mr Ke

2020-05-29 a4f102defd2c7918617717f3307b6a3ef63859ff

 src/components/common/HeadView/index.jsx

@@ -6,48 +6,96 @@

/** 头部组件 */

import React, { useEffect } from 'react';
import { Layout, Menu, Dropdown, Icon, Row, Col, message } from 'antd';
import React, { useEffect, useState, useContext } from 'react';
import { Layout, Menu, Dropdown, Icon, Row, Col, message, Select } from 'antd';
import { createHashHistory } from 'history';
const { Header } = Layout;
import logo from '../../../img/logo.png'
import './index.scss';
import { Context } from '../../../index';

const menu = (
  <Menu>
const history = createHashHistory();

const { Option } = Select;
const menu = (fun) => {
  return <Menu>
    <Menu.Item>
      <a onClick={() => {
        // 清空用户相关信息
        window.localStorage.setItem('menu', '');
        window.localStorage.setItem('token', '');
        window.localStorage.setItem('role', '');
        message.success('退出成功！');
        fun({ role: '' });
        window.location.href = window.location.origin + '/#/login';
      }}>
        退出
      </a>
    </Menu.Item>

  </Menu>
);
};

export default function MenuView({ }) {

export default function HeadView({ props }) {
  var loginUser = window.localStorage.getItem('loginUser') || '{}';
  loginUser = JSON.parse(loginUser);
  

  const [selectList, setSelectList] = useState([{ name: 'OA系统', key: 'oa' }]);
  // const [selectKey, setSelectKey] = useState('oa');

  useEffect(() => {
    // 获取该登录用户的菜单权限
    let menu = window.localStorage.getItem('menu') ? JSON.parse(window.localStorage.getItem('menu')) : [];//获取权限菜单
    let administration = menu.find(({ moduleSymbol }) => moduleSymbol == 'administration');
    if (administration) {
      setSelectList(selectList.concat({ name: '用户中心', key: 'user' }));
    }
  }, [])

  function onSelectChange(value) {
    // setSelectKey(value);
    // setContext && setContext({ value })
  }

  return (
    <Header style={{ background: '#fff', padding: 0, boxShadow: 'inset 0 -1px 0 0 #E5E5E5' }}>
    <Context.Consumer>
      {
        (loginUser && Object.keys(loginUser).length) &&
        <Row type="flex" align="middle" justify="end" >
          <Col style={{ marginRight: 40 }}>
            {loginUser.trueName}&nbsp;&nbsp;&nbsp;
            <Dropdown overlay={menu}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                [{loginUser.dept} | {loginUser.post}]<Icon type="caret-down" />
              </a>
            </Dropdown>
          </Col>
        </Row>
        ({ role, setContext }) => (
          <Header style={{ background: '#fff', padding: 0 }} className="header-view-main">
            <Row type="flex">
              <Col className="header-view-main-logo-area">
                <img src={logo} alt="恒巨科技" />
              </Col>
              <Col className="flex-1">
                {
                  (loginUser && Object.keys(loginUser).length) &&
                  <Row type="flex" align="middle" justify="space-between" >
                    <Col>
                      <Select value={role} size="small" style={{ marginLeft: 20, width: 120 }} onChange={value => {
                        setContext({ role: value });
                        history.push('/')
                      }}>
                        {
                          selectList.map(({ name, key }) => (
                            <Option value={key} key={key}>{name}</Option>
                          ))
                        }
                      </Select>
                    </Col>
                    <Col style={{ marginRight: 40 }}>
                      {loginUser.trueName}&nbsp;&nbsp;&nbsp;
                      <Dropdown overlay={menu(setContext)}>
                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                          [{loginUser.dept} | {loginUser.post}]<Icon type="caret-down" />
                        </a>
                      </Dropdown>
                    </Col>
                  </Row>
                }
              </Col>
            </Row>
          </Header>
        )
      }
    </Header>
    </Context.Consumer>
  );
}