274 lines
8.6 KiB
TypeScript
274 lines
8.6 KiB
TypeScript
import * as React from 'react'
|
||
import { ArrowRight, Plus } from 'lucide-react'
|
||
|
||
import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
|
||
import { AppEmptyState } from '@/components/app/AppEmptyState'
|
||
import { AppPageHeader } from '@/components/app/AppPageHeader'
|
||
import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
|
||
import { AppStatusBadge } from '@/components/app/AppStatusBadge'
|
||
import { Button } from '@/components/ui/button'
|
||
import {
|
||
Pagination,
|
||
PaginationContent,
|
||
PaginationItem,
|
||
PaginationLink,
|
||
PaginationNext,
|
||
PaginationPrevious
|
||
} from '@/components/ui/pagination'
|
||
import { Skeleton } from '@/components/ui/skeleton'
|
||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import { formatDateTime } from '@/lib/format'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
import { listTickets } from './api'
|
||
import { TicketFilterBar } from './TicketFilterBar'
|
||
import { TicketMetricCards } from './TicketMetricCards'
|
||
import type { Ticket, TicketListResponse, TicketListView } from './types'
|
||
|
||
const PAGE_SIZE = 20
|
||
|
||
const viewTabs: Array<{ value: TicketListView; label: string }> = [
|
||
{ value: 'all', label: '全部工单' },
|
||
{ value: 'assigned_to_me', label: '我的待办' },
|
||
{ value: 'created_by_me', label: '我创建的' },
|
||
{ value: 'high_priority', label: '高优先级' }
|
||
]
|
||
|
||
const columns: AppDataTableColumn<Ticket>[] = [
|
||
{
|
||
key: 'ticket_no',
|
||
header: '编号',
|
||
cell: (ticket) => <span className="font-medium text-foreground">{ticket.ticket_no}</span>
|
||
},
|
||
{
|
||
key: 'title',
|
||
header: '标题',
|
||
cell: (ticket) => (
|
||
<div className="min-w-[240px]">
|
||
<p className="line-clamp-1 font-medium text-foreground">{ticket.title}</p>
|
||
<p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
|
||
{ticket.requester?.display_name ? `请求人：${ticket.requester.display_name}` : ticket.environment || '暂无环境信息'}
|
||
</p>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
key: 'status',
|
||
header: '状态',
|
||
cell: (ticket) => <AppStatusBadge status={ticket.status} />
|
||
},
|
||
{
|
||
key: 'priority',
|
||
header: '优先级',
|
||
cell: (ticket) => <AppPriorityBadge priority={ticket.priority} />
|
||
},
|
||
{
|
||
key: 'related_system',
|
||
header: '关联系统',
|
||
cell: (ticket) => <span className="text-muted-foreground">{ticket.related_system || '-'}</span>
|
||
},
|
||
{
|
||
key: 'impact_scope',
|
||
header: '影响范围',
|
||
cell: (ticket) => <span className="text-muted-foreground">{ticket.impact_scope || '-'}</span>
|
||
},
|
||
{
|
||
key: 'assignee',
|
||
header: '处理人',
|
||
cell: (ticket) => <span className="text-muted-foreground">{ticket.assignee?.display_name || '未分派'}</span>
|
||
},
|
||
{
|
||
key: 'created_at',
|
||
header: '创建时间',
|
||
cell: (ticket) => <span className="text-muted-foreground">{formatDateTime(ticket.created_at)}</span>
|
||
},
|
||
{
|
||
key: 'actions',
|
||
header: '操作',
|
||
cell: (ticket) => (
|
||
<Button
|
||
variant="ghost"
|
||
className="gap-1"
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
window.location.hash = `/tickets/${ticket.id}`
|
||
}}
|
||
>
|
||
查看详情
|
||
<ArrowRight className="size-4" />
|
||
</Button>
|
||
)
|
||
}
|
||
]
|
||
|
||
export function TicketListPage() {
|
||
const [result, setResult] = React.useState<TicketListResponse>({
|
||
items: [],
|
||
page: 1,
|
||
page_size: PAGE_SIZE,
|
||
total: 0,
|
||
total_pages: 0
|
||
})
|
||
const [view, setView] = React.useState<TicketListView>('all')
|
||
const [status, setStatus] = React.useState('all')
|
||
const [priority, setPriority] = React.useState('all')
|
||
const [relatedSystem, setRelatedSystem] = React.useState('')
|
||
const [q, setQ] = React.useState('')
|
||
const [error, setError] = React.useState('')
|
||
const [loading, setLoading] = React.useState(true)
|
||
const [page, setPage] = React.useState(1)
|
||
|
||
React.useEffect(() => {
|
||
setLoading(true)
|
||
listTickets({
|
||
page,
|
||
page_size: PAGE_SIZE,
|
||
view,
|
||
status: status === 'all' ? '' : status,
|
||
priority: priority === 'all' ? '' : priority,
|
||
related_system: relatedSystem,
|
||
q
|
||
})
|
||
.then((response) => {
|
||
setResult(response)
|
||
setError('')
|
||
})
|
||
.catch((reason: unknown) => setError(reason instanceof Error ? reason.message : '加载失败'))
|
||
.finally(() => setLoading(false))
|
||
}, [page, priority, q, relatedSystem, status, view])
|
||
|
||
function resetFilters() {
|
||
setStatus('all')
|
||
setPriority('all')
|
||
setRelatedSystem('')
|
||
setQ('')
|
||
setPage(1)
|
||
}
|
||
|
||
function updateView(nextView: string) {
|
||
setView(nextView as TicketListView)
|
||
setPage(1)
|
||
}
|
||
|
||
function updateStatus(value: string) {
|
||
setStatus(value)
|
||
setPage(1)
|
||
}
|
||
|
||
function updatePriority(value: string) {
|
||
setPriority(value)
|
||
setPage(1)
|
||
}
|
||
|
||
function updateRelatedSystem(value: string) {
|
||
setRelatedSystem(value)
|
||
setPage(1)
|
||
}
|
||
|
||
function updateQuery(value: string) {
|
||
setQ(value)
|
||
setPage(1)
|
||
}
|
||
|
||
function goToPage(nextPage: number) {
|
||
const target = Math.min(Math.max(nextPage, 1), Math.max(result.total_pages, 1))
|
||
setPage(target)
|
||
}
|
||
|
||
return (
|
||
<main className="min-h-screen bg-background p-6 text-foreground">
|
||
<div className="mx-auto flex max-w-7xl flex-col gap-5">
|
||
<AppPageHeader
|
||
title="工单中心"
|
||
description="集中查看、筛选和处理企业技术支持工单。"
|
||
actions={
|
||
<Button onClick={() => (window.location.hash = '/tickets/new')}>
|
||
<Plus className="size-4" />
|
||
新建工单
|
||
</Button>
|
||
}
|
||
/>
|
||
|
||
<TicketMetricCards tickets={result.items} />
|
||
|
||
<Tabs value={view} onValueChange={updateView}>
|
||
<TabsList>
|
||
{viewTabs.map((tab) => (
|
||
<TabsTrigger key={tab.value} value={tab.value}>
|
||
{tab.label}
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
</Tabs>
|
||
|
||
<TicketFilterBar
|
||
q={q}
|
||
status={status}
|
||
priority={priority}
|
||
relatedSystem={relatedSystem}
|
||
onQChange={updateQuery}
|
||
onStatusChange={updateStatus}
|
||
onPriorityChange={updatePriority}
|
||
onRelatedSystemChange={updateRelatedSystem}
|
||
onReset={resetFilters}
|
||
/>
|
||
|
||
{error ? <AppEmptyState title="无法加载工单" description={error} /> : null}
|
||
{loading && !error ? (
|
||
<div className="grid gap-3 rounded-lg border border-border bg-surface p-4">
|
||
<Skeleton className="h-8 w-48" />
|
||
<Skeleton className="h-32 w-full" />
|
||
<Skeleton className="h-8 w-64" />
|
||
</div>
|
||
) : null}
|
||
{!error && !loading ? (
|
||
<AppDataTable
|
||
columns={columns}
|
||
rows={result.items}
|
||
getRowKey={(ticket) => ticket.id}
|
||
emptyTitle="暂无工单"
|
||
emptyDescription="调整筛选条件，或创建第一张工单后再查看。"
|
||
footer={
|
||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||
<p className="text-sm text-muted-foreground">
|
||
共 {result.total} 条，当前第 {result.page} / {Math.max(result.total_pages, 1)} 页
|
||
</p>
|
||
<Pagination className="mx-0 w-auto justify-start md:justify-end">
|
||
<PaginationContent>
|
||
<PaginationItem>
|
||
<PaginationPrevious
|
||
href="#"
|
||
className={cn(result.page <= 1 && 'pointer-events-none opacity-50')}
|
||
onClick={(event) => {
|
||
event.preventDefault()
|
||
goToPage(result.page - 1)
|
||
}}
|
||
/>
|
||
</PaginationItem>
|
||
<PaginationItem>
|
||
<PaginationLink href="#" isActive onClick={(event) => event.preventDefault()}>
|
||
{result.page}
|
||
</PaginationLink>
|
||
</PaginationItem>
|
||
<PaginationItem>
|
||
<PaginationNext
|
||
href="#"
|
||
className={cn(result.page >= result.total_pages && 'pointer-events-none opacity-50')}
|
||
onClick={(event) => {
|
||
event.preventDefault()
|
||
goToPage(result.page + 1)
|
||
}}
|
||
/>
|
||
</PaginationItem>
|
||
</PaginationContent>
|
||
</Pagination>
|
||
</div>
|
||
}
|
||
onRowClick={(ticket) => (window.location.hash = `/tickets/${ticket.id}`)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|