昨天的成就
- 完成评估反馈列表页面
- 实现搜索、筛选和分页功能
- 创建评估反馈详情页面
- 创建评估反馈表单组件
- 实现问题记录的展示和编辑功能
- 耗时 ：3小时 | 剩余时间 ：4天
遇到的困难 - 表单验证逻辑复杂
- 问题记录的动态添加/删除
- 严重程度的可视化展示
今天的任务
- 开始应急预案列表页面开发
- 实现应急预案的搜索和筛选
- 创建应急预案表单组件
代码签入
// app/evaluations/[id]/page.tsx
const EvaluationDetailPage = ({ params }: { params: {
id: string } }) => {
const [evaluation, setEvaluation] =
useState<EvaluationDetail | null>(null);
const [problems, setProblems] = useState<Problem[]>
([]); useEffect(() => {
fetch(`/api/evaluations/${params.id}`)
.then(res => res.json())
.then(data => {
setEvaluation(data.data);
setProblems(data.data.problems || []);
});
}, [params.id]); const handleAddProblem = () => {
setProblems(prev => [...prev, { id: Date.now(),
description: '', location: '', severity:
'medium' }]);
}; const handleUpdateProblem = (index: number, field:
string, value: string) => {
setProblems(prev => prev.map((p, i) => i === index ?
{ ...p, [field]: value } : p));
}; const handleRemoveProblem = (index: number) => {
setProblems(prev => prev.filter((_, i) => i !==
index));
}; return (
<div className="space-y-6">
<div className="bg-card rounded-lg p-6">
<div className="flex justify-between items-start
mb-4">
<div>
<h1 className="text-2xl font-bold">
{evaluation?.plan_name}</h1>
<p className="text-muted-foreground mt-1">演
练评估详情</p>
</div>
<Badge variant={getStatusVariant(evaluation?.
status || '')}>
{getStatusLabel(evaluation?.status || '')}
</Badge>
</div>
<div className="space-y-4">
<div>
<Label>问题描述</Label>
<p className="mt-1 text-sm">{evaluation?.
problem_description}</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label>严重程度</Label>
<Badge className="mt-1" variant=
{getSeverityVariant(evaluation?.
severity || '')}>
{getSeverityLabel(evaluation?.
severity || '')}
</Badge>
</div>
<div>
<Label>创建时间</Label>
<p className="mt-1 text-sm">{formatDate
(evaluation?.created_at)}</p>
</div>
</div>
</div>
</div> <div className="bg-card rounded-lg p-6">
<div className="flex justify-between
items-center mb-4">
<h2 className="text-lg font-semibold">问题记录</
h2>
<Button size="sm" onClick={handleAddProblem}>
<Plus className="w-4 h-4" /> 添加问题
</Button>
</div>
<div className="space-y-3">
{problems.map((problem, index) => (
<div key={problem.id} className="flex gap-4
p-4 bg-muted/50 rounded-lg">
<div className="flex-1 space-y-2">
<Input
placeholder="问题描述"
value={problem.description}
onChange={(e) => handleUpdateProblem
(index, 'description', e.target.value)}
/>
<div className="grid grid-cols-2 gap-2">
<Input
placeholder="位置"
value={problem.location}
onChange={(e) => handleUpdateProblem
(index, 'location', e.target.value)}
/>
<Select value={problem.severity}
onChange={(value) =>
handleUpdateProblem(index, 'severity',
value)}>
<SelectTrigger><SelectValue /></
SelectTrigger>
<SelectContent>
<SelectItem value="low">低</
SelectItem>
<SelectItem value="medium">中</
SelectItem>
<SelectItem value="high">高</
SelectItem>
<SelectItem value="critical">严重</
SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Button variant="ghost" size="icon"
onClick={() => handleRemoveProblem(index)}>
<Trash2 className="w-4 h-4" />
</Button>
</div>
))}
</div>
</div>
</div>
);
};