题目组件

xiangpei

2024-06-18 1acd721f03f9d4b16bcf9ef57041ef08fec49ffd

题目组件

 src/api/exam.js

@@ -67,3 +67,11 @@
    data: params
  })
}

// 查找学生的答卷
export const getStudentExam = (examId, userId) => {
  return axios({
    url: '/api/admin/exam/' + examId + '/' + userId,
    method: 'GET'
  })
}

 src/components/question/DoQuestion.vue

New file
@@ -0,0 +1,87 @@
<template>
  <div style="line-height:1.8">
    <div v-if="qType==1" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-content">
        <el-radio-group v-model="question.answer" @change="question.finished = true" >
          <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" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-content">
        <el-checkbox-group v-model="question.answerList" @change="question.finished = true" >
          <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" v-loading="qLoading">
      <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" @change="question.finished = true" >
        <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" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div>
        <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]"  @change="question.finished = true" />
        </el-form-item>
      </div>
    </div>
    <div v-else-if="qType === 5 || qType === 7 || qType === 8" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div>
        <el-input v-model="question.answer" type="textarea" rows="5"  @change="question.finished = true"/>
      </div>
    </div>
    <div v-else-if="qType==6" v-loading="qLoading">
      <div class="q-title" v-html="question.title"/>
      <div class="q-content">
<!--        todo 题干行增加音频-->
        <el-radio-group v-model="question.answer" @change="question.finished = true" >
          <el-radio  v-for="item in question.questionItemList"  :key="item.prefix"  :label="item.prefix" >
            <span class="question-prefix">{{item.prefix}}.</span>
            <audio :src="item.content" class="q-item-span-content"></audio>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {
  }
}
</script>

 src/views/exam/exam/MarkPaper.vue

@@ -117,11 +117,11 @@
    }
  },
  methods: {
    statusFormatter(row) {
    statusFormatter (row) {
      if (row.status === 'finish' || row.markPaperStatus === 'finish') {
        return '完成'
      } else if (row.status === 'temp' || row.markPaperStatus === 'temp') {
        return "未完成"
        return '未完成'
      }
    },
    markPaper (row) {

 src/views/exam/exam/MarkPaperDetail.vue

New file
@@ -0,0 +1,64 @@
<template>
  <div>
    <el-row style="text-align: center">xxx考试</el-row>
    <el-row>
      <div>xxx姓名</div>
      <div>xxx交卷时间</div>
      <div>xxx答题时间</div>
    </el-row>
    <el-row class="paper-warp">
      <div v-for="(paper,index) in examInfo.paperQuestionList" :key="index" class="paperTitleWarp">
        <div class="paperTitle">{{ paper.title }}</div>
        <div class="question-warp">
          <div v-for="(doQuestion, index) in paper.questionList" :key="index">
            <DoQuestion :question="doQuestion" :qType="paper.questionType" :qLoading="questionLoading"></DoQuestion>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import DoQuestion from '@/components/question/DoQuestion'
import { getStudentExam } from '@/api/exam'

export default {
  name: 'MarkPaperDetail',
  components: { DoQuestion },
  mounted () {
    this.examInfo.examId = this.$route.query.examId
    this.examInfo.examName = this.$route.query.examName
    this.userId = this.$route.query.userId
    if (this.examInfo.examId && this.userId) {
      this.getStudentPaper()
    }
  },
  data () {
    return {
      userId: null,
      questionLoading: false,
      examInfo: {
        examId: null,
        examName: '',
        doTime: 0,
        paperQuestionList: []
      }
    }
  },
  methods: {
    getStudentPaper () {
      this.getStudentExam(this.examInfo.examId, this.userId).then(res => {
        this.examInfo = res.data.data
      })
    }
  }
}
</script>

<style scoped>
.question-warp {
  margin-top: 50px;

}
</style>