<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="5">
|
<div class="nameClass">
|
<div class="bottom5">考试名称</div>
|
<div class="title">{{ examInfo.examName }}</div>
|
</div>
|
</el-col>
|
<el-col :span="5">
|
<div class="nameClass">
|
<div class="bottom5">试卷名称</div>
|
<div class="title">{{ examInfo.examPaperName }}</div>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="staticNum">
|
<div class="bottom5">应考人数</div>
|
<div class="title">{{ examInfo.shouldJoinNum }}</div>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="staticNum">
|
<div class="bottom5">缺考人数</div>
|
<div class="title">{{ examInfo.missJoinNum }}</div>
|
</div>
|
</el-col>
|
<el-col :span="4">
|
<div class="staticNum">
|
<div class="bottom5">参加但未完成人数</div>
|
<div class="title">{{ examInfo.joinButNotFinishNum }}</div>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 表格 -->
|
<el-table
|
:data="examInfo.studentExamInfoVOList"
|
border
|
style="width: 100%;margin-top: 20px"
|
>
|
<el-table-column
|
align="center"
|
prop="id"
|
label="学号"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="realName"
|
label="姓名"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="phone"
|
label="电话"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="status"
|
:formatter="statusFormatter"
|
label="提交状态"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="markPaperStatus"
|
:formatter="statusFormatter"
|
label="阅卷状态"
|
>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="300px"
|
>
|
<template slot-scope="scope">
|
<el-button @click="markPaper(scope.row)" type="warning">阅卷</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import { getExamMarkPaperInfo } from '@/api/exam'
|
|
export default {
|
name: 'MarkPaper',
|
mounted () {
|
this.examInfo.examName = this.$route.query.examName
|
this.examInfo.examId = this.$route.query.examId
|
if (this.examInfo.examId) {
|
this.getExamInfo()
|
}
|
},
|
// watch: {
|
// $route: {
|
// handler () {
|
// this.reloadPage()
|
// }
|
// }
|
// },
|
data () {
|
return {
|
examInfo: {
|
examName: '',
|
examPaperName: '',
|
suggestTime: 0,
|
shouldJoinNum: 0,
|
joinNum: 0,
|
missJoinNum: 0,
|
joinButNotFinishNum: 0,
|
examId: null,
|
studentExamInfoVOList: []
|
}
|
}
|
},
|
methods: {
|
// reloadPage () {
|
// this.examInfo.examName = this.$route.query.examName
|
// this.examInfo.examId = this.$route.query.examId
|
// console.log('------->' + this.examInfo.examName + '------->' + this.examInfo.examId)
|
// if (this.examInfo.examId) {
|
// this.getExamInfo()
|
// }
|
// },
|
statusFormatter (row, column, cellValue, index) {
|
if (cellValue === 'finish') {
|
return '完成'
|
} else if (cellValue === 'temp') {
|
return '未完成'
|
}
|
},
|
markPaper (row) {
|
// todo打开阅卷页面
|
this.$router.push({
|
path: '/exam/mark/paper/detail',
|
query: { examId: this.examInfo.examId, examName: this.examInfo.examName, userId: row.userId }
|
})
|
},
|
getExamInfo () {
|
getExamMarkPaperInfo(this.examInfo.examId).then(res => {
|
this.examInfo = res.data.data
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.title {
|
font-size: 18px;
|
}
|
|
.bottom5 {
|
margin-bottom: 5px;
|
}
|
|
.nameInfo {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.nameClass {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 70px;
|
background-color: #cb5858;
|
}
|
|
.staticNum {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background-color: #0a76a4;
|
height: 70px;
|
}
|
</style>
|
