ai-admin/src/components/AHeader/index.js

import { Layout, Dropdown ,Menu } from 'antd';
import { withRouter } from 'react-router'
import { useState, useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import { panesNow } from '@reducers/tabPanes.js';
import utils from '@utils/index';
import logo from '@images/logo.png';
import msg from '@images/msg.png';
import me from '@images/me.png';
import down from '@images/down.png';
import './index.less'
import {message} from "antd/lib/index";
import { setSys,setUser } from '@reducers/userInfo.js';
import apiObj from '@api/index';

const {xPost,api} =  apiObj;
const propTypes = {

}
const defaultProps = {};
const { Header } = Layout;
const { getTimeDetail } = utils;
function AHeader({ history,hideName }){
    const dispatch = useDispatch();
    const [dateTime,setDateTime] = useState('');
    const { user, sysName} = useSelector((state)=>{
        return state.userInfo;
    });
    //退出
    function loginOut(){
        localStorage.removeItem("token");
        localStorage.removeItem("systemId");
        localStorage.removeItem("hospitalId");
        dispatch(panesNow([]));
        history.push('/login');
    }
    //获取组织列表
    function getOrgList(){
        xPost(api.getUserHospitals).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                const { userInfo,software } = data;
                const sysId = localStorage.getItem("systemId");
                const hisId = localStorage.getItem("hospitalId");
                const sys = software.find((it)=>{
                    return +it.id===+sysId
                });
                dispatch(setUser(userInfo));
                sys&&dispatch(setSys({sysId,sysName:sys.name,hisId}));
            }else{
                message.warning(res.data.msg||'获取医院列表失败');
            }
        })
    }
    //修改密码
    function changePsd(){

    }
    //时间
    let interVal;
    function countTime(){
        interVal = setInterval(()=>{
            setDateTime(getTimeDetail())
        },1000);
    }
    useEffect(()=>{
        countTime();
        if(!user.name){
            getOrgList();
        }
        return function clearUp(){
            clearInterval(interVal)
        }
    },[]);
    const menu = (
        <Menu>
            <Menu.Item key="0">
                <span className='changePsd' onClick={changePsd}>修改密码</span>
            </Menu.Item>
            <Menu.Divider/>
            <Menu.Item key="3" onClick={loginOut}>退出</Menu.Item>
        </Menu>
    );
    return (
        <Header className='page-header'>
            <img className='logo' src={logo} alt=""/>
            {hideName?'':<><span className='break-line'>|</span>
            <span className='sys-name'>{sysName}</span></>}
            <div className='infos'>
                <span className='time'>{dateTime}</span>
                <span className='break-line'>|</span>
                {/*<img className='msg-icon' src={msg} alt="未读消息"/>*/}
                <div className="user">
                    <Dropdown overlay={menu} trigger={['click']}>
                        <span className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                            <img className='user-icon' src={me} alt="用户头像"/>
                            <i className='user-name'>{user.name}</i>
                            <img src={down} alt=""/>
                        </span>
                    </Dropdown>
                </div>
            </div>
        </Header>
    )
}

AHeader.propTypes = propTypes;
AHeader.defaultProps = defaultProps;
export default withRouter(AHeader);