<template>
|
<div class="paper-container">
|
<div class="paper-card">
|
<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-row>
|
<el-col class="info">
|
<span class="exam-info">交卷时间：</span>
|
<span class="exam-info">{{ form.updateTime }}</span>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col class="info">
|
<span class="exam-info">完成耗时：</span>
|
<span class="exam-info">{{ form.doTime }}</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.answers">
|
<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-divider></el-divider>
|
<div style="text-align: center">
|
<el-button type="primary" style="width: 120px;height: 35px" @click="submit">提交批改</el-button>
|
</div>
|
</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.name }}</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"/>
|
</el-form-item>
|
</el-card>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getStudentExam } from '@/api/exam'
|
import MarkPaperShow from '@/views/exam/exam/components/MarkPaperShow'
|
import { mapGetters, mapState } from 'vuex'
|
|
export default {
|
name: 'MarkPaperDetail',
|
components: { MarkPaperShow },
|
mounted () {
|
getStudentExam(this.$route.query.examId, this.$route.query.userId).then(re => {
|
this.form = re.data.data
|
this.formLoading = false
|
})
|
},
|
data () {
|
return {
|
paperQuestionList: [],
|
form: {},
|
formLoading: false,
|
userId: null,
|
userName: '张三',
|
questionLoading: false,
|
}
|
},
|
methods: {
|
submit () {
|
// 提交批改
|
},
|
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: {
|
...mapGetters('enumItem', ['enumFormat']),
|
...mapState('enumItem', {
|
doRightTag: state => state.exam.question.answer.doRightTag
|
})
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.paper-container {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
padding: 20px;
|
min-height: 100%;
|
}
|
|
.paper-card {
|
position: fixed;
|
width: 270px;
|
}
|
|
.paper-form {
|
flex: 1; /* 占据剩余空间 */
|
margin-left: 300px;
|
}
|
|
.info {
|
display: flex;
|
flex-direction: row;
|
justify-content: left;
|
font-size: 14px;
|
margin-top: 10px;
|
}
|
|
</style>
|
