73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import { AppField } from '@/components/app/AppField'
|
|
import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
|
|
import { AppStatusBadge } from '@/components/app/AppStatusBadge'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Separator } from '@/components/ui/separator'
|
|
|
|
import { getTicketCategoryLabel } from './ticketCategories'
|
|
import type { Ticket } from './types'
|
|
|
|
type TicketMetaPanelProps = {
|
|
ticket: Ticket
|
|
}
|
|
|
|
function displayUser(user: Ticket['assignee']) {
|
|
return user?.display_name || user?.username || '未设置'
|
|
}
|
|
|
|
export function TicketMetaPanel({ ticket }: TicketMetaPanelProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>工单属性</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-3">
|
|
<AppField label="当前状态">
|
|
<AppStatusBadge status={ticket.status} />
|
|
</AppField>
|
|
<AppField label="优先级">
|
|
<AppPriorityBadge priority={ticket.priority} />
|
|
</AppField>
|
|
<AppField label="问题分类">
|
|
<span className="text-sm text-foreground">{getTicketCategoryLabel(ticket.category_code)}</span>
|
|
</AppField>
|
|
<Separator />
|
|
<AppField label="提出人">
|
|
<span className="text-sm text-foreground">{ticket.submitter_name || '未填写'}</span>
|
|
</AppField>
|
|
<AppField label="提出机构">
|
|
<span className="text-sm text-foreground">{ticket.submitter_org || '未填写'}</span>
|
|
</AppField>
|
|
<AppField label="问题对象">
|
|
<span className="text-sm text-foreground">{ticket.problem_object || '未填写'}</span>
|
|
</AppField>
|
|
<Separator />
|
|
<AppField label="处理人">
|
|
<span className="text-sm text-foreground">{displayUser(ticket.assignee)}</span>
|
|
</AppField>
|
|
<AppField label="请求人">
|
|
<span className="text-sm text-foreground">{displayUser(ticket.requester)}</span>
|
|
</AppField>
|
|
<Separator />
|
|
<AppField label="关联系统">
|
|
<span className="text-sm text-foreground">{ticket.related_system || '未填写'}</span>
|
|
</AppField>
|
|
<AppField label="运行环境">
|
|
<span className="text-sm text-foreground">{ticket.environment || '未填写'}</span>
|
|
</AppField>
|
|
<AppField label="影响范围">
|
|
<span className="text-sm text-foreground">{ticket.impact_scope || '未填写'}</span>
|
|
</AppField>
|
|
<Separator />
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-xs font-medium text-muted-foreground">SLA</span>
|
|
<Badge variant="outline">后续接入</Badge>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|