|
@@ -1,7 +1,7 @@
|
|
|
/*
|
|
|
* @Author: your name
|
|
|
* @Date: 2021-11-16 09:12:37
|
|
|
- * @LastEditTime: 2024-04-09 14:27:27
|
|
|
+ * @LastEditTime: 2024-07-18 16:51:08
|
|
|
* @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
|
|
@@ -22,6 +22,7 @@ import { Divider } from 'antd';
|
|
|
import { updateTokenReq } from '@/service/user';
|
|
|
import { logoutHandle } from '@/global';
|
|
|
|
|
|
+
|
|
|
interface TopBarType {
|
|
|
onTabChange?: (data: TopBar.Tab[]) => void; //当tab切换时回调
|
|
|
openedTabs: TopBar.Tab[]; //已打开的列表
|
|
@@ -29,14 +30,15 @@ interface TopBarType {
|
|
|
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[];
|
|
|
- logo?: string;
|
|
|
- topBarTitle?: string;
|
|
|
+ logo?:string;
|
|
|
+ topBarTitle?:string;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
- const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData, currentTab, logo = undefined, topBarTitle = '欢迎进入医管平台' } = props;
|
|
|
+ const { onTabChange, userPannelTabClick, onCloseTab, onTabClick, userData, navData, currentTab,logo=undefined,topBarTitle='欢迎进入医管平台' } = props;
|
|
|
const [systemTabs, setSystemTabs] = useState<TopBar.Tab[]>([]); //已打开的tab
|
|
|
const [currentSelectedTab, setCurrentSelectedTab] = useState<TopBar.Tab>();
|
|
|
const [ifOpenPannel, setIfOpenPannel] = useState(false);
|
|
@@ -46,32 +48,39 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
const [panelData, set_panelData] = useState<TopBar.PanelData[]>([]);
|
|
|
|
|
|
const [onTabSystemTabs, set_onTabSystemTabs] = useState<TopBar.Tab[]>([]); //tab导航可以放下的数量,剩余通过下拉获取
|
|
|
- const [onTabSystemTabs_hide, set_onTabSystemTabs_hide] = useState<TopBar.Tab[]>([]); //下拉掩藏的导航
|
|
|
+ const [onTabSystemTabs_hide, set_onTabSystemTabs_hide] = useState<TopBar.Tab[]>([]); //下拉掩藏的导航
|
|
|
|
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
- const [tokenUpdateModalVisible, set_tokenUpdateModalVisible] = useState(false);
|
|
|
+ const [tokenUpdateModalVisible,set_tokenUpdateModalVisible] = useState(false);
|
|
|
const location = useLocation();
|
|
|
|
|
|
const [showMoreTabPannel, set_showMoreTabPannel] = useState(false);
|
|
|
+ const [password,set_password] = useState<string|undefined>(undefined);
|
|
|
+
|
|
|
|
|
|
const localSavedTab = localStorage.getItem('currentSelectedTab');
|
|
|
|
|
|
const currentSelectedTabFromLocal = localSavedTab ? JSON.parse(localSavedTab) : {};
|
|
|
|
|
|
- let password: undefined | string = undefined;
|
|
|
+
|
|
|
|
|
|
const _systemTabClickHandle = (item: TopBar.Tab) => {
|
|
|
+
|
|
|
//导航栏tab点击
|
|
|
// console.log('_systemTabClickHandle',item);
|
|
|
onTabClick && onTabClick(item);
|
|
|
localStorage.setItem('currentSelectedTab', JSON.stringify(item));
|
|
|
setCurrentSelectedTab(item);
|
|
|
+
|
|
|
};
|
|
|
|
|
|
+
|
|
|
+
|
|
|
const _systemListClickHandle = (data: TopBar.Tab, currentActivedBlockIndex: number, index: number, i: number) => {
|
|
|
//导航栏系统菜单列表点击回调
|
|
|
+
|
|
|
if (currentSelectedTab?.menuId == data.menuId) return;
|
|
|
-
|
|
|
+
|
|
|
//临时保存衣打开过的菜单
|
|
|
const t = localStorage.getItem('visitedTabs');
|
|
|
|
|
@@ -88,7 +97,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
|
|
|
_systemTabClickHandle(data); //触发一次tab点击
|
|
|
|
|
|
- set_pageTitle(panelData[currentActivedBlockIndex].child[index].name);
|
|
|
+ set_pageTitle(panelData[currentActivedBlockIndex].child[index].name)
|
|
|
|
|
|
if (panelData[currentActivedBlockIndex].child[index].child) {
|
|
|
//console.log([...panelData[currentActivedBlockIndex].child[index].child])
|
|
@@ -126,12 +135,12 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
|
|
|
const UserPannel = () => {
|
|
|
return (
|
|
|
- <div className="userPannel">
|
|
|
- <div className="userPannelTab" onClick={() => _userPannelTabClick('SETTING')}>
|
|
|
+ <div className='userPannel'>
|
|
|
+ <div className='userPannelTab' onClick={() => _userPannelTabClick('SETTING')}>
|
|
|
<SettingOutlined />
|
|
|
<span>设置</span>
|
|
|
</div>
|
|
|
- <div className="userPannelTab" onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
|
+ <div className='userPannelTab' onClick={() => _userPannelTabClick('LOGOUT')}>
|
|
|
<LogoutOutlined />
|
|
|
<span>退出</span>
|
|
|
</div>
|
|
@@ -141,10 +150,11 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
|
|
|
const goChannelIndex = (menuData: any) => {
|
|
|
setIfOpenPannel(false);
|
|
|
- onTabClick && onTabClick(menuData);
|
|
|
- };
|
|
|
+ onTabClick && onTabClick(menuData)
|
|
|
+ }
|
|
|
|
|
|
const goToHome = () => {
|
|
|
+
|
|
|
const go = () => {
|
|
|
history.replace('/index');
|
|
|
setSystemTabs([]); //清空tab导航
|
|
@@ -157,7 +167,7 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
localStorage.removeItem('selectedKeys');
|
|
|
// localStorage.removeItem('visitedTabs');
|
|
|
localStorage.removeItem('openKeys');
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
const currentSelectedSubHop_json = localStorage.getItem('currentSelectedSubHop');
|
|
|
if (currentSelectedSubHop_json) {
|
|
@@ -170,40 +180,47 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
} else {
|
|
|
go();
|
|
|
}
|
|
|
- };
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
const goSystemIndex = (name: string) => {
|
|
|
if (panelData[currentActivedBlockIndex]) {
|
|
|
- const result: TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter((t) => t.name == name);
|
|
|
+ const result: TopBar.TypeBlock[] = panelData[currentActivedBlockIndex].child.filter(t => (t.name == name));
|
|
|
if (result.length > 0) {
|
|
|
- _systemTabClickHandle(Object.assign(result[0]));
|
|
|
+ _systemTabClickHandle(Object.assign(result[0]))
|
|
|
// history.push(result[0].path)
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
const openNav = () => {
|
|
|
setIfOpenPannel(!ifOpenPannel);
|
|
|
- };
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
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);
|
|
|
+ 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]);
|
|
|
- };
|
|
|
+ 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) != '{}') {
|
|
|
+
|
|
|
let blockIndex = 0;
|
|
|
let channelIndex = 0;
|
|
|
|
|
|
+
|
|
|
const _currentSelectedTabFromLocal = cur;
|
|
|
|
|
|
one: for (let index = 0; index < _panelData.length; index++) {
|
|
@@ -229,21 +246,23 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
}
|
|
|
|
|
|
if (_panelData && _panelData.length > 0 && _panelData[blockIndex].child) {
|
|
|
- setSystemTabs(_panelData[blockIndex].child[channelIndex].child); //恢复体系列表
|
|
|
+ setSystemTabs(_panelData[blockIndex].child[channelIndex].child); //恢复体系列表
|
|
|
setCurrentSelectedTab(_currentSelectedTabFromLocal);
|
|
|
localStorage.setItem('currentSelectedTab', JSON.stringify(_currentSelectedTabFromLocal));
|
|
|
- setInitialState((s) => ({ ...s, currentSelectedSys: _currentSelectedTabFromLocal }));
|
|
|
+ setInitialState((s) => ({ ...s, currentSelectedSys: _currentSelectedTabFromLocal }) as any);
|
|
|
}
|
|
|
|
|
|
// console.log({_currentSelectedTabFromLocal,location});
|
|
|
- const { pathname } = location;
|
|
|
- if (pathname.indexOf(_currentSelectedTabFromLocal.path) == -1) {
|
|
|
+ const {pathname} = location;
|
|
|
+ if(pathname.indexOf(_currentSelectedTabFromLocal.path) == -1){
|
|
|
history.push(_currentSelectedTabFromLocal.path);
|
|
|
}
|
|
|
|
|
|
//_systemTabClickHandle(_currentSelectedTabFromLocal); //恢复选中的tab
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
const [hideTimer, setHideTimer] = useState<null | any>(null);
|
|
|
const handleTabMoreMouseLeave = () => {
|
|
@@ -267,19 +286,21 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
};
|
|
|
|
|
|
const updateToken = async () => {
|
|
|
- const { account } = JSON.parse(localStorage.getItem('userInfo') as string);
|
|
|
- const hospSign = localStorage.getItem('hospSign');
|
|
|
- const data = {
|
|
|
- account,
|
|
|
- password: password,
|
|
|
- hospSign,
|
|
|
- };
|
|
|
- const resp = await updateTokenReq(data);
|
|
|
- if (resp) {
|
|
|
- password = undefined;
|
|
|
- set_tokenUpdateModalVisible(false);
|
|
|
- }
|
|
|
- };
|
|
|
+ const account = (localStorage.getItem('account')) as string;
|
|
|
+ const hospSign = localStorage.getItem('hospSign');
|
|
|
+ const data = {
|
|
|
+ account,
|
|
|
+ password:password,
|
|
|
+ hospSign
|
|
|
+ }
|
|
|
+ const resp = await updateTokenReq(data);
|
|
|
+ if(resp){
|
|
|
+ set_password(undefined);
|
|
|
+ set_tokenUpdateModalVisible(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (currentSelectedTabFromLocal) {
|
|
@@ -287,17 +308,25 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
}
|
|
|
|
|
|
set_panelData(navData);
|
|
|
- }, [navData]);
|
|
|
+
|
|
|
+ }, [navData])
|
|
|
|
|
|
useEffect(() => {
|
|
|
+
|
|
|
if (currentTab) reSetNav(panelData, currentTab);
|
|
|
+
|
|
|
}, [currentTab]);
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- set_pageTitle(topBarTitle);
|
|
|
- }, [topBarTitle]);
|
|
|
+
|
|
|
+ useEffect(()=>{
|
|
|
+ set_pageTitle(topBarTitle);
|
|
|
+ },[topBarTitle])
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
useEffect(() => {
|
|
|
+
|
|
|
if (systemTabs.length > 5) {
|
|
|
//set_onTabSystemTabs(tabs);
|
|
|
let _onTabSystemTabs: any[] = [];
|
|
@@ -323,47 +352,25 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
}
|
|
|
}, [systemTabs]);
|
|
|
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
+
|
|
|
//_systemTabClickHandle(currentSelectedTabFromLocal); //恢复选中的tab
|
|
|
|
|
|
document.body.addEventListener('click', (e: any) => {
|
|
|
- const classes = [
|
|
|
- 'panel',
|
|
|
- 'typeBlockName',
|
|
|
- 'left',
|
|
|
- 'typeBlockIcon',
|
|
|
- 'typeBlock',
|
|
|
- 'typeBlock active',
|
|
|
- 'active',
|
|
|
- 'right',
|
|
|
- 'row',
|
|
|
- 'rowDetai',
|
|
|
- 'channelName',
|
|
|
- 'channelList',
|
|
|
- 'systemTab',
|
|
|
- 'channelIcon',
|
|
|
- 'rowDetail',
|
|
|
- 'typeBlockIcon typeBlockIcon1',
|
|
|
- 'typeBlockIcon typeBlockIcon2',
|
|
|
- 'typeBlockIcon typeBlockIcon3',
|
|
|
- 'typeBlockIcon typeBlockIcon4',
|
|
|
- 'typeBlockIcon typeBlockIcon5',
|
|
|
- 'typeBlockIcon typeBlockIcon6',
|
|
|
- 'typeBlockIcon typeBlockIcon7',
|
|
|
- 'typeBlockIcon typeBlockIcon8',
|
|
|
- 'typeBlockIcon typeBlockIcon9',
|
|
|
- ];
|
|
|
+
|
|
|
+ const classes = ['panel', 'typeBlockName', 'left', 'typeBlockIcon', 'typeBlock', 'typeBlock active', 'active', 'right', 'row', 'rowDetai', 'channelName', 'channelList', 'systemTab', 'channelIcon', 'rowDetail','typeBlockIcon typeBlockIcon1','typeBlockIcon typeBlockIcon2','typeBlockIcon typeBlockIcon3','typeBlockIcon typeBlockIcon4','typeBlockIcon typeBlockIcon5','typeBlockIcon typeBlockIcon6','typeBlockIcon typeBlockIcon7','typeBlockIcon typeBlockIcon8','typeBlockIcon typeBlockIcon9'];
|
|
|
if (e.target) {
|
|
|
- let key = e.target.className ? e.target.className : '';
|
|
|
- if (classes.includes(key) || (typeof key == 'string' && key.indexOf('typeBlockIcon') != -1)) {
|
|
|
- return;
|
|
|
+ let key = e.target.className?e.target.className:'';
|
|
|
+ if (classes.includes(key)||(typeof key == 'string'&&key.indexOf('typeBlockIcon') != -1)) {
|
|
|
+ return
|
|
|
}
|
|
|
}
|
|
|
setIfOpenPannel(false);
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 事件监听器的函数定义
|
|
|
- const handleStorageChange = (e: any) => {
|
|
|
+ const handleStorageChange = (e:any) => {
|
|
|
if (e.key === 'tokenExpired') {
|
|
|
set_tokenUpdateModalVisible(true);
|
|
|
}
|
|
@@ -376,138 +383,128 @@ const TopBar: React.FC<TopBarType> = (props) => {
|
|
|
return () => {
|
|
|
window.removeEventListener('removeLocalItemEvent', handleStorageChange);
|
|
|
};
|
|
|
+
|
|
|
}, []);
|
|
|
|
|
|
return (
|
|
|
- <div className="topBar" onClick={(e) => e.stopPropagation()}>
|
|
|
- <Modal className="TokenUpdateModal" open={tokenUpdateModalVisible} width={400} title={false} footer={false} closable={false}>
|
|
|
- <div className="content">
|
|
|
- <div className="title">登录超时锁定</div>
|
|
|
- <div className="form">
|
|
|
- <div className="avatar">
|
|
|
- <img className="avatarImg" src={require('../../../public/images/initAvatar.png')} alt="" />
|
|
|
- <img className="suoding" src={require('../../../public/images/suoding.png')} alt="" />
|
|
|
- </div>
|
|
|
- <div className="name">{userData?.name}</div>
|
|
|
- <Input.Password onChange={(e) => (password = e.target.value)} className="input" />
|
|
|
- <div className="updateBtn" onClick={() => updateToken()}>
|
|
|
- 解锁
|
|
|
- </div>
|
|
|
- <a onClick={() => logoutHandle()}>退出登录</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div className='topBar' onClick={e => e.stopPropagation()}>
|
|
|
+ <Modal className='TokenUpdateModal' open={tokenUpdateModalVisible} width={400} title={false} footer={false} closable={false} >
|
|
|
+ <div className='content'>
|
|
|
+ <div className='title'>登录超时锁定</div>
|
|
|
+ <div className='form'>
|
|
|
+ <div className='avatar'>
|
|
|
+ <img className='avatarImg' src={require('../../../public/images/initAvatar.png')} alt="" />
|
|
|
+ <img className='suoding' src={require('../../../public/images/suoding.png')} alt="" />
|
|
|
+ </div>
|
|
|
+ <div className='name'>{userData?.name}</div>
|
|
|
+ <Input.Password onChange={(e)=>set_password(e.target.value)} value={password} className='input' autoComplete='off' />
|
|
|
+ <div className='updateBtn' onClick={()=>updateToken()}>解锁</div>
|
|
|
+ <a onClick={()=>logoutHandle()}>退出登录</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</Modal>
|
|
|
- <div className="logoWrap">
|
|
|
- {logo && <img className="logo" src={logo} onClick={() => goToHome()} />}
|
|
|
+ <div className='logoWrap'>
|
|
|
+ {logo&&<img className='logo' src={logo} onClick={() => goToHome()} />}
|
|
|
<Divider type="vertical" style={{ background: 'white', height: 16, opacity: 0.29, position: 'relative', top: 1, marginLeft: 16, marginRight: 8 }} />
|
|
|
<div className={ifOpenPannel ? 'menu active' : 'menu'} onClick={() => openNav()}>
|
|
|
<img src={require('../../../public/images/menu.png')} alt="" />
|
|
|
</div>
|
|
|
- <span className="systemTitle" onClick={() => goSystemIndex(pageTitle)}>
|
|
|
- {pageTitle}
|
|
|
- </span>
|
|
|
+ <span className='systemTitle' onClick={() => goSystemIndex(pageTitle)}>{pageTitle}</span>
|
|
|
</div>
|
|
|
|
|
|
- <div className="userRelaInfoWrap">
|
|
|
+ <div className='userRelaInfoWrap'>
|
|
|
<>
|
|
|
{/**
|
|
|
* 已打开的tab
|
|
|
*/}
|
|
|
- <div className="tabWrap">
|
|
|
- {onTabSystemTabs &&
|
|
|
- onTabSystemTabs.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 className='tabWrap'>
|
|
|
+ {onTabSystemTabs && (onTabSystemTabs).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>
|
|
|
- {systemTabs.length > 5 && (
|
|
|
- <div className={showMoreTabPannel ? 'tabMore active' : 'tabMore'} onMouseEnter={() => set_showMoreTabPannel(true)} onMouseLeave={handleTabMoreMouseLeave}>
|
|
|
- {showMoreTabPannel && (
|
|
|
- <div className="morePannel" onMouseEnter={handleMorePannelMouseEnter} onMouseLeave={handleMorePannelMouseLeave}>
|
|
|
- {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>
|
|
|
- )}
|
|
|
+ {systemTabs.length > 5 && <div className={showMoreTabPannel ? 'tabMore active' : 'tabMore'} onMouseEnter={() => set_showMoreTabPannel(true)} onMouseLeave={handleTabMoreMouseLeave} >
|
|
|
+ {showMoreTabPannel && (<div className='morePannel'
|
|
|
+ onMouseEnter={handleMorePannelMouseEnter}
|
|
|
+ onMouseLeave={handleMorePannelMouseLeave}
|
|
|
+ >
|
|
|
+ {
|
|
|
+ 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">
|
|
|
- <img className="notificationIcon" src={require('../../../public/images/notificationIcon.png')} />
|
|
|
+
|
|
|
+ <div className='notification'>
|
|
|
+ <img className='notificationIcon' src={require('../../../public/images/notificationIcon.png')} />
|
|
|
</div>
|
|
|
- <Tooltip className="topBarTooltip" placement="bottomRight" title={<UserPannel />} color="#fff" onOpenChange={(visible) => setArrowRotate(visible)}>
|
|
|
- <div className="user">
|
|
|
- <div className="avator">
|
|
|
- <img src={require('../../../public/images/avatar.png')} />
|
|
|
- </div>
|
|
|
- <div className="info">
|
|
|
- <span className="hospName">{localStorage.getItem('hospAbbreviation')}</span>
|
|
|
- <span className="name">{userData?.name}</span>
|
|
|
+ <Tooltip className='topBarTooltip' placement='bottomRight' title={<UserPannel />} color="#fff" onOpenChange={(visible) => setArrowRotate(visible)}>
|
|
|
+ <div className='user'>
|
|
|
+ <div className='avator'><img src={require('../../../public/images/avatar.png')} /></div>
|
|
|
+ <div className='info'>
|
|
|
+ <span className='hospName'>{localStorage.getItem('hospAbbreviation')}</span>
|
|
|
+ <span className='name'>{userData?.name}</span>
|
|
|
</div>
|
|
|
{/* <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="" /> */}
|
|
|
- <div className={` typeBlockIcon typeBlockIcon${item.icon}`}></div>
|
|
|
- <span className="typeBlockName">{item.name}</span>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
- <div className="right">
|
|
|
- <div className="panelCloseBtn" onClick={() => setIfOpenPannel(false)}></div>
|
|
|
- {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={item.icon ? item.icon : require(`../../../public/images/tongyong_tixi.png`)} alt="" />
|
|
|
- <div className="rowDetail">
|
|
|
- <div className="channelName" onClick={() => goChannelIndex(item)}>
|
|
|
- {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>
|
|
|
- );
|
|
|
- })}
|
|
|
+ {
|
|
|
+ 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="" /> */}
|
|
|
+ <div className={` typeBlockIcon typeBlockIcon${item.icon}`} ></div>
|
|
|
+ <span className='typeBlockName'>{item.name}</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div className='right'>
|
|
|
+ <div className='panelCloseBtn' onClick={() => setIfOpenPannel(false)} ></div>
|
|
|
+ {
|
|
|
+ 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={item.icon?item.icon:require(`../../../public/images/tongyong_tixi.png`)} alt="" />
|
|
|
+ <div className='rowDetail'>
|
|
|
+ <div className='channelName' onClick={() => goChannelIndex(item)}>{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>
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
</div>
|
|
|
);
|
|
|
};
|