281 lines
7.3 KiB
Markdown
281 lines
7.3 KiB
Markdown
# 题目编辑自动保存功能说明
|
||
|
||
## 🎯 **功能需求**
|
||
|
||
### **问题场景**
|
||
1. 打开试卷的"题目管理"对话框（图2）
|
||
2. 点击某个题目的"编辑"按钮
|
||
3. 跳转到题目编辑页面（图1）
|
||
4. 编辑题目后点击"保存"
|
||
5. **旧流程**：直接返回试卷管理列表，题目管理对话框没有保存
|
||
6. **问题**：需要再次打开题目管理，点击"保存"按钮才能保存所有题目
|
||
|
||
### **期望流程**
|
||
1. 编辑题目点击"保存"后
|
||
2. ✅ 自动触发题目管理对话框的"保存"按钮
|
||
3. ✅ 保存所有题目到数据库
|
||
4. ✅ 自动更新试卷的题目数和总分
|
||
|
||
---
|
||
|
||
## ✅ **实现方案**
|
||
|
||
### **方案说明**
|
||
1. 题目编辑保存后，设置标记 `autoSaveQuestionList`
|
||
2. 返回到试卷管理页面
|
||
3. `activated` 钩子检测到标记
|
||
4. 自动打开题目管理对话框
|
||
5. 自动触发保存操作
|
||
6. 保存后对话框保持打开状态（用户可以继续编辑其他题目）
|
||
|
||
### **修改的文件**
|
||
|
||
#### **1. questionEdit.vue（题目编辑页面）**
|
||
|
||
**修改位置：** 保存成功后的逻辑
|
||
|
||
```javascript
|
||
.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钩子**
|
||
|
||
```javascript
|
||
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方法**
|
||
|
||
```javascript
|
||
/**
|
||
* 保存题目
|
||
* @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. 【完成】对话框保持打开，用户可以继续编辑其他题目
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ **技术实现细节**
|
||
|
||
### **关键技术点**
|
||
|
||
1. **SessionStorage标记**
|
||
- `autoSaveQuestionList`: 标记需要自动保存
|
||
- `lastSavedExamId`: 记录最后保存的考试ID
|
||
|
||
2. **activated生命周期钩子**
|
||
- 页面激活时检测标记
|
||
- 自动执行保存操作
|
||
|
||
3. **延迟执行**
|
||
- 使用 `$nextTick` + `setTimeout` 确保对话框完全加载
|
||
- 延迟500ms避免过快执行导致数据未准备好
|
||
|
||
4. **保存参数控制**
|
||
- `autoClose` 参数控制是否自动关闭对话框
|
||
- 自动保存时传入 `false`，保持对话框打开
|
||
|
||
---
|
||
|
||
## 🧪 **测试步骤**
|
||
|
||
### **测试场景1：编辑题目后自动保存**
|
||
|
||
1. 打开一个试卷的"题目管理"
|
||
2. 点击某个题目的"编辑"按钮
|
||
3. 修改题目内容（如题干、选项、分数）
|
||
4. 点击"保存"按钮
|
||
5. **预期结果：**
|
||
- ✅ 显示"保存成功"提示
|
||
- ✅ 返回试卷管理页面
|
||
- ✅ 题目管理对话框自动打开
|
||
- ✅ 显示"题目保存成功"提示
|
||
- ✅ 题目列表显示最新内容
|
||
- ✅ 对话框保持打开状态
|
||
- ✅ 试卷总分自动更新
|
||
|
||
### **测试场景2：修改题目分数后总分更新**
|
||
|
||
1. 试卷初始总分：20分（2道题，各10分）
|
||
2. 编辑第一道题，修改分数为15分
|
||
3. 保存题目
|
||
4. **预期结果：**
|
||
- ✅ 自动保存成功
|
||
- ✅ 试卷总分更新为25分（15+10）
|
||
- ✅ 题目数保持为2
|
||
|
||
### **测试场景3：新增题目后更新题目数**
|
||
|
||
1. 试卷初始题目数：2道题
|
||
2. 在题目管理中新增一道题
|
||
3. 编辑新题目，填写内容
|
||
4. 保存题目
|
||
5. **预期结果：**
|
||
- ✅ 自动保存成功
|
||
- ✅ 试卷题目数更新为3
|
||
- ✅ 试卷总分自动更新
|
||
|
||
---
|
||
|
||
## ⚠️ **注意事项**
|
||
|
||
### **1. 对话框打开延迟**
|
||
- 自动保存会有约500ms的延迟
|
||
- 这是为了确保对话框完全加载
|
||
- 用户会看到对话框打开的动画
|
||
|
||
### **2. 保存后不关闭**
|
||
- 手动点击"保存"按钮：保存后关闭对话框
|
||
- 自动触发保存：保存后保持对话框打开
|
||
- 这样用户可以继续编辑其他题目
|
||
|
||
### **3. 标记清理**
|
||
- 保存成功后会清除 `autoSaveQuestionList` 标记
|
||
- 避免下次进入页面时误触发
|
||
|
||
### **4. 兼容性**
|
||
- 旧的刷新逻辑（`needRefreshList`）保持不变
|
||
- 不影响其他页面的正常功能
|
||
|
||
---
|
||
|
||
## 🐛 **可能的问题**
|
||
|
||
### **问题1：对话框打开太快或太慢**
|
||
**原因：** 延迟时间不合适
|
||
**解决：** 调整 `setTimeout` 的延迟时间（当前500ms）
|
||
|
||
### **问题2：保存失败**
|
||
**原因：** 题目数据不完整或后端错误
|
||
**解决：**
|
||
- 检查题目数据是否完整
|
||
- 查看浏览器控制台和后端日志
|
||
- 确保后端 `saveQuestions` API 正常
|
||
|
||
### **问题3：总分没有更新**
|
||
**原因：** 后端保存题目时没有更新考试信息
|
||
**解决：**
|
||
- 检查 `StudyExamController.editQuestions` 方法
|
||
- 确保保存题目后重新计算总分和题目数
|
||
|
||
---
|
||
|
||
## 📝 **后续优化建议**
|
||
|
||
### **优化1：无缝编辑**
|
||
- 将题目编辑改为对话框形式
|
||
- 不需要跳转页面
|
||
- 体验更流畅
|
||
|
||
### **优化2：实时保存**
|
||
- 题目编辑时自动保存草稿
|
||
- 不需要手动点击保存
|
||
- 防止数据丢失
|
||
|
||
### **优化3：批量编辑**
|
||
- 支持同时编辑多个题目
|
||
- 一次性保存所有更改
|
||
- 提高编辑效率
|
||
|
||
---
|
||
|
||
## ✅ **验收标准**
|
||
|
||
- [ ] 编辑题目保存后，自动触发题目管理对话框的保存
|
||
- [ ] 保存后对话框保持打开状态
|
||
- [ ] 试卷题目数自动更新
|
||
- [ ] 试卷总分自动更新
|
||
- [ ] 不影响其他功能的正常使用
|
||
- [ ] 没有出现错误提示
|
||
- [ ] 数据保存到数据库正确
|