更新试卷页面 Exam.vue

src/views/exam/Exam.vue

@@ -24,16 +24,18 @@
             <el-card style="min-height: 500px">
               <!--题目信息-->
               <div>
-                <i class="num">{{ curIndex + 1 }}</i>
-                <span v-if="questionInfo[curIndex].questionType === 1">【单选题】</span>
-                <span v-else-if="questionInfo[curIndex].questionType === 2">【多选题】</span>
-                <span v-else-if="questionInfo[curIndex].questionType === 3">【判断题】</span>
+                <span v-if="questionList[curIndex].questionType === 1">【单选题】</span>
+                <span v-else-if="questionList[curIndex].questionType === 2">【多选题】</span>
+                <span v-else-if="questionList[curIndex].questionType === 3">【判断题】</span>
                 <span v-else>【简答题】</span>
-                <span>{{ questionInfo[curIndex].questionContent }}:</span>
+                <br>
+                <br>
+                <i class="num">{{ curIndex + 1 }}</i>
+                <span>{{ questionList[curIndex].questionContent }}:</span>
               </div>
               <!--题目中的配图-->
               <img
-                v-for="url in questionInfo[curIndex].images"
+                v-for="url in questionList[curIndex].images"
                 :src="url"
                 title="点击查看大图"
                 alt="题目图片"
@@ -43,12 +45,12 @@
 
               <!--单选 和 判断 的答案列表-->
               <div
-                v-show="questionInfo[curIndex].questionType === 1 || questionInfo[curIndex].questionType === 3"
+                v-show="questionList[curIndex].questionType === 1 || questionList[curIndex].questionType === 3"
                 style="margin-top: 25px"
               >
                 <div class="el-radio-group">
                   <label
-                    v-for="(item,index) in questionInfo[curIndex].answer"
+                    v-for="(item,index) in questionList[curIndex].answer"
                     :class="index === userAnswer[curIndex] ? 'active' : ''"
                     @click="checkSingleAnswer(index)"
                   >
@@ -56,8 +58,7 @@
                     <img
                       v-for="i2 in item.images"
                       v-if="item.images !== null"
-                      style="position: absolute;left:100%;top:50%;transform: translateY(-50%);
-                  width: 40px;height: 40px;float: right;cursor: pointer;"
+                      style="position: absolute;left:100%;top:50%;transform: translateY(-50%);width: 40px;height: 40px;float: right;cursor: pointer;"
                       title="点击查看大图"
                       :src="i2"
                       alt=""
@@ -68,10 +69,10 @@
               </div>
 
               <!--多选的答案列表-->
-              <div v-show="questionInfo[curIndex].questionType === 2" style="margin-top: 25px">
+              <div v-show="questionList[curIndex].questionType === 2" style="margin-top: 25px">
                 <div class="el-radio-group">
                   <label
-                    v-for="(item,index) in questionInfo[curIndex].answer"
+                    v-for="(item,index) in questionList[curIndex].answer"
                     :class="(userAnswer[curIndex]+'').indexOf(index+'') !== -1? 'active' : ''"
                     @click="selectedMultipleAnswer(index)"
                   >
@@ -91,7 +92,7 @@
               </div>
 
               <!--简答题的答案-->
-              <div v-show="questionInfo[curIndex].questionType === 4" style="margin-top: 25px">
+              <div v-show="questionList[curIndex].questionType === 4" style="margin-top: 25px">
                 <el-input
                   v-model="userAnswer[curIndex]"
                   type="textarea"
@@ -106,7 +107,7 @@
                 <el-button
                   type="primary"
                   icon="el-icon-right"
-                  :disabled="curIndex>=questionInfo.length-1"
+                  :disabled="curIndex>=questionList.length-1"
                   @click="curIndex++"
                 >下一题
                 </el-button>
@@ -134,12 +135,12 @@
               <div style="margin-top: 25px">
                 <p style="font-size: 18px;">单选题</p>
                 <el-button
-                  v-for="item in questionInfo.length"
-                  v-show="questionInfo[item-1].questionType === 1"
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 1"
                   :key="item"
                   style="margin-top: 10px;margin-left: 15px"
                   size="mini"
