jxkg_new_ui_teacher.git

<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>
        </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>
    </div>
</template>
 
<script>
import { mapState, mapGetters } from 'vuex'
import QuestionAnswerShow from './components/QuestionAnswerShow'
import examPaperAnswerApi from '@/api/examPaperAnswer'
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":"这是一个测试试卷","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":"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"}],"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
        })
    }
}
</script>
 
<style lang="scss" scoped>
.align-center {
    text-align: center
}
 
.exam-question-item {
    padding: 10px;
 
    .el-form-item__label {
        font-size: 15px !important;
    }
}
 
.question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
}
</style>