|
@@ -1,7 +1,7 @@
|
|
/*
|
|
/*
|
|
* @Author: your name
|
|
* @Author: your name
|
|
* @Date: 2021-11-16 09:12:37
|
|
* @Date: 2021-11-16 09:12:37
|
|
- * @LastEditTime: 2023-06-12 10:45:15
|
|
|
|
|
|
+ * @LastEditTime: 2023-06-16 11:17:35
|
|
* @LastEditors: code4eat awesomedema@gmail.com
|
|
* @LastEditors: code4eat awesomedema@gmail.com
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/index/components/topBar/index.tsx
|
|
@@ -36,7 +36,7 @@ interface TopBarType {
|
|
|
|
|
|
|
|
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
- const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData,currentTab } = props;
|
|
|
|
|
|
+ const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData, currentTab } = props;
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
@@ -45,10 +45,13 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
const [currentActivedBlockIndex, set_currentActivedBlockIndex] = useState(0);
|
|
const [currentActivedBlockIndex, set_currentActivedBlockIndex] = useState(0);
|
|
const [panelData, set_panelData] = useState<TopBar.PanelData[]>([]);
|
|
const [panelData, set_panelData] = useState<TopBar.PanelData[]>([]);
|
|
|
|
|
|
- const [onTabSystemTabs,set_onTabSystemTabs] = useState<TopBar.Tab[]>([]); //tab导航可以放下的数量,剩余通过下拉获取
|
|
|
|
|
|
+ const [onTabSystemTabs, set_onTabSystemTabs] = useState<TopBar.Tab[]>([]); //tab导航可以放下的数量,剩余通过下拉获取
|
|
|
|
+ const [onTabSystemTabs_hide, set_onTabSystemTabs_hide] = useState<TopBar.Tab[]>([]); //下拉掩藏的导航
|
|
|
|
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
|
|
|
|
|
+ const [showMoreTabPannel, set_showMoreTabPannel] = useState(false);
|
|
|
|
+
|
|
|
|
|
|
const localSavedTab = localStorage.getItem('currentSelectedTab');
|
|
const localSavedTab = localStorage.getItem('currentSelectedTab');
|
|
|
|
|
|
@@ -69,18 +72,18 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
//导航栏系统菜单列表点击回调
|
|
//导航栏系统菜单列表点击回调
|
|
if (currentSelectedTab?.menuId == data.menuId) return;
|
|
if (currentSelectedTab?.menuId == data.menuId) return;
|
|
|
|
|
|
- //临时保存衣打开过的菜单
|
|
|
|
|
|
+ //临时保存衣打开过的菜单
|
|
const t = localStorage.getItem('visitedTabs');
|
|
const t = localStorage.getItem('visitedTabs');
|
|
|
|
|
|
- if(t){
|
|
|
|
|
|
+ if (t) {
|
|
let visitedTabs = JSON.parse(t);
|
|
let visitedTabs = JSON.parse(t);
|
|
- let index = visitedTabs.findIndex((t:TopBar.Tab)=>t.menuId == data.menuId);
|
|
|
|
- if(index == -1){
|
|
|
|
|
|
+ let index = visitedTabs.findIndex((t: TopBar.Tab) => t.menuId == data.menuId);
|
|
|
|
+ if (index == -1) {
|
|
visitedTabs.push(data);
|
|
visitedTabs.push(data);
|
|
- localStorage.setItem('visitedTabs',JSON.stringify(visitedTabs));
|
|
|
|
|
|
+ localStorage.setItem('visitedTabs', JSON.stringify(visitedTabs));
|
|
}
|
|
}
|
|
- }else{
|
|
|
|
- localStorage.setItem('visitedTabs',JSON.stringify([data]));
|
|
|
|
|
|
+ } else {
|
|
|
|
+ localStorage.setItem('visitedTabs', JSON.stringify([data]));
|
|
}
|
|
}
|
|
|
|
|
|
_systemTabClickHandle(data); //触发一次tab点击
|
|
_systemTabClickHandle(data); //触发一次tab点击
|
|
@@ -88,7 +91,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
set_pageTitle(panelData[currentActivedBlockIndex].child[index].name)
|
|
set_pageTitle(panelData[currentActivedBlockIndex].child[index].name)
|
|
|
|
|
|
if (panelData[currentActivedBlockIndex].child[index].child) {
|
|
if (panelData[currentActivedBlockIndex].child[index].child) {
|
|
- // console.log([...panelData[currentActivedBlockIndex].child[index].child])
|
|
|
|
|
|
+ //console.log([...panelData[currentActivedBlockIndex].child[index].child])
|
|
setSystemTabs([...panelData[currentActivedBlockIndex].child[index].child]);
|
|
setSystemTabs([...panelData[currentActivedBlockIndex].child[index].child]);
|
|
}
|
|
}
|
|
setIfOpenPannel(false);
|
|
setIfOpenPannel(false);
|
|
@@ -126,19 +129,19 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
<div className='userPannel'>
|
|
<div className='userPannel'>
|
|
<div className='userPannelTab' onClick={() => _userPannelTabClick('SETTING')}>
|
|
<div className='userPannelTab' onClick={() => _userPannelTabClick('SETTING')}>
|
|
<SettingOutlined />
|
|
<SettingOutlined />
|
|
- 设置
|
|
|
|
|
|
+ <span>设置</span>
|
|
</div>
|
|
</div>
|
|
<div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
<div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
<LogoutOutlined />
|
|
<LogoutOutlined />
|
|
- 退出
|
|
|
|
|
|
+ <span>退出</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|
|
- const goChannelIndex = (menuData:any) => {
|
|
|
|
|
|
+ const goChannelIndex = (menuData: any) => {
|
|
setIfOpenPannel(false);
|
|
setIfOpenPannel(false);
|
|
- onTabClick&&onTabClick(menuData)
|
|
|
|
|
|
+ onTabClick && onTabClick(menuData)
|
|
}
|
|
}
|
|
|
|
|
|
const goToHome = () => {
|
|
const goToHome = () => {
|
|
@@ -155,24 +158,36 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
localStorage.removeItem('openKeys');
|
|
localStorage.removeItem('openKeys');
|
|
}
|
|
}
|
|
|
|
|
|
- const goSystemIndex = (name:string)=>{
|
|
|
|
- if(panelData[currentActivedBlockIndex]){
|
|
|
|
- const result:TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter(t=>(t.name == name));
|
|
|
|
- if(result.length>0){
|
|
|
|
- _systemTabClickHandle(Object.assign(result[0]))
|
|
|
|
- // history.push(result[0].path)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ const goSystemIndex = (name: string) => {
|
|
|
|
+ if (panelData[currentActivedBlockIndex]) {
|
|
|
|
+ const result: TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter(t => (t.name == name));
|
|
|
|
+ if (result.length > 0) {
|
|
|
|
+ _systemTabClickHandle(Object.assign(result[0]))
|
|
|
|
+ // history.push(result[0].path)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
const openNav = () => {
|
|
const openNav = () => {
|
|
setIfOpenPannel(!ifOpenPannel);
|
|
setIfOpenPannel(!ifOpenPannel);
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
|
|
- const reSetNav = (_panelData: TopBar.PanelData[], cur: TopBar.Tab) => {
|
|
|
|
|
|
+ const moreItemClickHandle = (systemData:TopBar.Tab)=>{
|
|
|
|
+ //点击更多应用时
|
|
|
|
+ _systemTabClickHandle(systemData);
|
|
|
|
+ const temp = onTabSystemTabs[onTabSystemTabs.length - 1];
|
|
|
|
+ const _onTabSystemTabs = [...onTabSystemTabs];
|
|
|
|
+ const b = _onTabSystemTabs.filter(a=>a.systemId != temp.systemId);
|
|
|
|
|
|
|
|
+ set_onTabSystemTabs([...b,systemData]);
|
|
|
|
+ set_onTabSystemTabs_hide([...onTabSystemTabs_hide.filter(a=>a.systemId != systemData.systemId),temp])
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ const reSetNav = (_panelData: TopBar.PanelData[], cur: TopBar.Tab) => {
|
|
|
|
+
|
|
if (!(_panelData.length > 0)) return
|
|
if (!(_panelData.length > 0)) return
|
|
|
|
|
|
if (JSON.stringify(cur) != '{}') {
|
|
if (JSON.stringify(cur) != '{}') {
|
|
@@ -185,7 +200,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
|
|
|
one: for (let index = 0; index < _panelData.length; index++) {
|
|
one: for (let index = 0; index < _panelData.length; index++) {
|
|
blockIndex = index;
|
|
blockIndex = index;
|
|
-
|
|
|
|
|
|
+
|
|
if (_panelData[index] && _panelData[index].child) {
|
|
if (_panelData[index] && _panelData[index].child) {
|
|
two: for (let i = 0; i < _panelData[index].child.length; i++) {
|
|
two: for (let i = 0; i < _panelData[index].child.length; i++) {
|
|
channelIndex = i;
|
|
channelIndex = i;
|
|
@@ -195,8 +210,8 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
for (let k = 0; k < _systems.length; k++) {
|
|
for (let k = 0; k < _systems.length; k++) {
|
|
if (_systems[k].menuId == _currentSelectedTabFromLocal.menuId) {
|
|
if (_systems[k].menuId == _currentSelectedTabFromLocal.menuId) {
|
|
set_currentActivedBlockIndex(blockIndex);
|
|
set_currentActivedBlockIndex(blockIndex);
|
|
- set_pageTitle(_panelData[blockIndex].child[channelIndex].name); //设置体系标题
|
|
|
|
-
|
|
|
|
|
|
+ set_pageTitle(_panelData[blockIndex].child[channelIndex].name); //设置体系标题
|
|
|
|
+
|
|
break one;
|
|
break one;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -212,54 +227,66 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
localStorage.setItem('currentSelectedTab', JSON.stringify(_currentSelectedTabFromLocal));
|
|
localStorage.setItem('currentSelectedTab', JSON.stringify(_currentSelectedTabFromLocal));
|
|
setInitialState((s) => ({ ...s, currentSelectedSys: _currentSelectedTabFromLocal }));
|
|
setInitialState((s) => ({ ...s, currentSelectedSys: _currentSelectedTabFromLocal }));
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
//_systemTabClickHandle(_currentSelectedTabFromLocal); //恢复选中的tab
|
|
//_systemTabClickHandle(_currentSelectedTabFromLocal); //恢复选中的tab
|
|
-
|
|
|
|
|
|
+
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- useEffect(() => {
|
|
|
|
|
|
+ useEffect(() => {
|
|
if (currentSelectedTabFromLocal) {
|
|
if (currentSelectedTabFromLocal) {
|
|
reSetNav(navData, currentSelectedTabFromLocal);
|
|
reSetNav(navData, currentSelectedTabFromLocal);
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
set_panelData(navData);
|
|
set_panelData(navData);
|
|
|
|
+
|
|
}, [navData])
|
|
}, [navData])
|
|
|
|
|
|
- useEffect(()=>{
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
+
|
|
|
|
+ if (currentTab) reSetNav(panelData, currentTab);
|
|
|
|
+
|
|
|
|
+ }, [currentTab]);
|
|
|
|
|
|
- if(currentTab)reSetNav(panelData,currentTab);
|
|
|
|
-
|
|
|
|
- },[currentTab]);
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
- useEffect(()=>{
|
|
|
|
- // console.log('systemTabs.length',systemTabs.length);
|
|
|
|
- if(systemTabs.length>6){
|
|
|
|
- const tabs = systemTabs.filter((a:any,index:number)=>{
|
|
|
|
- //暂时限制只展示最多5个
|
|
|
|
- if(index<=5){
|
|
|
|
- return a
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
+
|
|
|
|
+ if (systemTabs.length > 5) {
|
|
|
|
+ //set_onTabSystemTabs(tabs);
|
|
|
|
+ let _onTabSystemTabs: any[] = [];
|
|
|
|
+ let _set_onTabSystemTabs_hide: any[] = [];
|
|
|
|
+ systemTabs.forEach((a, index) => {
|
|
|
|
+ if (index <= 4) {
|
|
|
|
+ _onTabSystemTabs.push(a);
|
|
|
|
+ } else {
|
|
|
|
+ if (a.systemId == currentSelectedTabFromLocal.systemId) {
|
|
|
|
+ const _temp = _onTabSystemTabs[_onTabSystemTabs.length - 1];
|
|
|
|
+ _onTabSystemTabs.pop();
|
|
|
|
+ _onTabSystemTabs.push(a);
|
|
|
|
+ _set_onTabSystemTabs_hide.push(_temp);
|
|
|
|
+ } else {
|
|
|
|
+ _set_onTabSystemTabs_hide.push(a);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ set_onTabSystemTabs(_onTabSystemTabs);
|
|
|
|
+ set_onTabSystemTabs_hide(_set_onTabSystemTabs_hide);
|
|
|
|
+ } else {
|
|
|
|
+ set_onTabSystemTabs(systemTabs);
|
|
|
|
+ }
|
|
|
|
+ }, [systemTabs]);
|
|
|
|
+
|
|
|
|
|
|
- set_onTabSystemTabs(tabs);
|
|
|
|
- }else{
|
|
|
|
- set_onTabSystemTabs(systemTabs);
|
|
|
|
- }
|
|
|
|
- },[systemTabs]);
|
|
|
|
-
|
|
|
|
-
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
|
|
|
//_systemTabClickHandle(currentSelectedTabFromLocal); //恢复选中的tab
|
|
//_systemTabClickHandle(currentSelectedTabFromLocal); //恢复选中的tab
|
|
|
|
|
|
- document.body.addEventListener('click', (e:any) => {
|
|
|
|
|
|
+ document.body.addEventListener('click', (e: any) => {
|
|
|
|
|
|
- const classes = ['panel', 'left','typeBlockIcon', 'typeBlock', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon'];
|
|
|
|
|
|
+ const classes = ['panel', 'left', 'typeBlockIcon', 'typeBlock', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon'];
|
|
if (e.target) {
|
|
if (e.target) {
|
|
if (classes.includes(e.target.className)) {
|
|
if (classes.includes(e.target.className)) {
|
|
return
|
|
return
|
|
@@ -278,35 +305,51 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
<div className='menu' onClick={() => openNav()}>
|
|
<div className='menu' onClick={() => openNav()}>
|
|
<img src={require('../../../public/images/menu.png')} alt="" />
|
|
<img src={require('../../../public/images/menu.png')} alt="" />
|
|
</div>
|
|
</div>
|
|
- <span className='systemTitle' onClick={()=>goSystemIndex(pageTitle)}>{pageTitle}</span>
|
|
|
|
|
|
+ <span className='systemTitle' onClick={() => goSystemIndex(pageTitle)}>{pageTitle}</span>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<div className='userRelaInfoWrap'>
|
|
<div className='userRelaInfoWrap'>
|
|
<>
|
|
<>
|
|
{/**
|
|
{/**
|
|
* 已打开的tab
|
|
* 已打开的tab
|
|
*/}
|
|
*/}
|
|
<div className='tabWrap'>
|
|
<div className='tabWrap'>
|
|
- {onTabSystemTabs&&(onTabSystemTabs).map((item, index) => (
|
|
|
|
|
|
+ {onTabSystemTabs && (onTabSystemTabs).map((item, index) => (
|
|
<div key={index} className={currentSelectedTab?.menuId == item.menuId ? `tab on` : `tab`} onClick={() => _systemTabClickHandle(item)}>
|
|
<div key={index} className={currentSelectedTab?.menuId == item.menuId ? `tab on` : `tab`} onClick={() => _systemTabClickHandle(item)}>
|
|
<div className='tabText'>{item.name} </div>
|
|
<div className='tabText'>{item.name} </div>
|
|
<div className='closeIconWrap'>
|
|
<div className='closeIconWrap'>
|
|
- <img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} />
|
|
|
|
|
|
+ <img src={tabCloseIcon} onClick={(e) => closeTabHandle(item, e)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
+ {systemTabs.length > 5 && <div className={showMoreTabPannel?'tabMore active':'tabMore'} onMouseEnter={() => set_showMoreTabPannel(true)} >
|
|
|
|
+ {showMoreTabPannel && (<div className='morePannel' onMouseLeave={() => set_showMoreTabPannel(false)}>
|
|
|
|
+ {
|
|
|
|
+ onTabSystemTabs_hide.map((item, index) => {
|
|
|
|
+ return (<div key={index} className='moreItem' onClick={()=>moreItemClickHandle(item)}>
|
|
|
|
+ {/* <Tooltip placement="right" title={item.name}> */}
|
|
|
|
+ <span>{item.name}</span>
|
|
|
|
+ {/* </Tooltip> */}
|
|
|
|
+ </div>)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ </div>)}
|
|
|
|
+ </div>}
|
|
</>
|
|
</>
|
|
-
|
|
|
|
|
|
|
|
- {/* <div className='notification'>
|
|
|
|
|
|
+
|
|
|
|
+ <div className='notification'>
|
|
<img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
|
|
<img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
|
|
- </div> */}
|
|
|
|
- <Tooltip title={<UserPannel />} color="#fff" onVisibleChange={(visible) => setArrowRotate(visible)}>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <Tooltip className='topBarTooltip' placement='bottomRight' title={<UserPannel />} color="#fff" onOpenChange={(visible) => setArrowRotate(visible)}>
|
|
<div className='user'>
|
|
<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 className='avator'><img src={require('../../../public/images/avatar.png')} /></div>
|
|
|
|
+ <div className='info'>
|
|
|
|
+ <span className='hospName'>{localStorage.getItem('currentHospName')}</span>
|
|
|
|
+ <span className='name'>{userData?.name}</span>
|
|
|
|
+ </div>
|
|
|
|
+ {/* <img className={arrowRotate ? `arrow on` : `arrow`} src={require('../../../public/images/arrow_white.png')} /> */}
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
@@ -314,7 +357,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
{
|
|
{
|
|
ifOpenPannel && (
|
|
ifOpenPannel && (
|
|
<div className='panel' onClick={e => e.stopPropagation()}>
|
|
<div className='panel' onClick={e => e.stopPropagation()}>
|
|
-
|
|
|
|
|
|
+
|
|
<div className='left'>
|
|
<div className='left'>
|
|
{
|
|
{
|
|
panelData.map((item, index) => {
|
|
panelData.map((item, index) => {
|