feat: add permission

src/i18n/translations/sc.json

@@ -14,6 +14,7 @@
     "qr-code": "二维码",
     "query_bill": "查询账单失败:",
     "remove": "删除",
+    "save": "保存",
     "student_number": "学号"
   },
   "bill": {
@@ -64,9 +65,9 @@
     "title_bill_type_confirm": "确认账单",
     "title_confirm_status": "确认状态",
     "title_create_at": "创建时间",
-    "title_delivered_at": "到账时间",
+    "title_delivered_at": "交付学院时间",
     "title_department": "学系",
-    "title_initiated_paid_at": "开始支付时间",
+    "title_initiated_paid_at": "渠道支付时间",
     "title_operate": "操作",
     "title_paid_at": "支付时间",
     "title_pay_amount": "应付金额",
@@ -92,7 +93,8 @@
     "menu": {
       "bill": "账单查询",
       "check": "对账",
-      "manual": "现场支付"
+      "manual": "现场支付",
+      "permission": "权限管理"
     }
   },
   "login": {

src/i18n/translations/tc.json

@@ -14,6 +14,7 @@
     "qr-code": "QRCode",
     "query_bill": "查詢帳單失敗:",
     "remove": "刪除",
+    "save": "儲存",
     "student_number": "學號"
   },
   "bill": {
@@ -66,7 +67,7 @@
     "title_create_at": "創建時間",
     "title_delivered_at": "到帳時間",
     "title_department": "學系",
-    "title_initiated_paid_at": "開始支付時間",
+    "title_initiated_paid_at": "渠道支付時間",
     "title_operate": "操作",
     "title_paid_at": "付款時間",
     "title_pay_amount": "應付金額",
@@ -92,7 +93,8 @@
     "menu": {
       "bill": "帳單查詢",
       "check": "對帳",
-      "manual": "現場支付"
+      "manual": "現場支付",
+      "permission": "權限管理"
     }
   },
   "login": {

src/pages/auth/permission.tsx

@@ -0,0 +1,88 @@
+import {Card} from "@/components/card";
+import {useSetState} from "ahooks";
+import {Button, Space, Spin, TagInput, Toast} from "@douyinfe/semi-ui";
+import {useTranslation} from "react-i18next";
+import {useEffect} from "react";
+import {getPermissionList, savePermissionList} from "@/service/api/user.ts";
+
+const DEFAULT_ROLES = [
+	'root','ro','fo'
+]
+
+const Permission = ()=>{
+	const {t} = useTranslation()
+	const [state,setState] = useSetState<{
+		list:PermissionUserList[];
+		loading?:boolean;
+	}>({
+		list:[]
+	})
+	const onUsernameChange = (role_name:string,username_list: string[])=>{
+		const index = state.list.findIndex(it=>it.role_name == role_name)
+		if(index != -1){
+			state.list[index] = {
+				role_name,username_list
+			};
+			setState({
+				list:state.list
+			})
+		}
+	}
+	const saveRoles = ()=>{
+		setState({
+			loading:true
+		})
+		savePermissionList(state.list).then(()=>{
+			Toast.success({content:`Save Success`,duration: 3,})
+		}).catch(e=>{
+			Toast.error({
+				content:`Save Error:${e.message}`,
+				duration: 3,
+			})
+		}).finally(()=>{
+			setState({loading:false})
+		})
+	}
+	const loadAllPermission = ()=>{
+		setState({
+			loading:true
+		})
+		getPermissionList().then(list=>{
+			const roles:{
+				[key:string]:string[]
+			} = {}
+			// array to object
+			list.forEach(it=>{
+				roles[it.role_name] = it.username_list
+			})
+			const permissionList:PermissionUserList[] = [];
+			DEFAULT_ROLES.forEach(role_name=>{
+				permissionList.push({
+					role_name,username_list: roles[role_name]
+				})
+			})
+			setState({list:permissionList})
+		}).finally(()=>{
+			setState({loading:false})
+		})
+	}
+	useEffect(loadAllPermission,[])
+
+	return (<Card style={{marginBottom: 20}}>
+		{state.list.map(it=>(<div key={it.role_name} style={{marginBottom:20}}>
+			<div className="permission-title" style={{marginBottom:5}}>{it.role_name.toUpperCase()}</div>
+			<TagInput
+				defaultValue={it.username_list}
+				size={'large'}
+				addOnBlur={true} allowDuplicates={false}
+				placeholder={t('base.please_enter')}
+				onChange={users => onUsernameChange(it.role_name,users)}
+			/>
+		</div>))}
+		<Space>
+			<Button loading={state.loading} onClick={saveRoles} theme={'solid'}>{state.loading ? 'Loading' :t('base.save')}</Button>
+			<div>{state.message||''}</div>
+		</Space>
+	</Card>)
+}
+export default Permission

src/routes/index.tsx

@@ -21,6 +21,7 @@ import ManualIndex from "@/pages/manual/index.tsx";
 import BillQuery from "@/pages/bill/query.tsx";
 import BillReconciliation from "@/pages/bill/reconciliation.tsx";
 import ExternalCreate from "@/pages/bill/external_create.tsx";
+import Permission from "@/pages/auth/permission.tsx";
 
 
 const routes: RouteObject[] = [
@@ -76,6 +77,10 @@ const routes: RouteObject[] = [
                 path: 'reconciliation',
                 element: <BillReconciliation/>
             },
+            {
+                path: 'permission',
+                element: <Permission/>
+            },
         ]
     },
 ]

src/service/api/user.ts

@@ -11,4 +11,11 @@ export function getUserInfo() {
  */
 export function auth(code:string,state:string){
     return post<UserProfile>('/auth', {code, state})
+}
+
+export function getPermissionList(){
+    return get<PermissionUserList[]>('/roles')
+}
+export function savePermissionList(roles:PermissionUserList[]){
+    return post('/roles',{roles})
 }

src/types/auth.d.ts

@@ -31,4 +31,9 @@ declare type AuthContextType = {
     mockLogin: () => Promise<void>;
     login: (code:string,state:string) => Promise<void>;
     updateUser: (user:Partial<UserProfile>) => Promise<void>;
-};
+};
+
+declare type PermissionUserList = {
+    role_name:string;
+    username_list: string[];
+}