mlogclub
1244 lines
42 KiB
TypeScript
1244 lines
42 KiB
TypeScript
"use client"
|
||
|
||
import Link from "next/link"
|
||
import {
|
||
ArrowRightLeftIcon,
|
||
CircleOffIcon,
|
||
ClipboardListIcon,
|
||
PlusIcon,
|
||
RefreshCcwIcon,
|
||
SearchIcon,
|
||
SaveIcon,
|
||
Settings2Icon,
|
||
SquarePenIcon,
|
||
StarIcon,
|
||
Trash2Icon,
|
||
} from "lucide-react"
|
||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||
import { toast } from "sonner"
|
||
|
||
import { ListPagination } from "@/components/list-pagination"
|
||
import { OptionCombobox } 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 {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table"
|
||
import {
|
||
fetchAgentProfilesAll,
|
||
fetchAgentTeamsAll,
|
||
type AdminAgentProfile,
|
||
type AdminAgentTeam,
|
||
fetchTagsAll,
|
||
type TagTree,
|
||
} from "@/lib/api/admin"
|
||
import {
|
||
fetchTicketPriorityConfigsAll,
|
||
type TicketPriorityConfig,
|
||
} from "@/lib/api/ticket-config"
|
||
import {
|
||
createTicket,
|
||
batchWatchTickets,
|
||
deleteTicketView,
|
||
fetchTicketViews,
|
||
fetchTicketSummary,
|
||
fetchTickets,
|
||
saveTicketView,
|
||
updateTicket,
|
||
unwatchTicket,
|
||
watchTicket,
|
||
type Paging,
|
||
type TicketSavedView,
|
||
type TicketItem,
|
||
type TicketSummary,
|
||
} from "@/lib/api/ticket"
|
||
import { readSession } from "@/lib/auth"
|
||
import { formatDateTime } from "@/lib/utils"
|
||
import { EditDialog } from "./_components/edit"
|
||
import { TicketAssignDialog } from "./_components/ticket-assign-dialog"
|
||
import { TicketPriorityBadge } from "./_components/ticket-priority-badge"
|
||
import { TicketReasonDialog } from "./_components/ticket-reason-dialog"
|
||
import { TicketSLABadge } from "./_components/ticket-sla-badge"
|
||
import { TicketStatusDialog } from "./_components/ticket-status-dialog"
|
||
import { TicketStatusBadge } from "./_components/ticket-status-badge"
|
||
|
||
const emptyPaging: Paging = { page: 1, limit: 20, total: 0 }
|
||
const emptySummary: TicketSummary = {
|
||
all: 0,
|
||
mine: 0,
|
||
watching: 0,
|
||
collaboration: 0,
|
||
participating: 0,
|
||
mentioned: 0,
|
||
unassigned: 0,
|
||
pendingCustomer: 0,
|
||
pendingInternal: 0,
|
||
overdue: 0,
|
||
}
|
||
|
||
type QuickViewKey =
|
||
| "all"
|
||
| "mine"
|
||
| "collaboration"
|
||
| "participating"
|
||
| "mentioned"
|
||
| "watching"
|
||
| "unassigned"
|
||
| "pending_customer"
|
||
| "pending_internal"
|
||
| "overdue"
|
||
|
||
type SavedTicketView = {
|
||
id: number
|
||
name: string
|
||
keywordInput: string
|
||
keyword: string
|
||
statusFilter: string
|
||
priorityFilter: string
|
||
severityFilter: string
|
||
tagFilter: string
|
||
teamFilter: string
|
||
assigneeFilter: string
|
||
sourceFilter: string
|
||
watchFilter: string
|
||
quickView: QuickViewKey
|
||
}
|
||
|
||
function buildTagOptions(nodes: TagTree[], parentPath = ""): Array<{ value: string; label: string }> {
|
||
const result: Array<{ value: string; label: string }> = []
|
||
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 isClosedStatus(status: string) {
|
||
return status === "resolved" || status === "closed" || status === "cancelled"
|
||
}
|
||
|
||
function getResolveDeadlineTime(ticket: TicketItem) {
|
||
if (!ticket.resolveDeadlineAt) {
|
||
return null
|
||
}
|
||
const deadline = new Date(ticket.resolveDeadlineAt.replace(" ", "T"))
|
||
if (Number.isNaN(deadline.getTime())) {
|
||
return null
|
||
}
|
||
return deadline.getTime()
|
||
}
|
||
|
||
function isOverdueTicket(ticket: TicketItem) {
|
||
const deadline = getResolveDeadlineTime(ticket)
|
||
if (deadline === null || isClosedStatus(ticket.status)) {
|
||
return false
|
||
}
|
||
return deadline < Date.now()
|
||
}
|
||
|
||
function isRiskTicket(ticket: TicketItem) {
|
||
const deadline = getResolveDeadlineTime(ticket)
|
||
if (deadline === null || isClosedStatus(ticket.status)) {
|
||
return false
|
||
}
|
||
const remainingMinutes = Math.floor((deadline - Date.now()) / 60000)
|
||
return remainingMinutes >= 0 && remainingMinutes <= 240
|
||
}
|
||
|
||
function getTicketRowClassName(ticket: TicketItem) {
|
||
if (isOverdueTicket(ticket)) {
|
||
return "bg-red-50/80 hover:bg-red-50"
|
||
}
|
||
if (ticket.currentAssigneeId <= 0 && !isClosedStatus(ticket.status)) {
|
||
return "bg-amber-50/70 hover:bg-amber-50"
|
||
}
|
||
if (isRiskTicket(ticket)) {
|
||
return "bg-orange-50/60 hover:bg-orange-50"
|
||
}
|
||
return ""
|
||
}
|
||
|
||
function parseSavedTicketView(item: TicketSavedView): SavedTicketView | null {
|
||
const filters = item.filters
|
||
if (!filters || typeof filters !== "object") {
|
||
return null
|
||
}
|
||
return {
|
||
id: item.id,
|
||
name: item.name,
|
||
keywordInput: typeof filters.keywordInput === "string" ? filters.keywordInput : "",
|
||
keyword: typeof filters.keyword === "string" ? filters.keyword : "",
|
||
statusFilter: typeof filters.statusFilter === "string" ? filters.statusFilter : "all",
|
||
priorityFilter: typeof filters.priorityFilter === "string" ? filters.priorityFilter : "all",
|
||
severityFilter: typeof filters.severityFilter === "string" ? filters.severityFilter : "all",
|
||
tagFilter:
|
||
typeof filters.tagFilter === "string"
|
||
? filters.tagFilter
|
||
: typeof filters.categoryFilter === "string"
|
||
? filters.categoryFilter
|
||
: "all",
|
||
teamFilter: typeof filters.teamFilter === "string" ? filters.teamFilter : "all",
|
||
assigneeFilter: typeof filters.assigneeFilter === "string" ? filters.assigneeFilter : "all",
|
||
sourceFilter: typeof filters.sourceFilter === "string" ? filters.sourceFilter : "all",
|
||
watchFilter: typeof filters.watchFilter === "string" ? filters.watchFilter : "all",
|
||
quickView: typeof filters.quickView === "string" ? (filters.quickView as QuickViewKey) : "all",
|
||
}
|
||
}
|
||
|
||
export default function TicketsPage() {
|
||
const [result, setResult] = useState<{ results: TicketItem[]; page: Paging }>({
|
||
results: [],
|
||
page: emptyPaging,
|
||
})
|
||
const [summary, setSummary] = useState<TicketSummary>(emptySummary)
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [dialogOpen, setDialogOpen] = useState(false)
|
||
const [editingItemId, setEditingItemId] = useState<number | null>(null)
|
||
const [keywordInput, setKeywordInput] = useState("")
|
||
const [keyword, setKeyword] = useState("")
|
||
const [statusFilter, setStatusFilter] = useState("all")
|
||
const [priorityFilter, setPriorityFilter] = useState("all")
|
||
const [severityFilter, setSeverityFilter] = useState("all")
|
||
const [tagFilter, setTagFilter] = useState("all")
|
||
const [teamFilter, setTeamFilter] = useState("all")
|
||
const [assigneeFilter, setAssigneeFilter] = useState("all")
|
||
const [sourceFilter, setSourceFilter] = useState("all")
|
||
const [watchFilter, setWatchFilter] = useState("all")
|
||
const [quickView, setQuickView] = useState<QuickViewKey>("all")
|
||
const [savedViews, setSavedViews] = useState<SavedTicketView[]>([])
|
||
const [activeSavedViewId, setActiveSavedViewId] = useState("all")
|
||
const [teams, setTeams] = useState<AdminAgentTeam[]>([])
|
||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
||
const [tags, setTags] = useState<TagTree[]>([])
|
||
const [priorities, setPriorities] = useState<TicketPriorityConfig[]>([])
|
||
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
|
||
const [selectedTicketIds, setSelectedTicketIds] = useState<number[]>([])
|
||
const [assignDialogOpen, setAssignDialogOpen] = useState(false)
|
||
const [statusDialogOpen, setStatusDialogOpen] = useState(false)
|
||
const [closeDialogOpen, setCloseDialogOpen] = useState(false)
|
||
const [reopenDialogOpen, setReopenDialogOpen] = useState(false)
|
||
const [actionTicket, setActionTicket] = useState<TicketItem | null>(null)
|
||
const currentUserId = readSession()?.user?.id ?? 0
|
||
|
||
const activeStatusFilter = useMemo(() => {
|
||
if (quickView === "pending_customer") {
|
||
return "pending_customer"
|
||
}
|
||
if (quickView === "pending_internal") {
|
||
return "pending_internal"
|
||
}
|
||
return statusFilter === "all" ? undefined : statusFilter
|
||
}, [quickView, statusFilter])
|
||
|
||
const activeWatchFilter = quickView === "watching" ? 1 : watchFilter === "watching" ? 1 : undefined
|
||
const activeCollaborationFilter = quickView === "collaboration" ? 1 : undefined
|
||
const activeCollaboratingFilter = quickView === "participating" ? 1 : undefined
|
||
const activeMentionedFilter = quickView === "mentioned" ? 1 : undefined
|
||
const activeMineFilter = quickView === "mine" ? 1 : undefined
|
||
const activeUnassignedFilter = quickView === "unassigned" ? 1 : undefined
|
||
const activeOverdueFilter = quickView === "overdue" ? 1 : undefined
|
||
|
||
const loadSummary = useCallback(async () => {
|
||
try {
|
||
const data = await fetchTicketSummary()
|
||
setSummary(data)
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "加载工单汇总失败")
|
||
}
|
||
}, [])
|
||
|
||
const loadSavedViews = useCallback(async () => {
|
||
try {
|
||
const data = await fetchTicketViews()
|
||
const views = Array.isArray(data)
|
||
? data
|
||
.map(parseSavedTicketView)
|
||
.filter((item): item is SavedTicketView => item !== null)
|
||
: []
|
||
setSavedViews(views)
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "加载保存视图失败")
|
||
}
|
||
}, [])
|
||
|
||
const loadTickets = useCallback(async () => {
|
||
setLoading(true)
|
||
try {
|
||
const data = await fetchTickets({
|
||
page: result.page.page,
|
||
limit: result.page.limit,
|
||
keyword: keyword.trim() || undefined,
|
||
status: activeStatusFilter,
|
||
priority: priorityFilter === "all" ? undefined : Number(priorityFilter),
|
||
severity: severityFilter === "all" ? undefined : Number(severityFilter),
|
||
tagId: tagFilter === "all" ? undefined : Number(tagFilter),
|
||
currentTeamId: teamFilter === "all" ? undefined : Number(teamFilter),
|
||
currentAssigneeId: assigneeFilter === "all" ? undefined : Number(assigneeFilter),
|
||
source: sourceFilter === "all" ? undefined : sourceFilter,
|
||
watching: activeWatchFilter,
|
||
collaboration: activeCollaborationFilter,
|
||
collaborating: activeCollaboratingFilter,
|
||
mentioned: activeMentionedFilter,
|
||
mine: activeMineFilter,
|
||
unassigned: activeUnassignedFilter,
|
||
overdue: activeOverdueFilter,
|
||
})
|
||
setResult({
|
||
results: Array.isArray(data.results) ? data.results : [],
|
||
page: data.page ?? emptyPaging,
|
||
})
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "加载工单失败")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [
|
||
activeMineFilter,
|
||
activeOverdueFilter,
|
||
activeStatusFilter,
|
||
activeUnassignedFilter,
|
||
activeWatchFilter,
|
||
activeCollaborationFilter,
|
||
activeCollaboratingFilter,
|
||
activeMentionedFilter,
|
||
assigneeFilter,
|
||
tagFilter,
|
||
keyword,
|
||
priorityFilter,
|
||
result.page.limit,
|
||
result.page.page,
|
||
severityFilter,
|
||
sourceFilter,
|
||
teamFilter,
|
||
])
|
||
|
||
useEffect(() => {
|
||
void loadTickets()
|
||
}, [loadTickets])
|
||
|
||
useEffect(() => {
|
||
setSelectedTicketIds((current) =>
|
||
current.filter((ticketId) => result.results.some((item) => item.id === ticketId)),
|
||
)
|
||
}, [result.results])
|
||
|
||
useEffect(() => {
|
||
void loadSummary()
|
||
}, [loadSummary])
|
||
|
||
useEffect(() => {
|
||
void loadSavedViews()
|
||
}, [loadSavedViews])
|
||
|
||
useEffect(() => {
|
||
void (async () => {
|
||
const [teamData, agentData, tagData, priorityData] = await Promise.all([
|
||
fetchAgentTeamsAll(),
|
||
fetchAgentProfilesAll(),
|
||
fetchTagsAll(),
|
||
fetchTicketPriorityConfigsAll(),
|
||
])
|
||
setTeams(Array.isArray(teamData) ? teamData : [])
|
||
setAgents(Array.isArray(agentData) ? agentData : [])
|
||
setTags(Array.isArray(tagData) ? tagData : [])
|
||
setPriorities(Array.isArray(priorityData) ? priorityData : [])
|
||
})()
|
||
}, [])
|
||
|
||
function resetToFirstPage() {
|
||
setResult((current) => ({
|
||
...current,
|
||
page: { ...current.page, page: 1 },
|
||
}))
|
||
}
|
||
|
||
function applyFilters() {
|
||
setKeyword(keywordInput)
|
||
setActiveSavedViewId("all")
|
||
resetToFirstPage()
|
||
}
|
||
|
||
function buildCurrentView(name: string, existingId?: number): SavedTicketView {
|
||
return {
|
||
id: existingId ?? 0,
|
||
name,
|
||
keywordInput,
|
||
keyword,
|
||
statusFilter,
|
||
priorityFilter,
|
||
severityFilter,
|
||
tagFilter,
|
||
teamFilter,
|
||
assigneeFilter,
|
||
sourceFilter,
|
||
watchFilter,
|
||
quickView,
|
||
}
|
||
}
|
||
|
||
function applySavedView(view: SavedTicketView) {
|
||
setKeywordInput(view.keywordInput)
|
||
setKeyword(view.keyword)
|
||
setStatusFilter(view.statusFilter)
|
||
setPriorityFilter(view.priorityFilter)
|
||
setSeverityFilter(view.severityFilter)
|
||
setTagFilter(view.tagFilter)
|
||
setTeamFilter(view.teamFilter)
|
||
setAssigneeFilter(view.assigneeFilter)
|
||
setSourceFilter(view.sourceFilter)
|
||
setWatchFilter(view.watchFilter)
|
||
setQuickView(view.quickView)
|
||
setActiveSavedViewId(String(view.id))
|
||
setResult((current) => ({
|
||
...current,
|
||
page: { ...current.page, page: 1 },
|
||
}))
|
||
}
|
||
|
||
function resetAllFilters() {
|
||
setKeywordInput("")
|
||
setKeyword("")
|
||
setStatusFilter("all")
|
||
setPriorityFilter("all")
|
||
setSeverityFilter("all")
|
||
setTagFilter("all")
|
||
setTeamFilter("all")
|
||
setAssigneeFilter("all")
|
||
setSourceFilter("all")
|
||
setWatchFilter("all")
|
||
setQuickView("all")
|
||
setActiveSavedViewId("all")
|
||
resetToFirstPage()
|
||
}
|
||
|
||
async function handleSaveCurrentView() {
|
||
const currentView = activeSavedViewId === "all"
|
||
? null
|
||
: savedViews.find((item) => String(item.id) === activeSavedViewId) ?? null
|
||
const defaultName = currentView?.name ?? ""
|
||
const name = window.prompt("输入视图名称", defaultName)?.trim()
|
||
if (!name) {
|
||
return
|
||
}
|
||
const nextView = buildCurrentView(name, currentView?.id)
|
||
try {
|
||
const saved = await saveTicketView({
|
||
id: nextView.id > 0 ? nextView.id : undefined,
|
||
name: nextView.name,
|
||
filters: {
|
||
keywordInput: nextView.keywordInput,
|
||
keyword: nextView.keyword,
|
||
statusFilter: nextView.statusFilter,
|
||
priorityFilter: nextView.priorityFilter,
|
||
severityFilter: nextView.severityFilter,
|
||
tagFilter: nextView.tagFilter,
|
||
teamFilter: nextView.teamFilter,
|
||
assigneeFilter: nextView.assigneeFilter,
|
||
sourceFilter: nextView.sourceFilter,
|
||
watchFilter: nextView.watchFilter,
|
||
quickView: nextView.quickView,
|
||
},
|
||
})
|
||
const parsed = parseSavedTicketView(saved)
|
||
if (parsed) {
|
||
setSavedViews((current) => {
|
||
const exists = current.some((item) => item.id === parsed.id)
|
||
return exists ? current.map((item) => (item.id === parsed.id ? parsed : item)) : [parsed, ...current]
|
||
})
|
||
setActiveSavedViewId(String(parsed.id))
|
||
}
|
||
toast.success(currentView ? "视图已更新" : "视图已保存")
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "保存视图失败")
|
||
}
|
||
}
|
||
|
||
async function handleDeleteSavedView(viewId: number) {
|
||
const currentView = savedViews.find((item) => item.id === viewId)
|
||
if (!currentView) {
|
||
return
|
||
}
|
||
const confirmed = window.confirm(`确认删除视图「${currentView.name}」吗？`)
|
||
if (!confirmed) {
|
||
return
|
||
}
|
||
try {
|
||
await deleteTicketView(currentView.id)
|
||
setSavedViews((current) => current.filter((item) => item.id !== currentView.id))
|
||
if (activeSavedViewId === String(currentView.id)) {
|
||
setActiveSavedViewId("all")
|
||
}
|
||
toast.success("视图已删除")
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "删除视图失败")
|
||
}
|
||
}
|
||
|
||
function handleFilterKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
|
||
if (event.key !== "Enter") {
|
||
return
|
||
}
|
||
event.preventDefault()
|
||
applyFilters()
|
||
}
|
||
|
||
function openCreateDialog() {
|
||
setEditingItemId(null)
|
||
setDialogOpen(true)
|
||
}
|
||
|
||
function openEditDialog(item: TicketItem) {
|
||
setEditingItemId(item.id)
|
||
setDialogOpen(true)
|
||
}
|
||
|
||
function openAssignDialog(item: TicketItem) {
|
||
setActionTicket(item)
|
||
setAssignDialogOpen(true)
|
||
}
|
||
|
||
function openStatusDialog(item: TicketItem) {
|
||
setActionTicket(item)
|
||
setStatusDialogOpen(true)
|
||
}
|
||
|
||
function openCloseDialog(item: TicketItem) {
|
||
setActionTicket(item)
|
||
setCloseDialogOpen(true)
|
||
}
|
||
|
||
function openReopenDialog(item: TicketItem) {
|
||
setActionTicket(item)
|
||
setReopenDialogOpen(true)
|
||
}
|
||
|
||
function handleDialogOpenChange(open: boolean) {
|
||
if (saving) {
|
||
return
|
||
}
|
||
if (!open) {
|
||
setEditingItemId(null)
|
||
}
|
||
setDialogOpen(open)
|
||
}
|
||
|
||
async function refreshAll() {
|
||
await Promise.all([loadSummary(), loadTickets()])
|
||
}
|
||
|
||
async function handleSubmit(
|
||
payload: Parameters<typeof createTicket>[0] | Parameters<typeof updateTicket>[0],
|
||
) {
|
||
if (saving) {
|
||
return
|
||
}
|
||
setSaving(true)
|
||
try {
|
||
if ("ticketId" in payload) {
|
||
await updateTicket(payload)
|
||
toast.success("工单已更新")
|
||
} else {
|
||
await createTicket(payload)
|
||
toast.success("工单已创建")
|
||
}
|
||
setDialogOpen(false)
|
||
setEditingItemId(null)
|
||
await refreshAll()
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "保存工单失败")
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
async function handleWatchToggle(item: TicketItem) {
|
||
setActionLoadingId(item.id)
|
||
try {
|
||
if (item.watchedByMe) {
|
||
await unwatchTicket(item.id)
|
||
toast.success("已取消关注")
|
||
} else {
|
||
await watchTicket(item.id)
|
||
toast.success("已关注工单")
|
||
}
|
||
await refreshAll()
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "更新关注状态失败")
|
||
} finally {
|
||
setActionLoadingId(null)
|
||
}
|
||
}
|
||
|
||
function toggleSelectTicket(ticketId: number, checked: boolean) {
|
||
setSelectedTicketIds((current) => {
|
||
if (checked) {
|
||
if (current.includes(ticketId)) {
|
||
return current
|
||
}
|
||
return current.concat(ticketId)
|
||
}
|
||
return current.filter((item) => item !== ticketId)
|
||
})
|
||
}
|
||
|
||
function handleSelectAll(checked: boolean) {
|
||
setSelectedTicketIds(checked ? result.results.map((item) => item.id) : [])
|
||
}
|
||
|
||
async function handleBatchWatch(watched: boolean) {
|
||
if (selectedTicketIds.length === 0) {
|
||
toast.error("请先选择工单")
|
||
return
|
||
}
|
||
setSaving(true)
|
||
try {
|
||
await batchWatchTickets({ ticketIds: selectedTicketIds, watched })
|
||
toast.success(watched ? `已批量关注 ${selectedTicketIds.length} 张工单` : `已批量取消关注 ${selectedTicketIds.length} 张工单`)
|
||
setSelectedTicketIds([])
|
||
await refreshAll()
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "批量更新关注失败")
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const tagOptions = [{ value: "all", label: "全部标签" }].concat(
|
||
buildTagOptions(tags),
|
||
)
|
||
const priorityOptions = [{ value: "all", label: "全部优先级" }].concat(
|
||
priorities.map((priority) => ({
|
||
value: String(priority.id),
|
||
label: priority.name,
|
||
})),
|
||
)
|
||
|
||
const teamOptions = [{ value: "all", label: "全部团队" }].concat(
|
||
teams.map((team) => ({ value: String(team.id), label: team.name })),
|
||
)
|
||
|
||
const agentOptions = [{ value: "all", label: "全部处理人" }].concat(
|
||
agents.map((agent) => ({
|
||
value: String(agent.userId),
|
||
label: agent.displayName || agent.nickname || agent.username || `客服#${agent.userId}`,
|
||
})),
|
||
)
|
||
|
||
const quickViews: Array<{
|
||
key: QuickViewKey
|
||
label: string
|
||
description: string
|
||
count: number
|
||
}> = [
|
||
{ key: "all", label: "全部工单", description: "工单总量", count: summary.all },
|
||
{ key: "mine", label: "我的工单", description: "当前指派给我", count: summary.mine },
|
||
{ key: "collaboration", label: "协作相关", description: "我参与或提及我的工单", count: summary.collaboration },
|
||
{ key: "participating", label: "我参与的", description: "我是协作人的工单", count: summary.participating },
|
||
{ key: "mentioned", label: "提及我的", description: "内部备注里提到了我", count: summary.mentioned },
|
||
{ key: "unassigned", label: "待分配", description: "尚未指派处理人", count: summary.unassigned },
|
||
{ key: "watching", label: "我的关注", description: "我在跟进的工单", count: summary.watching },
|
||
{
|
||
key: "pending_customer",
|
||
label: "待客户反馈",
|
||
description: "等待客户补充信息",
|
||
count: summary.pendingCustomer,
|
||
},
|
||
{
|
||
key: "pending_internal",
|
||
label: "待内部处理",
|
||
description: "等待内部协作处理",
|
||
count: summary.pendingInternal,
|
||
},
|
||
{ key: "overdue", label: "已超时", description: "解决 SLA 已超时", count: summary.overdue },
|
||
]
|
||
|
||
const allSelected =
|
||
result.results.length > 0 && selectedTicketIds.length === result.results.length
|
||
|
||
const displayResults = useMemo(() => {
|
||
const list = [...result.results]
|
||
list.sort((left, right) => {
|
||
const leftOverdue = isOverdueTicket(left)
|
||
const rightOverdue = isOverdueTicket(right)
|
||
if (leftOverdue !== rightOverdue) {
|
||
return leftOverdue ? -1 : 1
|
||
}
|
||
|
||
if (quickView === "unassigned") {
|
||
const leftUnassigned = left.currentAssigneeId <= 0 ? 1 : 0
|
||
const rightUnassigned = right.currentAssigneeId <= 0 ? 1 : 0
|
||
if (leftUnassigned !== rightUnassigned) {
|
||
return rightUnassigned - leftUnassigned
|
||
}
|
||
}
|
||
|
||
const leftDeadline = getResolveDeadlineTime(left)
|
||
const rightDeadline = getResolveDeadlineTime(right)
|
||
if (leftDeadline !== null || rightDeadline !== null) {
|
||
if (leftDeadline === null) {
|
||
return 1
|
||
}
|
||
if (rightDeadline === null) {
|
||
return -1
|
||
}
|
||
if (leftDeadline !== rightDeadline) {
|
||
return leftDeadline - rightDeadline
|
||
}
|
||
}
|
||
|
||
if (left.priority !== right.priority) {
|
||
return right.priority - left.priority
|
||
}
|
||
|
||
return (right.id ?? 0) - (left.id ?? 0)
|
||
})
|
||
return list
|
||
}, [quickView, result.results])
|
||
|
||
const savedViewOptions = useMemo(
|
||
() =>
|
||
[{ value: "all", label: "筛选视图" }].concat(
|
||
savedViews.map((item) => ({
|
||
value: String(item.id),
|
||
label: item.name,
|
||
})),
|
||
),
|
||
[savedViews],
|
||
)
|
||
|
||
return (
|
||
<div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4 md:p-6">
|
||
<div className="flex w-full 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">工单</h1>
|
||
{/* <p className="mt-1 text-sm text-muted-foreground">
|
||
作为队列工作台处理异步问题、分派、流转与关闭
|
||
</p> */}
|
||
<div className="mt-1 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||
<span className="rounded bg-red-50 px-2 py-1 text-red-700">红色：已超时</span>
|
||
<span className="rounded bg-amber-50 px-2 py-1 text-amber-700">黄色：待分配</span>
|
||
<span className="rounded bg-orange-50 px-2 py-1 text-orange-700">橙色：即将超时</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-48">
|
||
<OptionCombobox
|
||
value={activeSavedViewId}
|
||
onChange={(value) => {
|
||
if (value === "all") {
|
||
setActiveSavedViewId("all")
|
||
return
|
||
}
|
||
const nextView = savedViews.find((item) => String(item.id) === value)
|
||
if (nextView) {
|
||
applySavedView(nextView)
|
||
}
|
||
}}
|
||
placeholder="保存视图"
|
||
options={savedViewOptions}
|
||
renderOptionAction={(option) => {
|
||
if (option.value === "all") {
|
||
return null
|
||
}
|
||
const viewId = Number(option.value)
|
||
if (!Number.isFinite(viewId)) {
|
||
return null
|
||
}
|
||
return (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="size-7 text-muted-foreground hover:text-destructive"
|
||
onClick={() => void handleDeleteSavedView(viewId)}
|
||
>
|
||
<Trash2Icon className="size-4" />
|
||
</Button>
|
||
)
|
||
}}
|
||
/>
|
||
</div>
|
||
<Button variant="outline" onClick={handleSaveCurrentView}>
|
||
<SaveIcon className="size-4" />
|
||
保存视图
|
||
</Button>
|
||
<Button onClick={openCreateDialog}>
|
||
<PlusIcon className="size-4" />
|
||
新建工单
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div className="rounded-lg border bg-background/80 p-2">
|
||
<div className="flex flex-wrap gap-2">
|
||
{quickViews.map((view) => {
|
||
const active = quickView === view.key
|
||
return (
|
||
<button
|
||
key={view.key}
|
||
type="button"
|
||
className={`inline-flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition ${
|
||
active
|
||
? "border-primary bg-primary/8 text-primary shadow-sm"
|
||
: "border-border bg-background text-foreground hover:border-primary/40 hover:bg-muted/60"
|
||
}`}
|
||
onClick={() => {
|
||
setQuickView(view.key)
|
||
resetToFirstPage()
|
||
}}
|
||
>
|
||
<span className="truncate font-medium">{view.label}</span>
|
||
<span
|
||
className={`rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums ${
|
||
active ? "bg-primary/12 text-primary" : "bg-muted text-muted-foreground"
|
||
}`}
|
||
>
|
||
{view.count}
|
||
</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-3 lg:grid-cols-4 xl:grid-cols-[minmax(0,1.5fr)_repeat(8,minmax(0,1fr))_auto]">
|
||
<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={keywordInput}
|
||
placeholder="搜索工单号、标题或描述"
|
||
onChange={(event) => setKeywordInput(event.target.value)}
|
||
onKeyDown={handleFilterKeyDown}
|
||
/>
|
||
</div>
|
||
<OptionCombobox
|
||
value={statusFilter}
|
||
onChange={(value) => {
|
||
setStatusFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部状态"
|
||
options={[
|
||
{ value: "all", label: "全部状态" },
|
||
{ value: "new", label: "新建" },
|
||
{ value: "open", label: "处理中" },
|
||
{ value: "pending_customer", label: "待客户反馈" },
|
||
{ value: "pending_internal", label: "待内部处理" },
|
||
{ value: "resolved", label: "已解决" },
|
||
{ value: "closed", label: "已关闭" },
|
||
{ value: "cancelled", label: "已取消" },
|
||
]}
|
||
/>
|
||
<OptionCombobox
|
||
value={tagFilter}
|
||
onChange={(value) => {
|
||
setTagFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部标签"
|
||
options={tagOptions}
|
||
/>
|
||
<OptionCombobox
|
||
value={priorityFilter}
|
||
onChange={(value) => {
|
||
setPriorityFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部优先级"
|
||
options={priorityOptions}
|
||
/>
|
||
<OptionCombobox
|
||
value={severityFilter}
|
||
onChange={(value) => {
|
||
setSeverityFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部严重度"
|
||
options={[
|
||
{ value: "all", label: "全部严重度" },
|
||
{ value: "1", label: "轻微" },
|
||
{ value: "2", label: "一般" },
|
||
{ value: "3", label: "严重" },
|
||
]}
|
||
/>
|
||
<OptionCombobox
|
||
value={sourceFilter}
|
||
onChange={(value) => {
|
||
setSourceFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部来源"
|
||
options={[
|
||
{ value: "all", label: "全部来源" },
|
||
{ value: "manual", label: "手动创建" },
|
||
{ value: "conversation", label: "会话转工单" },
|
||
{ value: "email", label: "邮件" },
|
||
{ value: "api", label: "API" },
|
||
{ value: "system", label: "系统" },
|
||
]}
|
||
/>
|
||
<OptionCombobox
|
||
value={teamFilter}
|
||
onChange={(value) => {
|
||
setTeamFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部团队"
|
||
options={teamOptions}
|
||
/>
|
||
<OptionCombobox
|
||
value={assigneeFilter}
|
||
onChange={(value) => {
|
||
setAssigneeFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部处理人"
|
||
options={agentOptions}
|
||
/>
|
||
<OptionCombobox
|
||
value={watchFilter}
|
||
onChange={(value) => {
|
||
setWatchFilter(value)
|
||
setQuickView("all")
|
||
resetToFirstPage()
|
||
}}
|
||
placeholder="全部关注"
|
||
options={[
|
||
{ value: "all", label: "全部关注" },
|
||
{ value: "watching", label: "我关注的" },
|
||
]}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button variant="outline" onClick={applyFilters}>
|
||
查询
|
||
</Button>
|
||
<Button variant="outline" onClick={() => void refreshAll()}>
|
||
<RefreshCcwIcon className="size-4" />
|
||
</Button>
|
||
<Button variant="ghost" onClick={resetAllFilters}>
|
||
重置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="overflow-hidden rounded-lg border bg-background">
|
||
{selectedTicketIds.length > 0 ? (
|
||
<div className="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
|
||
<div className="text-sm text-muted-foreground">
|
||
已选择 <span className="font-medium text-foreground">{selectedTicketIds.length}</span> 张工单
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
setActionTicket(null)
|
||
setAssignDialogOpen(true)
|
||
}}
|
||
disabled={saving}
|
||
>
|
||
批量指派
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
setActionTicket(null)
|
||
setStatusDialogOpen(true)
|
||
}}
|
||
disabled={saving}
|
||
>
|
||
批量改状态
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => void handleBatchWatch(true)}
|
||
disabled={saving}
|
||
>
|
||
批量关注
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => void handleBatchWatch(false)}
|
||
disabled={saving}
|
||
>
|
||
取消关注
|
||
</Button>
|
||
<Button variant="ghost" size="sm" onClick={() => setSelectedTicketIds([])} disabled={saving}>
|
||
清空选择
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
<Table>
|
||
<TableHeader className="bg-muted/35">
|
||
<TableRow>
|
||
<TableHead className="w-10">
|
||
<Checkbox
|
||
checked={allSelected}
|
||
onCheckedChange={(checked) => handleSelectAll(Boolean(checked))}
|
||
aria-label="全选工单"
|
||
/>
|
||
</TableHead>
|
||
<TableHead>工单</TableHead>
|
||
<TableHead>客户</TableHead>
|
||
<TableHead>标签</TableHead>
|
||
<TableHead>优先级</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>SLA 风险</TableHead>
|
||
<TableHead>协作</TableHead>
|
||
<TableHead>处理人</TableHead>
|
||
<TableHead>团队</TableHead>
|
||
<TableHead>关注</TableHead>
|
||
<TableHead>更新时间</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{loading ? (
|
||
<TableRow>
|
||
<TableCell colSpan={13} className="h-32 text-center text-muted-foreground">
|
||
加载中...
|
||
</TableCell>
|
||
</TableRow>
|
||
) : result.results.length > 0 ? (
|
||
displayResults.map((item) => (
|
||
<TableRow key={item.id} className={getTicketRowClassName(item)}>
|
||
<TableCell>
|
||
<Checkbox
|
||
checked={selectedTicketIds.includes(item.id)}
|
||
onCheckedChange={(checked) => toggleSelectTicket(item.id, Boolean(checked))}
|
||
aria-label={`选择工单 ${item.ticketNo}`}
|
||
/>
|
||
</TableCell>
|
||
<TableCell className="min-w-64">
|
||
<div className="space-y-1">
|
||
<div className="font-medium">{item.title}</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||
<span>{item.ticketNo}</span>
|
||
<span>{item.source || "manual"}</span>
|
||
{item.currentAssigneeId <= 0 && !isClosedStatus(item.status) ? (
|
||
<span className="rounded bg-amber-100 px-1.5 py-0.5 text-amber-700">
|
||
待分配
|
||
</span>
|
||
) : null}
|
||
{item.pendingReason && !isClosedStatus(item.status) ? (
|
||
<span className="rounded bg-muted px-1.5 py-0.5">{item.pendingReason}</span>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>{item.customer?.name || "未绑定客户"}</TableCell>
|
||
<TableCell>
|
||
{item.tags && item.tags.length > 0 ? (
|
||
<div className="flex flex-wrap gap-1">
|
||
{item.tags.map((tag) => (
|
||
<Badge key={tag.id} variant="outline">
|
||
{tag.name}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span className="text-muted-foreground">未打标签</span>
|
||
)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<TicketPriorityBadge priority={item.priority} priorityName={item.priorityName} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TicketStatusBadge status={item.status} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TicketSLABadge ticket={item} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="flex flex-wrap gap-1">
|
||
{quickView === "participating" || quickView === "collaboration" ? (
|
||
<Badge variant="outline">协作中</Badge>
|
||
) : null}
|
||
{quickView === "mentioned" || quickView === "collaboration" ? (
|
||
<Badge variant="outline" className="border-amber-300 bg-amber-50 text-amber-800">
|
||
提及我
|
||
</Badge>
|
||
) : null}
|
||
{item.currentAssigneeId === currentUserId ? (
|
||
<Badge variant="outline" className="border-blue-300 bg-blue-50 text-blue-800">
|
||
负责人
|
||
</Badge>
|
||
) : null}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>{item.currentAssigneeName || "未指派"}</TableCell>
|
||
<TableCell>{item.currentTeamName || "未分组"}</TableCell>
|
||
<TableCell>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
disabled={actionLoadingId === item.id}
|
||
onClick={() => void handleWatchToggle(item)}
|
||
>
|
||
<StarIcon
|
||
className={`size-4 ${item.watchedByMe ? "fill-current text-amber-500" : ""}`}
|
||
/>
|
||
{item.watchedByMe ? "已关注" : "关注"}
|
||
</Button>
|
||
</TableCell>
|
||
<TableCell>{item.updatedAt ? formatDateTime(item.updatedAt) : "—"}</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-2">
|
||
<Link href={`/tickets/detail?id=${item.id}`} target="_blank" rel="noreferrer">
|
||
<Button variant="outline" size="sm">
|
||
<ClipboardListIcon className="size-4" />
|
||
详情
|
||
</Button>
|
||
</Link>
|
||
<Button variant="ghost" size="sm" onClick={() => openAssignDialog(item)}>
|
||
<ArrowRightLeftIcon className="size-4" />
|
||
指派
|
||
</Button>
|
||
<Button variant="ghost" size="sm" onClick={() => openStatusDialog(item)}>
|
||
<SquarePenIcon className="size-4" />
|
||
状态
|
||
</Button>
|
||
{item.status === "closed" ? (
|
||
<Button variant="ghost" size="sm" onClick={() => openReopenDialog(item)}>
|
||
重开
|
||
</Button>
|
||
) : (
|
||
<Button variant="ghost" size="sm" onClick={() => openCloseDialog(item)}>
|
||
<CircleOffIcon className="size-4" />
|
||
关闭
|
||
</Button>
|
||
)}
|
||
<Button variant="ghost" size="sm" onClick={() => openEditDialog(item)}>
|
||
编辑
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
) : (
|
||
<TableRow>
|
||
<TableCell colSpan={13} className="h-32 text-center text-muted-foreground">
|
||
暂无符合当前筛选条件的工单
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
<ListPagination
|
||
page={result.page.page}
|
||
total={result.page.total}
|
||
limit={result.page.limit}
|
||
loading={loading}
|
||
onPageChange={(page) =>
|
||
setResult((current) => ({
|
||
...current,
|
||
page: { ...current.page, page },
|
||
}))
|
||
}
|
||
onLimitChange={(limit) =>
|
||
setResult((current) => ({
|
||
...current,
|
||
page: { ...current.page, page: 1, limit },
|
||
}))
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<EditDialog
|
||
open={dialogOpen}
|
||
saving={saving}
|
||
itemId={editingItemId}
|
||
onOpenChange={handleDialogOpenChange}
|
||
onSubmit={handleSubmit}
|
||
/>
|
||
<TicketAssignDialog
|
||
open={assignDialogOpen}
|
||
ticketId={actionTicket?.id ?? null}
|
||
ticketIds={actionTicket ? undefined : selectedTicketIds}
|
||
currentTeamId={actionTicket?.currentTeamId}
|
||
currentAssigneeId={actionTicket?.currentAssigneeId}
|
||
onOpenChange={(open) => {
|
||
setAssignDialogOpen(open)
|
||
if (!open) {
|
||
setActionTicket(null)
|
||
setSelectedTicketIds((current) => current)
|
||
}
|
||
}}
|
||
onSuccess={async () => {
|
||
setSelectedTicketIds([])
|
||
await refreshAll()
|
||
}}
|
||
/>
|
||
<TicketStatusDialog
|
||
open={statusDialogOpen}
|
||
ticketId={actionTicket?.id ?? null}
|
||
ticketIds={actionTicket ? undefined : selectedTicketIds}
|
||
currentStatus={actionTicket?.status}
|
||
onOpenChange={(open) => {
|
||
setStatusDialogOpen(open)
|
||
if (!open) {
|
||
setActionTicket(null)
|
||
}
|
||
}}
|
||
onSuccess={async () => {
|
||
setSelectedTicketIds([])
|
||
await refreshAll()
|
||
}}
|
||
/>
|
||
<TicketReasonDialog
|
||
open={closeDialogOpen}
|
||
mode="close"
|
||
ticketId={actionTicket?.id ?? null}
|
||
defaultReason={actionTicket?.closeReason || "处理完成"}
|
||
onOpenChange={(open) => {
|
||
setCloseDialogOpen(open)
|
||
if (!open) {
|
||
setActionTicket(null)
|
||
}
|
||
}}
|
||
onSuccess={refreshAll}
|
||
/>
|
||
<TicketReasonDialog
|
||
open={reopenDialogOpen}
|
||
mode="reopen"
|
||
ticketId={actionTicket?.id ?? null}
|
||
defaultReason="客户有新反馈"
|
||
onOpenChange={(open) => {
|
||
setReopenDialogOpen(open)
|
||
if (!open) {
|
||
setActionTicket(null)
|
||
}
|
||
}}
|
||
onSuccess={refreshAll}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|