mlogclub
150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Controller, Resolver, useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { toast } from "sonner"
|
|
import { z } from "zod/v4"
|
|
|
|
import { OptionCombobox } from "@/components/option-combobox"
|
|
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 { fetchAgentProfilesAll, type AdminAgentProfile } from "@/lib/api/admin"
|
|
import { addTicketCollaborator } from "@/lib/api/ticket"
|
|
|
|
const schema = z.object({
|
|
userId: z.string().trim().min(1, "请选择协作人"),
|
|
})
|
|
|
|
type FormValues = z.infer<typeof schema>
|
|
|
|
const resolver = zodResolver(schema as never) as Resolver<
|
|
z.input<typeof schema>,
|
|
undefined,
|
|
z.output<typeof schema>
|
|
>
|
|
|
|
type TicketCollaboratorDialogProps = {
|
|
open: boolean
|
|
ticketId: number | null
|
|
onOpenChange: (open: boolean) => void
|
|
onSuccess?: () => Promise<void> | void
|
|
}
|
|
|
|
export function TicketCollaboratorDialog({
|
|
open,
|
|
ticketId,
|
|
onOpenChange,
|
|
onSuccess,
|
|
}: TicketCollaboratorDialogProps) {
|
|
const [loadingAgents, setLoadingAgents] = useState(false)
|
|
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
|
const userOptions = agents.map((agent) => ({
|
|
value: String(agent.userId),
|
|
label: agent.displayName || agent.nickname || agent.username || `客服 #${agent.userId}`,
|
|
}))
|
|
|
|
const form = useForm<
|
|
z.input<typeof schema>,
|
|
undefined,
|
|
z.output<typeof schema>
|
|
>({
|
|
resolver,
|
|
defaultValues: { userId: "" },
|
|
})
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors, isSubmitting },
|
|
} = form
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
reset({ userId: "" })
|
|
}
|
|
}, [open, reset])
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return
|
|
}
|
|
setLoadingAgents(true)
|
|
fetchAgentProfilesAll()
|
|
.then((data) => {
|
|
setAgents(Array.isArray(data) ? data : [])
|
|
})
|
|
.catch((error) => {
|
|
toast.error(error instanceof Error ? error.message : "加载客服列表失败")
|
|
})
|
|
.finally(() => {
|
|
setLoadingAgents(false)
|
|
})
|
|
}, [open])
|
|
|
|
async function onFormSubmit(values: FormValues) {
|
|
if (!ticketId) {
|
|
toast.error("工单不存在")
|
|
return
|
|
}
|
|
try {
|
|
await addTicketCollaborator({ ticketId, userId: Number(values.userId) })
|
|
toast.success("协作人已添加")
|
|
onOpenChange(false)
|
|
await onSuccess?.()
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "添加协作人失败")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
|
<DialogHeader className="px-6 pt-6">
|
|
<DialogTitle>新增协作人</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit(onFormSubmit)}>
|
|
<div className="space-y-4 p-6">
|
|
<Field data-invalid={!!errors.userId}>
|
|
<FieldLabel>协作人</FieldLabel>
|
|
<FieldContent>
|
|
<Controller
|
|
control={control}
|
|
name="userId"
|
|
render={({ field }) => (
|
|
<OptionCombobox
|
|
value={field.value}
|
|
options={userOptions}
|
|
placeholder={loadingAgents ? "加载中..." : "选择协作人"}
|
|
searchPlaceholder="搜索客服"
|
|
emptyText="暂无可选客服"
|
|
disabled={isSubmitting || loadingAgents}
|
|
onChange={field.onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
<FieldError errors={[errors.userId]} />
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
取消
|
|
</Button>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? "提交中..." : "确认添加"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|