将staff信息存入仓库

src/models/Staff.ts

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 
 export interface Token {
+    staffId: string;
     accessToken: string;
     refreshToken: string;
     clientSecret: string;

src/models/store.ts

@@ -1,17 +1,19 @@
 import {configureStore, ThunkAction, Action, PayloadAction, createSlice, combineReducers} from '@reduxjs/toolkit';
-import {Token} from "./Staff"
+import {Department, Staff, Token} from "./Staff"
 import {persistStore, persistReducer} from 'redux-persist'
 import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
 const tokenSlice = createSlice({
     name: 'token',
     initialState: {
+        staffId: '',
         accessToken: '',
         refreshToken: '',
         clientSecret: ''
     },
     reducers: {
         setToken: (state, action: PayloadAction<Token>) => {
+            state.staffId = action.payload.staffId
             state.accessToken = action.payload.accessToken
             state.refreshToken = action.payload.refreshToken
             state.clientSecret = action.payload.clientSecret
@@ -21,8 +23,29 @@ const tokenSlice = createSlice({
         },
     },
 });
+
+const staffSlice = createSlice({
+    name: 'staff',
+    initialState: {
+        staffName: "",
+        managingDepartment: { departmentId: 0,
+            departmentName: ''},
+        staffDepartments: [{ departmentId: 0,
+            departmentName: ''}]
+    },
+    reducers: {
+        setStaff: (state, action: PayloadAction<Staff>) => {
+            state.staffName = action.payload.staffName
+            state.managingDepartment = action.payload.managingDepartment
+            state.staffDepartments = action.payload.staffDepartments
+        },
+    },
+});
+
 export const {setToken, setAccessToken} = tokenSlice.actions;
+export const {setStaff} = staffSlice.actions;
 export const getToken = (state: RootState) => state.token;
+export const getStaff = (state: RootState) => state.staff;
 
 const persistConfig = {
     key: 'root',
@@ -33,7 +56,8 @@ const persistedReducer = persistReducer(persistConfig, tokenSlice.reducer)
 
 export const store = configureStore({
     reducer:  {
-        token: persistedReducer
+        token: persistedReducer,
+        staff: staffSlice.reducer
     },
     middleware: getDefaultMiddleware => {
         return getDefaultMiddleware({

src/pages/HomeView.tsx

@@ -2,12 +2,12 @@ import React, {useState, useEffect} from 'react';
 import {UploadOutlined, UserOutlined, VideoCameraOutlined} from '@ant-design/icons';
 import {Layout, Menu, theme, Typography, Button, Dropdown, MenuProps} from 'antd';
 import {useAppDispatch, useAppSelector} from "../models/hooks";
-import {getToken, setToken, store} from "../models/store";
+import {getStaff, getToken, setStaff, setToken, store} from "../models/store";
 import {Link, Outlet, useLocation, useNavigate} from "react-router-dom";
 import Icon from '@ant-design/icons';
 import {Logo} from "../assets/icons";
 import axiosInstance from "../utils/axiosInstance";
-import {Department, Staff} from "../models/Staff";
+import {Department, Staff, Token} from "../models/Staff";
 
 const {Title} = Typography;
 const {Header, Content, Footer, Sider} = Layout;
@@ -18,7 +18,8 @@ function HeaderBar(props: any) {
         token: {colorBgContainer, colorPrimary},
     } = theme.useToken();
 
-    const token = useAppSelector(getToken);
+    const token:Token = useAppSelector(getToken);
+    const staff:Staff = useAppSelector(getStaff);
     const dispatch = useAppDispatch()
     const navigate = useNavigate()
 
@@ -29,6 +30,7 @@ function HeaderBar(props: any) {
                 break
             case 'logout':
                 dispatch(setToken({
+                    staffId: '',
                     accessToken: '',
                     refreshToken: '',
                     clientSecret: ''
@@ -88,13 +90,13 @@ function HeaderBar(props: any) {
                     marginRight: '12px', height: '100%',
                     display: 'flex', justifyContent: 'center', alignItems: 'center'
                 }}>
-                    <span style={{marginRight: '12px'}}>{departmentToString(props.staff)}</span>
+                    <span style={{marginRight: '12px'}}>{departmentToString(staff)}</span>
-                    <span style={{fontWeight: "bold", marginRight: '12px'}}>{props.staff.staffName}</span>
+                    <span style={{fontWeight: "bold", marginRight: '12px'}}>{staff.staffName}</span>
                     <div style={{
                         width: '24px', height: '24px', backgroundColor: colorPrimary, borderRadius: '12px',
                         display: 'flex', justifyContent: 'center', alignItems: 'center'
                     }}>
-                        <span style={{color: 'white'}}>{props.staff.staffName[0]}</span>
+                        <span style={{color: 'white'}}>{staff.staffName[0]}</span>
                     </div>
                 </Button>
             </Dropdown>
@@ -120,6 +122,7 @@ function HomeView() {
     const token = useAppSelector(getToken);
     const navigate = useNavigate();
     const location = useLocation()
+    const dispatch = useAppDispatch();
     console.log(store.getState())
 
     let items = [{
@@ -148,13 +151,6 @@ function HomeView() {
         token: {colorBgContainer, colorPrimary},
     } = theme.useToken();
 
-
-    const [staff, setStaff] = useState({
-        staffName: "",
-        managingDepartment: null,
-        staffDepartments: []
-    })
-
     const [menuItems, setMenuItems] = useState(items.slice(0, 2))
     const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([''])
 
@@ -164,8 +160,9 @@ function HomeView() {
             method: 'get'
         }).then(response => {
             console.log(response.data)
-            const staff = response.data
+            const staff:Staff = response.data
-            setStaff(response.data)
+            dispatch(setStaff(staff))
+
             if (location.pathname === '/')
                 navigate('/invoice/mine')
 
@@ -225,7 +222,7 @@ function HomeView() {
                 <MyMenu items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
             </Sider>
             <Layout>
-                <HeaderBar staff={staff}/>
+                <HeaderBar/>
                 <Content style={{margin: '0'}}>
                     <Outlet />
                 </Content>

src/pages/Invoice/mine/InvoiceUploadView.tsx

@@ -235,14 +235,6 @@ class InvoiceUploadView extends React.Component<any, any> {
         this.setState({open: value})
     }
 
-    setLoading(value: Boolean) {
-        this.setState({loading: value})
-    }
-
-    setUploadStep(value: number) {
-        this.setState({uploadStep: value})
-    }
-
     showUploadView = () => {
         this.setOpen(true);
     };

src/pages/login/LoginView.tsx

@@ -21,6 +21,7 @@ function LoginView() {
         axios.post(baseUrl + 'login', data).then(function (response) {
             console.log(response.data)
             dispatch(setToken({
+                staffId: values.staffId,
                 accessToken: response.data.accessToken,
                 refreshToken: response.data.refreshToken,
                 clientSecret: response.data.clientSecret

src/utils/axiosInstance.ts

@@ -35,6 +35,7 @@ axiosInstance.interceptors.response.use(
             if (error.config.isRetry) {
                 console.log('isRetry')
                 store.dispatch(setToken({
+                    staffId: '',
                     accessToken: '',
                     refreshToken: '',
                     clientSecret: ''
@@ -63,6 +64,7 @@ axiosInstance.interceptors.response.use(
                         console.log('refresh error')
                         console.log(error);
                         store.dispatch(setToken({
+                            staffId: '',
                             accessToken: '',
                             refreshToken: '',
                             clientSecret: ''