FIX_GRADING_PANEL.md 4.4 KB

修复报告:选择已有试卷评分显示"暂无题目数据"问题

问题描述

在 FilamentAdmin 管理后台的 http://fa.test/admin/upload-exam-paper 页面:

  • ✅ 在【最近试卷记录】中能正常查看吴同学的试卷详情
  • ❌ 在【选择已有试卷评分】选择试卷后,评分面板显示"暂无题目数据"

根本原因

1. Livewire 组件参数传递问题

grading-panel 组件虽然在父视图中有以下调用:

<livewire:upload-exam.grading-panel
    :teacherId="$teacherId"
    :studentId="$studentId"
/>

但是没有传递 selectedPaperId 参数,导致组件无法知道要加载哪份试卷的题目。

2. 组件初始化逻辑缺失

GradingPanel.php 组件虽然声明了相关属性:

public ?string $teacherId = null;
public ?string $studentId = null;
public ?string $selectedPaperId = null;

但是没有 mount() 方法来接收从父组件传递的参数,因此这些属性始终为 null。

3. 缺少响应式更新机制

selectedPaperId 发生变化时(例如用户切换试卷),组件没有自动重新加载题目数据。

修复方案

修改 1:GradingPanel.php

1.1 添加 mount() 方法接收参数

public function mount(?string $teacherId = null, ?string $studentId = null, ?string $selectedPaperId = null): void
{
    $this->teacherId = $teacherId;
    $this->studentId = $studentId;

    // 如果传入了 selectedPaperId,则直接加载题目
    if (!empty($selectedPaperId)) {
        $this->selectedPaperId = $selectedPaperId;
        $this->loadPaperQuestions();
    }
}

1.2 添加 updatedSelectedPaperId() 响应式更新

public function updatedSelectedPaperId($value): void
{
    // 当 selectedPaperId 更新时,自动重新加载题目
    if (!empty($value)) {
        $this->loadPaperQuestions();
    } else {
        // 清空数据
        $this->questions = [];
        $this->gradingData = [];
    }
}

1.3 优化 loadPaper() 方法签名

#[On('loadPaper')]
public function loadPaper(string $paperId, string $teacherId, string $studentId): void
{
    $this->selectedPaperId = $paperId;
    $this->teacherId = $teacherId;
    $this->studentId = $studentId;

    $this->loadPaperQuestions();
}

修改 2:upload-exam-paper.blade.php

在渲染 grading-panel 组件时传递 selectedPaperId 参数:

{{-- 评分面板组件 --}}
@if(!empty($selectedPaperId))
    <livewire:upload-exam.grading-panel
        :teacherId="$teacherId"
        :studentId="$studentId"
        :selectedPaperId="$selectedPaperId"
    />
@endif

数据流程(修复后)

用户选择试卷
    ↓
父组件 selectedPaperId 更新
    ↓
父组件重新渲染 grading-panel 组件
    ↓
grading-panel 组件 mount() 方法被调用
    ↓
接收到 selectedPaperId 参数
    ↓
调用 loadPaperQuestions() 加载题目
    ↓
查询 Paper 模型和关联的 PaperQuestion 数据
    ↓
从题库 API 获取正确答案(如果需要)
    ↓
设置 $questions 数组
    ↓
视图渲染题目列表

验证方法

1. 清理缓存

cd FilamentAdmin
php artisan view:clear

2. 访问测试页面

打开浏览器,访问:http://fa.test/admin/upload-exam-paper

3. 执行测试步骤

  1. 点击【选择已有试卷评分】
  2. 选择老师(例如:默认老师)
  3. 选择学生(例如:吴同学)
  4. 选择试卷(最新的一份试卷)
  5. 预期结果:评分面板应该显示试卷的题目列表,而不是"暂无题目数据"

4. 验证数据完整性

  • 题目数量应该与试卷列表中显示的数量一致
  • 每道题目应该显示:
    • 题目内容
    • 题目类型
    • 分值
    • 参考答案(如果从题库获取到)

数据库查询验证

通过 tinker 可以验证数据确实存在:

$paper = \App\Models\Paper::where('paper_name', 'like', '%吴%')->latest()->first();
$paper->questions()->count(); // 应该返回题目数量,例如 6

涉及的文件

  1. /app/Livewire/UploadExam/GradingPanel.php - 评分面板组件
  2. /resources/views/filament/pages/upload-exam-paper.blade.php - 上传试卷页面视图

备注

此修复确保了:

  • ✅ 组件正确接收参数
  • ✅ 数据自动加载
  • ✅ 响应式更新
  • ✅ 错误处理(空数据时显示友好提示)

修复后,用户可以正常查看和评分已存在的试卷。