@@ -187,7 +178,7 @@ export default function Roles() {
{el.role_name}
{el.create_time.replace('T', ' ')}
-
+
diff --git a/src/frontend/src/pages/SystemPage/components/UserRoleItem.tsx b/src/frontend/src/pages/SystemPage/components/UserRoleItem.tsx
index 7cd3296d2..6b1ce79c2 100644
--- a/src/frontend/src/pages/SystemPage/components/UserRoleItem.tsx
+++ b/src/frontend/src/pages/SystemPage/components/UserRoleItem.tsx
@@ -2,8 +2,9 @@ import { DelIcon } from "@/components/bs-icons";
import { Button } from "@/components/bs-ui/button";
import MultiSelect from "@/components/bs-ui/select/multi";
import { getRolesByGroupApi, getUserGroupsApi } from "@/controllers/API/user";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
+import SelectSearch from "@/components/bs-ui/select/select"
export default function UserRoleItem({ showDel, groupId, selectedRoles, onDelete, onChange }:
{ showDel: boolean, groupId: null | string, selectedRoles: any[], onDelete: any, onChange: any }) {
@@ -11,24 +12,36 @@ export default function UserRoleItem({ showDel, groupId, selectedRoles, onDelete
// 用户组
const [groups, setGroups] = useState([])
+ const groupsRef = useRef([])
const [userGroupSelected, setUserGroupSelected] = useState(groupId ? [groupId] : [])
- useEffect(() => {
- // 用户组option列表
+ const loadGroups = () => {
getUserGroupsApi().then((res: any) => {
- setGroups(res.records.map((ug) => {
+ const groups = res.records.map((ug) => {
return {
label: ug.group_name,
value: ug.id.toString()
}
- }))
+ })
+ setGroups(groups)
+ groupsRef.current = groups
})
+ }
+ useEffect(() => {
+ // 用户组option列表
+ loadGroups()
}, [])
- const handleSelectGroup = (values) => {
- onChange(values, [])
- setUserGroupSelected(values);
+ const handleSelectGroup = (value) => { //单选之后value要改成数组传出去
+ onChange([value], [])
+ setUserGroupSelected([value]);
setSelected([])
}
+ const handleSearch = (e) => {
+ const keyword = e.target.value
+ const newGroups = groupsRef.current.filter(g => g.label.toUpperCase().includes(keyword.toUpperCase())
+ || g.value === userGroupSelected[0])
+ setGroups(newGroups)
+ }
// 角色
const [roles, setRoles] = useState
([])
@@ -53,14 +66,14 @@ export default function UserRoleItem({ showDel, groupId, selectedRoles, onDelete
}
return
-
-
+ onOpenChange={() => setGroups(groupsRef.current)}
+ onValueChange={handleSelectGroup}
+ onChange={handleSearch}
+ />