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>
|
|
)
|
|
}
|