From 4a14d5a8773b312999ab53c90f3bf15580b1cd2d Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期五, 28 六月 2024 11:35:16 +0800 Subject: [PATCH] 阅卷组件 --- src/views/exam/exam/components/MarkPaperShow.vue | 148 ++++++++++++++++ src/api/exam.js | 2 src/views/exam/exam/MarkPaperDetail.vue | 353 +------------------------------------- 3 files changed, 163 insertions(+), 340 deletions(-) diff --git a/src/api/exam.js b/src/api/exam.js index 6a10b09..b49c4d0 100644 --- a/src/api/exam.js +++ b/src/api/exam.js @@ -71,7 +71,7 @@ // 鏌ユ壘瀛︾敓鐨勭瓟鍗� export const getStudentExam = (examId, userId) => { return axios({ - url: '/api/admin/exam/' + examId + '/' + userId, + url: '/api/admin/exam/mark/paper/' + examId + '/' + userId, method: 'GET' }) } diff --git a/src/views/exam/exam/MarkPaperDetail.vue b/src/views/exam/exam/MarkPaperDetail.vue index bedd2ab..4c2d105 100644 --- a/src/views/exam/exam/MarkPaperDetail.vue +++ b/src/views/exam/exam/MarkPaperDetail.vue @@ -6,39 +6,39 @@ <el-row> <el-col class="info"> <span class="exam-info">瀛﹀憳濮撳悕锛�</span> - <span class="exam-info">{{ userName }}</span> + <span class="exam-info">{{ form.userName }}</span> </el-col> </el-row> <el-row> <el-col class="info"> <span class="exam-info">浜ゅ嵎鏃堕棿锛�</span> - <span class="exam-info">{{ examInfo.updateTime }}</span> + <span class="exam-info">{{ form.updateTime }}</span> </el-col> </el-row> <el-row> <el-col class="info"> <span class="exam-info">瀹屾垚鑰楁椂锛�</span> - <span class="exam-info">{{ examInfo.doTime }}</span> + <span class="exam-info">{{ form.doTime }}</span> </el-col> </el-row> <el-row> <el-col class="info"> <span class="exam-info">寰楀垎锛�</span> - <span class="exam-info">{{ 30 + ' / ' + 70 }}</span> + <span class="exam-info">{{ form.score + ' / ' + form.totalScore }}</span> </el-col> </el-row> <el-divider></el-divider> <el-row class="do-exam-title"> <el-col :span="24"> - <span :key="item.itemOrder" v-for="item in answer.answerItems"> - <el-tag :type="questionDoRightTag(item.doRight)" class="do-exam-title-tag" + <span :key="item.itemOrder" v-for="item in form.answers"> + <el-tag :type="questionDoRightTag(item.right)" class="do-exam-title-tag" @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag> </span> </el-col> </el-row> <el-divider></el-divider> <div style="text-align: center"> - <el-button type="primary" style="width: 120px;height: 35px" @click="submit">鎻愪氦鎵规敼</el-button> + <el-button type="primary" style="width: 120px;height: 35px" @click="submit">鎻愪氦鎵规敼</el-button> </div> </el-card> </div> @@ -46,12 +46,11 @@ <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px"> <el-row :key="index" v-for="(titleItem, index) in form.titleItems"> <h3>{{ titleItem.name }}</h3> - <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0"> + <el-card class="exampaper-item-box" v-if="titleItem.questionList.length !== 0"> <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'" - v-for="questionItem in titleItem.questionItems" class="exam-question-item" + v-for="questionItem in titleItem.questionList" class="exam-question-item" label-width="50px" :id="'question-' + questionItem.itemOrder"> - <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem" - :answer="answer.answerItems[questionItem.itemOrder - 1]"/> + <MarkPaperShow :qType="questionItem.questionType" :question="questionItem"/> </el-form-item> </el-card> </el-row> @@ -62,350 +61,26 @@ <script> import { getStudentExam } from '@/api/exam' -import QuestionAnswerShow from '@/views/answer/components/QuestionAnswerShow' -import examPaperAnswerApi from '@/api/examPaperAnswer' +import MarkPaperShow from '@/views/exam/exam/components/MarkPaperShow' import { mapGetters, mapState } from 'vuex' export default { name: 'MarkPaperDetail', - components: { QuestionAnswerShow }, + components: { MarkPaperShow }, mounted () { - this.examInfo.examId = this.$route.query.examId - this.examInfo.examName = this.$route.query.examName - this.userId = this.$route.query.userId - examPaperAnswerApi.read(1).then(re => { - re = { - 'code': 1, 'message': '鎴愬姛', 'data': { - 'paper': { - 'id': 30, - 'paperType': 7, - 'score': '15', - 'classes': null, - 'name': '杩欐槸涓�涓祴璇曡瘯鍗�', - 'suggestTime': 12, - 'limitDateTime': null, - 'titleItems': [{ - 'name': '鍗曢�夐', - 'questionItems': [{ - 'id': 25, - 'questionType': 1, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '鐧芥ゼ姊�', - 'score': null, - 'itemUuid': null - }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'D', - 'content': '缁挎ゼ姊�', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': null, - 'correct': 'A', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 1, - 'knowledgeIdList': [8, 9] - }, { - 'id': 30, - 'questionType': 1, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '鐧芥ゼ姊�', - 'score': null, - 'itemUuid': null - }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'D', - 'content': '缁挎ゼ姊�', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': null, - 'correct': 'A', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 2, - 'knowledgeIdList': [8, 9] - }] - }, { - 'name': '澶氶�夐', - 'questionItems': [{ - 'id': 26, - 'questionType': 2, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '鐧芥ゼ姊�', - 'score': null, - 'itemUuid': null - }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'D', - 'content': '缁挎ゼ姊�', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': ['A', 'C'], - 'correct': 'A,C', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 3, - 'knowledgeIdList': [8, 9] - }, { - 'id': 31, - 'questionType': 2, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '鐧芥ゼ姊�', - 'score': null, - 'itemUuid': null - }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, { - 'prefix': 'D', - 'content': '缁挎ゼ姊�', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': ['A', 'C'], - 'correct': 'A,C', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 4, - 'knowledgeIdList': [8, 9] - }] - }, { - 'name': '鍒ゆ柇棰�', - 'questionItems': [{ - 'id': 27, - 'questionType': 3, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '姝g‘', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '閿欒', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': null, - 'correct': 'A', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 5, - 'knowledgeIdList': [8, 9] - }, { - 'id': 32, - 'questionType': 3, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧', - 'gradeLevel': 1, - 'items': [{ 'prefix': 'A', 'content': '姝g‘', 'score': null, 'itemUuid': null }, { - 'prefix': 'B', - 'content': '閿欒', - 'score': null, - 'itemUuid': null - }], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': null, - 'correct': 'A', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 6, - 'knowledgeIdList': [8, 9] - }] - }, { - 'name': '濉┖棰�', - 'questionItems': [{ - 'id': 2, - 'questionType': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁', - 'gradeLevel': 1, - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correct': null, - 'correctArray': '绾㈡ゼ姊�,鐧芥ゼ姊�,闈掓ゼ姊�,缁挎ゼ姊�', - 'score': '10', - 'difficult': 3, - 'itemOrder': 7, - 'knowledgeIdList': [8, 9], - 'items': [ - { prefix: '1', content: '绾㈡ゼ姊�' }, - { prefix: '2', content: '鐧芥ゼ姊�' }, - { prefix: '3', content: '闈掓ゼ姊�' }, - { prefix: '4', content: '缁挎ゼ姊�' } - ] - } - ] - }, { - 'name': '璇煶棰�', - 'questionItems': [{ - 'id': 55, - 'questionType': 1, - 'title': '鍚煶棰戝洖绛斿嚭灏忔槑浠婂ぉ鍚冪殑浠�涔�', - 'items': [ - { 'prefix': 'A', 'content': '鐣寗', 'score': null, 'itemUuid': null }, - { 'prefix': 'B', 'content': '鐧借彍', 'score': null, 'itemUuid': null }, - { 'prefix': 'C', 'content': '棣欒晧', 'score': null, 'itemUuid': null }, - { 'prefix': 'D', 'content': '鑿犺悵', 'score': null, 'itemUuid': null } - ], - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correctArray': null, - 'correct': 'A', - 'score': '2.5', - 'difficult': 3, - 'itemOrder': 8, - 'knowledgeIdList': [8, 9] - }] - }, { - 'name': '绠�绛旈', - 'questionItems': [{ - 'id': 1, - 'questionType': 5, - 'subjectId': 4, - 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺', - 'gradeLevel': 1, - 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽', - 'correct': '绾㈡ゼ姊︺�佽タ娓歌銆佹按娴掍紶銆佷笁鍥芥紨涔�', - 'score': '10', - 'difficult': 3, - 'itemOrder': 9, - 'knowledgeIdList': [8, 9] - } - ] - }], - }, - 'answer': { - 'id': 9, - 'doTime': 26, - 'score': '100', - 'createUser': null, - 'answerItems': [{ - 'id': 25, - 'questionId': 25, - 'doRight': true, - 'content': 'A', - 'itemOrder': 1, - 'contentArray': null, - 'score': '2.5', - 'questionScore': '2.5' - }, { - 'id': 26, - 'questionId': 30, - 'doRight': false, - 'content': 'C', - 'itemOrder': 2, - 'contentArray': null, - 'score': '0', - 'questionScore': '2.5' - }, { - 'id': 27, - 'questionId': 26, - 'doRight': false, - 'content': '', - 'itemOrder': 3, - 'contentArray': [''], - 'score': '0', - 'questionScore': '2.5' - }, { - 'id': 28, - 'questionId': 31, - 'doRight': false, - 'content': 'C,D', - 'itemOrder': 4, - 'contentArray': ['C', 'D'], - 'score': '0', - 'questionScore': '2.5' - }, { - 'id': 29, - 'questionId': 27, - 'doRight': true, - 'content': 'A', - 'itemOrder': 5, - 'contentArray': null, - 'score': '2.5', - 'questionScore': '2.5' - }, { - 'id': 30, - 'questionId': 32, - 'doRight': true, - 'content': 'A', - 'itemOrder': 6, - 'contentArray': null, - 'score': '2.5', - 'questionScore': '2.5' - }, { - 'id': 33, - 'questionId': 2, - 'doRight': null, - 'content': 'A', - 'itemOrder': 7, - 'contentArray': ['绾㈤棬姊�', '涓夊浗婕旂粠', '姘村6杞�'], - 'score': '2.5', - 'questionScore': '2.5' - }, { - 'id': 25, - 'questionId': 55, - 'doRight': true, - 'content': 'A', - 'itemOrder': 8, - 'contentArray': null, - 'score': '2.5', - 'questionScore': '2.5' - }, { - 'id': 31, - 'questionId': 1, - 'doRight': null, - 'content': '绾㈡ゼ姊�.......', - 'itemOrder': 9, - 'questionScore': '10' - }], - 'doTimeStr': '26绉�' - } - } - } - this.form = re.data.paper - this.answer = re.data.answer + getStudentExam(this.$route.query.examId, this.$route.query.userId).then(re => { + this.form = re.data.data this.formLoading = false }) - // if (this.examInfo.examId && this.userId) { - // this.getStudentPaper() - // } }, data () { return { paperQuestionList: [], form: {}, formLoading: false, - answer: { - id: null, - score: 0, - doTime: 0, - answerItems: [], - doRight: false - }, userId: null, userName: '寮犱笁', questionLoading: false, - examInfo: { - examId: null, - examName: '', - doTime: '119鍒�40绉�', - updateTime: '2024-06-20 15:59:40', - paperQuestionList: [] - } } }, methods: { diff --git a/src/views/exam/exam/components/MarkPaperShow.vue b/src/views/exam/exam/components/MarkPaperShow.vue new file mode 100644 index 0000000..456ec64 --- /dev/null +++ b/src/views/exam/exam/components/MarkPaperShow.vue @@ -0,0 +1,148 @@ +<template> + <div v-loading="qLoading" style="line-height:1.8"> + <div + v-if="qType == 1 || qType == 2 || qType == 3 || qType == 4 || qType == 5 || qType == 6 || qType == 7 || qType == 8"> + <!-- 閫夋嫨鎴栬闊� --> + <div v-if="qType == 1 || qType == 6"> + <div class="q-title" v-html="question.title"/> + <div class="q-content"> + <el-radio-group v-model="question.answer"> + <el-radio v-for="item in question.questionItemList" :key="item.prefix" :label="item.prefix"> + <span class="question-prefix">{{ item.prefix }}.</span> + <span v-html="item.content" class="q-item-span-content"></span> + </el-radio> + </el-radio-group> + </div> + </div> + <!-- 澶氶�� --> + <div v-else-if="qType == 2"> + <div class="q-title" v-html="question.title"/> + <div class="q-content"> + <el-checkbox-group v-model="question.answerList"> + <el-checkbox v-for="item in question.questionItemList" :label="item.prefix" :key="item.prefix"> + <span class="question-prefix">{{ item.prefix }}.</span> + <span v-html="item.content" class="q-item-span-content"></span> + </el-checkbox> + </el-checkbox-group> + </div> + </div> + <!-- 鍒ゆ柇 --> + <div v-else-if="qType == 3"> + <div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/> + <span style="padding-right: 10px;">(</span> + <el-radio-group v-model="question.answer"> + <el-radio v-for="item in question.questionItemList" :key="item.prefix" :label="item.prefix"> + <span v-html="item.content" class="q-item-span-content"></span> + </el-radio> + </el-radio-group> + <span style="padding-left: 10px;">)</span> + </div> + <!-- 濉┖ --> + <div v-else-if="qType == 4"> + <div class="q-title" v-html="question.title"/> + <div v-if="question.answerList !== null"> + <el-form-item :label="item.prefix" :key="item.prefix" v-for="item in question.questionItemList" label-width="50px" + style="margin-top: 10px;margin-bottom: 10px;"> + <el-input v-model="question.answerList[item.prefix - 1]"/> + </el-form-item> + </div> + </div> + <!-- 绠�绛斻�佽绠椼�佸垎鏋� --> + <div v-else-if="qType == 5 || qType == 7 || qType == 8"> + <div class="q-title" v-html="question.title"/> + <div> + <el-input v-model="question.answer" type="textarea" rows="5"></el-input> + </div> + </div> + <div class="question-answer-show-item" style="margin-top: 15px"> + <span class="question-show-item">缁撴灉锛�</span> + <el-tag :type="rightTagFormatter(question.right)"> + {{ rightTextFormatter(question.right) }} + </el-tag> + </div> + <div class="question-answer-show-item"> + <span class="question-show-item">鎬诲垎锛�</span> + <span>{{ question.questionScore }}</span> + </div> + <div class="question-answer-show-item"> + <span class="question-show-item">寰楀垎锛�</span> + <span>{{ question.score }}</span> + </div> + <div class="question-answer-show-item"> + <span class="question-show-item">闅惧害锛�</span> + <el-rate disabled v-model="question.difficult" class="question-show-item"></el-rate> + </div> + <br/> + <div class="question-answer-show-item" style="line-height: 1.8"> + <span class="question-show-item">瑙f瀽锛�</span> + <span v-html="question.analyze" class="q-item-span-content"/> + </div> + <div class="question-answer-show-item"> + <span class="question-show-item">姝g‘绛旀锛�</span> + <!-- 閫夋嫨銆佸閫夈�佺畝绛斻�佽闊炽�佽绠椼�佸垎鏋� --> + <span v-if="qType == 1 || qType == 2 || qType == 5 || qType == 6 || qType == 7 || qType == 8" + v-html="question.qustionAnswer" class="q-item-span-content"/> + <!-- 鍒ゆ柇 --> + <span v-if="qType == 3" v-html="trueFalseFormatter(question)" class="q-item-span-content"/> + <!-- 濉┖ --> + <span v-if="qType == 4">{{ question.qustionAnswer }}</span> + </div> + <div v-if="question.right == null"> + <span style="color:#ECAB3C;">{{ '鎵规敼锛�' }}</span> + <el-input-number size="mini" v-model="question.score" :precision="1" :min="0" + :max="parseInt(question.questionScore)"></el-input-number> + </div> + </div> + <div v-else> + </div> + </div> + +</template> + +<script> +import { mapState, mapGetters } from 'vuex' + +export default { + name: 'QuestionShow', + props: { + question: { + type: Object, + default: function () { + return {} + } + }, + answer: { + type: Object, + default: function () { + return { id: null, content: '', contentArray: [], right: false } + } + }, + qLoading: { + type: Boolean, + default: false + }, + qType: { + type: Number, + default: 0 + } + }, + methods: { + trueFalseFormatter (question) { + return question.items.filter(d => d.prefix === question.questionAnswer)[0].content + }, + rightTagFormatter (status) { + return this.enumFormat(this.rightTag, status) + }, + rightTextFormatter (status) { + return this.enumFormat(this.rightEnum, status) + } + }, + computed: { + ...mapGetters('enumItem', ['enumFormat']), + ...mapState('enumItem', { + rightEnum: state => state.exam.question.answer.doRightEnum, + rightTag: state => state.exam.question.answer.doRightTag + }) + } +} +</script> -- Gitblit v1.8.0