158 lines
4.1 KiB
TypeScript
158 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { getUserGroupAll, userEditById } 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"
|
|
|
|
interface ComponentProps {
|
|
opened: boolean
|
|
data: User.UserInfo | null
|
|
onCloseAction: (refresh?: boolean) => void
|
|
}
|
|
|
|
export default function EditUserModal({
|
|
opened,
|
|
data,
|
|
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",
|
|
})
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [opened, data, groupValueByName])
|
|
|
|
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
|
|
)
|
|
notifications.show({
|
|
color: "green",
|
|
title: "操作成功",
|
|
message: "已更新用户信息",
|
|
})
|
|
onCloseAction(true)
|
|
} catch (e) {
|
|
notifications.show({
|
|
color: "red",
|
|
title: "操作失败",
|
|
message: e instanceof Error ? e.message : "请求失败",
|
|
})
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
})
|
|
|
|
return (
|
|
<Modal
|
|
opened={opened}
|
|
onClose={() => onCloseAction()}
|
|
title="编辑用户"
|
|
centered
|
|
size={560}
|
|
closeOnClickOutside={false}>
|
|
<form onSubmit={submit}>
|
|
<Stack gap="sm">
|
|
<TextInput
|
|
label="用户名"
|
|
size="xs"
|
|
radius="xs"
|
|
withAsterisk
|
|
{...form.getInputProps("name")}
|
|
/>
|
|
<Select
|
|
label="组织"
|
|
size="xs"
|
|
radius="xs"
|
|
withAsterisk
|
|
searchable
|
|
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"
|
|
size="xs"
|
|
radius="xs"
|
|
onClick={() => onCloseAction()}>
|
|
取消
|
|
</Button>
|
|
<Button type="submit" size="xs" radius="xs" loading={submitting}>
|
|
确定
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
</Modal>
|
|
)
|
|
}
|