-                  :class="questionInfo[item-1].questionType === 1 && userAnswer[item-1] !== undefined ?
+                  :class="questionList[item-1].questionType === 1 && userAnswer[item-1] !== undefined ?
                     'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
                   @click="curIndex = item-1"
                 >{{ item }}
@@ -150,12 +151,12 @@
               <div style="margin-top: 25px">
                 <p style="font-size: 18px;">多选题</p>
                 <el-button
-                  v-for="item in questionInfo.length"
-                  v-show="questionInfo[item-1].questionType === 2"
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 2"
                   :key="item"
                   style="margin-top: 10px;margin-left: 15px"
                   size="mini"
-                  :class="questionInfo[item-1].questionType === 2 && userAnswer[item-1] !== undefined ?
+                  :class="questionList[item-1].questionType === 2 && userAnswer[item-1] !== undefined ?
                     'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
                   @click="curIndex = item-1"
                 >{{ item }}
@@ -166,12 +167,12 @@
               <div style="margin-top: 25px">
                 <p style="font-size: 18px;">判断题</p>
                 <el-button
-                  v-for="item in questionInfo.length"
-                  v-show="questionInfo[item-1].questionType === 3"
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 3"
                   :key="item"
                   style="margin-top: 10px;margin-left: 15px"
                   size="mini"
-                  :class="questionInfo[item-1].questionType === 3 && userAnswer[item-1] !== undefined ?
+                  :class="questionList[item-1].questionType === 3 && userAnswer[item-1] !== undefined ?
                     'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
                   @click="curIndex = item-1"
                 >{{ item }}
@@ -182,12 +183,12 @@
               <div style="margin-top: 25px">
                 <p style="font-size: 18px;">简答题</p>
                 <el-button
-                  v-for="item in questionInfo.length"
-                  v-show="questionInfo[item-1].questionType === 4"
+                  v-for="item in questionList.length"
+                  v-show="questionList[item-1].questionType === 4"
                   :key="item"
                   style="margin-top: 10px;margin-left: 15px"
                   size="mini"
-                  :class="questionInfo[item-1].questionType === 4 && userAnswer[item-1] !== undefined ?
+                  :class="questionList[item-1].questionType === 4 && userAnswer[item-1] !== undefined ?
                     'done' : userAnswer[item-1] === undefined ? curIndex === (item-1) ? 'orange' : 'noAnswer' : 'noAnswer'"
                   @click="curIndex = item-1"
                 >{{ item }}
