Merge remote-tracking branch 'origin/master'

fuliqi

2024-10-28 c2a1c68a2a398e6d0f2f5854c65127efbff306b1

 src/views/answer/detail.vue

@@ -1,124 +1,162 @@
<template>
    <div style="background-color: #FFFFFF; padding-top: 50px;min-height: 900px;">
        <el-row class="do-exam-title" style="background-color: #F5F5DC">
            <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"
                        @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag>
                </span>
            </el-col>
  <div class="paper-container">
    <div class="paper-card" v-loading="formLoading">
      <el-card style="height: 100vh">
        <el-row style="text-align: left; margin-bottom : 20px; font-size: 20px">语文考试</el-row>
        <el-row>
          <el-col class="info">
            <span class="exam-info">学员姓名：</span>
            <span class="exam-info">{{ form.userName }}</span>
          </el-col>
        </el-row>
        <el-container class="app-item-contain">
            <el-header class="align-center">
                <h1>{{ form.name }}</h1>
                <div>
                    <span class="question-title-padding">试卷得分：{{ answer.score }}</span>
                    <span class="question-title-padding">试卷耗时：{{ formatSeconds(answer.doTime) }}</span>
                </div>
            </el-header>
            <el-main>
                <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-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'"
                                v-for="questionItem in titleItem.questionItems" class="exam-question-item"
                                label-width="50px" :id="'question-' + questionItem.itemOrder">
                                <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"
                                    :answer="answer.answerItems[questionItem.itemOrder - 1]" />
                            </el-form-item>
                        </el-card>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
        <el-row>
          <el-col class="info">
            <span class="exam-info">交卷时间：</span>
            <span class="exam-info">{{ form.submitTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="info">
            <span class="exam-info">完成耗时：</span>
            <span class="exam-info">{{ formattedDoTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="info">
            <span class="exam-info">得分：</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 form.navbar">
              <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-card>
    </div>
    <div class="paper-form">
      <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.title }}</h3>
          <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.questionList" class="exam-question-item" label-width="50px"
              :id="'question-' + questionItem.itemOrder">
              <MarkPaperShow :qType="questionItem.questionType" :question="questionItem" :answer="form.navbar" />
            </el-form-item>
          </el-card>
        </el-row>
      </el-form>
    </div>
    <el-empty v-if="empty" style="width:1200px;height:500px;"></el-empty>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import QuestionAnswerShow from './components/QuestionAnswerShow'
import examPaperAnswerApi from '@/api/examPaperAnswer'
import MarkPaperShow from '@/views/answer/components/QuestionAnswerShow'
import { mapGetters, mapState } from 'vuex'

export default {
    components: { QuestionAnswerShow },
    data() {
        return {
            form: {},
            formLoading: false,
            answer: {
                id: null,
                score: 0,
                doTime: 0,
                answerItems: [],
                doRight: false
            }
        }
    },
    created() {
        let id = this.$route.query.id
        let _this = this
        if (id && parseInt(id) !== 0) {
            _this.formLoading = true
            examPaperAnswerApi.read(id).then(re => {
                re = {"code":1,"message":"成功","data":{"paper":{"id":30,"level":1,"subjectId":4,"paperType":7,"name":"智能训练试卷 - 1","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":"正确","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":"正确","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]}]}],"score":"15","classes":null},"answer":{"id":9,"doTime":26,"score":"7.5","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"}],"doTimeStr":"26秒"}}}
                _this.form = re.data.paper
                _this.answer = re.data.answer
                _this.formLoading = false
            })
        }
    },
    methods: {
        formatSeconds(theTime) {
            let theTime1 = 0
            let theTime2 = 0
            if (theTime > 60) {
                theTime1 = parseInt(theTime / 60)
                theTime = parseInt(theTime % 60)
                if (theTime1 > 60) {
                    theTime2 = parseInt(theTime1 / 60)
                    theTime1 = parseInt(theTime1 % 60)
                }
            }
            let result = '' + parseInt(theTime) + '秒'
            if (theTime1 > 0) {
                result = '' + parseInt(theTime1) + '分' + result
            }
            if (theTime2 > 0) {
                result = '' + parseInt(theTime2) + '小时' + result
            }
            return result
        },
        questionDoRightTag(status) {
            return this.enumFormat(this.doRightTag, status)
        },
        goAnchor(selector) {
            this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
        }
    },
    computed: {
        ...mapGetters('enumItem', ['enumFormat']),
        ...mapState('enumItem', {
            doRightTag: state => state.exam.question.answer.doRightTag
        })
  name: 'MarkPaperDetail',
  components: { MarkPaperShow },
  mounted() {
    let id = this.$route.query.id
    if (id && parseInt(id) !== 0) {
      this.formLoading = true
      examPaperAnswerApi.read(id).then(re => {
        this.formLoading = true
        this.form = re.data
        if (!this.form.titleItems) this.empty = true;
        this.formLoading = false
      })
    }
  },
  data() {
    return {
      empty: false,
      paperQuestionList: [],
      form: {},
      formLoading: false,
      userId: null,
      userName: '张三',
      questionLoading: false
    }
  },
  methods: {
    open() {
      this.$confirm('确认是否提交成绩批改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        submitMark(this.form).then(re => {
          if (re.data.code === 1) {
            console.log('1111111')
            this.$message.success('提交成功')
            this.$router.back()
          } else {
            this.$message.error(re.message)
          }
        })
      })
    },
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
    },
    questionDoRightTag(status) {
      return this.enumFormat(this.doRightTag, status)
    },
    getStudentPaper() {
      getStudentExam(this.examInfo.examId, this.userId).then(res => {
        this.examInfo = res.data.data
      })
    }
  },
  computed: {
    formattedDoTime() {
      const totalSeconds = this.form.doTime
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      return `${minutes}分${seconds < 10 ? '0' + seconds : seconds}秒`
    },
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      doRightTag: state => state.exam.question.answer.doRightTag
    })
  }
}
</script>

<style lang="scss" scoped>
.align-center {
    text-align: center
<style scoped>
.paper-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 20px;
  min-height: 100%;
}

.exam-question-item {
    padding: 10px;

    .el-form-item__label {
        font-size: 15px !important;
    }
.paper-card {
  position: fixed;
  width: 270px;
}

.question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
.paper-form {
  flex: 1;
  /* 占据剩余空间 */
  margin-left: 300px;
}
</style>

.info {
  display: flex;
  flex-direction: row;
  justify-content: left;
  font-size: 14px;
  margin-top: 10px;
}
</style>