<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
|
align="center"
|
prop="phone"
|
label="系统自动估分(选择题型)"
|
>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="300px"
|
>
|
<template slot-scope="scope">
|
<el-button @click="markPaper(scope.row.userId)" 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()
|
}
|
},
|
data () {
|
return {
|
examInfo: {
|
examName: '',
|
examPaperName: '',
|
suggestTime: 0,
|
shouldJoinNum: 0,
|
joinNum: 0,
|
missJoinNum: 0,
|
joinButNotFinishNum: 0,
|
examId: null,
|
studentExamInfoVOList: []
|
}
|
}
|
},
|
methods: {
|
statusFormatter (row, column, cellValue, index) {
|
if (cellValue === 'finish') {
|
return '完成'
|
} else if (cellValue === 'temp') {
|
return '未完成'
|
}
|
},
|
markPaper (userId) {
|
// todo打开阅卷页面
|
this.$router.push({path: "/exam/mark/paper/detail", query: {examId: this.examInfo.examId, examName: this.examInfo.examName, userId: 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>
|
