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