From 2d0e600900696bb309d09efd47fd7d4980eeb172 Mon Sep 17 00:00:00 2001
From: liyj <1003249715@qq.com>
Date: Mon, 01 Jun 2020 16:11:28 +0800
Subject: [PATCH] 页面调整

---
 src/components/common/HeadView/index.jsx |   92 +++++++++++++++++++++++++++++++++++-----------
 1 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/components/common/HeadView/index.jsx b/src/components/common/HeadView/index.jsx
index 759af0d..b69749f 100644
--- a/src/components/common/HeadView/index.jsx
+++ b/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);
-  console.log(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>
   );
 }

--
Gitblit v1.8.0