|
|
@@ -29,14 +29,18 @@
|
|
|
<div class="nav_group" v-for="group in questionGroups" :key="group.type">
|
|
|
<div class="group_name">{{ group.name }}</div>
|
|
|
<div class="num_grid">
|
|
|
- <!-- 序号仅展示作答进度,不支持点击跳题,只能按顺序逐题作答 -->
|
|
|
- <span v-for="item in group.list" :key="item.id" class="num_btn" :class="numClass(item)">
|
|
|
+ <button
|
|
|
+ v-for="item in group.list"
|
|
|
+ :key="item.id"
|
|
|
+ type="button"
|
|
|
+ class="num_btn"
|
|
|
+ :class="numClass(item)"
|
|
|
+ @click="selectQuestion(item.index)">
|
|
|
{{ item.index + 1 }}
|
|
|
- </span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 右侧题目:上方滚动题干,下方作答区不随题干滚动 -->
|
|
|
<div class="question_panel" v-if="currentQuestion">
|
|
|
<div class="question_scroll">
|
|
|
@@ -387,19 +391,37 @@ export default {
|
|
|
done: answered && item.index !== this.currentIndex,
|
|
|
};
|
|
|
},
|
|
|
- // 上一题
|
|
|
+ // 切题:当前题有作答才保存,没作答或为空则直接切换、不调接口
|
|
|
+ selectQuestion(index) {
|
|
|
+ if (index === this.currentIndex) return;
|
|
|
+ this.goToQuestion(index);
|
|
|
+ },
|
|
|
prevQuestion() {
|
|
|
if (this.currentIndex <= 0) return;
|
|
|
- this.currentIndex -= 1;
|
|
|
- this.persistState();
|
|
|
+ this.goToQuestion(this.currentIndex - 1);
|
|
|
},
|
|
|
- // 下一题先校验并保存,最后一题不走这里
|
|
|
nextQuestion() {
|
|
|
if (this.currentIndex >= this.questions.length - 1) return;
|
|
|
+ this.goToQuestion(this.currentIndex + 1);
|
|
|
+ },
|
|
|
+ goToQuestion(index) {
|
|
|
+ if (index === this.currentIndex) return;
|
|
|
+ if (this.uploading) {
|
|
|
+ this.$message.warning('图片正在上传,请稍候');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const jump = () => {
|
|
|
+ this.currentIndex = index;
|
|
|
+ this.persistState();
|
|
|
+ };
|
|
|
+ const question = this.currentQuestion;
|
|
|
+ if (!question || !this.isAnswered(question.id)) {
|
|
|
+ jump();
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.saveCurrentAnswer(0).then(ok => {
|
|
|
if (!ok) return;
|
|
|
- this.currentIndex += 1;
|
|
|
- this.persistState();
|
|
|
+ jump();
|
|
|
});
|
|
|
},
|
|
|
// 选择题不可拍照;解答题达到上限或上传中也不可再选
|
|
|
@@ -492,17 +514,13 @@ export default {
|
|
|
closePhotoPreview() {
|
|
|
this.imgVisible = false;
|
|
|
},
|
|
|
- // 当前题未作答时提示题号;已作答则保存。最后一题 commitFlag 为 1
|
|
|
+ // 保存当前题;空作答不走这里
|
|
|
saveCurrentAnswer(commitFlag) {
|
|
|
const question = this.currentQuestion;
|
|
|
if (!question || this.saving || this.uploading) {
|
|
|
if (this.uploading) this.$message.warning('图片正在上传,请稍候');
|
|
|
return Promise.resolve(false);
|
|
|
}
|
|
|
- if (!this.isAnswered(question.id)) {
|
|
|
- this.$message.warning(`第${question.index + 1}题没有上传答案,请作答`);
|
|
|
- return Promise.resolve(false);
|
|
|
- }
|
|
|
const isChoice = question.type === 'single';
|
|
|
const payload = {
|
|
|
homeWorkId: this.homework && this.homework.homeWorkId,
|
|
|
@@ -530,8 +548,22 @@ export default {
|
|
|
this.saving = false;
|
|
|
});
|
|
|
},
|
|
|
- // 最后一题提交
|
|
|
+ // 提交时检查全部题目,有未作答则提示并跳到第一道未作答;全部作答完再提交
|
|
|
submitAnswer() {
|
|
|
+ if (this.uploading) {
|
|
|
+ this.$message.warning('图片正在上传,请稍候');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const unanswered = this.questions
|
|
|
+ .map((item, index) => ({ ...item, index }))
|
|
|
+ .filter(item => !this.isAnswered(item.id));
|
|
|
+ if (unanswered.length) {
|
|
|
+ const nums = unanswered.map(item => item.index + 1).join('、');
|
|
|
+ this.$message.warning(`第${nums}题没有上传答案,请作答`);
|
|
|
+ this.currentIndex = unanswered[0].index;
|
|
|
+ this.persistState();
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.saveCurrentAnswer(1).then(ok => {
|
|
|
if (!ok) return;
|
|
|
this.persistState();
|
|
|
@@ -683,7 +715,7 @@ export default {
|
|
|
grid-template-columns: repeat(5, 32px);
|
|
|
gap: 15px;
|
|
|
|
|
|
- /* 未作答蓝框,已作答绿框,当前题蓝底白字;仅展示进度,不可点击跳题 */
|
|
|
+ /* 未作答蓝框,已作答绿框,当前题蓝底白字;点击可跳题 */
|
|
|
.num_btn {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
@@ -697,7 +729,7 @@ export default {
|
|
|
background: #fff;
|
|
|
color: #2E64FA;
|
|
|
font-size: 14px;
|
|
|
- cursor: default;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
&.done {
|
|
|
border-color: #3BA272;
|
|
|
@@ -870,10 +902,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- :deep(.el-checkbox__input.is-checked .el-checkbox__inner),
|
|
|
:deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: #2E64FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
|
|
background-color: #2E64FA;
|
|
|
- box-shadow: none;
|
|
|
border-color: #2E64FA;
|
|
|
}
|
|
|
|