完成会员角色切换相关

src/layouts/components/RightContent.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Avatar from './AvatarDropdown';
 import SelectLang from './SelectLang';
 import Location from './Location';
+import Roles from './Roles';
 import styles from '../styles/RightContent.less';
 
 // export type SiderTheme = 'light' | 'dark';
@@ -25,6 +26,7 @@ const GlobalHeaderRight: React.SFC<{}> = (props) => {
 
   return (
     <div className={className}>
+        <Roles />
         <Location />
         <SelectLang />
         <Tooltip title="消息">

src/layouts/components/Roles.tsx

+import React, { useState, useEffect } from 'react';
+import { Dropdown, Space, Menu, message } from 'antd';
+import { getAuth, setAuth, setRouters } from '@/utils/auth';
+import { PublicApi } from '@/services/api';
+
+interface MemberRole {
+  memberRoleId: number; 
+  memberRoleName: string; 
+};
+
+const Roles: React.FC = () => {
+  const [curRole, setCurRole] = useState<MemberRole>(null);
+  const [roles, setRoles] = useState<MemberRole[]>([]);
+
+  useEffect(() => {
+    const userInfo = getAuth();
+    setRoles(userInfo.roles || []); 
+
+    if (userInfo.roles && userInfo.roles.length) {
+      const current = userInfo.roles.find(item => item.memberRoleId === userInfo.memberRoleId);
+      setCurRole(current); 
+    }
+  }, []);
+
+  const handleSelect = (item: MemberRole) => {
+    const { memberRoleId } = item;
+    if (memberRoleId === curRole.memberRoleId) {
+      return;
+    }
+
+    const msg = message.loading({
+      content: '正在切换角色...', 
+      duration: 0, 
+    });
+
+    PublicApi.postMemberLoginSwitchrole({
+      memberRoleId, 
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      msg();
+      setAuth(res.data);
+      setRouters(res.data.urls); 
+      setTimeout(() => {
+        window.location.replace('/memberCenter/home');
+      }, 800);
+    });
+  };
+
+  const menuHeaderDropdown = (
+    <Menu selectedKeys={curRole ? [`${curRole.memberRoleId}`] : []}>
+      {roles.map(item => (
+        <Menu.Item key={item.memberRoleId} onClick={() => handleSelect(item)}>
+          <Space>
+            <span>{item.memberRoleName}</span>
+          </Space>
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Dropdown 
+      overlay={menuHeaderDropdown} 
+      placement="bottomRight" 
+    >
+      <span style={{ cursor: 'pointer', padding: '0 15px' }}>
+        {curRole?.memberRoleName}
+      </span>
+    </Dropdown>
+  )
+}; 
+
+export default Roles;
\ No newline at end of file