|
@@ -1,15 +1,15 @@
|
|
|
/*
|
|
|
* @Author: your name
|
|
|
* @Date: 2021-11-16 09:12:37
|
|
|
- * @LastEditTime: 2022-03-29 16:10:09
|
|
|
- * @LastEditors: Please set LastEditors
|
|
|
+ * @LastEditTime: 2022-07-05 09:32:13
|
|
|
+ * @LastEditors: code4eat awesomedema@gmail.com
|
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
|
|
|
*/
|
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
|
-import styles from './style.less';
|
|
|
+import './style.less';
|
|
|
|
|
|
import { Tooltip } from 'antd';
|
|
|
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
|
|
@@ -19,40 +19,73 @@ import platFormMenuIcon from '../../../public/images/platformMenu.png';
|
|
|
import tabCloseIcon from '../../../public/images/tabCloseIcon.png';
|
|
|
|
|
|
import { history } from 'umi';
|
|
|
+import { Divider } from 'antd';
|
|
|
+import { addFastEntry, getUserPlatformNav } from '@/service/menu';
|
|
|
+import { NavSelecterData } from '../NavSelecter';
|
|
|
|
|
|
interface TopBarType {
|
|
|
onTabChange?: (data: TopBar.Tab[]) => void; //当tab切换时回调
|
|
|
- sysList: TopBar.Tab[]; //可选系统列表
|
|
|
openedTabs: TopBar.Tab[]; //已打开的列表
|
|
|
currentTab?: TopBar.Tab | undefined; //当前tab
|
|
|
userPannelTabClick?: (tag: 'SETTING' | 'LOGOUT' | 'SETUSERINFO') => void;
|
|
|
onCloseTab?: (data: TopBar.Tab) => void;
|
|
|
onTabClick?: (data: TopBar.Tab) => void;
|
|
|
- userData?: { name: string; [key: string]: any };
|
|
|
+ userData?: { name: string;[key: string]: any };
|
|
|
+ navData: TopBar.PanelData[];
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+const localSavedTab = localStorage.getItem('currentSelectedTab');
|
|
|
+const currentSelectedTabFromLocal = localSavedTab ? JSON.parse(localSavedTab) : {};
|
|
|
+
|
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
- const { onTabChange, sysList = [], openedTabs = [], currentTab, userPannelTabClick, onCloseTab, onTabClick, userData } = props;
|
|
|
+ const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData,currentTab } = props;
|
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
|
const [arrowRotate, setArrowRotate] = useState(false);
|
|
|
- // const [opendedTabs,setOpendedTabs] = useState<SystemListItem[]>([]);
|
|
|
+ const [pageTitle, set_pageTitle] = useState('欢迎进入医管平台');
|
|
|
+ const [currentActivedBlockIndex, set_currentActivedBlockIndex] = useState(0);
|
|
|
+ const [panelData, set_panelData] = useState<TopBar.PanelData[]>([]);
|
|
|
|
|
|
const _systemTabClickHandle = (item: TopBar.Tab) => {
|
|
|
//导航栏tab点击
|
|
|
|
|
|
- setCurrentSelectedTab(item);
|
|
|
onTabClick && onTabClick(item);
|
|
|
+ localStorage.setItem('currentSelectedTab', JSON.stringify(item));
|
|
|
+ setCurrentSelectedTab(item);
|
|
|
+
|
|
|
};
|
|
|
|
|
|
- const _systemListClickHandle = (data: TopBar.Tab) => {
|
|
|
+
|
|
|
+ const _systemListClickHandle = (data: TopBar.Tab, currentActivedBlockIndex: number, index: number, i: number) => {
|
|
|
//导航栏系统菜单列表点击回调
|
|
|
- const findIndex = systemTabs.findIndex((t) => t.id == data.id);
|
|
|
- if (findIndex != -1) return;
|
|
|
+ if (currentSelectedTab?.menuId == data.menuId) return;
|
|
|
+
|
|
|
+
|
|
|
+ //临时保存衣打开过的菜单
|
|
|
+ const t = localStorage.getItem('visitedTabs');
|
|
|
+
|
|
|
+ if(t){
|
|
|
+ let visitedTabs = JSON.parse(t);
|
|
|
+ let index = visitedTabs.findIndex((t:TopBar.Tab)=>t.menuId == data.menuId);
|
|
|
+ if(index == -1){
|
|
|
+ visitedTabs.push(data);
|
|
|
+ localStorage.setItem('visitedTabs',JSON.stringify(visitedTabs));
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ localStorage.setItem('visitedTabs',JSON.stringify([data]));
|
|
|
+ }
|
|
|
+
|
|
|
_systemTabClickHandle(data); //触发一次tab点击
|
|
|
- setSystemTabs([...systemTabs, data]);
|
|
|
- onTabChange && onTabChange([...systemTabs, data]);
|
|
|
+
|
|
|
+ set_pageTitle(panelData[currentActivedBlockIndex].child[index].name)
|
|
|
+
|
|
|
+ if (panelData[currentActivedBlockIndex].child[index].child) {
|
|
|
+ console.log([...panelData[currentActivedBlockIndex].child[index].child])
|
|
|
+ setSystemTabs([...panelData[currentActivedBlockIndex].child[index].child]);
|
|
|
+ }
|
|
|
+ setIfOpenPannel(false);
|
|
|
};
|
|
|
|
|
|
const _userPannelTabClick = (tag: 'SETTING' | 'LOGOUT') => {
|
|
@@ -66,13 +99,14 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
let delIndex = -1;
|
|
|
|
|
|
const filtered = _systemTabs.filter((t, index) => {
|
|
|
- if (t.id == item.id) {
|
|
|
+ if (t.menuId == item.menuId) {
|
|
|
delIndex = index;
|
|
|
}
|
|
|
- return t.id != item.id;
|
|
|
+ return t.menuId != item.menuId;
|
|
|
});
|
|
|
|
|
|
setSystemTabs([...filtered]);
|
|
|
+
|
|
|
if (delIndex != 0) {
|
|
|
_systemTabClickHandle(_systemTabs[delIndex - 1]); //自动切换为前一个tab
|
|
|
}
|
|
@@ -83,12 +117,12 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
|
|
|
const UserPannel = () => {
|
|
|
return (
|
|
|
- <div className={styles.userPannel}>
|
|
|
- <div className={styles.userPannelTab} onClick={() => _userPannelTabClick('SETTING')}>
|
|
|
+ <div className='userPannel'>
|
|
|
+ <div className='userPannelTab' onClick={() => _userPannelTabClick('SETTING')}>
|
|
|
<SettingOutlined />
|
|
|
设置
|
|
|
</div>
|
|
|
- <div className={styles.userPannelTab} onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
|
+ <div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
|
<LogoutOutlined />
|
|
|
退出
|
|
|
</div>
|
|
@@ -96,80 +130,198 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- if (openedTabs.length == 1) {
|
|
|
- //当有且仅当只有一个的时候,默认激活
|
|
|
- setCurrentSelectedTab(openedTabs[0]);
|
|
|
- history.push(openedTabs[0].path);
|
|
|
- }
|
|
|
- if (openedTabs.length == 0) {
|
|
|
- //当所有tab都关闭时
|
|
|
- setCurrentSelectedTab(undefined);
|
|
|
+ const goChannelIndex = () => {
|
|
|
+ setIfOpenPannel(false);
|
|
|
+ history.push('/channelIndex/channelIndexOne')
|
|
|
+ }
|
|
|
+
|
|
|
+ const goToHome = () => {
|
|
|
+ history.replace('/index');
|
|
|
+ setSystemTabs([]); //清空tab导航
|
|
|
+ onTabChange && onTabChange([]);
|
|
|
+ setCurrentSelectedTab(undefined);
|
|
|
+ set_pageTitle('欢迎进入医管平台');
|
|
|
+ setIfOpenPannel(false);
|
|
|
+ localStorage.removeItem('currentSelectedTab');
|
|
|
+ }
|
|
|
+
|
|
|
+ const goSystemIndex = (name:string)=>{
|
|
|
+ if(panelData[currentActivedBlockIndex]){
|
|
|
+ const result:TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter(t=>(t.name == name));
|
|
|
+ if(result.length>0){
|
|
|
+ history.push(result[0].path)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const openNav = () => {
|
|
|
+ setIfOpenPannel(!ifOpenPannel);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const reSetNav = (_panelData: TopBar.PanelData[], cur: TopBar.Tab) => {
|
|
|
+
|
|
|
+
|
|
|
+ if (!(_panelData.length > 0)) return
|
|
|
+
|
|
|
+ if (cur) {
|
|
|
+
|
|
|
+ let blockIndex = 0;
|
|
|
+ let channelIndex = 0;
|
|
|
+
|
|
|
+
|
|
|
+ const _currentSelectedTabFromLocal = cur;
|
|
|
+
|
|
|
+ one: for (let index = 0; index < _panelData.length; index++) {
|
|
|
+ blockIndex = index;
|
|
|
+ if (_panelData[index] && _panelData[index].child) {
|
|
|
+ two: for (let i = 0; i < _panelData[index].child.length; i++) {
|
|
|
+
|
|
|
+ channelIndex = i;
|
|
|
+ if (_panelData && _panelData.length > 0) {
|
|
|
+ const _systems = _panelData[index].child[i].child;
|
|
|
+ if (_systems && _systems.length > 0) {
|
|
|
+ for (let k = 0; k < _systems.length; k++) {
|
|
|
+ if (_systems[k].menuId == _currentSelectedTabFromLocal.menuId) {
|
|
|
|
|
|
- if (sysList.length > 1) {
|
|
|
- //有多个应用时
|
|
|
- history.replace('/index');
|
|
|
+ set_pageTitle(_panelData[blockIndex].child[channelIndex].name); //设置体系标题
|
|
|
+
|
|
|
+ break one;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_panelData && _panelData.length > 0 && _panelData[blockIndex].child) {
|
|
|
+ setSystemTabs(_panelData[blockIndex].child[channelIndex].child); //恢复体系列表
|
|
|
}
|
|
|
+
|
|
|
+ _systemTabClickHandle(_currentSelectedTabFromLocal); //恢复选中的tab
|
|
|
+
|
|
|
}
|
|
|
- }, [openedTabs]);
|
|
|
+ }
|
|
|
|
|
|
useEffect(() => {
|
|
|
- // console.log('Topbar props',props);
|
|
|
- currentSelectedTab && _systemTabClickHandle(currentSelectedTab);
|
|
|
- currentSelectedTab && setSystemTabs([...systemTabs, currentSelectedTab]);
|
|
|
- }, [currentSelectedTab]);
|
|
|
+ if (currentSelectedTabFromLocal) {
|
|
|
+
|
|
|
+ reSetNav(navData, currentSelectedTabFromLocal);
|
|
|
+ }
|
|
|
+ set_panelData(navData);
|
|
|
+ }, [navData])
|
|
|
+
|
|
|
+ useEffect(()=>{
|
|
|
+
|
|
|
+ if(currentTab)reSetNav(panelData,currentTab);
|
|
|
+
|
|
|
+ },[currentTab])
|
|
|
+
|
|
|
|
|
|
useEffect(() => {
|
|
|
- setSystemTabs(openedTabs);
|
|
|
- currentTab && setCurrentSelectedTab(currentTab);
|
|
|
- }, [props]);
|
|
|
+
|
|
|
+
|
|
|
+ _systemTabClickHandle(currentSelectedTabFromLocal); //恢复选中的tab
|
|
|
+
|
|
|
+ document.body.addEventListener('click', (e:any) => {
|
|
|
+
|
|
|
+ const classes = ['panel', 'left','typeBlockIcon', 'typeBlock', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon'];
|
|
|
+ if (e.target) {
|
|
|
+ if (classes.includes(e.target.className)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setIfOpenPannel(false);
|
|
|
+ });
|
|
|
+
|
|
|
+ }, []);
|
|
|
|
|
|
return (
|
|
|
- <div className={styles.topBar}>
|
|
|
- <div className={styles.logoWrap}>
|
|
|
- <img className={styles.logo} src={logo} />
|
|
|
+ <div className='topBar' onClick={e => e.stopPropagation()}>
|
|
|
+ <div className='logoWrap'>
|
|
|
+ <img className='logo' src={logo} onClick={() => goToHome()} />
|
|
|
+ <Divider type="vertical" style={{ background: 'white', height: 16, opacity: 0.29, position: 'relative', top: 1, marginLeft: 24, marginRight: 8 }} />
|
|
|
+ <div className='menu' onClick={() => openNav()}>
|
|
|
+ <img src={require('../../../public/images/menu.png')} alt="" />
|
|
|
+ </div>
|
|
|
+ <span className='systemTitle' onClick={()=>goSystemIndex(pageTitle)}>{pageTitle}</span>
|
|
|
</div>
|
|
|
- {sysList.length > 1 && (
|
|
|
+
|
|
|
+ <div className='userRelaInfoWrap'>
|
|
|
<>
|
|
|
- <div className={ifOpenPannel ? `${styles.platformMenu} ${styles.on}` : `${styles.platformMenu}`} onClick={() => setIfOpenPannel(!ifOpenPannel)}>
|
|
|
- <img src={platFormMenuIcon} />
|
|
|
- <div className={styles.systemPannel}>
|
|
|
- {sysList.map((item) => (
|
|
|
- <div key={item.id} className={styles.systemList} onClick={() => _systemListClickHandle(item)}>
|
|
|
- <img src={item.icon} alt="" />
|
|
|
- <div className={styles.systemListName}>{item.name}</div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
{/**
|
|
|
* 已打开的tab
|
|
|
*/}
|
|
|
- <div className={styles.tabWrap}>
|
|
|
- {systemTabs.map((item) => (
|
|
|
- <div key={item.id} className={currentSelectedTab?.id == item.id ? `${styles.tab} ${styles.on}` : `${styles.tab}`} onClick={() => _systemTabClickHandle(item)}>
|
|
|
- <div className={styles.tabText}>{item.name} </div>
|
|
|
- <div className={styles.closeIconWrap}>
|
|
|
- <img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} alt="close" />
|
|
|
+ <div className='tabWrap'>
|
|
|
+ {systemTabs&&systemTabs.map((item, index) => (
|
|
|
+ <div key={index} className={currentSelectedTab?.menuId == item.menuId ? `tab on` : `tab`} onClick={() => _systemTabClickHandle(item)}>
|
|
|
+ <div className='tabText'>{item.name} </div>
|
|
|
+ <div className='closeIconWrap'>
|
|
|
+ <img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} />
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</>
|
|
|
- )}
|
|
|
|
|
|
- <div className={styles.userRelaInfoWrap}>
|
|
|
- <div className={styles.notification}>
|
|
|
- <img className={styles.notificationIcon} src={require('../../../public/images/notificationIcon.png')} />
|
|
|
- </div>
|
|
|
+
|
|
|
+ {/* <div className='notification'>
|
|
|
+ <img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
|
|
|
+ </div> */}
|
|
|
<Tooltip title={<UserPannel />} color="#fff" onVisibleChange={(visible) => setArrowRotate(visible)}>
|
|
|
- <div className={styles.user}>
|
|
|
- <img className={styles.avator} src={require('../../../public/images/Mask.png')} />
|
|
|
- <span className={styles.name}>{userData?.name}</span>
|
|
|
- <img className={arrowRotate ? `${styles.arrow} ${styles.on}` : `${styles.arrow}`} src={require('../../../public/images/arrow_white.png')} />
|
|
|
+ <div className='user'>
|
|
|
+ <img className='avator' src={require('../../../public/images/Mask.png')} />
|
|
|
+ <span className='name'>{userData?.name}</span>
|
|
|
+ <img className={arrowRotate ? `arrow on` : `arrow`} src={require('../../../public/images/arrow_white.png')} />
|
|
|
</div>
|
|
|
</Tooltip>
|
|
|
</div>
|
|
|
+
|
|
|
+ {
|
|
|
+ ifOpenPannel && (
|
|
|
+ <div className='panel' onClick={e => e.stopPropagation()}>
|
|
|
+ <div className='left'>
|
|
|
+ {
|
|
|
+ panelData.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div className={currentActivedBlockIndex == index ? `typeBlock active` : `typeBlock`} key={index} onClick={() => set_currentActivedBlockIndex(index)}>
|
|
|
+ <img className='typeBlockIcon' src={item?.icon} alt="" />
|
|
|
+ <span>{item.name}</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div className='right'>
|
|
|
+ {
|
|
|
+ panelData.length > 0 && panelData[currentActivedBlockIndex] && panelData[currentActivedBlockIndex].child && panelData[currentActivedBlockIndex].child.map((item, index: number) => {
|
|
|
+ return (
|
|
|
+ <div className='row' key={index}>
|
|
|
+ <img className='channelIcon' src={require('../../../public/images/zhilianganquan.png')} alt="" />
|
|
|
+ <div className='rowDetail'>
|
|
|
+ <div className='channelName' onClick={() => goChannelIndex()}>{item.name}</div>
|
|
|
+ <div className='channelList'>
|
|
|
+ {
|
|
|
+ item.child && item.child.length > 0 && item.child.map((val, i: number) => {
|
|
|
+ return (
|
|
|
+ <div className={currentSelectedTab?.menuId == val.menuId ? 'systemTab on' : 'systemTab'} key={i} onClick={() => _systemListClickHandle(val, currentActivedBlockIndex, index, i)}>{val.name}</div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
</div>
|
|
|
);
|
|
|
};
|