"use client" import { zodResolver } from "@hookform/resolvers/zod" import { useCallback, useEffect, useState } from "react" import { Controller, Resolver, useForm } from "react-hook-form" import { toast } from "sonner" import { z } from "zod/v4" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field" import { Input } from "@/components/ui/input" import { OptionCombobox } from "@/components/option-combobox" import { Textarea } from "@/components/ui/textarea" import { type AdminAgentTeam, type AdminAgentTeamSchedule, type CreateAdminAgentTeamSchedulePayload, fetchAgentTeamSchedule, fetchAgentTeamsAll } from "@/lib/api/admin" type ScheduleEditDialogProps = { open: boolean saving: boolean itemId: number | null defaultValues?: Partial | null onOpenChange: (open: boolean) => void onSubmit: (payload: CreateAdminAgentTeamSchedulePayload) => Promise onDelete?: (id: number) => Promise } const emptyForm: EditForm = { teamId: "", startAt: "", endAt: "", remark: "", } const editFormSchema = z.object({ teamId: z.string().trim().regex(/^\d+$/, "请选择客服组"), startAt: z.string().trim().min(1, "开始时间不能为空"), endAt: z.string().trim().min(1, "结束时间不能为空"), remark: z.string().trim(), }).superRefine((value, ctx) => { const startAt = parseDateTimeLocal(value.startAt) const endAt = parseDateTimeLocal(value.endAt) if (!startAt || !endAt) { return } if (!endAt || endAt <= startAt) { ctx.addIssue({ code: "custom", path: ["endAt"], message: "结束时间必须晚于开始时间", }) return } if (!isSameLocalDay(startAt, endAt)) { ctx.addIssue({ code: "custom", path: ["endAt"], message: "单条排班记录不能跨天", }) } if (startAt < startOfLocalDay(new Date())) { ctx.addIssue({ code: "custom", path: ["startAt"], message: "不能添加或修改历史日期的排班", }) } }) type EditForm = z.infer const editFormResolver = zodResolver(editFormSchema as never) as Resolver< z.input, undefined, z.output > function toDateTimeLocal(value?: string) { if (!value) { return "" } return value.replace(" ", "T").slice(0, 16) } function parseDateTimeLocal(value: string) { const ret = new Date(value) return Number.isNaN(ret.getTime()) ? null : ret } function startOfLocalDay(value: Date) { const ret = new Date(value) ret.setHours(0, 0, 0, 0) return ret } function isSameLocalDay(a: Date, b: Date) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() } function todayDateTimeLocalMin() { const today = startOfLocalDay(new Date()) const month = String(today.getMonth() + 1).padStart(2, "0") const day = String(today.getDate()).padStart(2, "0") return `${today.getFullYear()}-${month}-${day}T00:00` } function buildForm(item: AdminAgentTeamSchedule | null, defaultValues?: Partial | null): EditForm { if (!item) { return { teamId: defaultValues?.teamId ? String(defaultValues.teamId) : emptyForm.teamId, startAt: toDateTimeLocal(defaultValues?.startAt), endAt: toDateTimeLocal(defaultValues?.endAt), remark: defaultValues?.remark ?? emptyForm.remark, } } return { teamId: String(item.teamId), startAt: toDateTimeLocal(item.startAt), endAt: toDateTimeLocal(item.endAt), remark: item.remark || "", } } function buildPayload(form: EditForm): CreateAdminAgentTeamSchedulePayload { return { teamId: Number(form.teamId), startAt: form.startAt.trim(), endAt: form.endAt.trim(), remark: form.remark.trim(), } } export function EditDialog({ open, saving, itemId, defaultValues, onOpenChange, onSubmit, onDelete, }: ScheduleEditDialogProps) { return ( {open ? ( ) : null} ) } type ScheduleEditDialogBodyProps = Omit function ScheduleEditDialogBody({ saving, itemId, defaultValues, onOpenChange, onSubmit, onDelete, }: ScheduleEditDialogBodyProps) { const [teams, setTeams] = useState([]) const [loading, setLoading] = useState(false) const loadOptions = useCallback(async () => { try { const teamsData = await fetchAgentTeamsAll() setTeams(teamsData) } catch (error) { toast.error(error instanceof Error ? error.message : "加载选项失败") } }, []) const form = useForm< z.input, undefined, z.output >({ resolver: editFormResolver, defaultValues: emptyForm, }) const { control, handleSubmit, reset, register, formState: { errors }, } = form const minDateTime = todayDateTimeLocalMin() useEffect(() => { async function loadDetail() { if (!itemId) { reset(buildForm(null, defaultValues)) return } setLoading(true) try { const data = await fetchAgentTeamSchedule(itemId) reset(buildForm(data)) } catch (error) { toast.error(error instanceof Error ? error.message : "加载客服组排班详情失败") } finally { setLoading(false) } } void loadDetail() }, [defaultValues, itemId, reset]) useEffect(() => { void loadOptions() }, [loadOptions]) async function onFormSubmit(values: EditForm) { await onSubmit(buildPayload(values)) } return ( {itemId ? "编辑客服组排班" : "新建客服组排班"} {loading ? (
加载中...
) : (
客服组 ( ({ value: String(team.id), label: team.name, }))} placeholder="请选择客服组" searchPlaceholder="搜索客服组" onChange={field.onChange} /> )} />
开始时间 结束时间
备注