xiaozhang/guoyu

Fork 0

xiao12feng8 a0fb622e7f 重新编译配置

2025-12-06 20:11:36 +08:00

7.3 KiB

Raw Blame History

题目编辑自动保存功能说明

🎯 功能需求

问题场景

打开试卷的"题目管理"对话框（图2）
点击某个题目的"编辑"按钮
跳转到题目编辑页面（图1）
编辑题目后点击"保存"
旧流程：直接返回试卷管理列表，题目管理对话框没有保存
问题：需要再次打开题目管理，点击"保存"按钮才能保存所有题目

期望流程

编辑题目点击"保存"后
✅ 自动触发题目管理对话框的"保存"按钮
✅ 保存所有题目到数据库
✅ 自动更新试卷的题目数和总分

✅ 实现方案

方案说明

题目编辑保存后，设置标记 autoSaveQuestionList
返回到试卷管理页面
activated 钩子检测到标记
自动打开题目管理对话框
自动触发保存操作
保存后对话框保持打开状态（用户可以继续编辑其他题目）

修改的文件

1. questionEdit.vue（题目编辑页面）

修改位置： 保存成功后的逻辑

.then(() => {
  sessionStorage.removeItem('savedQuestion');
  // 保留 questionListForExam，让题目管理对话框能够保存整个列表
  sessionStorage.removeItem('pendingQuestionExamId');
  
  // 标记需要自动保存题目列表
  sessionStorage.setItem('autoSaveQuestionList', 'true');
  sessionStorage.setItem('lastSavedExamId', this.examId);
  
  this.$modal.msgSuccess("保存成功");
  this.$router.back();
})

2. index.vue（试卷管理页面）

修改1：activated钩子

activated() {
  // 从题目编辑页面返回时，自动保存题目列表
  if (sessionStorage.getItem('autoSaveQuestionList') === 'true') {
    sessionStorage.removeItem('autoSaveQuestionList');
    const lastExamId = sessionStorage.getItem('lastSavedExamId');
    
    if (lastExamId) {
      const examId = Number(lastExamId);
      const targetExam = this.examList.find(item => item.id === examId);
      
      if (targetExam) {
        // 打开题目管理对话框
        this.handleManageQuestions(targetExam);
        
        // 等待对话框打开后，自动触发保存
        this.$nextTick(() => {
          setTimeout(() => {
            if (this.questionDialog && this.questionList.length > 0) {
              // 传入false，保存后不关闭对话框
              this.handleSaveQuestions(false);
            }
          }, 500);
        });
      }
    }
  }
}

修改2：handleSaveQuestions方法

/**
 * 保存题目
 * @param autoClose 是否在保存成功后自动关闭对话框，默认true
 */
handleSaveQuestions(autoClose = true) {
  // ... 保存逻辑 ...
  
  .then(response => {
    // 更新题目列表
    this.currentExam = response.data || {};
    this.questionList = ...;
    
    // 根据autoClose参数决定是否关闭对话框
    if (autoClose) {
      this.questionDialog = false;
    }
    this.getList();
  })
}

🔄 完整流程

用户操作流程

1. 试卷管理页面
   ↓
2. 点击"题目管理"
   ↓
3. 题目管理对话框打开（显示所有题目）
   ↓
4. 点击某个题目的"编辑"按钮
   ↓
5. 跳转到题目编辑页面
   ↓
6. 修改题目内容、选项、答案、分数等
   ↓
7. 点击"保存"按钮
   ↓
8. 【自动】保存单个题目到后端
   ↓
9. 【自动】返回试卷管理页面
   ↓
10. 【自动】重新打开题目管理对话框
    ↓
11. 【自动】触发"保存"按钮
    ↓
12. 【自动】保存所有题目到数据库
    ↓
13. 【自动】更新试卷的题目数和总分
    ↓
14. 【完成】对话框保持打开，用户可以继续编辑其他题目

⚙️ 技术实现细节

关键技术点

SessionStorage标记
- autoSaveQuestionList: 标记需要自动保存
- lastSavedExamId: 记录最后保存的考试ID
activated生命周期钩子
- 页面激活时检测标记
- 自动执行保存操作
延迟执行
- 使用 $nextTick + setTimeout 确保对话框完全加载
- 延迟500ms避免过快执行导致数据未准备好
保存参数控制
- autoClose 参数控制是否自动关闭对话框
- 自动保存时传入 false，保持对话框打开

🧪 测试步骤

测试场景1：编辑题目后自动保存

打开一个试卷的"题目管理"
点击某个题目的"编辑"按钮
修改题目内容（如题干、选项、分数）
点击"保存"按钮
预期结果：
- ✅ 显示"保存成功"提示
- ✅ 返回试卷管理页面
- ✅ 题目管理对话框自动打开
- ✅ 显示"题目保存成功"提示
- ✅ 题目列表显示最新内容
- ✅ 对话框保持打开状态
- ✅ 试卷总分自动更新

测试场景2：修改题目分数后总分更新

试卷初始总分：20分（2道题，各10分）
编辑第一道题，修改分数为15分
保存题目
预期结果：
- ✅ 自动保存成功
- ✅ 试卷总分更新为25分（15+10）
- ✅ 题目数保持为2

测试场景3：新增题目后更新题目数

试卷初始题目数：2道题
在题目管理中新增一道题
编辑新题目，填写内容
保存题目
预期结果：
- ✅ 自动保存成功
- ✅ 试卷题目数更新为3
- ✅ 试卷总分自动更新

⚠️ 注意事项

1. 对话框打开延迟

自动保存会有约500ms的延迟
这是为了确保对话框完全加载
用户会看到对话框打开的动画

2. 保存后不关闭

手动点击"保存"按钮：保存后关闭对话框
自动触发保存：保存后保持对话框打开
这样用户可以继续编辑其他题目

3. 标记清理

保存成功后会清除 autoSaveQuestionList 标记
避免下次进入页面时误触发

4. 兼容性

旧的刷新逻辑（needRefreshList）保持不变
不影响其他页面的正常功能

🐛 可能的问题

问题1：对话框打开太快或太慢

原因： 延迟时间不合适 解决： 调整 setTimeout 的延迟时间（当前500ms）

问题2：保存失败

原因： 题目数据不完整或后端错误 解决：

检查题目数据是否完整
查看浏览器控制台和后端日志
确保后端 saveQuestions API 正常

问题3：总分没有更新

原因： 后端保存题目时没有更新考试信息 解决：

检查 StudyExamController.editQuestions 方法
确保保存题目后重新计算总分和题目数

📝 后续优化建议

优化1：无缝编辑

将题目编辑改为对话框形式
不需要跳转页面
体验更流畅

优化2：实时保存

题目编辑时自动保存草稿
不需要手动点击保存
防止数据丢失

优化3：批量编辑

支持同时编辑多个题目
一次性保存所有更改
提高编辑效率

✅ 验收标准

编辑题目保存后，自动触发题目管理对话框的保存
保存后对话框保持打开状态
试卷题目数自动更新
试卷总分自动更新
不影响其他功能的正常使用
没有出现错误提示
数据保存到数据库正确

7.3 KiB Raw Blame History Unescape Escape