增加查看试卷的嵌入页面

src/data/pages.js

@@ -104,6 +104,7 @@ export const iframes=[
   {title:'课件管理', path:'/iframe/course/coursewares',hidden:false,component:'course/Courseware'},
   {title:'课程管理', path:'/iframe/course/manages',hidden:false,component:'course/ManageList'},
   {title:'考试试题管理', path:'/iframe/exam/questions',hidden:false,component:'exam/Question'},
+  {title:'查看答卷', path:'/iframe/exam/viewanswer',hidden:false,component:'exam/viewAnswer'},
   {title:'考试试卷管理', path:'/iframe/exam/papers',hidden:false,component:'exam/TestPaper'},
   {title:'考试管理', path:'/iframe/exam/tests',hidden:false,component:'exam/ExamList'},
   {title:'案例管理', path:'/iframe/cases/manages',hidden:false,component:'case/ManageList'},

src/views/exam/ExamList.vue

@@ -547,11 +547,15 @@
             custom-class="g-dialog">
             <div style="padding: 10px; font-size: 20px" class="upaper">
               <div  v-for="(ditem,didx) in answerData.paperDetail" :key="didx"  class="upaper-item">
-                <div class="upaper-item-q">{{didx +1}}.【{{getTypeName(ditem.type)}}】{{ditem.title}}</div>
+                <div class="upaper-item-q">
+                  <div> {{didx +1}}.【{{getTypeName(ditem.type)}}】{{ditem.title}}</div>
+                  <div v-if="ditem.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+ditem.images"/> </div>
+                </div>
                 <div class="upaper-item-opts" style="padding-left: 20px;">
                     <div v-for="(opt,optIdx) in ditem.optionList" :key="optIdx" class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}">
                         <div>
                            <div>{{toLetter(optIdx+1)}}, {{opt.content}}</div>
+                           <div v-if="opt.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+opt.images"/> </div>
                         </div>
                         <div>
                           <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; ">√</span>
@@ -687,6 +691,7 @@ export default {
   data() {
     return {
       swichpublished:false,
+      imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
       toScoreTow,
       qnum:0,//这里默认是30吧
       examDateTime:[],

src/views/exam/Test.vue

@@ -626,7 +626,7 @@ export default {
           }
         });
       }