@@ -253,7 +254,7 @@ export default {
       // 当前考试的信息
       examInfo: {},
       // 当前的考试题目
-      questionInfo: [
+      questionList: [
         {
           questionType: ''
         }
@@ -271,7 +272,7 @@ export default {
       // 页面绘制是否开始
       show: false,
       // 答案的选项名abcd数据
-      optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+      optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
       // 考试总时长
       duration: 0,
       // 摄像头对象
@@ -307,57 +308,28 @@ export default {
       if (!this.cameraOn) { // 如果摄像头未开启,就再次调用开启
         this.getCamera()
       }
-      // 考试时间结束了提交试卷
+
+      // 考试时间结束, 自动提交试卷
       if (newVal < 1) {
         /* if (this.cameraOn) {
           // 结束的时候拍照上传一张
           await this.takePhoto()
           this.closeCamera()
         }*/
-        const data = {}
-        data.questionIds = []
-        data.userAnswers = this.userAnswer.join('-')
-        this.questionInfo.forEach((item, index) => {
-          data.questionIds.push(item.questionId)
-          // 当前数据不完整,用户回答不完整(我们自动补充空答案,防止业务出错)
-          if (index > this.userAnswer.length) {
-            data.userAnswers += ' -'
-          }
-        })
-        // 如果所有题目全部未答
-        if (data.userAnswers === '') {
-          this.questionInfo.forEach(item => {
-            data.userAnswers += ' -'
-          })
-          data.userAnswers.split(0, data.userAnswers.length - 1)
-        }
-        data.examId = parseInt(this.$route.params.examId)
-
-        data.questionIds = data.questionIds.join(',')
-        data.creditImgUrl = this.takePhotoUrl.join(',')
-        submitExamPaper(data).then((resp) => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: 'Tips',
-              message: '考试时间结束,已为您自动提交 *^▽^*',
-              type: 'success',
-              duration: 2000
-            })
-            this.$router.push('/examResult/' + resp.data)
-          }
-        })
+
+        this.submitUserPayload(true)
       }
     }
   },
   created() {
     this.getExamInfo()
     // 页面数据加载的等待状态栏
-    /* this.loading = this.$loading.service({
+    this.loading = this.$loading({
       body: true,
       lock: true,
       text: '数据拼命加载中,(*╹▽╹*)',
       spinner: 'el-icon-loading'
-    })*/
+    })
     // 开启摄像头
     window.onload = () => {
       setTimeout(() => {
@@ -407,26 +379,31 @@ export default {
   methods: {
     // 查询当前考试的信息
     getExamInfo() {
-      getExamInfoById(this.$route.params).then((resp) => {
+      const examId = this.$route.params
+      getExamInfoById(examId).then((resp) => {
         if (resp.code === 0) {
           this.examInfo = resp.data
           // 设置定时(秒)
           try {
             const examDuration = JSON.parse(localStorage.getItem('examDuration' + this.examInfo.examId) || '{}')
-            if (examDuration.duration === 0 || Date.now() >= (examDuration.timestamp || Date.now()) + (examDuration.duration * 1000 || Date.now())) {
+            if (examDuration.duration === 0 || Date.now() >= (examDuration.timestamp ||
+              Date.now()) + (examDuration.duration * 1000 || Date.now())) {
               localStorage.removeItem('examDuration' + this.examInfo.examId)
             }
-            this.duration = Math.min(JSON.parse(localStorage.getItem('examDuration' + this.examInfo.examId) || '{}').duration || resp.data.examDuration * 60, resp.data.examDuration * 60)
+            this.duration = Math.min(JSON.parse(
+              localStorage.getItem('examDuration' + this.examInfo.examId) || '{}').duration ||
+              this.examInfo.examDuration * 60, this.examInfo.examDuration * 60)
           } catch (e) {
             localStorage.removeItem('examDuration' + this.examInfo.examId)
           }
+
           // 考试剩余时间定时器
           this.timer = window.setInterval(() => {
             if (this.duration > 0) this.duration--
           }, 1000)
 
-          var param = resp.data.questionIds.split(',')
-          this.getQuestionInfo(param)
+          const questionIds = this.examInfo.questionIds.split(',')
+          this.getQuestionInfo(questionIds)
         }
       })
     },
@@ -434,18 +411,20 @@ export default {
     async getQuestionInfo(ids) {
       await getQuestionByIds({ 'ids': ids.join(',') }).then(resp => {
         if (resp.code === 0) {
-          this.questionInfo = resp.data || []
+          this.questionList = resp.data || []
           // 重置问题的顺序 单选 多选 判断 简答
-          this.questionInfo = this.questionInfo.sort(function(a, b) {
+          this.questionList = this.questionList.sort(function(a, b) {
             return a.questionType - b.questionType
           })
         }
       })
-      // this.loading.close()
+      this.loading.close()
       this.show = true
     },
     // 点击展示高清大图
     showBigImg(url) {
+      console.log('show big')
+      console.log(url)
       this.bigImgUrl = url
       this.bigImgDialog = true
     },
@@ -520,9 +499,9 @@ export default {
         // convertBase64UrlToBlob函数是将base64编码转换为Blob
         formData.append('file', this.base64ToFile(img, 'examTakePhoto.png'))
         // 上传阿里云OSS
-        await ossUtils.uploadImage(formData).then((resp) => {
+        /* await ossUtils.uploadImage(formData).then((resp) => {
           if (resp.code === 0) this.takePhotoUrl.push(resp.data)
-        })
+        })*/
       }
     },
     // 关闭摄像头
@@ -553,7 +532,7 @@ export default {
       var reg = new RegExp('-', 'g')
       // 去掉用户输入的非法分割符号(-),保证后端接受数据处理不报错
       this.userAnswer.forEach((item, index) => {
-        if (this.questionInfo[index].questionType === 4) { // 简答题答案处理
+        if (this.questionList[index].questionType === 4) { // 简答题答案处理
           this.userAnswer[index] = item.replace(reg, ' ')
         }
       })
@@ -566,48 +545,18 @@ export default {
         }
       }
       // 如果用户所有答案的数组长度小于题目长度,这个时候也要将标志位置为false
-      if (this.userAnswer.length < this.questionInfo.length) {
+      if (this.userAnswer.length < this.questionList.length) {
         flag = false
       }
+
       // 题目未做完
       if (!flag) {
-        // if (this.userAnswer.some((item) => item === undefined)) {
         this.$confirm('当前试题暂未做完, 是否继续提交o(╥﹏╥)o ?', 'Tips', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          const data = {}
-          data.questionIds = []
-          data.userAnswers = this.userAnswer.join('-')
-          this.questionInfo.forEach((item, index) => {
-            data.questionIds.push(item.questionId)
-            // 当前数据不完整,用户回答不完整(我们自动补充空答案,防止业务出错)
-            if (index > (this.userAnswer.length - 1)) {
-              data.userAnswers += '- '
-            }
-          })
-          // 如果所有题目全部未答
-          if (this.userAnswer.length === 0) {
-            this.questionInfo.forEach(item => {
-              data.userAnswers += ' -'
-            })
-            data.userAnswers.split(0, data.userAnswers.length - 1)
-          }
-          data.examId = parseInt(this.$route.params.examId)
-          data.questionIds = data.questionIds.join(',')
-          data.creditImgUrl = this.takePhotoUrl.join(',')
-          submitExamPaper(data).then((resp) => {
-            if (resp.code === 0) {
-              this.$notify({
-                title: 'Tips',
-                message: '考试结束 *^▽^*',
-                type: 'success',
-                duration: 2000
-              })
-              this.$router.push('/exam/result/' + resp.data)
-            }
-          })
+          this.submitUserPayload(false)
         }).catch(() => {
           this.$notify({
             title: 'Tips',
@@ -622,28 +571,49 @@ export default {
           await this.takePhoto()
           this.closeCamera()
         }
-        const data = {}
-        data.questionIds = []
-        data.userAnswers = this.userAnswer.join('-')
-        data.examId = parseInt(this.$route.params.examId)
-        data.creditImgUrl = this.takePhotoUrl.join(',')
-        this.questionInfo.forEach((item, index) => {
-          data.questionIds.push(item.questionId)
-        })
-        data.questionIds = data.questionIds.join(',')
-        submitExamPaper(data).then((resp) => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: 'Tips',
-              message: '考试结束了捏 *^▽^*',
-              type: 'success',
-              duration: 2000
-            })
-
-            this.$router.push('/exam/result/' + resp.data)
-          }
+
+        this.submitUserPayload(false)
+      }
+    },
+    submitUserPayload(autoSubmit) {
+      var msg = '考试结束了捏 *^▽^*'
+      if (autoSubmit) {
+        msg = '考试时间结束,已为您自动提交 *^▽^*'
+      }
+
+      const userPayload = {}
+      userPayload.questionIds = []
+      userPayload.userAnswers = this.userAnswer.join('-')
+      this.questionList.forEach((item, index) => {
+        userPayload.questionIds.push(item.questionId)
+        // 当前数据不完整,用户回答不完整(我们自动补充空答案,防止业务出错)
+        if (index > this.userAnswer.length) {
+          userPayload.userAnswers += ' -'
+        }
+      })
+
+      // 如果所有题目全部未答
+      if (userPayload.userAnswers === '') {
+        this.questionList.forEach(item => {
+          userPayload.userAnswers += ' -'
         })
+        userPayload.userAnswers.split(0, userPayload.userAnswers.length - 1)
       }
+      userPayload.examId = parseInt(this.$route.params.examId)
+
+      userPayload.questionIds = userPayload.questionIds.join(',')
+      userPayload.creditImgUrl = this.takePhotoUrl.join(',')
+      submitExamPaper(userPayload).then((resp) => {
+        if (resp.code === 0) {
+          this.$notify({
+            title: 'Tips',
+            message: msg,
+            type: 'success',
+            duration: 2000
+          })
+          this.$router.push('/exam/result/' + resp.data)
+        }
+      })
     }
   }
 }