feat(group): edit group

app/management/team/employee/components/EditUserModal.tsx

@@ -1,82 +1,55 @@
 "use client"
 
-import { getUserGroupAll, userEditById } from "@/components/label/api/user"
+import { userUpdateGroup } from "@/components/label/api/user"
 import { User } from "@/components/label/api/user/typing"
 import { Button, Group, Modal, Select, Stack, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { notifications } from "@mantine/notifications"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
 
 interface ComponentProps {
   opened: boolean
   data: User.UserInfo | null
+  groupOpts: Array<{ label: string; value: string }>
   onCloseAction: (refresh?: boolean) => void
 }
 
 export default function EditUserModal({
   opened,
   data,
+  groupOpts,
   onCloseAction,
 }: ComponentProps) {
-  const [groupOpts, setGroupOpts] = useState<
-    Array<{ label: string; value: string }>
-  >([])
   const [submitting, setSubmitting] = useState(false)
 
-  const groupValueByName = useMemo(() => {
-    const map = new Map<string, string>()
-    groupOpts.forEach((g) => map.set(g.label, g.value))
-    return map
-  }, [groupOpts])
-
   const form = useForm({
     initialValues: {
       name: "",
       group_uuid: "",
-      base_city: "",
-      work_status: "1",
     },
     validate: {
       name: (v) => (v.trim() ? null : "请输入用户名"),
       group_uuid: (v) => (v ? null : "请选择组织"),
-      base_city: (v) => (v.trim() ? null : "请输入所在地"),
-      work_status: (v) => (v ? null : "请选择状态"),
     },
   })
 
-  useEffect(() => {
-    if (!opened) return
-    const run = async () => {
-      const res = await getUserGroupAll()
-      setGroupOpts(res ?? [])
-    }
-    queueMicrotask(run)
-  }, [opened])
-
   useEffect(() => {
     if (!opened || !data) return
     form.setValues({
       name: data.name ?? "",
-      group_uuid: groupValueByName.get(data.group_name ?? "") ?? "",
-      base_city: data.base_city ?? "",
-      work_status: data.work_status === 0 ? "0" : "1",
+      group_uuid: data.group_uuid ?? "",
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [opened, data, groupValueByName])
+  }, [opened, data])
 
   const submit = form.onSubmit(async (values) => {
     if (!data?.uid) return
     try {
       setSubmitting(true)
-      await userEditById(
-        {
-          user_name: values.name.trim(),
-          group_uuid: values.group_uuid,
-          base_city: values.base_city.trim(),
-          work_status: Number(values.work_status),
-        },
-        data.uid
-      )
+      await userUpdateGroup({
+        user_id: data.uid,
+        group_uuid: values.group_uuid,
+      })
       notifications.show({
         color: "green",
         title: "操作成功",
@@ -120,24 +93,6 @@ export default function EditUserModal({
             data={groupOpts}
             {...form.getInputProps("group_uuid")}
           />
-          <TextInput
-            label="所在地"
-            size="xs"
-            radius="xs"
-            withAsterisk
-            {...form.getInputProps("base_city")}
-          />
-          <Select
-            label="状态"
-            size="xs"
-            radius="xs"
-            withAsterisk
-            data={[
-              { label: "在职", value: "1" },
-              { label: "离职", value: "0" },
-            ]}
-            {...form.getInputProps("work_status")}
-          />
           <Group justify="flex-end" mt="xs">
             <Button
               variant="default"

app/management/team/employee/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getUserList } from "@/components/label/api/user"
+import { getUserGroupAll, getUserList } from "@/components/label/api/user"
 import { User } from "@/components/label/api/user/typing"
 import useAuth from "@/components/label/hooks/useAuth"
 import { useAllUserStore } from "@/components/label/store/auth"
@@ -67,6 +67,18 @@ export default function TeamEmployeePage() {
     })
   }, [])
 
+  const [groupOpts, setGroupOpts] = useState<
+    Array<{ label: string; value: string }>
+  >([])
+
+  useEffect(() => {
+    const run = async () => {
+      const res = await getUserGroupAll()
+      setGroupOpts(res ?? [])
+    }
+    queueMicrotask(run)
+  }, [])
+
   const columns = useMemo(() => {
     const cols: DataTableColumn<User.UserInfo>[] = [
       { accessor: "uid", title: "UID", width: 80, textAlign: "center" },
@@ -92,6 +104,10 @@ export default function TeamEmployeePage() {
         title: "组织",
         width: 180,
         textAlign: "center",
+        render: (record) => {
+          const group = groupOpts.find((g) => g.value === record.group_uuid)
+          return group?.label ?? ""
+        },
       },
       {
         accessor: "base_city",
@@ -147,7 +163,7 @@ export default function TeamEmployeePage() {
       },
     ]
     return cols
-  }, [isShow])
+  }, [isShow, groupOpts])
 
   return (
     <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
@@ -247,6 +263,7 @@ export default function TeamEmployeePage() {
             setPage(1)
           }}
           recordsPerPageOptions={[10, 20, 50, 100]}
+          recordsPerPageLabel="当前页数"
           scrollAreaProps={{ type: "auto" }}
           style={{ width: "100%" }}
         />
@@ -277,6 +294,7 @@ export default function TeamEmployeePage() {
       <EditUserModal
         opened={editOpened}
         data={selectedUser}
+        groupOpts={groupOpts}
         onCloseAction={(refresh) => {
           setEditOpened(false)
           setSelectedUser(null)