-      console.log('实际得分:'+total)
+      //console.log('实际得分:'+total)
       return total;
     },
     reStartTest(row){ //继续考试

src/views/exam/viewAnswer.vue

@@ -0,0 +1,277 @@
+<template>
+  <!--查看答卷-->
+  <div>
+    <div style="padding: 10px; font-size: 20px" class="upaper">
+      <div  v-for="(ditem,didx) in answerData.paperDetail" :key="didx"  class="upaper-item">
+        <div class="upaper-item-q">
+          <div> {{didx +1}}.【{{getTypeName(ditem.type)}}】{{ditem.title}}</div>
+          <div v-if="ditem.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+ditem.images"/> </div>
+        </div>
+        <div class="upaper-item-opts" style="padding-left: 20px;">
+            <div v-for="(opt,optIdx) in ditem.optionList" :key="optIdx" class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}">
+                <div>
+                    <div>{{toLetter(optIdx+1)}}, {{opt.content}}</div>
+                    <div v-if="opt.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+opt.images"/> </div>
+                </div>
+                <div>
+                  <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; ">√</span>
+                  <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000;font-size: 25px; ">×</span>
+                </div>
+            </div>
+        </div>
+        <div class="upaper-item-answer" style="display: flex;">
+          <div class="upaper-item-answer-cell">
+            <span v-if="ditem.result" style="color: #00aa00; ">回答正确</span>
+            <span v-else style="color: #ff0000; ">回答错误</span>
+          </div>
+          <div v-if="ditem.type !=3" style="display:flex">
+                <div class="upaper-item-answer-cell" >
+                  <span class="response-tit">正确答案：</span>
+                  <span v-for="op in ditem.correctOptIdxs" :key="op">{{toLetter(op+1)}}</span>
+                </div>
+                <div class="upaper-item-answer-cell">
+                  <span class="response-tit">我的答案：</span>
+                  <span v-for="op in ditem.userOptIdxs" :key="op">{{toLetter(op+1)}}</span>
+                </div>
+          </div>
+          <div v-else style="display:flex"><!--判断题的问题-->
+              <div class="upaper-item-answer-cell" >
+                <span class="response-tit">正确答案：</span>
+                <span>{{ditem.correctOptIdxs[0]=='true' ? '正确':'错误'}}</span>
+              </div>
+              <div class="upaper-item-answer-cell">
+                <span class="response-tit">我的答案：</span>
+                <span>{{ditem.userOptIdxs[0]=='' ? '': ditem.userOptIdxs[0]=='true'? '正确':'错误'}}</span>
+              </div>
+          </div>
+
+        </div>
+        <div style="padding-top: 15px;font-size:16px">解析：{{ditem.analysis}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import apiTest from '@/api/modules/test.js'
+  import apiPaper from '@/api/modules/paper.js';
+  import apiTestPaper from '@/api/modules/testPaper.js'
+  import {examType,numberToLetter} from '@/utils/tools.js';
+  import {toScoreTow} from '@/utils/tools.js'
+  import editPaper from "@/components/Exam/EditPaper";
+  export default {
+    name: 'articleItems',
+    components:{editPaper},
+    computed: {},
+    data() {
+      return {
+        id:'',
+        imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
+        toLetter:numberToLetter,
+        getTypeName:examType,
+        answerData:{
+          paperDetail:[],
+          word: '',
+          row:{},
+          pageSize:10,
+          pageIndex:1,
+          count:0,
+          data:[],
+        },
+      }
+    },
+    mounted() {
+      this.id=this.$route.query.id;
+      if(this.id){
+         this.loadData();
+      }else{
+         this.$message({ message: "参数错误", type: 'error'})
+      }
+    },
+    methods:{
+      loadData(){
+        apiTestPaper.getAnswerDetail(this.id).then(res=>{
+            if(res.status === 200) {
+              let answerJson = JSON.parse(res.result.answerJson);
+              let paperJson = JSON.parse(res.result.paperJson);
+              let answer = [];
+              for(let key in answerJson){
+                answer.push(key);
+                paperJson.forEach((item,index) => {
+                     if(item.id == key) {
+                   if(item.type==1){
+                            item.userAnswer='';
+                          }else if(item.type==2){
+                            item.userAnswer=[];
+                          }else{
+                            item.userAnswer=''
+                          }
+                  item.correctOptIdxs=[];
+                  item.userOptIdxs=[];
+                       if(item.type==1){
+                            item.userAnswer=answerJson[key];
+                          }else if(item.type==2){
+                            item.userAnswer.push(...answerJson[key].split(','));
+                          }else{
+                            item.userAnswer=answerJson[key]
+                          }
+                  }
+                  item.result=true;
+                });
+              }
+              this.answerData.paperDetail = paperJson;
+              this.answerData.paperDetail.forEach((item,index)=>{
+                   if(item.type ==3) {
+                    item.correctOptIdxs.push(item.answer);
+                    item.userOptIdxs.push(item.userAnswer);
+                  }
+                  item.optionList.forEach((opt,idx)=>{
+                	//填充正确答案
+                	if(opt.isAnswer){
+                		item.correctOptIdxs.push(idx);
+                	}
+                 	if(item.type==1){ //单选或判断
+                		if(opt.id==item.userAnswer){
+                			item.userOptIdxs.push(idx);
+                		}
+                	}else if(item.type==2){ //多选
+                		if(item.userAnswer.indexOf(opt.id)>-1){
+                			item.userOptIdxs.push(idx);
+                		}
+                	}
+                });
+                //判断答案是否正确
+                if(item.correctOptIdxs.toString()==item.userOptIdxs.toString()){
+                	item.result=true;
+                }else{
+                	item.result=false;
+                }
+              })
+            }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .qimg{
+    padding-left: 30px;
+    width:100%;
+    .qimg-fit{
+      width:100%;
+      object-fit:scale-down
+    }
+  }
+  .upaper{
+    text-align: left;
+    .upaper-item{
+      border-bottom: 1px solid #dadada;
+      padding: 10px;
+      .upaper-item-q{
+        padding: 8px 0px;
+      }
+      .upaper-item-opts{
+         padding: 8px 0px;
+         line-height: 20px;
+        .upaper-item-opt{
+        	min-height: 50px;
+        	border-radius: 4px;
+        	display: flex;
+        	background-color: #FFFFFF;
+        	justify-content: space-between;
+        	padding: 10px 20px;
+        }
+        .upaper-item-opt-user{
+        	background-color: #fff3e5;
+        }
+      }
+      .upaper-item-answer{
+        display: flex;
+        .upaper-item-answer-cell{
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+.el-aside {
+  padding: 0px 2px 10px 0px;
+
+}
+.el-main {
+  padding: 0px 10px;
+}
+.article-status1 {
+  padding: 3px;
+  border: 1px dotted #1ea0fa;
+  color: #1ea0fa;
+}
+.article-status2 {
+  padding: 3px;
+  border: 1px dotted #00aa00;
+  color: #00aa00;
+}
+.article-status3 {
+  padding: 3px;
+  border: 1px dotted #ff0000;
+  color: #ff0000;
+}
+.article-list {
+  margin: 5px 0;
+  border: 1px solid #dddddd;
+  padding: 10px;
+}
+
+.article-info {
+  .article-info-title {
+    font-size: 16px;
+    font-weight: 400;
+    height: 40px;
+    line-height: 40px;
+    .article-info-date {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      float: right;
+      font-weight: 200;
+      color: #999999;
+      i {
+        margin-right: 5px;
+      }
+    }
+  }
+  .article-info-summary {
+    height: 65px;
+    color: #999999;
+  }
+  .article-info-tools {
+    height: 30px;
+    .article-info-tools-auth {
+      float: left;
+      font-size: 13px;
+      color: #999999;
+      img {
+        margin-right: 10px;
+        width: 30px;
+        border: 1px solid #eee;
+        border-radius: 50%;
+        vertical-align: middle;
+      }
+    }
+    .article-info-tools-btns {
+      float: right;
+      .article-info-tools-btn {
+        margin: 0 0 0 15px;
+      }
+    }
+  }
+}
+.case-row-btn {
+  line-height: 25px;
+
+  button {
+    height: 20px;
+    padding: 3px 20px;
+  }
+}
+</style>