refactor(ticket): simplify frontend ticket API and components
This commit is contained in:
mlogclub
@@ -55,7 +55,6 @@ import {
|
|||||||
ConversationTagBadges,
|
ConversationTagBadges,
|
||||||
ConversationTagPicker,
|
ConversationTagPicker,
|
||||||
} from "./conversation-tag-picker";
|
} from "./conversation-tag-picker";
|
||||||
import { TicketPriorityBadge } from "../../tickets/_components/ticket-priority-badge";
|
|
||||||
import { TicketStatusBadge } from "../../tickets/_components/ticket-status-badge";
|
import { TicketStatusBadge } from "../../tickets/_components/ticket-status-badge";
|
||||||
|
|
||||||
function contactTypeLabel(contactType: ContactType | string) {
|
function contactTypeLabel(contactType: ContactType | string) {
|
||||||
@@ -629,9 +628,7 @@ function RelatedTicketsSection({ conversation }: { conversation: AgentConversati
|
|||||||
{tickets.map((ticket) => (
|
{tickets.map((ticket) => (
|
||||||
<Link
|
<Link
|
||||||
key={ticket.id}
|
key={ticket.id}
|
||||||
href={`/dashboard/tickets/detail?id=${ticket.id}`}
|
href={`/dashboard/tickets?ticketId=${ticket.id}`}
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="block rounded-lg border border-border bg-background px-3 py-2 transition-colors hover:bg-muted/40"
|
className="block rounded-lg border border-border bg-background px-3 py-2 transition-colors hover:bg-muted/40"
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
@@ -643,10 +640,9 @@ function RelatedTicketsSection({ conversation }: { conversation: AgentConversati
|
|||||||
{ticket.ticketNo}
|
{ticket.ticketNo}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<TicketPriorityBadge priority={ticket.priority} priorityName={ticket.priorityName} />
|
<TicketStatusBadge status={ticket.status} />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 flex items-center justify-between gap-3">
|
<div className="mt-2 flex items-center justify-between gap-3">
|
||||||
<TicketStatusBadge status={ticket.status} />
|
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "—"}
|
{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "—"}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,616 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
closestCenter,
|
|
||||||
DndContext,
|
|
||||||
KeyboardSensor,
|
|
||||||
MouseSensor,
|
|
||||||
TouchSensor,
|
|
||||||
useSensor,
|
|
||||||
useSensors,
|
|
||||||
type DragEndEvent,
|
|
||||||
} from "@dnd-kit/core";
|
|
||||||
import {
|
|
||||||
arrayMove,
|
|
||||||
SortableContext,
|
|
||||||
sortableKeyboardCoordinates,
|
|
||||||
useSortable,
|
|
||||||
verticalListSortingStrategy,
|
|
||||||
} from "@dnd-kit/sortable";
|
|
||||||
import { CSS } from "@dnd-kit/utilities";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import {
|
|
||||||
GripVerticalIcon,
|
|
||||||
PencilIcon,
|
|
||||||
PlusIcon,
|
|
||||||
RefreshCwIcon,
|
|
||||||
SearchIcon,
|
|
||||||
Trash2Icon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useCallback, useEffect, useState, type CSSProperties } from "react";
|
|
||||||
import { Controller, useForm, type Resolver } from "react-hook-form";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { z } from "zod/v4";
|
|
||||||
|
|
||||||
import { useConfirm } from "@/components/confirm-provider";
|
|
||||||
import { OptionCombobox } from "@/components/option-combobox";
|
|
||||||
import { ProjectDialog } from "@/components/project-dialog";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { ButtonGroup } from "@/components/ui/button-group";
|
|
||||||
import {
|
|
||||||
Field,
|
|
||||||
FieldContent,
|
|
||||||
FieldError,
|
|
||||||
FieldLabel,
|
|
||||||
} from "@/components/ui/field";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
createTicketPriorityConfig,
|
|
||||||
deleteTicketPriorityConfig,
|
|
||||||
fetchTicketPriorityConfigs,
|
|
||||||
updateTicketPriorityConfig,
|
|
||||||
updateTicketPriorityConfigSort,
|
|
||||||
type CreateTicketPriorityConfigPayload,
|
|
||||||
type TicketPriorityConfig,
|
|
||||||
} from "@/lib/api/ticket-config";
|
|
||||||
import { getEnumOptions } from "@/lib/enums";
|
|
||||||
import { Status, StatusLabels } from "@/lib/generated/enums";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
const listStatusOptions = [
|
|
||||||
{ value: "all", label: "全部状态" },
|
|
||||||
...getEnumOptions(StatusLabels)
|
|
||||||
.filter((item) => Number(item.value) !== Status.Deleted)
|
|
||||||
.map((item) => ({ value: String(item.value), label: item.label })),
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
name: z.string().trim().min(1, "优先级名称不能为空"),
|
|
||||||
firstResponseMinutes: z
|
|
||||||
.string()
|
|
||||||
.trim()
|
|
||||||
.min(1, "首响时长不能为空")
|
|
||||||
.regex(/^\d+$/, "请输入正整数"),
|
|
||||||
resolutionMinutes: z
|
|
||||||
.string()
|
|
||||||
.trim()
|
|
||||||
.min(1, "解决时长不能为空")
|
|
||||||
.regex(/^\d+$/, "请输入正整数"),
|
|
||||||
status: z.enum([String(Status.Ok), String(Status.Disabled)], {
|
|
||||||
message: "请选择状态",
|
|
||||||
}),
|
|
||||||
remark: z.string().trim(),
|
|
||||||
});
|
|
||||||
|
|
||||||
type EditForm = z.infer<typeof formSchema>;
|
|
||||||
|
|
||||||
const resolver = zodResolver(formSchema as never) as Resolver<
|
|
||||||
z.input<typeof formSchema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof formSchema>
|
|
||||||
>;
|
|
||||||
|
|
||||||
const emptyForm: EditForm = {
|
|
||||||
name: "",
|
|
||||||
firstResponseMinutes: "30",
|
|
||||||
resolutionMinutes: "1440",
|
|
||||||
status: String(Status.Ok),
|
|
||||||
remark: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
function buildForm(item: TicketPriorityConfig | null): EditForm {
|
|
||||||
if (!item) {
|
|
||||||
return emptyForm;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
name: item.name,
|
|
||||||
firstResponseMinutes: String(item.firstResponseMinutes),
|
|
||||||
resolutionMinutes: String(item.resolutionMinutes),
|
|
||||||
status: String(item.status) as EditForm["status"],
|
|
||||||
remark: item.remark || "",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildPayload(form: EditForm): CreateTicketPriorityConfigPayload {
|
|
||||||
return {
|
|
||||||
name: form.name.trim(),
|
|
||||||
firstResponseMinutes: Number(form.firstResponseMinutes),
|
|
||||||
resolutionMinutes: Number(form.resolutionMinutes),
|
|
||||||
status: Number(form.status),
|
|
||||||
remark: form.remark.trim(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
type SortablePriorityRowProps = {
|
|
||||||
item: TicketPriorityConfig;
|
|
||||||
disabled: boolean;
|
|
||||||
onEdit: (item: TicketPriorityConfig) => void;
|
|
||||||
onDelete: (item: TicketPriorityConfig) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function SortablePriorityRow({
|
|
||||||
item,
|
|
||||||
disabled,
|
|
||||||
onEdit,
|
|
||||||
onDelete,
|
|
||||||
}: SortablePriorityRowProps) {
|
|
||||||
const {
|
|
||||||
attributes,
|
|
||||||
listeners,
|
|
||||||
setNodeRef,
|
|
||||||
transform,
|
|
||||||
transition,
|
|
||||||
isDragging,
|
|
||||||
} = useSortable({
|
|
||||||
id: item.id,
|
|
||||||
disabled,
|
|
||||||
});
|
|
||||||
|
|
||||||
const style: CSSProperties = {
|
|
||||||
transform: CSS.Transform.toString(transform),
|
|
||||||
transition,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
ref={setNodeRef}
|
|
||||||
style={style}
|
|
||||||
className={cn(
|
|
||||||
"border-t",
|
|
||||||
isDragging && "relative z-10 bg-muted/60 shadow-sm",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<td className="w-14 px-4 py-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="size-8 cursor-grab active:cursor-grabbing"
|
|
||||||
disabled={disabled}
|
|
||||||
aria-label={`拖拽排序 ${item.name}`}
|
|
||||||
{...attributes}
|
|
||||||
{...listeners}
|
|
||||||
>
|
|
||||||
<GripVerticalIcon className="size-4 text-muted-foreground" />
|
|
||||||
</Button>
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3">{item.name}</td>
|
|
||||||
<td className="px-4 py-3">{item.firstResponseMinutes} 分钟</td>
|
|
||||||
<td className="px-4 py-3">{item.resolutionMinutes} 分钟</td>
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<Badge variant={item.status === Status.Ok ? "default" : "secondary"}>
|
|
||||||
{item.status === Status.Ok ? "启用" : "停用"}
|
|
||||||
</Badge>
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-right">
|
|
||||||
<ButtonGroup className="ml-auto">
|
|
||||||
<Button variant="outline" size="sm" onClick={() => onEdit(item)}>
|
|
||||||
<PencilIcon className="size-3.5" />
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => void onDelete(item)}
|
|
||||||
>
|
|
||||||
<Trash2Icon className="size-3.5" />
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TicketPrioritiesPage() {
|
|
||||||
const [keywordInput, setKeywordInput] = useState("");
|
|
||||||
const [statusFilterInput, setStatusFilterInput] = useState("all");
|
|
||||||
const [keyword, setKeyword] = useState("");
|
|
||||||
const [statusFilter, setStatusFilter] = useState("all");
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [sorting, setSorting] = useState(false);
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
const [editingItem, setEditingItem] = useState<TicketPriorityConfig | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const [deleting, setDeleting] = useState(false);
|
|
||||||
const [items, setItems] = useState<TicketPriorityConfig[]>([]);
|
|
||||||
const confirm = useConfirm();
|
|
||||||
|
|
||||||
const sensors = useSensors(
|
|
||||||
useSensor(MouseSensor, { activationConstraint: { distance: 6 } }),
|
|
||||||
useSensor(TouchSensor, {
|
|
||||||
activationConstraint: { delay: 120, tolerance: 8 },
|
|
||||||
}),
|
|
||||||
useSensor(KeyboardSensor, {
|
|
||||||
coordinateGetter: sortableKeyboardCoordinates,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const data = await fetchTicketPriorityConfigs({
|
|
||||||
name: keyword.trim() || undefined,
|
|
||||||
status: statusFilter === "all" ? undefined : statusFilter,
|
|
||||||
});
|
|
||||||
setItems(Array.isArray(data) ? data : []);
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(
|
|
||||||
error instanceof Error ? error.message : "加载工单优先级失败",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [keyword, statusFilter]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadData();
|
|
||||||
}, [loadData]);
|
|
||||||
|
|
||||||
function applyFilters() {
|
|
||||||
setKeyword(keywordInput);
|
|
||||||
setStatusFilter(statusFilterInput);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(payload: CreateTicketPriorityConfigPayload) {
|
|
||||||
if (saving) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSaving(true);
|
|
||||||
try {
|
|
||||||
if (editingItem) {
|
|
||||||
await updateTicketPriorityConfig({ id: editingItem.id, ...payload });
|
|
||||||
toast.success(`已更新工单优先级：${payload.name}`);
|
|
||||||
} else {
|
|
||||||
await createTicketPriorityConfig(payload);
|
|
||||||
toast.success(`已创建工单优先级：${payload.name}`);
|
|
||||||
}
|
|
||||||
setDialogOpen(false);
|
|
||||||
setEditingItem(null);
|
|
||||||
await loadData();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(
|
|
||||||
error instanceof Error ? error.message : "保存工单优先级失败",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDelete(item: TicketPriorityConfig) {
|
|
||||||
if (deleting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "确认删除优先级",
|
|
||||||
description: `删除后将无法恢复。确定要删除工单优先级“${item.name}”吗？`,
|
|
||||||
confirmText: "确认删除",
|
|
||||||
cancelText: "取消",
|
|
||||||
variant: "destructive",
|
|
||||||
});
|
|
||||||
if (!confirmed) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setDeleting(true);
|
|
||||||
try {
|
|
||||||
await deleteTicketPriorityConfig(item.id);
|
|
||||||
toast.success(`已删除工单优先级：${item.name}`);
|
|
||||||
await loadData();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(
|
|
||||||
error instanceof Error ? error.message : "删除工单优先级失败",
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setDeleting(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDragEnd(event: DragEndEvent) {
|
|
||||||
const { active, over } = event;
|
|
||||||
if (!over || active.id === over.id || sorting || loading) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const previousResults = items;
|
|
||||||
const oldIndex = previousResults.findIndex((item) => item.id === active.id);
|
|
||||||
const newIndex = previousResults.findIndex((item) => item.id === over.id);
|
|
||||||
if (oldIndex < 0 || newIndex < 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const nextResults = arrayMove(previousResults, oldIndex, newIndex);
|
|
||||||
setItems(nextResults);
|
|
||||||
setSorting(true);
|
|
||||||
try {
|
|
||||||
await updateTicketPriorityConfigSort(nextResults.map((item) => item.id));
|
|
||||||
toast.success("工单优先级排序已更新");
|
|
||||||
await loadData();
|
|
||||||
} catch (error) {
|
|
||||||
setItems(previousResults);
|
|
||||||
toast.error(error instanceof Error ? error.message : "更新排序失败");
|
|
||||||
} finally {
|
|
||||||
setSorting(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
|
|
||||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center">
|
|
||||||
<div className="relative min-w-72">
|
|
||||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
value={keywordInput}
|
|
||||||
onChange={(event) => setKeywordInput(event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
event.preventDefault();
|
|
||||||
applyFilters();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="按优先级名称筛选"
|
|
||||||
className="pl-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-full xl:w-40">
|
|
||||||
<OptionCombobox
|
|
||||||
value={statusFilterInput}
|
|
||||||
onChange={setStatusFilterInput}
|
|
||||||
placeholder="全部状态"
|
|
||||||
options={listStatusOptions.map((item) => ({
|
|
||||||
value: item.value,
|
|
||||||
label: item.label,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline" onClick={applyFilters} disabled={loading}>
|
|
||||||
<SearchIcon className="size-4" />
|
|
||||||
查询
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => void loadData()}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
<RefreshCwIcon className="size-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setEditingItem(null);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-4" />
|
|
||||||
新建优先级
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overflow-hidden rounded-lg border bg-background">
|
|
||||||
<DndContext
|
|
||||||
sensors={sensors}
|
|
||||||
collisionDetection={closestCenter}
|
|
||||||
onDragEnd={handleDragEnd}
|
|
||||||
>
|
|
||||||
<table className="w-full text-sm">
|
|
||||||
<thead className="bg-muted/35">
|
|
||||||
<tr>
|
|
||||||
<th className="w-14 px-4 py-3 text-left font-medium"></th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">名称</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">首响时长</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">解决时长</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">状态</th>
|
|
||||||
<th className="px-4 py-3 text-right font-medium">操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{loading ? (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={6}
|
|
||||||
className="h-32 text-center text-muted-foreground"
|
|
||||||
>
|
|
||||||
加载中...
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : items.length > 0 ? (
|
|
||||||
<SortableContext
|
|
||||||
items={items.map((item) => item.id)}
|
|
||||||
strategy={verticalListSortingStrategy}
|
|
||||||
>
|
|
||||||
{items.map((item) => (
|
|
||||||
<SortablePriorityRow
|
|
||||||
key={item.id}
|
|
||||||
item={item}
|
|
||||||
disabled={sorting}
|
|
||||||
onEdit={(current) => {
|
|
||||||
setEditingItem(current);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
onDelete={handleDelete}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</SortableContext>
|
|
||||||
) : (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={6}
|
|
||||||
className="h-32 text-center text-muted-foreground"
|
|
||||||
>
|
|
||||||
暂无工单优先级
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</DndContext>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TicketPriorityEditDialog
|
|
||||||
open={dialogOpen}
|
|
||||||
saving={saving}
|
|
||||||
item={editingItem}
|
|
||||||
onOpenChange={(nextOpen) => {
|
|
||||||
setDialogOpen(nextOpen);
|
|
||||||
if (!nextOpen) {
|
|
||||||
setEditingItem(null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type TicketPriorityEditDialogProps = {
|
|
||||||
open: boolean;
|
|
||||||
saving: boolean;
|
|
||||||
item: TicketPriorityConfig | null;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onSubmit: (payload: CreateTicketPriorityConfigPayload) => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
function TicketPriorityEditDialog({
|
|
||||||
open,
|
|
||||||
saving,
|
|
||||||
item,
|
|
||||||
onOpenChange,
|
|
||||||
onSubmit,
|
|
||||||
}: TicketPriorityEditDialogProps) {
|
|
||||||
const formId = "ticket-priority-edit-form";
|
|
||||||
const form = useForm<
|
|
||||||
z.input<typeof formSchema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof formSchema>
|
|
||||||
>({
|
|
||||||
resolver,
|
|
||||||
defaultValues: buildForm(item),
|
|
||||||
});
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = form;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
reset(buildForm(item));
|
|
||||||
}, [item, reset]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ProjectDialog
|
|
||||||
open={open}
|
|
||||||
onOpenChange={onOpenChange}
|
|
||||||
title={item ? "编辑工单优先级" : "新建工单优先级"}
|
|
||||||
description="优先级同时承载首响与解决时长配置。排序请在列表中拖动调整。"
|
|
||||||
size="md"
|
|
||||||
footer={
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
disabled={saving}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" form={formId} disabled={saving}>
|
|
||||||
{saving ? "保存中..." : item ? "保存" : "创建"}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<form
|
|
||||||
id={formId}
|
|
||||||
className="space-y-4"
|
|
||||||
onSubmit={handleSubmit(async (values) =>
|
|
||||||
onSubmit(buildPayload(values)),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Field data-invalid={Boolean(errors.name)}>
|
|
||||||
<FieldLabel htmlFor="ticket-priority-name">名称</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-priority-name"
|
|
||||||
placeholder="请输入优先级名称"
|
|
||||||
{...register("name")}
|
|
||||||
/>
|
|
||||||
{errors.name ? <FieldError errors={[errors.name]} /> : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<Field data-invalid={Boolean(errors.firstResponseMinutes)}>
|
|
||||||
<FieldLabel htmlFor="ticket-priority-first-response">
|
|
||||||
首响时长
|
|
||||||
</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-priority-first-response"
|
|
||||||
placeholder="分钟"
|
|
||||||
{...register("firstResponseMinutes")}
|
|
||||||
/>
|
|
||||||
{errors.firstResponseMinutes ? (
|
|
||||||
<FieldError errors={[errors.firstResponseMinutes]} />
|
|
||||||
) : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field data-invalid={Boolean(errors.resolutionMinutes)}>
|
|
||||||
<FieldLabel htmlFor="ticket-priority-resolution">
|
|
||||||
解决时长
|
|
||||||
</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-priority-resolution"
|
|
||||||
placeholder="分钟"
|
|
||||||
{...register("resolutionMinutes")}
|
|
||||||
/>
|
|
||||||
{errors.resolutionMinutes ? (
|
|
||||||
<FieldError errors={[errors.resolutionMinutes]} />
|
|
||||||
) : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field data-invalid={Boolean(errors.status)}>
|
|
||||||
<FieldLabel>状态</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="status"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择状态"
|
|
||||||
options={[
|
|
||||||
{ value: String(Status.Ok), label: "启用" },
|
|
||||||
{ value: String(Status.Disabled), label: "停用" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.status ? <FieldError errors={[errors.status]} /> : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field data-invalid={Boolean(errors.remark)}>
|
|
||||||
<FieldLabel htmlFor="ticket-priority-remark">备注</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea
|
|
||||||
id="ticket-priority-remark"
|
|
||||||
rows={4}
|
|
||||||
placeholder="可选"
|
|
||||||
{...register("remark")}
|
|
||||||
/>
|
|
||||||
{errors.remark ? <FieldError errors={[errors.remark]} /> : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</form>
|
|
||||||
</ProjectDialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,477 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { PlusIcon, RefreshCwIcon, SearchIcon, Trash2Icon } from "lucide-react";
|
|
||||||
import { useCallback, useEffect, useState } from "react";
|
|
||||||
import { Controller, useForm, type Resolver } from "react-hook-form";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { z } from "zod/v4";
|
|
||||||
|
|
||||||
import { ListPagination } from "@/components/list-pagination";
|
|
||||||
import { OptionCombobox } from "@/components/option-combobox";
|
|
||||||
import { ProjectDialog } from "@/components/project-dialog";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
import {
|
|
||||||
Field,
|
|
||||||
FieldContent,
|
|
||||||
FieldError,
|
|
||||||
FieldLabel,
|
|
||||||
} from "@/components/ui/field";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
createTicketResolutionCode,
|
|
||||||
deleteTicketResolutionCode,
|
|
||||||
fetchTicketResolutionCodes,
|
|
||||||
updateTicketResolutionCode,
|
|
||||||
type CreateTicketResolutionCodePayload,
|
|
||||||
type PageResult,
|
|
||||||
type TicketResolutionCode,
|
|
||||||
} from "@/lib/api/ticket-config";
|
|
||||||
import { getEnumLabel, getEnumOptions } from "@/lib/enums";
|
|
||||||
import { Status, StatusLabels } from "@/lib/generated/enums";
|
|
||||||
|
|
||||||
const listStatusOptions = [
|
|
||||||
{ value: "all", label: "全部状态" },
|
|
||||||
...getEnumOptions(StatusLabels)
|
|
||||||
.filter((item) => Number(item.value) !== Status.Deleted)
|
|
||||||
.map((item) => ({ value: String(item.value), label: item.label })),
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
name: z.string().trim().min(1, "解决码名称不能为空"),
|
|
||||||
code: z.string().trim().min(1, "解决码编码不能为空"),
|
|
||||||
sortNo: z
|
|
||||||
.string()
|
|
||||||
.trim()
|
|
||||||
.min(1, "排序不能为空")
|
|
||||||
.regex(/^\d+$/, "排序值必须是大于等于 0 的整数"),
|
|
||||||
status: z.enum([String(Status.Ok), String(Status.Disabled)], {
|
|
||||||
message: "请选择状态",
|
|
||||||
}),
|
|
||||||
remark: z.string().trim(),
|
|
||||||
});
|
|
||||||
|
|
||||||
type EditForm = z.infer<typeof formSchema>;
|
|
||||||
|
|
||||||
const resolver = zodResolver(formSchema as never) as Resolver<
|
|
||||||
z.input<typeof formSchema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof formSchema>
|
|
||||||
>;
|
|
||||||
|
|
||||||
const emptyForm: EditForm = {
|
|
||||||
name: "",
|
|
||||||
code: "",
|
|
||||||
sortNo: "0",
|
|
||||||
status: String(Status.Ok),
|
|
||||||
remark: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
function buildForm(item: TicketResolutionCode | null): EditForm {
|
|
||||||
if (!item) {
|
|
||||||
return emptyForm;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
name: item.name,
|
|
||||||
code: item.code,
|
|
||||||
sortNo: String(item.sortNo),
|
|
||||||
status: String(item.status) as EditForm["status"],
|
|
||||||
remark: item.remark || "",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildPayload(form: EditForm): CreateTicketResolutionCodePayload {
|
|
||||||
return {
|
|
||||||
name: form.name.trim(),
|
|
||||||
code: form.code.trim(),
|
|
||||||
sortNo: Number(form.sortNo),
|
|
||||||
status: Number(form.status),
|
|
||||||
remark: form.remark.trim(),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TicketResolutionCodesPage() {
|
|
||||||
const [keywordInput, setKeywordInput] = useState("");
|
|
||||||
const [statusFilterInput, setStatusFilterInput] = useState("all");
|
|
||||||
const [keyword, setKeyword] = useState("");
|
|
||||||
const [statusFilter, setStatusFilter] = useState("all");
|
|
||||||
const [page, setPage] = useState(1);
|
|
||||||
const [limit, setLimit] = useState(20);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
const [editingItem, setEditingItem] = useState<TicketResolutionCode | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const [result, setResult] = useState<PageResult<TicketResolutionCode>>({
|
|
||||||
results: [],
|
|
||||||
page: { page: 1, limit: 20, total: 0 },
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const data = await fetchTicketResolutionCodes({
|
|
||||||
name: keyword.trim() || undefined,
|
|
||||||
status: statusFilter === "all" ? undefined : statusFilter,
|
|
||||||
page,
|
|
||||||
limit,
|
|
||||||
});
|
|
||||||
setResult(data);
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "加载解决码失败");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [keyword, statusFilter, page, limit]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadData();
|
|
||||||
}, [loadData]);
|
|
||||||
|
|
||||||
function applyFilters() {
|
|
||||||
setKeyword(keywordInput);
|
|
||||||
setStatusFilter(statusFilterInput);
|
|
||||||
setPage(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(payload: CreateTicketResolutionCodePayload) {
|
|
||||||
if (saving) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSaving(true);
|
|
||||||
try {
|
|
||||||
if (editingItem) {
|
|
||||||
await updateTicketResolutionCode({ id: editingItem.id, ...payload });
|
|
||||||
toast.success(`已更新解决码：${payload.name}`);
|
|
||||||
} else {
|
|
||||||
await createTicketResolutionCode(payload);
|
|
||||||
toast.success(`已创建解决码：${payload.name}`);
|
|
||||||
}
|
|
||||||
setDialogOpen(false);
|
|
||||||
setEditingItem(null);
|
|
||||||
await loadData();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "保存解决码失败");
|
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDelete(item: TicketResolutionCode) {
|
|
||||||
try {
|
|
||||||
await deleteTicketResolutionCode(item.id);
|
|
||||||
toast.success(`已删除解决码：${item.name}`);
|
|
||||||
await loadData();
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "删除解决码失败");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
|
|
||||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center">
|
|
||||||
<div className="relative min-w-72">
|
|
||||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
value={keywordInput}
|
|
||||||
onChange={(event) => setKeywordInput(event.target.value)}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
event.preventDefault();
|
|
||||||
applyFilters();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="按解决码名称筛选"
|
|
||||||
className="pl-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-full xl:w-40">
|
|
||||||
<OptionCombobox
|
|
||||||
value={statusFilterInput}
|
|
||||||
onChange={setStatusFilterInput}
|
|
||||||
placeholder="全部状态"
|
|
||||||
options={listStatusOptions.map((item) => ({
|
|
||||||
value: item.value,
|
|
||||||
label: item.label,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline" onClick={applyFilters} disabled={loading}>
|
|
||||||
<SearchIcon className="size-4" />
|
|
||||||
查询
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => void loadData()}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
<RefreshCwIcon className="size-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setEditingItem(null);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<PlusIcon className="size-4" />
|
|
||||||
新建解决码
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overflow-hidden rounded-lg border bg-background">
|
|
||||||
<table className="w-full text-sm">
|
|
||||||
<thead className="bg-muted/35">
|
|
||||||
<tr>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">名称</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">编码</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">状态</th>
|
|
||||||
<th className="px-4 py-3 text-left font-medium">排序</th>
|
|
||||||
<th className="px-4 py-3 text-right font-medium">操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{loading ? (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={5}
|
|
||||||
className="h-32 text-center text-muted-foreground"
|
|
||||||
>
|
|
||||||
加载中...
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : result.results.length > 0 ? (
|
|
||||||
result.results.map((item) => (
|
|
||||||
<tr key={item.id} className="border-t">
|
|
||||||
<td className="px-4 py-3">{item.name}</td>
|
|
||||||
<td className="px-4 py-3 font-mono text-xs">{item.code}</td>
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<Badge
|
|
||||||
variant={
|
|
||||||
item.status === Status.Ok ? "default" : "secondary"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{getEnumLabel(StatusLabels, item.status as Status)}
|
|
||||||
</Badge>
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3">{item.sortNo}</td>
|
|
||||||
<td className="px-4 py-3 text-right">
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger
|
|
||||||
render={<Button variant="ghost" size="sm" />}
|
|
||||||
>
|
|
||||||
操作
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setEditingItem(item);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
className="text-destructive"
|
|
||||||
onClick={() => void handleDelete(item)}
|
|
||||||
>
|
|
||||||
<Trash2Icon className="size-4" />
|
|
||||||
删除
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={5}
|
|
||||||
className="h-32 text-center text-muted-foreground"
|
|
||||||
>
|
|
||||||
暂无解决码
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ListPagination
|
|
||||||
page={result.page.page}
|
|
||||||
total={result.page.total}
|
|
||||||
limit={result.page.limit}
|
|
||||||
loading={loading}
|
|
||||||
onPageChange={setPage}
|
|
||||||
onLimitChange={(value) => {
|
|
||||||
setLimit(value);
|
|
||||||
setPage(1);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TicketResolutionCodeEditDialog
|
|
||||||
open={dialogOpen}
|
|
||||||
saving={saving}
|
|
||||||
item={editingItem}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (!saving) {
|
|
||||||
setDialogOpen(open);
|
|
||||||
if (!open) {
|
|
||||||
setEditingItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type TicketResolutionCodeEditDialogProps = {
|
|
||||||
open: boolean;
|
|
||||||
saving: boolean;
|
|
||||||
item: TicketResolutionCode | null;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onSubmit: (payload: CreateTicketResolutionCodePayload) => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
function TicketResolutionCodeEditDialog({
|
|
||||||
open,
|
|
||||||
saving,
|
|
||||||
item,
|
|
||||||
onOpenChange,
|
|
||||||
onSubmit,
|
|
||||||
}: TicketResolutionCodeEditDialogProps) {
|
|
||||||
const formId = "ticket-resolution-code-edit-form";
|
|
||||||
const form = useForm<
|
|
||||||
z.input<typeof formSchema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof formSchema>
|
|
||||||
>({
|
|
||||||
resolver,
|
|
||||||
defaultValues: emptyForm,
|
|
||||||
});
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = form;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
reset(buildForm(item));
|
|
||||||
}, [item, reset]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ProjectDialog
|
|
||||||
open={open}
|
|
||||||
onOpenChange={onOpenChange}
|
|
||||||
title={item ? "编辑解决码" : "新建解决码"}
|
|
||||||
size="md"
|
|
||||||
allowFullscreen
|
|
||||||
footer={
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
disabled={saving}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" form={formId} disabled={saving}>
|
|
||||||
{saving ? "保存中..." : item ? "保存" : "创建"}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<form
|
|
||||||
id={formId}
|
|
||||||
onSubmit={handleSubmit(async (values) =>
|
|
||||||
onSubmit(buildPayload(values)),
|
|
||||||
)}
|
|
||||||
className="space-y-4"
|
|
||||||
>
|
|
||||||
<Field data-invalid={!!errors.name}>
|
|
||||||
<FieldLabel htmlFor="ticket-resolution-code-name">
|
|
||||||
解决码名称
|
|
||||||
</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-resolution-code-name"
|
|
||||||
placeholder="请输入解决码名称"
|
|
||||||
{...register("name")}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.name]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field data-invalid={!!errors.code}>
|
|
||||||
<FieldLabel htmlFor="ticket-resolution-code-code">
|
|
||||||
解决码编码
|
|
||||||
</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-resolution-code-code"
|
|
||||||
placeholder="请输入解决码编码"
|
|
||||||
{...register("code")}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.code]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<Field data-invalid={!!errors.sortNo}>
|
|
||||||
<FieldLabel htmlFor="ticket-resolution-code-sort">排序</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input id="ticket-resolution-code-sort" {...register("sortNo")} />
|
|
||||||
<FieldError errors={[errors.sortNo]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field data-invalid={!!errors.status}>
|
|
||||||
<FieldLabel>状态</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="status"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择状态"
|
|
||||||
options={listStatusOptions
|
|
||||||
.filter((item) => item.value !== "all")
|
|
||||||
.map((item) => ({
|
|
||||||
value: item.value,
|
|
||||||
label: item.label,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.status]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
<Field>
|
|
||||||
<FieldLabel htmlFor="ticket-resolution-code-remark">备注</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea
|
|
||||||
id="ticket-resolution-code-remark"
|
|
||||||
rows={4}
|
|
||||||
{...register("remark")}
|
|
||||||
/>
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</form>
|
|
||||||
</ProjectDialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,326 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import Link from "next/link"
|
|
||||||
import { AlertTriangleIcon, CircleDashedIcon, RefreshCcwIcon, TimerResetIcon, WrenchIcon } from "lucide-react"
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
import { OptionCombobox } from "@/components/option-combobox"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card"
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table"
|
|
||||||
import {
|
|
||||||
fetchAgentTeamsAll,
|
|
||||||
type AdminAgentTeam,
|
|
||||||
} from "@/lib/api/admin"
|
|
||||||
import {
|
|
||||||
fetchTicketRiskOverview,
|
|
||||||
fetchTicketRiskList,
|
|
||||||
type TicketItem,
|
|
||||||
type TicketRiskOverview,
|
|
||||||
} from "@/lib/api/ticket"
|
|
||||||
import { formatDateTime } from "@/lib/utils"
|
|
||||||
import { TicketPriorityBadge } from "../tickets/_components/ticket-priority-badge"
|
|
||||||
import { TicketSLABadge } from "../tickets/_components/ticket-sla-badge"
|
|
||||||
import { TicketStatusBadge } from "../tickets/_components/ticket-status-badge"
|
|
||||||
|
|
||||||
type RiskTableProps = {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
items: TicketItem[]
|
|
||||||
emptyText: string
|
|
||||||
}
|
|
||||||
|
|
||||||
function RiskTable({ title, description, items, emptyText }: RiskTableProps) {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-base">{title}</CardTitle>
|
|
||||||
<CardDescription>{description}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>工单</TableHead>
|
|
||||||
<TableHead>分类</TableHead>
|
|
||||||
<TableHead>优先级</TableHead>
|
|
||||||
<TableHead>状态</TableHead>
|
|
||||||
<TableHead>SLA</TableHead>
|
|
||||||
<TableHead>处理人</TableHead>
|
|
||||||
<TableHead>更新时间</TableHead>
|
|
||||||
<TableHead className="text-right">操作</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{items.length > 0 ? (
|
|
||||||
items.map((item) => (
|
|
||||||
<TableRow key={item.id}>
|
|
||||||
<TableCell className="min-w-64">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="font-medium">{item.title}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{item.ticketNo}</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{item.tags && item.tags.length > 0
|
|
||||||
? item.tags.map((tag) => tag.name).join(" / ")
|
|
||||||
: "未打标签"}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<TicketPriorityBadge priority={item.priority} priorityName={item.priorityName} />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<TicketStatusBadge status={item.status} />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<TicketSLABadge ticket={item} />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>{item.currentAssigneeName || "未指派"}</TableCell>
|
|
||||||
<TableCell>{item.updatedAt ? formatDateTime(item.updatedAt) : "—"}</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<Link href={`/dashboard/tickets/detail?id=${item.id}`} target="_blank" rel="noreferrer">
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
查看详情
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={8} className="h-24 text-center text-muted-foreground">
|
|
||||||
{emptyText}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TicketRiskPage() {
|
|
||||||
const [loading, setLoading] = useState(true)
|
|
||||||
const [overview, setOverview] = useState<TicketRiskOverview | null>(null)
|
|
||||||
const [overdueTickets, setOverdueTickets] = useState<TicketItem[]>([])
|
|
||||||
const [highRiskTickets, setHighRiskTickets] = useState<TicketItem[]>([])
|
|
||||||
const [unassignedTickets, setUnassignedTickets] = useState<TicketItem[]>([])
|
|
||||||
const [pendingInternalTickets, setPendingInternalTickets] = useState<TicketItem[]>([])
|
|
||||||
const [teams, setTeams] = useState<AdminAgentTeam[]>([])
|
|
||||||
const [teamFilter, setTeamFilter] = useState("all")
|
|
||||||
const [riskWindow, setRiskWindow] = useState("240")
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void (async () => {
|
|
||||||
try {
|
|
||||||
const data = await fetchAgentTeamsAll()
|
|
||||||
setTeams(Array.isArray(data) ? data : [])
|
|
||||||
} catch {
|
|
||||||
setTeams([])
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const loadData = useCallback(async () => {
|
|
||||||
setLoading(true)
|
|
||||||
try {
|
|
||||||
const currentTeamId = teamFilter === "all" ? undefined : Number(teamFilter)
|
|
||||||
const riskMinutes = Number(riskWindow)
|
|
||||||
const [overviewData, overdueData, highRiskData, unassignedData, pendingInternalData] =
|
|
||||||
await Promise.all([
|
|
||||||
fetchTicketRiskOverview({ currentTeamId, riskWindowMins: riskMinutes }),
|
|
||||||
fetchTicketRiskList({ riskType: "overdue", currentTeamId, riskWindowMins: riskMinutes, page: 1, limit: 10 }),
|
|
||||||
fetchTicketRiskList({ riskType: "high_risk", currentTeamId, riskWindowMins: riskMinutes, page: 1, limit: 10 }),
|
|
||||||
fetchTicketRiskList({ riskType: "unassigned", currentTeamId, riskWindowMins: riskMinutes, page: 1, limit: 10 }),
|
|
||||||
fetchTicketRiskList({ riskType: "pending_internal", currentTeamId, riskWindowMins: riskMinutes, page: 1, limit: 10 }),
|
|
||||||
])
|
|
||||||
|
|
||||||
setOverview(overviewData)
|
|
||||||
setOverdueTickets(Array.isArray(overdueData.results) ? overdueData.results : [])
|
|
||||||
setHighRiskTickets(Array.isArray(highRiskData.results) ? highRiskData.results : [])
|
|
||||||
setUnassignedTickets(Array.isArray(unassignedData.results) ? unassignedData.results : [])
|
|
||||||
setPendingInternalTickets(
|
|
||||||
Array.isArray(pendingInternalData.results) ? pendingInternalData.results : [],
|
|
||||||
)
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "加载 SLA 风险页失败")
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}, [riskWindow, teamFilter])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void loadData()
|
|
||||||
}, [loadData])
|
|
||||||
|
|
||||||
const cards = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
title: "已超时",
|
|
||||||
description: "解决 SLA 已经 breach 的工单",
|
|
||||||
value: overview?.overdue ?? 0,
|
|
||||||
icon: AlertTriangleIcon,
|
|
||||||
tone: "text-red-700 bg-red-500/10",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: `${Number(riskWindow) / 60} 小时内到期`,
|
|
||||||
description: "建议组长优先盯防的风险队列",
|
|
||||||
value: overview?.highRisk ?? 0,
|
|
||||||
icon: TimerResetIcon,
|
|
||||||
tone: "text-orange-700 bg-orange-500/10",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "待分配",
|
|
||||||
description: "目前还没有明确负责人的工单",
|
|
||||||
value: overview?.unassigned ?? 0,
|
|
||||||
icon: CircleDashedIcon,
|
|
||||||
tone: "text-amber-700 bg-amber-500/10",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "待内部处理",
|
|
||||||
description: "等待内部团队协作处理的工单",
|
|
||||||
value: overview?.pendingInternal ?? 0,
|
|
||||||
icon: WrenchIcon,
|
|
||||||
tone: "text-blue-700 bg-blue-500/10",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[overview, riskWindow],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4 md:p-6">
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-xl font-semibold">SLA 风险运营</h1>
|
|
||||||
<p className="mt-1 text-sm text-muted-foreground">
|
|
||||||
给主管和组长使用的风险盯防页，优先查看超时、临近超时和待分配工单
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="w-44">
|
|
||||||
<OptionCombobox
|
|
||||||
value={teamFilter}
|
|
||||||
onChange={setTeamFilter}
|
|
||||||
placeholder="全部团队"
|
|
||||||
options={[
|
|
||||||
{ value: "all", label: "全部团队" },
|
|
||||||
...teams.map((team) => ({ value: String(team.id), label: team.name })),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="w-44">
|
|
||||||
<OptionCombobox
|
|
||||||
value={riskWindow}
|
|
||||||
onChange={setRiskWindow}
|
|
||||||
placeholder="风险时间窗"
|
|
||||||
options={[
|
|
||||||
{ value: "60", label: "1 小时内" },
|
|
||||||
{ value: "240", label: "4 小时内" },
|
|
||||||
{ value: "1440", label: "24 小时内" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Link href="/dashboard/tickets">
|
|
||||||
<Button variant="outline">前往工单工作台</Button>
|
|
||||||
</Link>
|
|
||||||
<Button variant="outline" onClick={() => void loadData()} disabled={loading}>
|
|
||||||
<RefreshCcwIcon className="size-4" />
|
|
||||||
刷新
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
||||||
{cards.map((item) => {
|
|
||||||
const Icon = item.icon
|
|
||||||
return (
|
|
||||||
<Card key={item.title}>
|
|
||||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<CardTitle className="text-sm font-medium">{item.title}</CardTitle>
|
|
||||||
<CardDescription>{item.description}</CardDescription>
|
|
||||||
</div>
|
|
||||||
<div className={`rounded-full p-2 ${item.tone}`}>
|
|
||||||
<Icon className="size-4" />
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-3xl font-semibold tracking-tight">
|
|
||||||
{loading ? "..." : item.value.toLocaleString()}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<RiskTable
|
|
||||||
title="已超时工单"
|
|
||||||
description="需要立即处理或升级的高风险工单"
|
|
||||||
items={overdueTickets}
|
|
||||||
emptyText="当前没有已超时工单"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<RiskTable
|
|
||||||
title="4 小时内到期"
|
|
||||||
description="建议优先处理，避免进入超时队列"
|
|
||||||
items={highRiskTickets}
|
|
||||||
emptyText="当前没有临近超时工单"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-base">滞留原因</CardTitle>
|
|
||||||
<CardDescription>帮助主管快速判断风险是由分配、协作还是 SLA 配置问题造成</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
||||||
{(overview?.reasons?.length ?? 0) > 0 ? (
|
|
||||||
overview?.reasons?.map((item) => (
|
|
||||||
<div key={item.code} className="rounded-lg border bg-muted/20 p-4">
|
|
||||||
<div className="text-sm font-medium">{item.title}</div>
|
|
||||||
<div className="mt-2 text-2xl font-semibold">{item.count.toLocaleString()}</div>
|
|
||||||
<div className="mt-2 text-xs leading-6 text-muted-foreground">{item.description}</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="text-sm text-muted-foreground">暂无滞留原因数据</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div className="grid gap-4 xl:grid-cols-2">
|
|
||||||
<RiskTable
|
|
||||||
title="待分配工单"
|
|
||||||
description="进入队列但尚未明确负责人的工单"
|
|
||||||
items={unassignedTickets}
|
|
||||||
emptyText="当前没有待分配工单"
|
|
||||||
/>
|
|
||||||
<RiskTable
|
|
||||||
title="待内部处理"
|
|
||||||
description="需要内部团队介入，容易长期滞留的工单"
|
|
||||||
items={pendingInternalTickets}
|
|
||||||
emptyText="当前没有待内部处理工单"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -30,8 +30,6 @@ export function CreateTicketFromConversationDialog({
|
|||||||
? {
|
? {
|
||||||
title: conversation.customerName || "",
|
title: conversation.customerName || "",
|
||||||
description: conversation.lastMessageSummary || "",
|
description: conversation.lastMessageSummary || "",
|
||||||
priority: 2,
|
|
||||||
severity: 1,
|
|
||||||
currentAssigneeId: conversation.currentAssigneeId || undefined,
|
currentAssigneeId: conversation.currentAssigneeId || undefined,
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
@@ -55,11 +53,8 @@ export function CreateTicketFromConversationDialog({
|
|||||||
conversationId: conversation.id,
|
conversationId: conversation.id,
|
||||||
title: payload.title,
|
title: payload.title,
|
||||||
description: payload.description,
|
description: payload.description,
|
||||||
priority: payload.priority,
|
|
||||||
severity: payload.severity,
|
|
||||||
currentTeamId: payload.currentTeamId,
|
|
||||||
currentAssigneeId: payload.currentAssigneeId,
|
currentAssigneeId: payload.currentAssigneeId,
|
||||||
syncToConversation: true,
|
tagIds: payload.tagIds,
|
||||||
})
|
})
|
||||||
toast.success("工单创建成功")
|
toast.success("工单创建成功")
|
||||||
onSuccess?.()
|
onSuccess?.()
|
||||||
|
|||||||
@@ -31,16 +31,10 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
|
|||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import {
|
import {
|
||||||
fetchAgentProfilesAll,
|
fetchAgentProfilesAll,
|
||||||
fetchAgentTeamsAll,
|
|
||||||
fetchTagsAll,
|
fetchTagsAll,
|
||||||
type AdminAgentProfile,
|
type AdminAgentProfile,
|
||||||
type AdminAgentTeam,
|
|
||||||
type TagTree,
|
type TagTree,
|
||||||
} from "@/lib/api/admin"
|
} from "@/lib/api/admin"
|
||||||
import {
|
|
||||||
fetchTicketPriorityConfigsAll,
|
|
||||||
type TicketPriorityConfig,
|
|
||||||
} from "@/lib/api/ticket-config"
|
|
||||||
import {
|
import {
|
||||||
fetchTicketDetail,
|
fetchTicketDetail,
|
||||||
type CreateTicketPayload,
|
type CreateTicketPayload,
|
||||||
@@ -61,34 +55,26 @@ type EditDialogProps = {
|
|||||||
onSubmit: (payload: CreateTicketPayload | UpdateTicketPayload) => Promise<void>
|
onSubmit: (payload: CreateTicketPayload | UpdateTicketPayload) => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
const ticketFormSchema = z.object({
|
const schema = z.object({
|
||||||
title: z.string().trim().min(1, "标题不能为空"),
|
title: z.string().trim().min(1, "请输入工单标题"),
|
||||||
description: z.string().trim(),
|
description: z.string().trim().min(1, "请输入问题描述"),
|
||||||
tagIds: z.array(z.string().trim()).default([]),
|
currentAssigneeId: z.coerce.number().int().min(0).optional(),
|
||||||
priority: z.string().trim().min(1, "请选择优先级"),
|
tagIds: z.array(z.number().int().positive()).default([]),
|
||||||
severity: z.enum(["1", "2", "3"], { message: "请选择严重度" }),
|
|
||||||
currentTeamId: z.string().trim(),
|
|
||||||
currentAssigneeId: z.string().trim(),
|
|
||||||
dueAt: z.string().trim(),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
type EditForm = z.infer<typeof ticketFormSchema>
|
type EditForm = z.infer<typeof schema>
|
||||||
|
|
||||||
const editFormResolver = zodResolver(ticketFormSchema as never) as Resolver<
|
const editFormResolver = zodResolver(schema as never) as Resolver<
|
||||||
z.input<typeof ticketFormSchema>,
|
z.input<typeof schema>,
|
||||||
undefined,
|
undefined,
|
||||||
z.output<typeof ticketFormSchema>
|
z.output<typeof schema>
|
||||||
>
|
>
|
||||||
|
|
||||||
const emptyForm: EditForm = {
|
const emptyForm: EditForm = {
|
||||||
title: "",
|
title: "",
|
||||||
description: "",
|
description: "",
|
||||||
|
currentAssigneeId: 0,
|
||||||
tagIds: [],
|
tagIds: [],
|
||||||
priority: "",
|
|
||||||
severity: "1",
|
|
||||||
currentTeamId: "",
|
|
||||||
currentAssigneeId: "",
|
|
||||||
dueAt: "",
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildForm(item: TicketItem | null): EditForm {
|
function buildForm(item: TicketItem | null): EditForm {
|
||||||
@@ -98,12 +84,8 @@ function buildForm(item: TicketItem | null): EditForm {
|
|||||||
return {
|
return {
|
||||||
title: item.title ?? "",
|
title: item.title ?? "",
|
||||||
description: item.description ?? "",
|
description: item.description ?? "",
|
||||||
tagIds: (item.tags ?? []).map((tag) => String(tag.id)),
|
currentAssigneeId: item.currentAssigneeId ?? 0,
|
||||||
priority: item.priority ? String(item.priority) : "",
|
tagIds: (item.tags ?? []).map((tag) => tag.id),
|
||||||
severity: String(item.severity || 1) as EditForm["severity"],
|
|
||||||
currentTeamId: item.currentTeamId ? String(item.currentTeamId) : "",
|
|
||||||
currentAssigneeId: item.currentAssigneeId ? String(item.currentAssigneeId) : "",
|
|
||||||
dueAt: item.dueAt ? item.dueAt.replace(" ", "T").slice(0, 16) : "",
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,27 +93,18 @@ function buildInitialForm(initialValues?: Partial<CreateTicketPayload>): EditFor
|
|||||||
return {
|
return {
|
||||||
title: initialValues?.title?.trim() ?? "",
|
title: initialValues?.title?.trim() ?? "",
|
||||||
description: initialValues?.description?.trim() ?? "",
|
description: initialValues?.description?.trim() ?? "",
|
||||||
tagIds: (initialValues?.tagIds ?? []).map((tagId) => String(tagId)),
|
currentAssigneeId: initialValues?.currentAssigneeId ?? 0,
|
||||||
priority: initialValues?.priority ? String(initialValues.priority) : "",
|
tagIds: initialValues?.tagIds ?? [],
|
||||||
severity: String(initialValues?.severity ?? 1) as EditForm["severity"],
|
|
||||||
currentTeamId: initialValues?.currentTeamId ? String(initialValues.currentTeamId) : "",
|
|
||||||
currentAssigneeId: initialValues?.currentAssigneeId
|
|
||||||
? String(initialValues.currentAssigneeId)
|
|
||||||
: "",
|
|
||||||
dueAt: initialValues?.dueAt ? initialValues.dueAt.replace(" ", "T").slice(0, 16) : "",
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildPayload(form: EditForm): CreateTicketPayload {
|
function buildPayload(form: EditForm): CreateTicketPayload {
|
||||||
|
const currentAssigneeId = form.currentAssigneeId ?? 0
|
||||||
return {
|
return {
|
||||||
title: form.title.trim(),
|
title: form.title.trim(),
|
||||||
description: form.description.trim(),
|
description: form.description.trim(),
|
||||||
tagIds: form.tagIds.length > 0 ? form.tagIds.map((tagId) => Number(tagId)) : undefined,
|
currentAssigneeId,
|
||||||
priority: Number(form.priority),
|
tagIds: form.tagIds,
|
||||||
severity: Number(form.severity),
|
|
||||||
currentTeamId: form.currentTeamId ? Number(form.currentTeamId) : undefined,
|
|
||||||
currentAssigneeId: form.currentAssigneeId ? Number(form.currentAssigneeId) : undefined,
|
|
||||||
dueAt: form.dueAt ? `${form.dueAt.replace("T", " ")}:00` : undefined,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -153,8 +126,8 @@ function flattenTagTree(nodes: TagTree[], depth = 0, parentPath = ""): FlatTagNo
|
|||||||
}
|
}
|
||||||
|
|
||||||
type TicketTagSelectorProps = {
|
type TicketTagSelectorProps = {
|
||||||
value?: string[]
|
value?: number[]
|
||||||
onChange: (value: string[]) => void
|
onChange: (value: number[]) => void
|
||||||
availableTags: TagTree[]
|
availableTags: TagTree[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -163,11 +136,11 @@ function TicketTagSelector({ value, onChange, availableTags }: TicketTagSelector
|
|||||||
const flatTags = useMemo(() => flattenTagTree(availableTags), [availableTags])
|
const flatTags = useMemo(() => flattenTagTree(availableTags), [availableTags])
|
||||||
const selectedTagIDs = useMemo(() => new Set(selectedValues), [selectedValues])
|
const selectedTagIDs = useMemo(() => new Set(selectedValues), [selectedValues])
|
||||||
const selectedTags = useMemo(
|
const selectedTags = useMemo(
|
||||||
() => flatTags.filter((tag) => selectedTagIDs.has(String(tag.id))),
|
() => flatTags.filter((tag) => selectedTagIDs.has(tag.id)),
|
||||||
[flatTags, selectedTagIDs],
|
[flatTags, selectedTagIDs],
|
||||||
)
|
)
|
||||||
|
|
||||||
function handleToggle(tagID: string) {
|
function handleToggle(tagID: number) {
|
||||||
if (selectedTagIDs.has(tagID)) {
|
if (selectedTagIDs.has(tagID)) {
|
||||||
onChange(selectedValues.filter((item) => item !== tagID))
|
onChange(selectedValues.filter((item) => item !== tagID))
|
||||||
return
|
return
|
||||||
@@ -183,8 +156,8 @@ function TicketTagSelector({ value, onChange, availableTags }: TicketTagSelector
|
|||||||
<Button type="button" variant="outline" className="w-full justify-start" />
|
<Button type="button" variant="outline" className="w-full justify-start" />
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<TagIcon className="size-4" />
|
<TagIcon className="size-4" />
|
||||||
{selectedTags.length > 0 ? `已选择 ${selectedTags.length} 个标签` : "请选择工单标签"}
|
{selectedTags.length > 0 ? `已选择 ${selectedTags.length} 个标签` : "请选择工单标签"}
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent align="start" className="w-[320px] p-0">
|
<PopoverContent align="start" className="w-[320px] p-0">
|
||||||
<Command>
|
<Command>
|
||||||
@@ -193,12 +166,12 @@ function TicketTagSelector({ value, onChange, availableTags }: TicketTagSelector
|
|||||||
<CommandEmpty>暂无可用标签</CommandEmpty>
|
<CommandEmpty>暂无可用标签</CommandEmpty>
|
||||||
<CommandGroup heading="标签">
|
<CommandGroup heading="标签">
|
||||||
{flatTags.map((tag) => {
|
{flatTags.map((tag) => {
|
||||||
const checked = selectedTagIDs.has(String(tag.id))
|
const checked = selectedTagIDs.has(tag.id)
|
||||||
return (
|
return (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={tag.id}
|
key={tag.id}
|
||||||
value={`${tag.id} ${tag.path} ${tag.remark}`}
|
value={`${tag.id} ${tag.path} ${tag.remark}`}
|
||||||
onSelect={() => handleToggle(String(tag.id))}
|
onSelect={() => handleToggle(tag.id)}
|
||||||
>
|
>
|
||||||
<CheckIcon className={`mr-2 size-4 ${checked ? "opacity-100" : "opacity-0"}`} />
|
<CheckIcon className={`mr-2 size-4 ${checked ? "opacity-100" : "opacity-0"}`} />
|
||||||
<span className="truncate" style={{ paddingLeft: `${tag.depth * 12}px` }}>
|
<span className="truncate" style={{ paddingLeft: `${tag.depth * 12}px` }}>
|
||||||
@@ -274,13 +247,11 @@ function TicketEditDialogBody({
|
|||||||
const formId = "ticket-edit-form"
|
const formId = "ticket-edit-form"
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [tags, setTags] = useState<TagTree[]>([])
|
const [tags, setTags] = useState<TagTree[]>([])
|
||||||
const [priorities, setPriorities] = useState<TicketPriorityConfig[]>([])
|
|
||||||
const [teams, setTeams] = useState<AdminAgentTeam[]>([])
|
|
||||||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
||||||
const form = useForm<
|
const form = useForm<
|
||||||
z.input<typeof ticketFormSchema>,
|
z.input<typeof schema>,
|
||||||
undefined,
|
undefined,
|
||||||
z.output<typeof ticketFormSchema>
|
z.output<typeof schema>
|
||||||
>({
|
>({
|
||||||
resolver: editFormResolver,
|
resolver: editFormResolver,
|
||||||
defaultValues: emptyForm,
|
defaultValues: emptyForm,
|
||||||
@@ -315,31 +286,16 @@ function TicketEditDialogBody({
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
void (async () => {
|
void (async () => {
|
||||||
const [tagData, priorityData, teamData, agentData] = await Promise.all([
|
const [tagData, agentData] = await Promise.all([
|
||||||
fetchTagsAll(),
|
fetchTagsAll(),
|
||||||
fetchTicketPriorityConfigsAll(),
|
|
||||||
fetchAgentTeamsAll(),
|
|
||||||
fetchAgentProfilesAll(),
|
fetchAgentProfilesAll(),
|
||||||
])
|
])
|
||||||
setTags(Array.isArray(tagData) ? tagData : [])
|
setTags(Array.isArray(tagData) ? tagData : [])
|
||||||
setPriorities(Array.isArray(priorityData) ? priorityData : [])
|
|
||||||
setTeams(Array.isArray(teamData) ? teamData : [])
|
|
||||||
setAgents(Array.isArray(agentData) ? agentData : [])
|
setAgents(Array.isArray(agentData) ? agentData : [])
|
||||||
})()
|
})()
|
||||||
}, [open])
|
}, [open])
|
||||||
|
|
||||||
const priorityOptions = priorities.map((priority) => ({
|
const agentOptions = [{ value: "0", label: "不指定处理人" }].concat(
|
||||||
value: String(priority.id),
|
|
||||||
label: priority.name,
|
|
||||||
}))
|
|
||||||
|
|
||||||
const teamOptions = [{ value: "", label: "不指定团队" }].concat(
|
|
||||||
teams.map((team) => ({
|
|
||||||
value: String(team.id),
|
|
||||||
label: team.name,
|
|
||||||
})),
|
|
||||||
)
|
|
||||||
const agentOptions = [{ value: "", label: "不指定处理人" }].concat(
|
|
||||||
agents.map((agent) => ({
|
agents.map((agent) => ({
|
||||||
value: String(agent.userId),
|
value: String(agent.userId),
|
||||||
label:
|
label:
|
||||||
@@ -426,9 +382,25 @@ function TicketEditDialogBody({
|
|||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<Field>
|
<Field>
|
||||||
<div className="flex items-center justify-between gap-3">
|
<FieldLabel>处理人</FieldLabel>
|
||||||
<FieldLabel>工单标签</FieldLabel>
|
<FieldContent>
|
||||||
</div>
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="currentAssigneeId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<OptionCombobox
|
||||||
|
value={String(field.value ?? 0)}
|
||||||
|
onChange={(value) => field.onChange(Number(value))}
|
||||||
|
placeholder="请选择处理人"
|
||||||
|
options={agentOptions}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</FieldContent>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>工单标签</FieldLabel>
|
||||||
<FieldContent>
|
<FieldContent>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
@@ -443,101 +415,6 @@ function TicketEditDialogBody({
|
|||||||
/>
|
/>
|
||||||
</FieldContent>
|
</FieldContent>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<Field data-invalid={!!errors.priority}>
|
|
||||||
<FieldLabel>优先级</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="priority"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择优先级"
|
|
||||||
options={priorityOptions}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.priority]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field data-invalid={!!errors.severity}>
|
|
||||||
<FieldLabel>严重度</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="severity"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择严重度"
|
|
||||||
options={[
|
|
||||||
{ value: "1", label: "轻微" },
|
|
||||||
{ value: "2", label: "严重" },
|
|
||||||
{ value: "3", label: "致命" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.severity]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>处理团队</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="currentTeamId"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择团队"
|
|
||||||
options={teamOptions}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>处理人</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="currentAssigneeId"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择处理人"
|
|
||||||
options={agentOptions}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field data-invalid={!!errors.dueAt}>
|
|
||||||
<FieldLabel htmlFor="ticket-due-at">截止时间</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ticket-due-at"
|
|
||||||
type="datetime-local"
|
|
||||||
aria-invalid={!!errors.dueAt}
|
|
||||||
{...register("dueAt")}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.dueAt]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -19,15 +19,12 @@ import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/fie
|
|||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import {
|
import {
|
||||||
fetchAgentProfilesAll,
|
fetchAgentProfilesAll,
|
||||||
fetchAgentTeamsAll,
|
|
||||||
type AdminAgentProfile,
|
type AdminAgentProfile,
|
||||||
type AdminAgentTeam,
|
|
||||||
} from "@/lib/api/admin"
|
} from "@/lib/api/admin"
|
||||||
import { assignTicket, batchAssignTickets } from "@/lib/api/ticket"
|
import { assignTicket, batchAssignTickets } from "@/lib/api/ticket"
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
toUserId: z.string().trim().min(1, "请选择处理人"),
|
toUserId: z.string().trim().min(1, "请选择处理人"),
|
||||||
toTeamId: z.string().trim(),
|
|
||||||
reason: z.string().trim(),
|
reason: z.string().trim(),
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -41,7 +38,6 @@ const resolver = zodResolver(schema as never) as Resolver<
|
|||||||
|
|
||||||
const emptyForm: FormValues = {
|
const emptyForm: FormValues = {
|
||||||
toUserId: "",
|
toUserId: "",
|
||||||
toTeamId: "",
|
|
||||||
reason: "",
|
reason: "",
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -49,7 +45,6 @@ type TicketAssignDialogProps = {
|
|||||||
open: boolean
|
open: boolean
|
||||||
ticketId: number | null
|
ticketId: number | null
|
||||||
ticketIds?: number[]
|
ticketIds?: number[]
|
||||||
currentTeamId?: number
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
onOpenChange: (open: boolean) => void
|
onOpenChange: (open: boolean) => void
|
||||||
onSuccess?: () => Promise<void> | void
|
onSuccess?: () => Promise<void> | void
|
||||||
@@ -59,7 +54,6 @@ export function TicketAssignDialog({
|
|||||||
open,
|
open,
|
||||||
ticketId,
|
ticketId,
|
||||||
ticketIds,
|
ticketIds,
|
||||||
currentTeamId,
|
|
||||||
currentAssigneeId,
|
currentAssigneeId,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
@@ -71,7 +65,6 @@ export function TicketAssignDialog({
|
|||||||
key={ticketId ?? "ticket-assign"}
|
key={ticketId ?? "ticket-assign"}
|
||||||
ticketId={ticketId}
|
ticketId={ticketId}
|
||||||
ticketIds={ticketIds}
|
ticketIds={ticketIds}
|
||||||
currentTeamId={currentTeamId}
|
|
||||||
currentAssigneeId={currentAssigneeId}
|
currentAssigneeId={currentAssigneeId}
|
||||||
onOpenChange={onOpenChange}
|
onOpenChange={onOpenChange}
|
||||||
onSuccess={onSuccess}
|
onSuccess={onSuccess}
|
||||||
@@ -84,14 +77,12 @@ export function TicketAssignDialog({
|
|||||||
function TicketAssignDialogBody({
|
function TicketAssignDialogBody({
|
||||||
ticketId,
|
ticketId,
|
||||||
ticketIds,
|
ticketIds,
|
||||||
currentTeamId,
|
|
||||||
currentAssigneeId,
|
currentAssigneeId,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
}: Omit<TicketAssignDialogProps, "open">) {
|
}: Omit<TicketAssignDialogProps, "open">) {
|
||||||
const [saving, setSaving] = useState(false)
|
const [saving, setSaving] = useState(false)
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [teams, setTeams] = useState<AdminAgentTeam[]>([])
|
|
||||||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
||||||
|
|
||||||
const form = useForm<
|
const form = useForm<
|
||||||
@@ -114,16 +105,14 @@ function TicketAssignDialogBody({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
reset({
|
reset({
|
||||||
toUserId: currentAssigneeId ? String(currentAssigneeId) : "",
|
toUserId: currentAssigneeId ? String(currentAssigneeId) : "",
|
||||||
toTeamId: currentTeamId ? String(currentTeamId) : "",
|
|
||||||
reason: "",
|
reason: "",
|
||||||
})
|
})
|
||||||
}, [currentAssigneeId, currentTeamId, reset, ticketId])
|
}, [currentAssigneeId, reset, ticketId])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
Promise.all([fetchAgentTeamsAll(), fetchAgentProfilesAll()])
|
fetchAgentProfilesAll()
|
||||||
.then(([teamData, agentData]) => {
|
.then((agentData) => {
|
||||||
setTeams(Array.isArray(teamData) ? teamData : [])
|
|
||||||
setAgents(Array.isArray(agentData) ? agentData : [])
|
setAgents(Array.isArray(agentData) ? agentData : [])
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@@ -144,7 +133,6 @@ function TicketAssignDialogBody({
|
|||||||
await batchAssignTickets({
|
await batchAssignTickets({
|
||||||
ticketIds: validTicketIds,
|
ticketIds: validTicketIds,
|
||||||
toUserId: Number(values.toUserId),
|
toUserId: Number(values.toUserId),
|
||||||
toTeamId: values.toTeamId ? Number(values.toTeamId) : undefined,
|
|
||||||
reason: values.reason.trim() || undefined,
|
reason: values.reason.trim() || undefined,
|
||||||
})
|
})
|
||||||
toast.success(`已批量指派 ${validTicketIds.length} 张工单`)
|
toast.success(`已批量指派 ${validTicketIds.length} 张工单`)
|
||||||
@@ -152,7 +140,6 @@ function TicketAssignDialogBody({
|
|||||||
await assignTicket({
|
await assignTicket({
|
||||||
ticketId: ticketId!,
|
ticketId: ticketId!,
|
||||||
toUserId: Number(values.toUserId),
|
toUserId: Number(values.toUserId),
|
||||||
toTeamId: values.toTeamId ? Number(values.toTeamId) : undefined,
|
|
||||||
reason: values.reason.trim() || undefined,
|
reason: values.reason.trim() || undefined,
|
||||||
})
|
})
|
||||||
toast.success("处理人已更新")
|
toast.success("处理人已更新")
|
||||||
@@ -173,29 +160,6 @@ function TicketAssignDialogBody({
|
|||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||||
<div className="space-y-4 p-6">
|
<div className="space-y-4 p-6">
|
||||||
<Field>
|
|
||||||
<FieldLabel>处理团队</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="toTeamId"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder={loading ? "加载中..." : "选择处理团队"}
|
|
||||||
options={[
|
|
||||||
{ value: "", label: "不指定团队" },
|
|
||||||
...teams.map((team) => ({
|
|
||||||
value: String(team.id),
|
|
||||||
label: team.name,
|
|
||||||
})),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field data-invalid={!!errors.toUserId}>
|
<Field data-invalid={!!errors.toUserId}>
|
||||||
<FieldLabel>处理人</FieldLabel>
|
<FieldLabel>处理人</FieldLabel>
|
||||||
<FieldContent>
|
<FieldContent>
|
||||||
|
|||||||
@@ -1,149 +0,0 @@
|
|||||||
"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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
|
||||||
import { getTicketPriorityMap } from "@/lib/ticket-priority"
|
|
||||||
|
|
||||||
const priorityClassNameMap: Record<number, string> = {
|
|
||||||
0: "bg-slate-500/10 text-slate-700 border-slate-500/20",
|
|
||||||
1: "bg-blue-500/10 text-blue-700 border-blue-500/20",
|
|
||||||
2: "bg-amber-500/10 text-amber-700 border-amber-500/20",
|
|
||||||
3: "bg-red-500/10 text-red-700 border-red-500/20",
|
|
||||||
4: "bg-fuchsia-500/10 text-fuchsia-700 border-fuchsia-500/20",
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ticketPriorityLabel(priority: number, priorityName?: string) {
|
|
||||||
return priorityName?.trim() || `P${priority}`
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TicketPriorityBadge({
|
|
||||||
priority,
|
|
||||||
priorityName,
|
|
||||||
}: {
|
|
||||||
priority: number
|
|
||||||
priorityName?: string
|
|
||||||
}) {
|
|
||||||
const [priorityMap, setPriorityMap] = useState<Record<number, string>>({})
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
void (async () => {
|
|
||||||
setPriorityMap(await getTicketPriorityMap())
|
|
||||||
})()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className={priorityClassNameMap[priority] ?? priorityClassNameMap[0]}
|
|
||||||
>
|
|
||||||
{ticketPriorityLabel(priority, priorityName || priorityMap[priority])}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useEffect } from "react"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
|
||||||
import { 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 { Textarea } from "@/components/ui/textarea"
|
|
||||||
import { closeTicket, reopenTicket } from "@/lib/api/ticket"
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
reason: 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 TicketReasonDialogProps = {
|
|
||||||
open: boolean
|
|
||||||
mode: "close" | "reopen"
|
|
||||||
ticketId: number | null
|
|
||||||
defaultReason?: string
|
|
||||||
onOpenChange: (open: boolean) => void
|
|
||||||
onSuccess?: () => Promise<void> | void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TicketReasonDialog({
|
|
||||||
open,
|
|
||||||
mode,
|
|
||||||
ticketId,
|
|
||||||
defaultReason,
|
|
||||||
onOpenChange,
|
|
||||||
onSuccess,
|
|
||||||
}: TicketReasonDialogProps) {
|
|
||||||
const form = useForm<
|
|
||||||
z.input<typeof schema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof schema>
|
|
||||||
>({
|
|
||||||
resolver,
|
|
||||||
defaultValues: { reason: "" },
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
reset,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = form
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
reset({ reason: defaultReason || "" })
|
|
||||||
}, [defaultReason, reset, ticketId, open])
|
|
||||||
|
|
||||||
async function onFormSubmit(values: FormValues) {
|
|
||||||
if (!ticketId) {
|
|
||||||
toast.error("工单不存在")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
if (mode === "close") {
|
|
||||||
await closeTicket({ ticketId, closeReason: values.reason })
|
|
||||||
toast.success("工单已关闭")
|
|
||||||
} else {
|
|
||||||
await reopenTicket({ ticketId, reason: values.reason })
|
|
||||||
toast.success("工单已重开")
|
|
||||||
}
|
|
||||||
onOpenChange(false)
|
|
||||||
await onSuccess?.()
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : mode === "close" ? "关闭工单失败" : "重开工单失败")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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>{mode === "close" ? "关闭工单" : "重开工单"}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
|
||||||
<div className="space-y-4 p-6">
|
|
||||||
<Field data-invalid={!!errors.reason}>
|
|
||||||
<FieldLabel>{mode === "close" ? "关闭原因" : "重开原因"}</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea
|
|
||||||
rows={4}
|
|
||||||
placeholder={mode === "close" ? "请输入关闭原因" : "请输入重开原因"}
|
|
||||||
{...register("reason")}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.reason]} />
|
|
||||||
</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 ? "提交中..." : mode === "close" ? "确认关闭" : "确认重开"}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,229 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
|
||||||
import { Resolver, useForm } from "react-hook-form"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import { z } from "zod/v4"
|
|
||||||
import { SearchIcon } from "lucide-react"
|
|
||||||
|
|
||||||
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 { Input } from "@/components/ui/input"
|
|
||||||
import { addTicketRelation, fetchTickets, type TicketItem } from "@/lib/api/ticket"
|
|
||||||
import { cn } from "@/lib/utils"
|
|
||||||
|
|
||||||
const relationOptions = [
|
|
||||||
{ value: "duplicate", label: "重复工单" },
|
|
||||||
{ value: "related", label: "相关工单" },
|
|
||||||
{ value: "parent", label: "父工单" },
|
|
||||||
{ value: "child", label: "子工单" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
relationType: z.string().trim().min(1, "请选择关联类型"),
|
|
||||||
relatedTicketId: z.number().int().positive("请选择关联工单"),
|
|
||||||
})
|
|
||||||
|
|
||||||
type FormValues = z.infer<typeof schema>
|
|
||||||
|
|
||||||
const resolver = zodResolver(schema as never) as Resolver<
|
|
||||||
z.input<typeof schema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof schema>
|
|
||||||
>
|
|
||||||
|
|
||||||
type TicketRelationDialogProps = {
|
|
||||||
open: boolean
|
|
||||||
ticketId: number | null
|
|
||||||
onOpenChange: (open: boolean) => void
|
|
||||||
onSuccess?: () => Promise<void> | void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TicketRelationDialog({
|
|
||||||
open,
|
|
||||||
ticketId,
|
|
||||||
onOpenChange,
|
|
||||||
onSuccess,
|
|
||||||
}: TicketRelationDialogProps) {
|
|
||||||
const [keyword, setKeyword] = useState("")
|
|
||||||
const [searching, setSearching] = useState(false)
|
|
||||||
const [searchResults, setSearchResults] = useState<TicketItem[]>([])
|
|
||||||
|
|
||||||
const form = useForm<
|
|
||||||
z.input<typeof schema>,
|
|
||||||
undefined,
|
|
||||||
z.output<typeof schema>
|
|
||||||
>({
|
|
||||||
resolver,
|
|
||||||
defaultValues: {
|
|
||||||
relationType: "related",
|
|
||||||
relatedTicketId: 0,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
setValue,
|
|
||||||
reset,
|
|
||||||
watch,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = form
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (open) {
|
|
||||||
reset({ relationType: "related", relatedTicketId: 0 })
|
|
||||||
setKeyword("")
|
|
||||||
setSearchResults([])
|
|
||||||
}
|
|
||||||
}, [open, reset])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const trimmedKeyword = keyword.trim()
|
|
||||||
if (trimmedKeyword.length < 2) {
|
|
||||||
setSearchResults([])
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const timer = window.setTimeout(async () => {
|
|
||||||
setSearching(true)
|
|
||||||
try {
|
|
||||||
const data = await fetchTickets({
|
|
||||||
keyword: trimmedKeyword,
|
|
||||||
page: 1,
|
|
||||||
limit: 8,
|
|
||||||
})
|
|
||||||
const results = Array.isArray(data.results) ? data.results : []
|
|
||||||
setSearchResults(results.filter((item) => item.id !== ticketId))
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "搜索工单失败")
|
|
||||||
} finally {
|
|
||||||
setSearching(false)
|
|
||||||
}
|
|
||||||
}, 250)
|
|
||||||
return () => window.clearTimeout(timer)
|
|
||||||
}, [keyword, open, ticketId])
|
|
||||||
|
|
||||||
const selectedTicketId = watch("relatedTicketId")
|
|
||||||
const selectedTicket =
|
|
||||||
searchResults.find((item) => item.id === selectedTicketId) ?? null
|
|
||||||
|
|
||||||
async function onFormSubmit(values: FormValues) {
|
|
||||||
if (!ticketId) {
|
|
||||||
toast.error("工单不存在")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await addTicketRelation({
|
|
||||||
ticketId,
|
|
||||||
relationType: values.relationType,
|
|
||||||
relatedTicketId: values.relatedTicketId,
|
|
||||||
})
|
|
||||||
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.relationType}>
|
|
||||||
<FieldLabel>关联类型</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<OptionCombobox
|
|
||||||
value={watch("relationType")}
|
|
||||||
options={relationOptions}
|
|
||||||
placeholder="请选择关联类型"
|
|
||||||
onChange={(value) => setValue("relationType", value, { shouldValidate: true })}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.relationType]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field data-invalid={!!errors.relatedTicketId}>
|
|
||||||
<FieldLabel>搜索并选择工单</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="relative">
|
|
||||||
<SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
className="pl-9"
|
|
||||||
value={keyword}
|
|
||||||
placeholder="输入工单号或标题，至少 2 个字"
|
|
||||||
onChange={(event) => {
|
|
||||||
setKeyword(event.target.value)
|
|
||||||
setValue("relatedTicketId", 0, { shouldValidate: true })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="max-h-64 overflow-y-auto rounded-lg border">
|
|
||||||
{searching ? (
|
|
||||||
<div className="p-3 text-sm text-muted-foreground">搜索中...</div>
|
|
||||||
) : searchResults.length > 0 ? (
|
|
||||||
searchResults.map((item) => {
|
|
||||||
const active = item.id === selectedTicketId
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
type="button"
|
|
||||||
className={cn(
|
|
||||||
"flex w-full flex-col items-start gap-1 border-b px-3 py-3 text-left last:border-b-0",
|
|
||||||
active ? "bg-accent text-accent-foreground" : "hover:bg-muted/40",
|
|
||||||
)}
|
|
||||||
onClick={() => setValue("relatedTicketId", item.id, { shouldValidate: true })}
|
|
||||||
>
|
|
||||||
<div className="text-xs text-muted-foreground">{item.ticketNo}</div>
|
|
||||||
<div className="line-clamp-1 text-sm font-medium">{item.title}</div>
|
|
||||||
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
||||||
<span>状态：{item.status}</span>
|
|
||||||
<span>处理人：{item.currentAssigneeName || "未指派"}</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<div className="p-3 text-sm text-muted-foreground">
|
|
||||||
{keyword.trim().length < 2 ? "输入至少 2 个字开始搜索" : "未找到匹配工单"}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{selectedTicket ? (
|
|
||||||
<div className="rounded-lg border bg-muted/20 p-3 text-sm">
|
|
||||||
已选中：{selectedTicket.ticketNo} / {selectedTicket.title}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<FieldError errors={[errors.relatedTicketId]} />
|
|
||||||
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,244 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useEffect, useMemo, useState } from "react"
|
|
||||||
import { MessageSquarePlusIcon } from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
import { OptionCombobox } from "@/components/option-combobox"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogFooter,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog"
|
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
|
||||||
import { fetchAgentProfilesAll, type AdminAgentProfile } from "@/lib/api/admin"
|
|
||||||
import { addTicketInternalNote, replyTicket } from "@/lib/api/ticket"
|
|
||||||
|
|
||||||
type TicketReplyDialogProps = {
|
|
||||||
open: boolean
|
|
||||||
ticketId: number | null
|
|
||||||
onOpenChange: (open: boolean) => void
|
|
||||||
onSuccess?: () => Promise<void> | void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TicketReplyDialog({
|
|
||||||
open,
|
|
||||||
ticketId,
|
|
||||||
onOpenChange,
|
|
||||||
onSuccess,
|
|
||||||
}: TicketReplyDialogProps) {
|
|
||||||
const [replyMode, setReplyMode] = useState<"public" | "internal">("public")
|
|
||||||
const [replyContent, setReplyContent] = useState("")
|
|
||||||
const [mentionUserId, setMentionUserId] = useState("")
|
|
||||||
const [mentionedUsers, setMentionedUsers] = useState<AdminAgentProfile[]>([])
|
|
||||||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
|
||||||
const [loadingAgents, setLoadingAgents] = useState(false)
|
|
||||||
const [submitting, setSubmitting] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setReplyMode("public")
|
|
||||||
setReplyContent("")
|
|
||||||
setMentionUserId("")
|
|
||||||
setMentionedUsers([])
|
|
||||||
}, [open])
|
|
||||||
|
|
||||||
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])
|
|
||||||
|
|
||||||
const mentionOptions = useMemo(
|
|
||||||
() =>
|
|
||||||
agents.map((agent) => ({
|
|
||||||
value: String(agent.userId),
|
|
||||||
label:
|
|
||||||
agent.displayName ||
|
|
||||||
agent.nickname ||
|
|
||||||
agent.username ||
|
|
||||||
`客服 #${agent.userId}`,
|
|
||||||
})),
|
|
||||||
[agents],
|
|
||||||
)
|
|
||||||
|
|
||||||
function handleAddMentionUser() {
|
|
||||||
const userId = Number(mentionUserId)
|
|
||||||
if (!userId) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const user = agents.find((item) => item.userId === userId)
|
|
||||||
if (!user) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setMentionedUsers((current) => {
|
|
||||||
if (current.some((item) => item.userId === user.userId)) {
|
|
||||||
return current
|
|
||||||
}
|
|
||||||
return [...current, user]
|
|
||||||
})
|
|
||||||
setMentionUserId("")
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit() {
|
|
||||||
if (!ticketId) {
|
|
||||||
toast.error("工单不存在")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!replyContent.trim()) {
|
|
||||||
toast.error(replyMode === "public" ? "回复内容不能为空" : "备注内容不能为空")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setSubmitting(true)
|
|
||||||
try {
|
|
||||||
if (replyMode === "public") {
|
|
||||||
await replyTicket({
|
|
||||||
ticketId,
|
|
||||||
contentType: "text",
|
|
||||||
content: replyContent.trim(),
|
|
||||||
})
|
|
||||||
toast.success("已回复客户")
|
|
||||||
} else {
|
|
||||||
const payload =
|
|
||||||
mentionedUsers.length > 0
|
|
||||||
? JSON.stringify({
|
|
||||||
mentionUserIds: mentionedUsers.map((item) => item.userId),
|
|
||||||
})
|
|
||||||
: undefined
|
|
||||||
await addTicketInternalNote({
|
|
||||||
ticketId,
|
|
||||||
contentType: "text",
|
|
||||||
content: replyContent.trim(),
|
|
||||||
payload,
|
|
||||||
})
|
|
||||||
toast.success("已添加内部备注")
|
|
||||||
}
|
|
||||||
|
|
||||||
onOpenChange(false)
|
|
||||||
await onSuccess?.()
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "提交失败")
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-2xl gap-0 p-0 sm:max-w-2xl">
|
|
||||||
<DialogHeader className="px-6 pt-6">
|
|
||||||
<DialogTitle>回复与备注</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="space-y-4 p-6">
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant={replyMode === "public" ? "default" : "outline"}
|
|
||||||
onClick={() => setReplyMode("public")}
|
|
||||||
disabled={submitting}
|
|
||||||
>
|
|
||||||
回复客户
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={replyMode === "internal" ? "default" : "outline"}
|
|
||||||
onClick={() => setReplyMode("internal")}
|
|
||||||
disabled={submitting}
|
|
||||||
>
|
|
||||||
内部备注
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Textarea
|
|
||||||
rows={8}
|
|
||||||
value={replyContent}
|
|
||||||
placeholder={replyMode === "public" ? "输入给客户的回复内容" : "输入内部备注"}
|
|
||||||
disabled={submitting}
|
|
||||||
onChange={(event) => setReplyContent(event.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{replyMode === "internal" ? (
|
|
||||||
<div className="space-y-3 rounded-lg border border-border/60 bg-muted/20 p-4">
|
|
||||||
<div className="text-sm font-medium">@提及协作人</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="flex-1">
|
|
||||||
<OptionCombobox
|
|
||||||
value={mentionUserId}
|
|
||||||
options={mentionOptions}
|
|
||||||
placeholder={loadingAgents ? "加载中..." : "选择要提及的客服"}
|
|
||||||
searchPlaceholder="搜索客服"
|
|
||||||
emptyText="暂无可选客服"
|
|
||||||
disabled={submitting || loadingAgents}
|
|
||||||
onChange={setMentionUserId}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
disabled={submitting || loadingAgents}
|
|
||||||
onClick={handleAddMentionUser}
|
|
||||||
>
|
|
||||||
添加
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{mentionedUsers.length ? (
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{mentionedUsers.map((user) => (
|
|
||||||
<button
|
|
||||||
key={user.userId}
|
|
||||||
type="button"
|
|
||||||
className="rounded-full border px-3 py-1 text-xs"
|
|
||||||
onClick={() =>
|
|
||||||
setMentionedUsers((current) =>
|
|
||||||
current.filter((item) => item.userId !== user.userId),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
@
|
|
||||||
{user.displayName ||
|
|
||||||
user.nickname ||
|
|
||||||
user.username ||
|
|
||||||
`客服#${user.userId}`}{" "}
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-xs text-muted-foreground">未添加提及对象</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
disabled={submitting}
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
>
|
|
||||||
取消
|
|
||||||
</Button>
|
|
||||||
<Button type="button" disabled={submitting} onClick={() => void handleSubmit()}>
|
|
||||||
<MessageSquarePlusIcon className="size-4" />
|
|
||||||
{submitting ? "提交中..." : replyMode === "public" ? "发送回复" : "保存备注"}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
|
||||||
import type { TicketItem } from "@/lib/api/ticket"
|
|
||||||
|
|
||||||
function isClosedStatus(status: string) {
|
|
||||||
return status === "resolved" || status === "closed" || status === "cancelled"
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TicketSLABadge({ ticket }: { ticket: TicketItem }) {
|
|
||||||
if (isClosedStatus(ticket.status)) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-border bg-muted text-muted-foreground">
|
|
||||||
已结束
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (!ticket.resolveDeadlineAt) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-border bg-muted text-muted-foreground">
|
|
||||||
未设置
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const deadline = new Date(ticket.resolveDeadlineAt.replace(" ", "T"))
|
|
||||||
if (Number.isNaN(deadline.getTime())) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-border bg-muted text-muted-foreground">
|
|
||||||
未设置
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const remainingMinutes = Math.floor((deadline.getTime() - Date.now()) / 60000)
|
|
||||||
if (remainingMinutes < 0) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-red-500/20 bg-red-500/10 text-red-700">
|
|
||||||
已超时
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (remainingMinutes <= 60) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-red-500/20 bg-red-500/10 text-red-700">
|
|
||||||
1 小时内
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (remainingMinutes <= 240) {
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-amber-500/20 bg-amber-500/10 text-amber-700">
|
|
||||||
今日风险
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Badge variant="outline" className="border-emerald-500/20 bg-emerald-500/10 text-emerald-700">
|
|
||||||
正常
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,35 +1,24 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import type { TicketStatus } from "@/lib/api/ticket"
|
||||||
|
|
||||||
const statusLabelMap: Record<string, string> = {
|
const statusMap = {
|
||||||
new: "新建",
|
pending: { label: "待处理", className: "border-amber-200 bg-amber-50 text-amber-700" },
|
||||||
open: "处理中",
|
in_progress: { label: "处理中", className: "border-blue-200 bg-blue-50 text-blue-700" },
|
||||||
pending_customer: "待客户反馈",
|
done: { label: "已处理", className: "border-emerald-200 bg-emerald-50 text-emerald-700" },
|
||||||
pending_internal: "待内部处理",
|
} as const
|
||||||
resolved: "已解决",
|
|
||||||
closed: "已关闭",
|
|
||||||
cancelled: "已取消",
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusClassNameMap: Record<string, string> = {
|
|
||||||
new: "bg-sky-500/10 text-sky-700 border-sky-500/20",
|
|
||||||
open: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20",
|
|
||||||
pending_customer: "bg-amber-500/10 text-amber-700 border-amber-500/20",
|
|
||||||
pending_internal: "bg-orange-500/10 text-orange-700 border-orange-500/20",
|
|
||||||
resolved: "bg-lime-500/10 text-lime-700 border-lime-500/20",
|
|
||||||
closed: "bg-muted text-muted-foreground border-border",
|
|
||||||
cancelled: "bg-rose-500/10 text-rose-700 border-rose-500/20",
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ticketStatusLabel(status: string) {
|
export function ticketStatusLabel(status: string) {
|
||||||
return statusLabelMap[status] ?? status
|
return statusMap[status as TicketStatus]?.label ?? status
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TicketStatusBadge({ status }: { status: string }) {
|
export function TicketStatusBadge({ status }: { status: string }) {
|
||||||
|
const option = statusMap[status as TicketStatus]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Badge variant="outline" className={statusClassNameMap[status] ?? statusClassNameMap.closed}>
|
<Badge variant="outline" className={option?.className ?? "border-border bg-muted text-muted-foreground"}>
|
||||||
{ticketStatusLabel(status)}
|
{option?.label ?? status}
|
||||||
</Badge>
|
</Badge>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,7 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import Link from "next/link"
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
import { Settings2Icon } from "lucide-react"
|
import { Controller, type Resolver, useForm } from "react-hook-form"
|
||||||
import { Controller, Resolver, useForm } from "react-hook-form"
|
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
import { z } from "zod/v4"
|
import { z } from "zod/v4"
|
||||||
|
|
||||||
@@ -18,20 +15,16 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog"
|
} from "@/components/ui/dialog"
|
||||||
import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
|
import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import { changeTicketStatus, type TicketStatus } from "@/lib/api/ticket"
|
||||||
import {
|
|
||||||
fetchTicketResolutionCodesAll,
|
const ticketStatuses = [
|
||||||
type TicketResolutionCode,
|
{ value: "pending", label: "待处理" },
|
||||||
} from "@/lib/api/ticket-config"
|
{ value: "in_progress", label: "处理中" },
|
||||||
import { batchChangeTicketStatus, changeTicketStatus } from "@/lib/api/ticket"
|
{ value: "done", label: "已处理" },
|
||||||
|
] satisfies Array<{ value: TicketStatus; label: string }>
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
status: z.string().trim().min(1, "请选择状态"),
|
status: z.enum(["pending", "in_progress", "done"], { message: "请选择状态" }),
|
||||||
pendingReason: z.string().trim(),
|
|
||||||
closeReason: z.string().trim(),
|
|
||||||
resolutionCode: z.string().trim(),
|
|
||||||
resolutionSummary: z.string().trim(),
|
|
||||||
reason: z.string().trim(),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
type FormValues = z.infer<typeof schema>
|
type FormValues = z.infer<typeof schema>
|
||||||
@@ -66,56 +59,23 @@ export function TicketStatusDialog({
|
|||||||
>({
|
>({
|
||||||
resolver,
|
resolver,
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
status: "",
|
status: isTicketStatus(currentStatus) ? currentStatus : "pending",
|
||||||
pendingReason: "",
|
|
||||||
closeReason: "",
|
|
||||||
resolutionCode: "",
|
|
||||||
resolutionSummary: "",
|
|
||||||
reason: "",
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const {
|
const {
|
||||||
control,
|
control,
|
||||||
watch,
|
|
||||||
register,
|
|
||||||
reset,
|
reset,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors, isSubmitting },
|
formState: { errors, isSubmitting },
|
||||||
} = form
|
} = form
|
||||||
const [resolutionCodes, setResolutionCodes] = useState<TicketResolutionCode[]>([])
|
|
||||||
|
|
||||||
const targetStatus = watch("status")
|
function handleOpenChange(nextOpen: boolean) {
|
||||||
|
if (nextOpen) {
|
||||||
useEffect(() => {
|
reset({ status: isTicketStatus(currentStatus) ? currentStatus : "pending" })
|
||||||
reset({
|
|
||||||
status: currentStatus || "",
|
|
||||||
pendingReason: "",
|
|
||||||
closeReason: "",
|
|
||||||
resolutionCode: "",
|
|
||||||
resolutionSummary: "",
|
|
||||||
reason: "",
|
|
||||||
})
|
|
||||||
}, [currentStatus, reset, ticketId])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
void (async () => {
|
onOpenChange(nextOpen)
|
||||||
try {
|
}
|
||||||
const data = await fetchTicketResolutionCodesAll()
|
|
||||||
setResolutionCodes(Array.isArray(data) ? data : [])
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(error instanceof Error ? error.message : "加载解决码失败")
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}, [open])
|
|
||||||
|
|
||||||
const resolutionCodeOptions = resolutionCodes.map((item) => ({
|
|
||||||
value: item.code,
|
|
||||||
label: item.name,
|
|
||||||
}))
|
|
||||||
|
|
||||||
async function onFormSubmit(values: FormValues) {
|
async function onFormSubmit(values: FormValues) {
|
||||||
const validTicketIds = (ticketIds ?? []).filter((item) => item > 0)
|
const validTicketIds = (ticketIds ?? []).filter((item) => item > 0)
|
||||||
@@ -125,25 +85,14 @@ export function TicketStatusDialog({
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
if (validTicketIds.length > 0) {
|
if (validTicketIds.length > 0) {
|
||||||
await batchChangeTicketStatus({
|
await Promise.all(
|
||||||
ticketIds: validTicketIds,
|
validTicketIds.map((id) => changeTicketStatus({ ticketId: id, status: values.status })),
|
||||||
status: values.status,
|
)
|
||||||
pendingReason: values.pendingReason || undefined,
|
|
||||||
closeReason: values.status === "closed" ? values.closeReason || undefined : undefined,
|
|
||||||
resolutionCode: values.resolutionCode || undefined,
|
|
||||||
resolutionSummary: values.resolutionSummary || undefined,
|
|
||||||
reason: values.reason || undefined,
|
|
||||||
})
|
|
||||||
toast.success(`已批量更新 ${validTicketIds.length} 张工单`)
|
toast.success(`已批量更新 ${validTicketIds.length} 张工单`)
|
||||||
} else {
|
} else {
|
||||||
await changeTicketStatus({
|
await changeTicketStatus({
|
||||||
ticketId: ticketId!,
|
ticketId: ticketId!,
|
||||||
status: values.status,
|
status: values.status,
|
||||||
pendingReason: values.pendingReason || undefined,
|
|
||||||
closeReason: values.status === "closed" ? values.closeReason || undefined : undefined,
|
|
||||||
resolutionCode: values.resolutionCode || undefined,
|
|
||||||
resolutionSummary: values.resolutionSummary || undefined,
|
|
||||||
reason: values.reason || undefined,
|
|
||||||
})
|
})
|
||||||
toast.success("状态已更新")
|
toast.success("状态已更新")
|
||||||
}
|
}
|
||||||
@@ -155,7 +104,7 @@ export function TicketStatusDialog({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
||||||
<DialogHeader className="px-6 pt-6">
|
<DialogHeader className="px-6 pt-6">
|
||||||
<DialogTitle>{ticketIds?.length ? `批量变更状态（${ticketIds.length}）` : "变更工单状态"}</DialogTitle>
|
<DialogTitle>{ticketIds?.length ? `批量变更状态（${ticketIds.length}）` : "变更工单状态"}</DialogTitle>
|
||||||
@@ -173,96 +122,13 @@ export function TicketStatusDialog({
|
|||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
placeholder="请选择状态"
|
placeholder="请选择状态"
|
||||||
options={[
|
options={ticketStatuses}
|
||||||
{ value: "new", label: "新建" },
|
|
||||||
{ value: "open", label: "处理中" },
|
|
||||||
{ value: "pending_customer", label: "待客户反馈" },
|
|
||||||
{ value: "pending_internal", label: "待内部处理" },
|
|
||||||
{ value: "resolved", label: "已解决" },
|
|
||||||
{ value: "closed", label: "已关闭" },
|
|
||||||
{ value: "cancelled", label: "已取消" },
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<FieldError errors={[errors.status]} />
|
<FieldError errors={[errors.status]} />
|
||||||
</FieldContent>
|
</FieldContent>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
{(targetStatus === "pending_customer" ||
|
|
||||||
targetStatus === "pending_internal") && (
|
|
||||||
<Field data-invalid={!!errors.pendingReason}>
|
|
||||||
<FieldLabel>挂起原因</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea rows={3} placeholder="请输入待处理原因" {...register("pendingReason")} />
|
|
||||||
<FieldError errors={[errors.pendingReason]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{targetStatus === "resolved" && (
|
|
||||||
<>
|
|
||||||
<Field>
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<FieldLabel>解决编码</FieldLabel>
|
|
||||||
</div>
|
|
||||||
<FieldContent>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="resolutionCode"
|
|
||||||
render={({ field }) => (
|
|
||||||
<OptionCombobox
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
placeholder="请选择解决编码"
|
|
||||||
options={resolutionCodeOptions}
|
|
||||||
emptyText="暂无可选解决码"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{resolutionCodeOptions.length === 0 ? (
|
|
||||||
<div className="mt-2 rounded-lg border border-amber-200 bg-amber-50/70 p-3 text-xs text-amber-900">
|
|
||||||
当前没有可用解决码，解决结果无法标准化统计。
|
|
||||||
<Link
|
|
||||||
href="/dashboard/ticket-resolution-codes"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="ml-1 font-medium underline underline-offset-4"
|
|
||||||
>
|
|
||||||
前往配置解决码
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>解决说明</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea rows={3} placeholder="请输入解决说明" {...register("resolutionSummary")} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{targetStatus === "closed" && (
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>关闭原因</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea rows={3} placeholder="请输入关闭原因" {...register("closeReason")} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>操作说明</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Textarea
|
|
||||||
rows={3}
|
|
||||||
placeholder={targetStatus === "closed" ? "可补充本次批量关闭说明" : "填写本次状态变更说明"}
|
|
||||||
{...register("reason")}
|
|
||||||
/>
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
||||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
@@ -277,3 +143,7 @@ export function TicketStatusDialog({
|
|||||||
</Dialog>
|
</Dialog>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isTicketStatus(status: string | undefined): status is TicketStatus {
|
||||||
|
return status === "pending" || status === "in_progress" || status === "done"
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
+186
-1158
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,6 @@ import { Button } from "@/components/ui/button"
|
|||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import { linkConversationToCustomer } from "@/lib/api/agent"
|
import { linkConversationToCustomer } from "@/lib/api/agent"
|
||||||
import { fetchCustomers, saveCustomerProfile, type AdminCustomer } from "@/lib/api/customer"
|
import { fetchCustomers, saveCustomerProfile, type AdminCustomer } from "@/lib/api/customer"
|
||||||
import { linkTicketToCustomer } from "@/lib/api/ticket"
|
|
||||||
|
|
||||||
export type CustomerLinkOrCreateDialogProps = {
|
export type CustomerLinkOrCreateDialogProps = {
|
||||||
open: boolean
|
open: boolean
|
||||||
@@ -88,10 +87,8 @@ export function CustomerLinkOrCreateDialog({
|
|||||||
customerId: customer.id,
|
customerId: customer.id,
|
||||||
})
|
})
|
||||||
} else if (ticketId) {
|
} else if (ticketId) {
|
||||||
await linkTicketToCustomer({
|
toast.error("轻量工单暂不支持在此关联客户")
|
||||||
ticketId,
|
return
|
||||||
customerId: customer.id,
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
toast.success("已关联客户")
|
toast.success("已关联客户")
|
||||||
onOpenChange(false)
|
onOpenChange(false)
|
||||||
@@ -114,11 +111,7 @@ export function CustomerLinkOrCreateDialog({
|
|||||||
})
|
})
|
||||||
toast.success("已创建客户并关联当前会话")
|
toast.success("已创建客户并关联当前会话")
|
||||||
} else if (ticketId) {
|
} else if (ticketId) {
|
||||||
await linkTicketToCustomer({
|
toast.success("已创建客户")
|
||||||
ticketId,
|
|
||||||
customerId: created.id,
|
|
||||||
})
|
|
||||||
toast.success("已创建客户并关联当前工单")
|
|
||||||
} else {
|
} else {
|
||||||
toast.success("已创建客户")
|
toast.success("已创建客户")
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,139 +0,0 @@
|
|||||||
import { request } from "@/lib/api/client"
|
|
||||||
|
|
||||||
export type Paging = {
|
|
||||||
page: number
|
|
||||||
limit: number
|
|
||||||
total: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type PageResult<T> = {
|
|
||||||
results: T[]
|
|
||||||
page: Paging
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketResolutionCode = {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
code: string
|
|
||||||
sortNo: number
|
|
||||||
status: number
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketPriorityConfig = {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
sortNo: number
|
|
||||||
firstResponseMinutes: number
|
|
||||||
resolutionMinutes: number
|
|
||||||
status: number
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CreateTicketResolutionCodePayload = {
|
|
||||||
name: string
|
|
||||||
code: string
|
|
||||||
sortNo: number
|
|
||||||
status: number
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type UpdateTicketResolutionCodePayload = CreateTicketResolutionCodePayload & {
|
|
||||||
id: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CreateTicketPriorityConfigPayload = {
|
|
||||||
name: string
|
|
||||||
firstResponseMinutes: number
|
|
||||||
resolutionMinutes: number
|
|
||||||
status: number
|
|
||||||
remark: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type UpdateTicketPriorityConfigPayload = CreateTicketPriorityConfigPayload & {
|
|
||||||
id: number
|
|
||||||
}
|
|
||||||
|
|
||||||
function toQueryString(query?: Record<string, string | number | undefined>) {
|
|
||||||
if (!query) {
|
|
||||||
return ""
|
|
||||||
}
|
|
||||||
const params = new URLSearchParams()
|
|
||||||
Object.entries(query).forEach(([key, value]) => {
|
|
||||||
if (value === undefined || value === "") {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
params.set(key, String(value))
|
|
||||||
})
|
|
||||||
const output = params.toString()
|
|
||||||
return output ? `?${output}` : ""
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketResolutionCodes(query?: Record<string, string | number | undefined>) {
|
|
||||||
return request<PageResult<TicketResolutionCode>>(
|
|
||||||
`/api/dashboard/ticket-resolution-code/list${toQueryString(query)}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketResolutionCodesAll() {
|
|
||||||
return request<TicketResolutionCode[]>("/api/dashboard/ticket-resolution-code/list_all")
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTicketResolutionCode(payload: CreateTicketResolutionCodePayload) {
|
|
||||||
return request<TicketResolutionCode>("/api/dashboard/ticket-resolution-code/create", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateTicketResolutionCode(payload: UpdateTicketResolutionCodePayload) {
|
|
||||||
return request<void>("/api/dashboard/ticket-resolution-code/update", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteTicketResolutionCode(id: number) {
|
|
||||||
return request<void>("/api/dashboard/ticket-resolution-code/delete", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ id }),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketPriorityConfigs(query?: Record<string, string | number | undefined>) {
|
|
||||||
return request<TicketPriorityConfig[]>(
|
|
||||||
`/api/dashboard/ticket-priority-config/list${toQueryString(query)}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketPriorityConfigsAll() {
|
|
||||||
return request<TicketPriorityConfig[]>("/api/dashboard/ticket-priority-config/list_all")
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTicketPriorityConfig(payload: CreateTicketPriorityConfigPayload) {
|
|
||||||
return request<TicketPriorityConfig>("/api/dashboard/ticket-priority-config/create", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateTicketPriorityConfig(payload: UpdateTicketPriorityConfigPayload) {
|
|
||||||
return request<void>("/api/dashboard/ticket-priority-config/update", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateTicketPriorityConfigSort(ids: number[]) {
|
|
||||||
return request<void>("/api/dashboard/ticket-priority-config/update_sort", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(ids),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteTicketPriorityConfig(id: number) {
|
|
||||||
return request<void>("/api/dashboard/ticket-priority-config/delete", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ id }),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
+49
-287
@@ -12,6 +12,9 @@ export type PageResult<T> = {
|
|||||||
page: Paging
|
page: Paging
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type TicketStatus = "pending" | "in_progress" | "done"
|
||||||
|
export type TicketSource = "manual" | "conversation"
|
||||||
|
|
||||||
export type TicketCustomer = {
|
export type TicketCustomer = {
|
||||||
id: number
|
id: number
|
||||||
name: string
|
name: string
|
||||||
@@ -28,41 +31,12 @@ export type TicketCustomer = {
|
|||||||
primaryEmail?: string
|
primaryEmail?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TicketSLA = {
|
export type TicketProgress = {
|
||||||
slaType: string
|
|
||||||
targetMinutes: number
|
|
||||||
status: string
|
|
||||||
startedAt?: string
|
|
||||||
pausedAt?: string
|
|
||||||
stoppedAt?: string
|
|
||||||
breachedAt?: string
|
|
||||||
elapsedMin: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketComment = {
|
|
||||||
id: number
|
id: number
|
||||||
ticketId: number
|
ticketId: number
|
||||||
commentType: string
|
content: string
|
||||||
authorType: string
|
|
||||||
authorId: number
|
authorId: number
|
||||||
authorName?: string
|
authorName?: string
|
||||||
contentType: string
|
|
||||||
content: string
|
|
||||||
payload?: string
|
|
||||||
createdAt?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketEvent = {
|
|
||||||
id: number
|
|
||||||
ticketId: number
|
|
||||||
eventType: string
|
|
||||||
operatorType: string
|
|
||||||
operatorId: number
|
|
||||||
operatorName?: string
|
|
||||||
oldValue?: string
|
|
||||||
newValue?: string
|
|
||||||
content?: string
|
|
||||||
payload?: string
|
|
||||||
createdAt?: string
|
createdAt?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -71,100 +45,35 @@ export type TicketItem = {
|
|||||||
ticketNo: string
|
ticketNo: string
|
||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
source: string
|
source: TicketSource
|
||||||
channel: string
|
channel: string
|
||||||
customerId: number
|
customerId: number
|
||||||
conversationId: number
|
conversationId: number
|
||||||
tags?: Tag[]
|
tags?: Tag[]
|
||||||
type: string
|
status: TicketStatus
|
||||||
priority: number
|
|
||||||
priorityName?: string
|
|
||||||
severity: number
|
|
||||||
status: string
|
|
||||||
currentTeamId: number
|
|
||||||
currentTeamName?: string
|
|
||||||
currentAssigneeId: number
|
currentAssigneeId: number
|
||||||
currentAssigneeName?: string
|
currentAssigneeName?: string
|
||||||
watchedByMe: boolean
|
createdBy: number
|
||||||
pendingReason?: string
|
createdByName?: string
|
||||||
closeReason?: string
|
handledAt?: string
|
||||||
resolutionCode?: string
|
|
||||||
resolutionCodeName?: string
|
|
||||||
resolutionSummary?: string
|
|
||||||
firstResponseAt?: string
|
|
||||||
resolvedAt?: string
|
|
||||||
closedAt?: string
|
|
||||||
dueAt?: string
|
|
||||||
nextReplyDeadlineAt?: string
|
|
||||||
resolveDeadlineAt?: string
|
|
||||||
reopenedCount: number
|
|
||||||
createdAt?: string
|
createdAt?: string
|
||||||
updatedAt?: string
|
updatedAt?: string
|
||||||
customer?: TicketCustomer
|
customer?: TicketCustomer
|
||||||
sla?: TicketSLA[]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TicketDetail = {
|
export type TicketDetail = {
|
||||||
ticket: TicketItem
|
ticket: TicketItem
|
||||||
watchers?: Array<{
|
progresses?: TicketProgress[]
|
||||||
id: number
|
|
||||||
userId: number
|
|
||||||
userName?: string
|
|
||||||
}>
|
|
||||||
collaborators?: TicketCollaborator[]
|
|
||||||
comments?: TicketComment[]
|
|
||||||
events?: TicketEvent[]
|
|
||||||
relatedTickets?: TicketRelation[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketCollaborator = {
|
|
||||||
id: number
|
|
||||||
userId: number
|
|
||||||
userName?: string
|
|
||||||
teamName?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketRelation = {
|
|
||||||
id: number
|
|
||||||
ticketId: number
|
|
||||||
relatedTicketId: number
|
|
||||||
relationType: string
|
|
||||||
relatedTicketNo?: string
|
|
||||||
relatedTicketTitle?: string
|
|
||||||
relatedTicketStatus?: string
|
|
||||||
currentTeamName?: string
|
|
||||||
currentAssigneeName?: string
|
|
||||||
updatedAt?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TicketSummary = {
|
export type TicketSummary = {
|
||||||
all: number
|
all: number
|
||||||
|
pending: number
|
||||||
|
inProgress: number
|
||||||
|
done: number
|
||||||
|
unassigned: number
|
||||||
mine: number
|
mine: number
|
||||||
watching: number
|
stale: number
|
||||||
collaboration: number
|
|
||||||
participating: number
|
|
||||||
mentioned: number
|
|
||||||
unassigned: number
|
|
||||||
pendingCustomer: number
|
|
||||||
pendingInternal: number
|
|
||||||
overdue: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketRiskReason = {
|
|
||||||
code: string
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
count: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketRiskOverview = {
|
|
||||||
overdue: number
|
|
||||||
highRisk: number
|
|
||||||
unassigned: number
|
|
||||||
pendingInternal: number
|
|
||||||
pendingCustomer: number
|
|
||||||
riskWindowMins: number
|
|
||||||
reasons?: TicketRiskReason[]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TicketSavedView = {
|
export type TicketSavedView = {
|
||||||
@@ -178,47 +87,26 @@ export type TicketListQuery = {
|
|||||||
page?: number
|
page?: number
|
||||||
limit?: number
|
limit?: number
|
||||||
keyword?: string
|
keyword?: string
|
||||||
status?: string
|
status?: TicketStatus
|
||||||
priority?: number
|
|
||||||
severity?: number
|
|
||||||
tagId?: number
|
tagId?: number
|
||||||
currentTeamId?: number
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
customerId?: number
|
customerId?: number
|
||||||
conversationId?: number
|
conversationId?: number
|
||||||
source?: string
|
source?: TicketSource
|
||||||
watching?: number
|
channel?: string
|
||||||
collaboration?: number
|
mine?: number | boolean
|
||||||
collaborating?: number
|
unassigned?: number | boolean
|
||||||
mentioned?: number
|
|
||||||
mine?: number
|
|
||||||
unassigned?: number
|
|
||||||
overdue?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TicketRiskListQuery = {
|
|
||||||
riskType: "overdue" | "high_risk" | "unassigned" | "pending_internal" | "pending_customer"
|
|
||||||
currentTeamId?: number
|
|
||||||
riskWindowMins?: number
|
|
||||||
page?: number
|
|
||||||
limit?: number
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type CreateTicketPayload = {
|
export type CreateTicketPayload = {
|
||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
source?: string
|
source?: TicketSource
|
||||||
channel?: string
|
channel?: string
|
||||||
customerId?: number
|
customerId?: number
|
||||||
conversationId?: number
|
conversationId?: number
|
||||||
tagIds?: number[]
|
tagIds?: number[]
|
||||||
type?: string
|
|
||||||
priority: number
|
|
||||||
severity: number
|
|
||||||
currentTeamId?: number
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
dueAt?: string
|
|
||||||
customFields?: Record<string, unknown>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type CreateTicketFromConversationPayload = {
|
export type CreateTicketFromConversationPayload = {
|
||||||
@@ -226,12 +114,7 @@ export type CreateTicketFromConversationPayload = {
|
|||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
tagIds?: number[]
|
tagIds?: number[]
|
||||||
priority: number
|
|
||||||
severity: number
|
|
||||||
currentTeamId?: number
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
syncToConversation: boolean
|
|
||||||
customFields?: Record<string, unknown>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type UpdateTicketPayload = {
|
export type UpdateTicketPayload = {
|
||||||
@@ -239,16 +122,10 @@ export type UpdateTicketPayload = {
|
|||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
tagIds?: number[]
|
tagIds?: number[]
|
||||||
type?: string
|
|
||||||
priority: number
|
|
||||||
severity: number
|
|
||||||
currentTeamId?: number
|
|
||||||
currentAssigneeId?: number
|
currentAssigneeId?: number
|
||||||
dueAt?: string
|
|
||||||
customFields?: Record<string, unknown>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toQueryString(query?: Record<string, string | number | undefined>) {
|
function toQueryString(query?: Record<string, string | number | boolean | undefined>) {
|
||||||
if (!query) {
|
if (!query) {
|
||||||
return ""
|
return ""
|
||||||
}
|
}
|
||||||
@@ -268,47 +145,14 @@ export function fetchTickets(query?: TicketListQuery) {
|
|||||||
return request<PageResult<TicketItem>>(`/api/dashboard/ticket/list${toQueryString(query)}`)
|
return request<PageResult<TicketItem>>(`/api/dashboard/ticket/list${toQueryString(query)}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function fetchTicketSummary(query?: { staleHours?: number }) {
|
||||||
|
return request<TicketSummary>(`/api/dashboard/ticket/summary${toQueryString(query)}`)
|
||||||
|
}
|
||||||
|
|
||||||
export function fetchTicketDetail(id: number) {
|
export function fetchTicketDetail(id: number) {
|
||||||
return request<TicketDetail>(`/api/dashboard/ticket/${id}`)
|
return request<TicketDetail>(`/api/dashboard/ticket/${id}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function fetchTicketSummary() {
|
|
||||||
return request<TicketSummary>("/api/dashboard/ticket/summary")
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketViews() {
|
|
||||||
return request<TicketSavedView[]>("/api/dashboard/ticket/view_list")
|
|
||||||
}
|
|
||||||
|
|
||||||
export function saveTicketView(payload: {
|
|
||||||
id?: number
|
|
||||||
name: string
|
|
||||||
filters?: Record<string, unknown>
|
|
||||||
}) {
|
|
||||||
return request<TicketSavedView>("/api/dashboard/ticket/save_view", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteTicketView(id: number) {
|
|
||||||
return request<void>("/api/dashboard/ticket/delete_view", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ id }),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketRiskOverview(query?: {
|
|
||||||
currentTeamId?: number
|
|
||||||
riskWindowMins?: number
|
|
||||||
}) {
|
|
||||||
return request<TicketRiskOverview>(`/api/dashboard/ticket/risk_overview${toQueryString(query)}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function fetchTicketRiskList(query: TicketRiskListQuery) {
|
|
||||||
return request<PageResult<TicketItem>>(`/api/dashboard/ticket/risk_list${toQueryString(query)}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTicket(payload: CreateTicketPayload) {
|
export function createTicket(payload: CreateTicketPayload) {
|
||||||
return request<TicketItem>("/api/dashboard/ticket/create", {
|
return request<TicketItem>("/api/dashboard/ticket/create", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
@@ -330,20 +174,9 @@ export function updateTicket(payload: UpdateTicketPayload) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function linkTicketToCustomer(payload: {
|
|
||||||
ticketId: number
|
|
||||||
customerId: number
|
|
||||||
}) {
|
|
||||||
return request<void>("/api/dashboard/ticket/link_customer", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function assignTicket(payload: {
|
export function assignTicket(payload: {
|
||||||
ticketId: number
|
ticketId: number
|
||||||
toUserId: number
|
toUserId: number
|
||||||
toTeamId?: number
|
|
||||||
reason?: string
|
reason?: string
|
||||||
}) {
|
}) {
|
||||||
return request<void>("/api/dashboard/ticket/assign", {
|
return request<void>("/api/dashboard/ticket/assign", {
|
||||||
@@ -355,7 +188,6 @@ export function assignTicket(payload: {
|
|||||||
export function batchAssignTickets(payload: {
|
export function batchAssignTickets(payload: {
|
||||||
ticketIds: number[]
|
ticketIds: number[]
|
||||||
toUserId: number
|
toUserId: number
|
||||||
toTeamId?: number
|
|
||||||
reason?: string
|
reason?: string
|
||||||
}) {
|
}) {
|
||||||
return request<void>("/api/dashboard/ticket/batch_assign", {
|
return request<void>("/api/dashboard/ticket/batch_assign", {
|
||||||
@@ -366,12 +198,7 @@ export function batchAssignTickets(payload: {
|
|||||||
|
|
||||||
export function changeTicketStatus(payload: {
|
export function changeTicketStatus(payload: {
|
||||||
ticketId: number
|
ticketId: number
|
||||||
status: string
|
status: TicketStatus
|
||||||
pendingReason?: string
|
|
||||||
closeReason?: string
|
|
||||||
resolutionCode?: string
|
|
||||||
resolutionSummary?: string
|
|
||||||
reason?: string
|
|
||||||
}) {
|
}) {
|
||||||
return request<void>("/api/dashboard/ticket/change_status", {
|
return request<void>("/api/dashboard/ticket/change_status", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
@@ -379,109 +206,44 @@ export function changeTicketStatus(payload: {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function batchChangeTicketStatus(payload: {
|
export function fetchTicketProgresses(query: {
|
||||||
ticketIds: number[]
|
ticketId: number
|
||||||
status: string
|
page?: number
|
||||||
pendingReason?: string
|
limit?: number
|
||||||
closeReason?: string
|
|
||||||
resolutionCode?: string
|
|
||||||
resolutionSummary?: string
|
|
||||||
reason?: string
|
|
||||||
}) {
|
}) {
|
||||||
return request<void>("/api/dashboard/ticket/batch_change_status", {
|
return request<PageResult<TicketProgress>>(
|
||||||
method: "POST",
|
`/api/dashboard/ticket/progress/list${toQueryString(query)}`,
|
||||||
body: JSON.stringify(payload),
|
)
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function replyTicket(payload: {
|
export function createTicketProgress(payload: {
|
||||||
ticketId: number
|
ticketId: number
|
||||||
contentType?: string
|
|
||||||
content: string
|
content: string
|
||||||
payload?: string
|
|
||||||
}) {
|
}) {
|
||||||
return request<TicketComment>("/api/dashboard/ticket/reply", {
|
return request<TicketProgress>("/api/dashboard/ticket/progress/create", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addTicketInternalNote(payload: {
|
export function fetchTicketViews() {
|
||||||
ticketId: number
|
return request<TicketSavedView[]>("/api/dashboard/ticket/view_list")
|
||||||
contentType?: string
|
}
|
||||||
content: string
|
|
||||||
payload?: string
|
export function saveTicketView(payload: {
|
||||||
|
id?: number
|
||||||
|
name: string
|
||||||
|
filters: Record<string, unknown>
|
||||||
}) {
|
}) {
|
||||||
return request<TicketComment>("/api/dashboard/ticket/internal_note", {
|
return request<TicketSavedView>("/api/dashboard/ticket/save_view", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function closeTicket(payload: { ticketId: number; closeReason: string }) {
|
export function deleteTicketView(id: number) {
|
||||||
return request<void>("/api/dashboard/ticket/close", {
|
return request<void>("/api/dashboard/ticket/delete_view", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify({ id }),
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function reopenTicket(payload: { ticketId: number; reason: string }) {
|
|
||||||
return request<void>("/api/dashboard/ticket/reopen", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function watchTicket(ticketId: number) {
|
|
||||||
return request<void>("/api/dashboard/ticket/watch", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ ticketId }),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unwatchTicket(ticketId: number) {
|
|
||||||
return request<void>("/api/dashboard/ticket/unwatch", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ ticketId }),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function batchWatchTickets(payload: { ticketIds: number[]; watched: boolean }) {
|
|
||||||
return request<void>("/api/dashboard/ticket/batch_watch", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addTicketRelation(payload: {
|
|
||||||
ticketId: number
|
|
||||||
relatedTicketId?: number
|
|
||||||
relatedTicketNo?: string
|
|
||||||
relationType: string
|
|
||||||
}) {
|
|
||||||
return request<void>("/api/dashboard/ticket/add_relation", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteTicketRelation(payload: { ticketId: number; relationId: number }) {
|
|
||||||
return request<void>("/api/dashboard/ticket/delete_relation", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addTicketCollaborator(payload: { ticketId: number; userId: number }) {
|
|
||||||
return request<void>("/api/dashboard/ticket/add_collaborator", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function deleteTicketCollaborator(payload: { ticketId: number; collaboratorId: number }) {
|
|
||||||
return request<void>("/api/dashboard/ticket/delete_collaborator", {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify(payload),
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,14 +4,12 @@ import {
|
|||||||
BrainCircuitIcon,
|
BrainCircuitIcon,
|
||||||
Building2Icon,
|
Building2Icon,
|
||||||
CalendarClockIcon,
|
CalendarClockIcon,
|
||||||
ChartColumnIncreasingIcon,
|
|
||||||
FileTextIcon,
|
FileTextIcon,
|
||||||
GlobeIcon,
|
GlobeIcon,
|
||||||
KeyRoundIcon,
|
KeyRoundIcon,
|
||||||
LayoutDashboardIcon,
|
LayoutDashboardIcon,
|
||||||
MessageSquareCodeIcon,
|
MessageSquareCodeIcon,
|
||||||
MessageSquareMoreIcon,
|
MessageSquareMoreIcon,
|
||||||
Settings2Icon,
|
|
||||||
ShieldCheckIcon,
|
ShieldCheckIcon,
|
||||||
TagsIcon,
|
TagsIcon,
|
||||||
UserCogIcon,
|
UserCogIcon,
|
||||||
@@ -119,12 +117,6 @@ export const dashboardNavSections: DashboardNavSectionConfig[] = [
|
|||||||
icon: <BotMessageSquareIcon />,
|
icon: <BotMessageSquareIcon />,
|
||||||
requiredPermission: "conversation.view",
|
requiredPermission: "conversation.view",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "SLA风险",
|
|
||||||
url: "/dashboard/ticket-risk",
|
|
||||||
icon: <ChartColumnIncreasingIcon />,
|
|
||||||
requiredPermission: "ticket.view",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "客户管理",
|
title: "客户管理",
|
||||||
url: "/dashboard/customers",
|
url: "/dashboard/customers",
|
||||||
@@ -154,18 +146,6 @@ export const dashboardNavSections: DashboardNavSectionConfig[] = [
|
|||||||
icon: <MessageSquareMoreIcon />,
|
icon: <MessageSquareMoreIcon />,
|
||||||
requiredPermission: "quickReply.view",
|
requiredPermission: "quickReply.view",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "工单优先级",
|
|
||||||
url: "/dashboard/ticket-priorities",
|
|
||||||
icon: <Settings2Icon />,
|
|
||||||
requiredPermission: "ticketPriorityConfig.view",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "工单解决码",
|
|
||||||
url: "/dashboard/ticket-resolution-codes",
|
|
||||||
icon: <KeyRoundIcon />,
|
|
||||||
requiredPermission: "ticketResolutionCode.view",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "客服档案",
|
title: "客服档案",
|
||||||
url: "/dashboard/agents",
|
url: "/dashboard/agents",
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
import { fetchTicketPriorityConfigsAll } from "@/lib/api/ticket-config"
|
|
||||||
|
|
||||||
export type TicketPriorityOption = {
|
|
||||||
value: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTicketPriorityOptions() {
|
|
||||||
const list = await fetchTicketPriorityConfigsAll()
|
|
||||||
return (Array.isArray(list) ? list : []).map((item) => ({
|
|
||||||
value: String(item.id),
|
|
||||||
label: item.name,
|
|
||||||
})) satisfies TicketPriorityOption[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTicketPriorityMap() {
|
|
||||||
const options = await getTicketPriorityOptions()
|
|
||||||
return Object.fromEntries(options.map((item) => [Number(item.value), item.label])) as Record<number, string>
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user