fixed: update user role change

src/contexts/auth/index.tsx

@@ -52,6 +52,16 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
 	const [state, dispatch] = useReducer(authReducer, initialState);
 
 	// MOCK INIT DATA
+	const refreshUserInfo = async ()=>{
+		const user = await getUserInfo();
+		dispatch({
+			action: 'refresh',
+			payload: {
+				isLoggedIn: !!user,
+				user: getInitUserData(user)
+			}
+		})
+	}
 	const init = async () => {
 		const token = getAuthToken();
 		if (!token) {
@@ -141,7 +151,8 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
 	return (<AuthContext.Provider value={{
 		...state,
 		login, logout,
-		mockLogin, updateUser
+		mockLogin, updateUser,
+		refreshUserInfo
 	}}>{children}</AuthContext.Provider>)
 }
 export default AuthContext

src/pages/auth/permission.tsx

@@ -1,5 +1,5 @@
 import {useSetState} from "ahooks";
-import {Button, Checkbox, Empty, Popconfirm, Select, Space, Toast} from "@douyinfe/semi-ui";
+import {Button, Checkbox, Empty, Popconfirm, Select, Space, Spin, Toast} from "@douyinfe/semi-ui";
 import {useTranslation} from "react-i18next";
 import {useEffect, useMemo} from "react";
 
@@ -25,6 +25,12 @@ import useAuth from "@/hooks/useAuth.ts";
 // 	'permission'
 // ]
 
+const RoleOptionList = [
+	{label: 'ROOT', value: 'root'},
+	{label: 'RO', value: 'ro'},
+	{label: 'FO', value: 'fo'},
+];
+
 type UserPermissionItemProps = {
 	it: UserPermission;
 	onChange: (action: 'remove' | 'saved' | 'modify', value: UserPermission) => Promise<void>;
@@ -34,13 +40,15 @@ type UserPermissionItemProps = {
 
 const UserPermissionItem = ({it, onChange, usernameOptionList,roleOptionList}: UserPermissionItemProps) => {
 	const {t} = useTranslation()
-	const {user} = useAuth()
+	const {user,refreshUserInfo} = useAuth()
 	const [state,setState] = useSetState({
-		loading: false
+		loading: false,
+		currentRole: it.role
 	})
 	const onValueChange = (value: {
 		[key: string]: string | boolean
 	}) => {
+
 		onChange('modify', {
 			...it,
 			...value
@@ -63,8 +71,11 @@ const UserPermissionItem = ({it, onChange, usernameOptionList,roleOptionList}: U
 			return;
 		}
 		setState({loading: true})
-		onChange('saved', it).finally(()=>{
+		onChange('saved', it).then(()=>{
+			if(self) refreshUserInfo().then(()=>console.log('self refresh'));
+		}).finally(()=>{
 			setState({loading: false})
+
 		})
 	}
 
@@ -77,7 +88,7 @@ const UserPermissionItem = ({it, onChange, usernameOptionList,roleOptionList}: U
 					filter
 					optionList={usernameOptionList}
 					placeholder={t('base.please_select')}
-					defaultValue={it.username}
+					value={it.username}
 					onChange={(value) => onValueChange({username: String(value)})}
 				/>}
 			</div>
@@ -87,7 +98,7 @@ const UserPermissionItem = ({it, onChange, usernameOptionList,roleOptionList}: U
 				<Select
 					style={{width: '100%'}}
 					optionList={roleOptionList}
-					defaultValue={it.role}
+					value={it.role}
 					onChange={(value) => onValueChange({role: String(value)})}
 					placeholder={t('base.please_select')}
 				/>
@@ -95,37 +106,37 @@ const UserPermissionItem = ({it, onChange, usernameOptionList,roleOptionList}: U
 		</div>
 		<div className={`item item-type item-type-manual`}>
 			<Checkbox
-				defaultChecked={it.manual_payment}
+				checked={it.manual_payment}
 				onChange={e => onValueChange({manual_payment: !!e.target.checked})}/>
 		</div>
 		<div className={`item item-type item-type-bill-query`}>
 			<Checkbox
-				defaultChecked={it.bill_page}
+				checked={it.bill_page}
 				onChange={e => onValueChange({bill_page: !!e.target.checked})}/>
 		</div>
 		<div className={`item item-type item-type-bill-check`}>
 			<Checkbox
-				defaultChecked={it.apply_page}
+				checked={it.apply_page}
 				onChange={e => onValueChange({apply_page: !!e.target.checked})}/>
 		</div>
 		<div className={`item item-type item-type-bill-pay`}>
 			<Checkbox
-				defaultChecked={it.complete_button}
+				checked={it.complete_button}
 				onChange={e => onValueChange({complete_button: !!e.target.checked})}/>
 		</div>
 		<div className={`item item-type item-type-bill-btn-confirm`}>
 			<Checkbox
-				defaultChecked={it.confirm_button}
+				checked={it.confirm_button}
 				onChange={e => onValueChange({confirm_button: !!e.target.checked})}/>
 		</div>
 		<div className={`item item-type item-type-bill-btn-check`}>
 			<Checkbox
-				defaultChecked={it.apply_button}
+				checked={it.apply_button}
 				onChange={e => onValueChange({apply_button: !!e.target.checked})}/>
 		</div>
 		{user?.permissions?.role == 'root' && <div className={`item item-type item-type-bill-permission`}>
             <Checkbox
-                defaultChecked={it.permission_edit}
+                checked={it.permission_edit}
                 disabled={user?.username == it.username}
                 onChange={e => onValueChange({permission_edit: !!e.target.checked})}/>
         </div>}
@@ -161,15 +172,10 @@ const Permission = () => {
 
 	const usernameOptionList = useMemo(() => (usernameList?usernameList.map(name => ({label: name, value: name})):[]), [usernameList])
 	const roleOptionList = useMemo(() => {
-		const list = [
-			{label: 'ROOT', value: 'root'},
-			{label: 'RO', value: 'ro'},
-			{label: 'FO', value: 'fo'},
-		];
 		const userRole = user?.permissions?.role ?? 'staff';
-		if(userRole == 'root') return list;
+		if(userRole == 'root') return RoleOptionList;
-		return list.filter(it => (it.value == userRole));
+		return RoleOptionList//.filter(it => (it.value == userRole));
-	}, [])
+	}, [user,state.allList])
 
 	const buildPermission = (it: UserPermission)=>{
 		it.permission_edit = !!it.permission_edit
@@ -187,15 +193,15 @@ const Permission = () => {
 		setState({loading: true})
 		getUserPermissionList().then(list => {
 			setState({allList:[...list]})
-			const userRole = user?.permissions?.role ?? 'staff';
+			const userRole = (user?.permissions?.role ?? 'staff').toLowerCase();
 			list.forEach(it=>buildPermission(it))
 			if(userRole != 'root') {
-				list = list.filter(it => (it.role == userRole));
+				list = list.filter(it => (it.role.toLowerCase() == userRole));
 			}
 			setState({loading: false, list})
 		})
 	}
-	useEffect(loadUserPermissionList, [])
+	useEffect(loadUserPermissionList, [user])
 
 	// remove a user permission
 	const removeItem = (index: number, id: number) => {
@@ -244,17 +250,19 @@ const Permission = () => {
             }
 			const process = value.id > 0 ? updateUserPermission : createUserPermission;
 			try {
-				await process(value).then((newValue) => {
+				await process(value).then(() => {
 					Toast.success(t('base.save_success'))
-					const newList = [...state.list];
+					//loadUserPermissionList();
-					buildPermission(newValue)
+					// const newList = [...state.list];
-					newList[index] = {
+					// buildPermission(newValue)
-						...newValue
+					// newList[index] = {
-					}
+					// 	...newValue
-					setState({list: newList})
+					// }
+					// setState({list: newList})
 				})
 			} catch (e) {
 				Toast.error(t('base.save_failed') + `(${(e as Error).message})`)
+				throw e;
 			}
 		}
 	}
@@ -277,20 +285,22 @@ const Permission = () => {
 					{user?.permissions?.role == 'root' && <div className={`item item-type item-type-bill-permission`}>{t(`permission.title.permission`)}</div>}
 					<div className="item item-operation">{t('bill.title_operate')}</div>
 				</div>
-				{state.list.map((it, index) => (<UserPermissionItem
+				<Spin spinning={state.loading}>
-					key={index} it={it}
+					{state.list.map((it, index) => (<UserPermissionItem
-					onChange={async (action, value) => {
+						key={index} it={it}
-						await handleChange(action, value, index)
+						onChange={async (action, value) => {
-					}}
+							await handleChange(action, value, index)
-					usernameOptionList={usernameOptionList}
+						}}
-					roleOptionList={roleOptionList}
+						usernameOptionList={usernameOptionList}
-				/>))}
+						roleOptionList={roleOptionList}
-				{state.list.length == 0 && <div style={{backgroundColor: '#fafafa'}}>
+					/>))}
-                    <Empty
+					{state.list.length == 0 && <div style={{backgroundColor: '#fafafa'}}>
-                        description={t('permission.message.empty_tips')}
+                        <Empty
-                        style={{paddingBottom: 20}}
+                            description={t('permission.message.empty_tips')}
-                    />
+                            style={{paddingBottom: 20}}
-                </div>}
+                        />
+                    </div>}
+				</Spin>
 			</div>
 		</div>
 		{!state.loading && <Space style={{marginTop: 20}}>

src/pages/bill/query.tsx

@@ -107,7 +107,6 @@ const BillQuery = () => {
                 <Button
                     onClick={() => setShowBill(bill)} size={'small'} theme={'solid'}
                     type={'primary'}>{t('base.qr-code')}</Button>
-				{AppMode == 'development' && <a href={`/pay?bill=${bill.id}`} target={'_blank'}>支付</a>}
             </>}
 			{
 				bill.status == BillStatus.PAID && <>

src/routes/layout/dashboard-layout.tsx

@@ -74,7 +74,8 @@ const RoleSwitcher = ()=>{
         <Button theme="borderless">
             <Space style={{transform:'translateY(3px)'}}>
                 <IconRoles size={20} color={'white'} />
-                <span style={{color:'white'}}>{user?.role?.toUpperCase()}</span>
+                {/*{JSON.stringify(user)}*/}
+                <span style={{color:'white'}}>{user?.permissions?.role.toUpperCase()}</span>
             </Space>
         </Button>
     </>)

src/types/auth.d.ts

@@ -44,6 +44,7 @@ declare type AuthContextType = {
 	user?: UserProfile | null | undefined;
 	logout: () => Promise<void>;
 	mockLogin: () => Promise<void>;
+	refreshUserInfo: () => Promise<void>;
 	login: (code: string, state: string) => Promise<void>;
 	updateUser: (user: Partial<UserProfile>) => Promise<void>;
 };