WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/RightContent.js

import React, { PureComponent } from 'react';
import { FormattedMessage } from 'umi/locale';
import { LogoutOutlined } from '@ant-design/icons';
import { Spin, Tag, Menu, Avatar } from 'antd';
import HeaderDropdown from '@/components/HeaderDropdown';
import styles from '@/components/GlobalHeader/index.less';
import { connect } from 'dva';
import { Logout } from '@/services/PurchaseList';
import router from 'umi/router';

@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
class GlobalHeaderRight extends PureComponent {
  async onMenuClick() {
    // this.props.dispatch({
    //   type: 'purchaseList/logout',
    // });
    await Logout();
    router.push('/login');
  }
  render() {
    const { currentUser = {} } = this.props;
    const theme = 'dark';
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={() => this.onMenuClick()}>
        <Menu.Item key="logout">
          <LogoutOutlined />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );

    let className = styles.right;
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`;
    }
    return (
      <div className={className}>
        {currentUser.CName ? (
          <div className={styles.userbox}>
            <HeaderDropdown overlay={menu}>
              <span className={`${styles.action} ${styles.account}`}>
                <Avatar
                  size="small"
                  className={styles.avatar}
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                  alt="avatar"
                />
                <span className={styles.name}>{currentUser.CName}</span>
              </span>
            </HeaderDropdown>
          </div>
        ) : (
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        )}
      </div>
    );
  }
}
export default GlobalHeaderRight;