feat(ticket): rebuild lightweight ticket workspace
This commit is contained in:
mlogclub
@@ -62,7 +62,7 @@ export function TicketAssignDialog({
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
{open ? (
|
||||
<TicketAssignDialogBody
|
||||
key={ticketId ?? "ticket-assign"}
|
||||
key={ticketId ?? ticketIds?.join(",") ?? "ticket-assign"}
|
||||
ticketId={ticketId}
|
||||
ticketIds={ticketIds}
|
||||
currentAssigneeId={currentAssigneeId}
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { MessageSquareTextIcon, RefreshCcwIcon, SendIcon, UserRoundIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
changeTicketStatus,
|
||||
createTicketProgress,
|
||||
fetchTicketDetail,
|
||||
type TicketDetail,
|
||||
type TicketStatus,
|
||||
} from "@/lib/api/ticket"
|
||||
import { cn, formatDateTime } from "@/lib/utils"
|
||||
import { TicketAssignDialog } from "./ticket-assign-dialog"
|
||||
import { TicketStatusBadge } from "./ticket-status-badge"
|
||||
|
||||
type TicketDetailDialogProps = {
|
||||
ticketId: number | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onChanged: () => void
|
||||
}
|
||||
|
||||
const statusOptions: Array<{ value: TicketStatus; label: string }> = [
|
||||
{ value: "pending", label: "待处理" },
|
||||
{ value: "in_progress", label: "处理中" },
|
||||
{ value: "done", label: "已处理" },
|
||||
]
|
||||
|
||||
function sourceLabel(source: string) {
|
||||
switch (source) {
|
||||
case "manual":
|
||||
return "手动创建"
|
||||
case "conversation":
|
||||
return "会话生成"
|
||||
default:
|
||||
return source || "-"
|
||||
}
|
||||
}
|
||||
|
||||
function metadataValue(value?: string | number | null) {
|
||||
if (value === undefined || value === null || value === "") {
|
||||
return "-"
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
export function TicketDetailDialog({
|
||||
ticketId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onChanged,
|
||||
}: TicketDetailDialogProps) {
|
||||
const [detail, setDetail] = useState<TicketDetail | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [statusSaving, setStatusSaving] = useState<TicketStatus | null>(null)
|
||||
const [progressSaving, setProgressSaving] = useState(false)
|
||||
const [progressContent, setProgressContent] = useState("")
|
||||
const [assignOpen, setAssignOpen] = useState(false)
|
||||
|
||||
const loadDetail = useCallback(async () => {
|
||||
if (!open || !ticketId) {
|
||||
setDetail(null)
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await fetchTicketDetail(ticketId)
|
||||
setDetail(data)
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "加载工单详情失败")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [open, ticketId])
|
||||
|
||||
useEffect(() => {
|
||||
void loadDetail()
|
||||
}, [loadDetail])
|
||||
|
||||
async function handleStatusChange(status: TicketStatus) {
|
||||
if (!detail || detail.ticket.status === status) {
|
||||
return
|
||||
}
|
||||
setStatusSaving(status)
|
||||
try {
|
||||
await changeTicketStatus({ ticketId: detail.ticket.id, status })
|
||||
toast.success("工单状态已更新")
|
||||
await loadDetail()
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "更新工单状态失败")
|
||||
} finally {
|
||||
setStatusSaving(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateProgress() {
|
||||
if (!detail) {
|
||||
return
|
||||
}
|
||||
const content = progressContent.trim()
|
||||
if (!content) {
|
||||
toast.error("请填写处理进展")
|
||||
return
|
||||
}
|
||||
setProgressSaving(true)
|
||||
try {
|
||||
await createTicketProgress({
|
||||
ticketId: detail.ticket.id,
|
||||
content,
|
||||
})
|
||||
toast.success("处理进展已记录")
|
||||
setProgressContent("")
|
||||
await loadDetail()
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "记录处理进展失败")
|
||||
} finally {
|
||||
setProgressSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssigned() {
|
||||
await loadDetail()
|
||||
onChanged()
|
||||
}
|
||||
|
||||
const ticket = detail?.ticket
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[88vh] gap-0 p-0 sm:max-w-3xl">
|
||||
<DialogHeader className="border-b px-6 py-4">
|
||||
<DialogTitle className="flex min-w-0 items-center gap-2 text-base">
|
||||
<span className="truncate">{ticket?.title ?? "工单详情"}</span>
|
||||
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
|
||||
</DialogTitle>
|
||||
{ticket ? (
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{ticket.ticketNo}</span>
|
||||
<span>{sourceLabel(ticket.source)}</span>
|
||||
<span>创建人：{metadataValue(ticket.createdByName || ticket.createdBy)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="max-h-[calc(88vh-74px)]">
|
||||
{loading && !ticket ? (
|
||||
<div className="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground">
|
||||
<RefreshCcwIcon className="size-4 animate-spin" />
|
||||
加载中...
|
||||
</div>
|
||||
) : ticket ? (
|
||||
<div className="space-y-5 p-6">
|
||||
<section className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">描述</div>
|
||||
<div className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6">
|
||||
{ticket.description || "暂无描述"}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">状态</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{statusOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={ticket.status === option.value ? "default" : "outline"}
|
||||
disabled={!!statusSaving}
|
||||
onClick={() => void handleStatusChange(option.value)}
|
||||
>
|
||||
{statusSaving === option.value ? "更新中..." : option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">负责人</div>
|
||||
<div className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
|
||||
<div className="flex min-w-0 items-center gap-2 text-sm">
|
||||
<UserRoundIcon className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate">{ticket.currentAssigneeName || "未分配"}</span>
|
||||
</div>
|
||||
<Button type="button" size="sm" variant="outline" onClick={() => setAssignOpen(true)}>
|
||||
指派
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<div className="text-xs font-medium text-muted-foreground">标签</div>
|
||||
{ticket.tags && ticket.tags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ticket.tags.map((tag) => (
|
||||
<Badge key={tag.id} variant="outline">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">暂无标签</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
|
||||
<MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
|
||||
<MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
|
||||
<MetadataItem label="来源" value={sourceLabel(ticket.source)} />
|
||||
<MetadataItem label="渠道" value={ticket.channel} />
|
||||
<MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
|
||||
<MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
<section className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<MessageSquareTextIcon className="size-4 text-muted-foreground" />
|
||||
处理进展
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder="记录本次处理进展"
|
||||
value={progressContent}
|
||||
onChange={(event) => setProgressContent(event.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" size="sm" disabled={progressSaving} onClick={() => void handleCreateProgress()}>
|
||||
<SendIcon className="size-3.5" />
|
||||
{progressSaving ? "提交中..." : "添加进展"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{detail.progresses && detail.progresses.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{detail.progresses.map((progress, index) => (
|
||||
<div key={progress.id} className="flex gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="mt-1 size-2 rounded-full bg-primary" />
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 w-px flex-1 bg-border",
|
||||
index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pb-3">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{progress.authorName || `用户#${progress.authorId}`}</span>
|
||||
<span>{progress.createdAt ? formatDateTime(progress.createdAt) : "-"}</span>
|
||||
</div>
|
||||
<div className="mt-1 whitespace-pre-wrap text-sm leading-6">{progress.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
暂无处理进展
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-6 py-12 text-center text-sm text-muted-foreground">请选择工单</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<TicketAssignDialog
|
||||
open={assignOpen}
|
||||
ticketId={ticket?.id ?? null}
|
||||
currentAssigneeId={ticket?.currentAssigneeId}
|
||||
onOpenChange={setAssignOpen}
|
||||
onSuccess={handleAssigned}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function MetadataItem({ label, value }: { label: string; value?: string | number | null }) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs text-muted-foreground">{label}</div>
|
||||
<div className="mt-1 truncate">{metadataValue(value)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+344
-168
@@ -1,29 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { PlusIcon, RefreshCcwIcon } from "lucide-react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { RefreshCcwIcon, SearchXIcon } from "lucide-react"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { OptionCombobox } from "@/components/option-combobox"
|
||||
import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
createTicket,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import {
|
||||
fetchAgentProfilesAll,
|
||||
fetchTagsAll,
|
||||
type AdminAgentProfile,
|
||||
type TagTree,
|
||||
} from "@/lib/api/admin"
|
||||
import {
|
||||
fetchTicketSummary,
|
||||
fetchTickets,
|
||||
updateTicket,
|
||||
type CreateTicketPayload,
|
||||
type TicketItem,
|
||||
type TicketListQuery,
|
||||
type TicketStatus,
|
||||
type TicketSummary,
|
||||
type UpdateTicketPayload,
|
||||
} from "@/lib/api/ticket"
|
||||
import { formatDateTime } from "@/lib/utils"
|
||||
import { EditDialog } from "./_components/edit"
|
||||
import { cn, formatDateTime } from "@/lib/utils"
|
||||
import { TicketAssignDialog } from "./_components/ticket-assign-dialog"
|
||||
import { TicketDetailDialog } from "./_components/ticket-detail-dialog"
|
||||
import { TicketStatusBadge } from "./_components/ticket-status-badge"
|
||||
import { TicketStatusDialog } from "./_components/ticket-status-dialog"
|
||||
|
||||
type QuickViewKey =
|
||||
| "all"
|
||||
| "pending"
|
||||
| "in_progress"
|
||||
| "done"
|
||||
| "unassigned"
|
||||
| "mine"
|
||||
| "stale"
|
||||
|
||||
const emptySummary: TicketSummary = {
|
||||
all: 0,
|
||||
@@ -35,73 +55,186 @@ const emptySummary: TicketSummary = {
|
||||
stale: 0,
|
||||
}
|
||||
|
||||
const statusOptions = [
|
||||
{ value: "", label: "全部状态" },
|
||||
{ value: "pending", label: "待处理" },
|
||||
{ value: "in_progress", label: "处理中" },
|
||||
{ value: "done", label: "已处理" },
|
||||
const assigneeAllOption: ComboboxOption = { value: "0", label: "全部负责人" }
|
||||
const tagAllOption: ComboboxOption = { value: "0", label: "全部标签" }
|
||||
const staleHourOptions: ComboboxOption[] = [
|
||||
{ value: "24", label: "24 小时" },
|
||||
{ value: "48", label: "48 小时" },
|
||||
{ value: "168", label: "168 小时" },
|
||||
]
|
||||
|
||||
function isUpdatePayload(payload: CreateTicketPayload | UpdateTicketPayload): payload is UpdateTicketPayload {
|
||||
return "ticketId" in payload
|
||||
function buildTagOptions(nodes: TagTree[], parentPath = ""): ComboboxOption[] {
|
||||
const result: ComboboxOption[] = []
|
||||
nodes.forEach((item) => {
|
||||
const currentPath = parentPath ? `${parentPath}/${item.name}` : item.name
|
||||
result.push({
|
||||
value: String(item.id),
|
||||
label: currentPath,
|
||||
})
|
||||
if (item.children.length > 0) {
|
||||
result.push(...buildTagOptions(item.children, currentPath))
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
function sourceLabel(source: string) {
|
||||
switch (source) {
|
||||
case "manual":
|
||||
return "手动"
|
||||
case "conversation":
|
||||
return "会话"
|
||||
default:
|
||||
return source || "-"
|
||||
}
|
||||
}
|
||||
|
||||
function assigneeLabel(ticket: TicketItem) {
|
||||
if (ticket.currentAssigneeName) {
|
||||
return ticket.currentAssigneeName
|
||||
}
|
||||
if (ticket.currentAssigneeId > 0) {
|
||||
return `客服#${ticket.currentAssigneeId}`
|
||||
}
|
||||
return "未分配"
|
||||
}
|
||||
|
||||
export default function TicketsPage() {
|
||||
const [tickets, setTickets] = useState<TicketItem[]>([])
|
||||
const [summary, setSummary] = useState<TicketSummary>(emptySummary)
|
||||
const [quickView, setQuickView] = useState<QuickViewKey>("all")
|
||||
const [keyword, setKeyword] = useState("")
|
||||
const [status, setStatus] = useState("")
|
||||
const [assigneeId, setAssigneeId] = useState("0")
|
||||
const [tagId, setTagId] = useState("0")
|
||||
const [staleHours, setStaleHours] = useState("24")
|
||||
const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([assigneeAllOption])
|
||||
const [tagOptions, setTagOptions] = useState<ComboboxOption[]>([tagAllOption])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [editOpen, setEditOpen] = useState(false)
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
const [assignTicketItem, setAssignTicketItem] = useState<TicketItem | null>(null)
|
||||
const [statusTicketItem, setStatusTicketItem] = useState<TicketItem | null>(null)
|
||||
const [selectedTicketIds, setSelectedTicketIds] = useState<Set<number>>(new Set())
|
||||
const [batchAssignOpen, setBatchAssignOpen] = useState(false)
|
||||
const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
|
||||
const [detailOpen, setDetailOpen] = useState(false)
|
||||
|
||||
const quickViews = useMemo(
|
||||
() =>
|
||||
[
|
||||
{ key: "all", label: "全部工单", count: summary.all },
|
||||
{ key: "pending", label: "待处理", count: summary.pending },
|
||||
{ key: "in_progress", label: "处理中", count: summary.inProgress },
|
||||
{ key: "done", label: "已处理", count: summary.done },
|
||||
{ key: "unassigned", label: "待分配", count: summary.unassigned },
|
||||
{ key: "mine", label: "我的工单", count: summary.mine },
|
||||
{ key: "stale", label: "长时间未更新", count: summary.stale },
|
||||
] satisfies Array<{ key: QuickViewKey; label: string; count: number }>,
|
||||
[summary],
|
||||
)
|
||||
|
||||
const selectedIds = useMemo(() => Array.from(selectedTicketIds), [selectedTicketIds])
|
||||
const allPageSelected = tickets.length > 0 && tickets.every((ticket) => selectedTicketIds.has(ticket.id))
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const staleThreshold = Number(staleHours)
|
||||
const query: TicketListQuery = {
|
||||
page: 1,
|
||||
limit: 50,
|
||||
keyword: keyword.trim() || undefined,
|
||||
status: status ? (status as TicketStatus) : undefined,
|
||||
currentAssigneeId: assigneeId !== "0" ? Number(assigneeId) : undefined,
|
||||
tagId: tagId !== "0" ? Number(tagId) : undefined,
|
||||
}
|
||||
|
||||
if (quickView === "pending" || quickView === "in_progress" || quickView === "done") {
|
||||
query.status = quickView as TicketStatus
|
||||
}
|
||||
if (quickView === "unassigned") {
|
||||
query.unassigned = 1
|
||||
}
|
||||
if (quickView === "mine") {
|
||||
query.mine = 1
|
||||
}
|
||||
if (quickView === "stale") {
|
||||
query.staleHours = staleThreshold
|
||||
}
|
||||
|
||||
const [ticketData, summaryData] = await Promise.all([
|
||||
fetchTickets(query),
|
||||
fetchTicketSummary(),
|
||||
fetchTicketSummary({ staleHours: staleThreshold }),
|
||||
])
|
||||
setTickets(Array.isArray(ticketData.results) ? ticketData.results : [])
|
||||
setSummary(summaryData ?? emptySummary)
|
||||
setSelectedTicketIds(new Set())
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "加载工单失败")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [keyword, status])
|
||||
}, [assigneeId, keyword, quickView, staleHours, tagId])
|
||||
|
||||
useEffect(() => {
|
||||
void loadData()
|
||||
}, [loadData])
|
||||
|
||||
async function handleEditSubmit(payload: CreateTicketPayload | UpdateTicketPayload) {
|
||||
setSaving(true)
|
||||
try {
|
||||
if (isUpdatePayload(payload)) {
|
||||
await updateTicket(payload)
|
||||
toast.success("工单已更新")
|
||||
} else {
|
||||
await createTicket(payload)
|
||||
toast.success("工单已创建")
|
||||
}
|
||||
setEditOpen(false)
|
||||
setEditingId(null)
|
||||
await loadData()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "保存工单失败")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
Promise.all([fetchAgentProfilesAll(), fetchTagsAll()])
|
||||
.then(([agents, tags]) => {
|
||||
if (!active) {
|
||||
return
|
||||
}
|
||||
setAssigneeOptions([
|
||||
assigneeAllOption,
|
||||
...(Array.isArray(agents) ? agents : []).map((agent: AdminAgentProfile) => ({
|
||||
value: String(agent.userId),
|
||||
label:
|
||||
agent.displayName ||
|
||||
agent.nickname ||
|
||||
agent.username ||
|
||||
`客服#${agent.userId}`,
|
||||
})),
|
||||
])
|
||||
setTagOptions([tagAllOption, ...buildTagOptions(Array.isArray(tags) ? tags : [])])
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(error instanceof Error ? error.message : "加载筛选项失败")
|
||||
})
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
function toggleTicket(ticketId: number, checked: boolean) {
|
||||
setSelectedTicketIds((current) => {
|
||||
const next = new Set(current)
|
||||
if (checked) {
|
||||
next.add(ticketId)
|
||||
} else {
|
||||
next.delete(ticketId)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function togglePage(checked: boolean) {
|
||||
setSelectedTicketIds((current) => {
|
||||
const next = new Set(current)
|
||||
tickets.forEach((ticket) => {
|
||||
if (checked) {
|
||||
next.add(ticket.id)
|
||||
} else {
|
||||
next.delete(ticket.id)
|
||||
}
|
||||
})
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
setQuickView("all")
|
||||
setKeyword("")
|
||||
setAssigneeId("0")
|
||||
setTagId("0")
|
||||
setStaleHours("24")
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -109,44 +242,43 @@ export default function TicketsPage() {
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-normal">工单</h1>
|
||||
<p className="text-sm text-muted-foreground">轻量工单列表临时入口</p>
|
||||
<p className="text-sm text-muted-foreground">按状态、负责人和标签快速处理轻量工单</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
|
||||
<RefreshCcwIcon className="size-4" />
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditingId(null)
|
||||
setEditOpen(true)
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="size-4" />
|
||||
新建工单
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
|
||||
<RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-background/80 p-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{quickViews.map((view) => (
|
||||
<button
|
||||
key={view.key}
|
||||
type="button"
|
||||
className={cn(
|
||||
"inline-flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition",
|
||||
quickView === view.key
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border bg-background hover:bg-muted",
|
||||
)}
|
||||
onClick={() => setQuickView(view.key)}
|
||||
>
|
||||
<span className="truncate font-medium">{view.label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
|
||||
quickView === view.key ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{view.count}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-7">
|
||||
{[
|
||||
["全部", summary.all],
|
||||
["待处理", summary.pending],
|
||||
["处理中", summary.inProgress],
|
||||
["已处理", summary.done],
|
||||
["未分配", summary.unassigned],
|
||||
["我的", summary.mine],
|
||||
["超时未动", summary.stale],
|
||||
].map(([label, value]) => (
|
||||
<div key={label} className="rounded-lg border border-border bg-background p-3">
|
||||
<div className="text-xs text-muted-foreground">{label}</div>
|
||||
<div className="mt-1 text-xl font-semibold">{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2 rounded-lg border bg-background/80 p-3">
|
||||
<Input
|
||||
className="w-full sm:w-72"
|
||||
placeholder="搜索编号、标题或描述"
|
||||
@@ -160,111 +292,155 @@ export default function TicketsPage() {
|
||||
/>
|
||||
<div className="w-full sm:w-44">
|
||||
<OptionCombobox
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
placeholder="全部状态"
|
||||
options={statusOptions}
|
||||
value={assigneeId}
|
||||
onChange={setAssigneeId}
|
||||
placeholder="全部负责人"
|
||||
options={assigneeOptions}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-44">
|
||||
<OptionCombobox
|
||||
value={tagId}
|
||||
onChange={setTagId}
|
||||
placeholder="全部标签"
|
||||
options={tagOptions}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-40">
|
||||
<OptionCombobox
|
||||
value={staleHours}
|
||||
onChange={setStaleHours}
|
||||
placeholder="未更新阈值"
|
||||
options={staleHourOptions}
|
||||
/>
|
||||
</div>
|
||||
<Button type="button" variant="outline" onClick={resetFilters}>
|
||||
<SearchXIcon className="size-4" />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-8 flex-wrap items-center justify-between gap-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
已选择 <span className="font-medium text-foreground">{selectedTicketIds.size}</span> 张工单
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={selectedTicketIds.size === 0}
|
||||
onClick={() => setBatchAssignOpen(true)}
|
||||
>
|
||||
批量指派
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-border">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_120px_140px_180px] gap-3 border-b bg-muted/40 px-4 py-2 text-xs font-medium text-muted-foreground">
|
||||
<div>工单</div>
|
||||
<div>状态</div>
|
||||
<div>处理人</div>
|
||||
<div className="text-right">操作</div>
|
||||
</div>
|
||||
{tickets.length === 0 ? (
|
||||
<div className="px-4 py-10 text-center text-sm text-muted-foreground">
|
||||
{loading ? "加载中..." : "暂无工单"}
|
||||
</div>
|
||||
) : (
|
||||
tickets.map((ticket) => (
|
||||
<div
|
||||
key={ticket.id}
|
||||
className="grid grid-cols-[minmax(0,1fr)_120px_140px_180px] gap-3 border-b px-4 py-3 last:border-b-0"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">{ticket.title}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{ticket.ticketNo}</span>
|
||||
<span>{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TicketStatusBadge status={ticket.status} />
|
||||
</div>
|
||||
<div className="truncate text-sm text-muted-foreground">
|
||||
{ticket.currentAssigneeName || "未分配"}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditingId(ticket.id)
|
||||
setEditOpen(true)
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setAssignTicketItem(ticket)}
|
||||
>
|
||||
指派
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setStatusTicketItem(ticket)}
|
||||
>
|
||||
状态
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-10">
|
||||
<Checkbox
|
||||
checked={allPageSelected}
|
||||
onCheckedChange={(checked) => togglePage(!!checked)}
|
||||
aria-label="选择当前页工单"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>工单</TableHead>
|
||||
<TableHead className="w-28">状态</TableHead>
|
||||
<TableHead className="w-36">负责人</TableHead>
|
||||
<TableHead className="w-40">最后更新</TableHead>
|
||||
<TableHead className="w-24 text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{tickets.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="py-12 text-center text-sm text-muted-foreground">
|
||||
{loading ? "加载中..." : "暂无工单"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
tickets.map((ticket) => (
|
||||
<TableRow key={ticket.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedTicketIds.has(ticket.id)}
|
||||
onCheckedChange={(checked) => toggleTicket(ticket.id, !!checked)}
|
||||
aria-label={`选择工单 ${ticket.ticketNo}`}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="truncate text-sm font-medium">{ticket.title}</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{ticket.ticketNo}</span>
|
||||
<span>{ticket.customer?.name || (ticket.customerId ? `客户#${ticket.customerId}` : "无客户")}</span>
|
||||
<span>{sourceLabel(ticket.source)}</span>
|
||||
{ticket.channel ? <span>{ticket.channel}</span> : null}
|
||||
</div>
|
||||
{ticket.tags && ticket.tags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ticket.tags.slice(0, 3).map((tag) => (
|
||||
<Badge key={tag.id} variant="outline" className="px-1.5 py-0 text-[11px]">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
{ticket.tags.length > 3 ? (
|
||||
<Badge variant="outline" className="px-1.5 py-0 text-[11px]">
|
||||
+{ticket.tags.length - 3}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TicketStatusBadge status={ticket.status} />
|
||||
</TableCell>
|
||||
<TableCell className="max-w-36 truncate text-sm text-muted-foreground">
|
||||
{assigneeLabel(ticket)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">
|
||||
{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "-"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedTicketId(ticket.id)
|
||||
setDetailOpen(true)
|
||||
}}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<EditDialog
|
||||
open={editOpen}
|
||||
saving={saving}
|
||||
itemId={editingId}
|
||||
onOpenChange={(open) => {
|
||||
setEditOpen(open)
|
||||
if (!open) {
|
||||
setEditingId(null)
|
||||
}
|
||||
}}
|
||||
onSubmit={handleEditSubmit}
|
||||
/>
|
||||
<TicketAssignDialog
|
||||
open={!!assignTicketItem}
|
||||
ticketId={assignTicketItem?.id ?? null}
|
||||
currentAssigneeId={assignTicketItem?.currentAssigneeId}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setAssignTicketItem(null)
|
||||
}
|
||||
}}
|
||||
open={batchAssignOpen}
|
||||
ticketId={null}
|
||||
ticketIds={selectedIds}
|
||||
onOpenChange={setBatchAssignOpen}
|
||||
onSuccess={loadData}
|
||||
/>
|
||||
<TicketStatusDialog
|
||||
open={!!statusTicketItem}
|
||||
ticketId={statusTicketItem?.id ?? null}
|
||||
currentStatus={statusTicketItem?.status}
|
||||
<TicketDetailDialog
|
||||
open={detailOpen}
|
||||
ticketId={selectedTicketId}
|
||||
onOpenChange={(open) => {
|
||||
setDetailOpen(open)
|
||||
if (!open) {
|
||||
setStatusTicketItem(null)
|
||||
setSelectedTicketId(null)
|
||||
}
|
||||
}}
|
||||
onSuccess={loadData}
|
||||
onChanged={loadData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -96,6 +96,7 @@ export type TicketListQuery = {
|
||||
channel?: string
|
||||
mine?: number | boolean
|
||||
unassigned?: number | boolean
|
||||
staleHours?: number
|
||||
}
|
||||
|
||||
export type CreateTicketPayload = {
|
||||
|
||||
Reference in New Issue
Block a user