<template>
|
<div class="app-container">
|
<div style="display: flex;justify-content: flex-end;margin-bottom: 10px">
|
<div>
|
<el-button
|
type="primary"
|
plain
|
@click="back"
|
>返回</el-button>
|
</div>
|
</div>
|
<div class="paper-contain">
|
<div class="paper-left">
|
<div class="left-content">
|
<el-card style="height: 80%;overflow-y: auto">
|
<div>
|
<span style="font-size: 20px">{{data.form.examPaper.name}}</span>
|
<div class="examInfo">
|
<span>得分：{{data.form.score}} / {{data.form.totalScore}}</span>
|
<span>学生：{{data.form.student.name}}</span>
|
<el-divider style="margin-top: 10px" />
|
</div>
|
<div v-if="data.form.questions && data.form.questions.length>0" style="display: flex;flex-wrap: wrap;line-height: 40px">
|
<div v-for="(item,index) in data.form.questions" :key="index" style="margin-right: 5px">
|
<el-tag size="large" style="cursor: pointer" effect="light" :type="item.studentAnswer.passed == 0 ? 'danger' :item.studentAnswer.passed == 1?'success': 'warning'">{{index+1}}</el-tag>
|
</div>
|
<el-divider />
|
</div>
|
<div style="display: flex;justify-content: center;">
|
<el-button type="primary" @click="submitExam">提交批改</el-button>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
<div class="paper-right">
|
<div style="height: 100%">
|
<el-card>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="data.singleList && data.singleList.length >0">
|
<span style="font-size: 18px;font-weight: 600">单选题</span>
|
|
<div v-for="(item,index) in data.singleList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex;align-items: center">
|
<span style="font-size: 15px">{{index+1}}.</span>
|
<span style="margin-left: 10px;font-size: 16px">{{item.title}}</span>
|
</div>
|
<div style="display: flex;margin-top: 15px;margin-left: 25px">
|
<div v-for="single in item.content.items" :class="{toRed : item.studentAnswer.answer == single.prefix}">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}.</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin-left: 25px;margin-top: 20px;font-size: 14px;line-height: 25px">
|
<div style="display: flex">
|
<span>结果：</span>
|
<el-tag size="small" :type="item.studentAnswer.passed == 0 ? 'danger' :item.studentAnswer.passed == 1?'success': 'warning'">{{item.studentAnswer.passed == 0 ? '错误' :item.studentAnswer.passed == 1? '正确' :'待批改' }}</el-tag>
|
</div>
|
<span>分数：{{data.form.examPaper.singleScore}}</span>
|
<span>解析：{{item.content.analyze}}</span>
|
<span>正确答案：{{item.answer}}</span>
|
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="data.multiList && data.multiList.length >0">
|
<span style="font-size: 18px;font-weight: 600">多选题</span>
|
<div v-for="(item,index) in data.multiList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex;align-items: center">
|
<span style="font-size: 15px">{{data.singleList.length + index+1}}.</span>
|
<span style="margin-left: 10px;font-size: 16px">{{item.title}}</span>
|
</div>
|
<div style="display: flex;margin-top: 15px;margin-left: 25px">
|
<div v-for="single in item.content.items" :class="{toRed : item.studentAnswer.answerArr.includes(single.prefix)}">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}.</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin-left: 25px;margin-top: 20px;font-size: 14px;line-height: 25px">
|
<div style="display: flex">
|
<span>结果：</span>
|
<el-tag size="small" :type="item.studentAnswer.passed == 0 ? 'danger' :item.studentAnswer.passed == 1?'success': 'warning'">{{item.studentAnswer.passed == 0 ? '错误' :item.studentAnswer.passed == 1? '正确' :'待批改' }}</el-tag>
|
</div>
|
<span>分数：{{data.form.examPaper.multiScore}}</span>
|
<span>解析：{{item.content.analyze}}</span>
|
<span>正确答案：{{item.answer}}</span>
|
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="data.judgeList && data.judgeList.length >0">
|
<span style="font-size: 18px;font-weight: 600">判断题</span>
|
<div v-for="(item,index) in data.judgeList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex;align-items: center">
|
<span style="font-size: 15px">{{data.singleList.length+data.multiList.length + index+1}}.</span>
|
<span style="margin-left: 10px;font-size: 16px">{{item.title}}</span>
|
</div>
|
<div style="display: flex;margin-top: 15px;margin-left: 25px">
|
<div v-for="single in item.content.items" :class="{toRed : item.studentAnswer.answer == single.prefix}">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}.</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin-left: 25px;margin-top: 20px;font-size: 14px;line-height: 25px">
|
<div style="display: flex">
|
<span>结果：</span>
|
<el-tag size="small" :type="item.studentAnswer.passed == 0 ? 'danger' :item.studentAnswer.passed == 1?'success': 'warning'">{{item.studentAnswer.passed == 0 ? '错误' :item.studentAnswer.passed == 1? '正确' :'待批改' }}</el-tag>
|
</div>
|
<span>分数：{{data.form.examPaper.judgeScore}}</span>
|
<span>解析：{{item.content.analyze}}</span>
|
<span>正确答案：{{item.answer}}</span>
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="data.easyList && data.easyList.length >0">
|
<span style="font-size: 18px;font-weight: 600">简答题</span>
|
<div v-for="(item,index) in data.easyList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex;align-items: center">
|
<span style="font-size: 15px">{{data.singleList.length + data.multiList.length + data.judgeList.length + index+1}}.</span>
|
<span style="margin-left: 10px;font-size: 16px">{{item.title}}</span>
|
</div>
|
<div style="display: flex;margin-top: 15px;margin-left: 30px">
|
<span style="font-weight: 600">{{item.studentAnswer.answer}}</span>
|
</div>
|
<div style="display: flex;flex-direction: column;margin-left: 25px;margin-top: 20px;font-size: 14px;line-height: 25px">
|
<div style="display: flex">
|
<span>结果：</span>
|
<el-tag size="small" :type="item.studentAnswer.passed == 0 ? 'danger' :item.studentAnswer.passed == 1?'success': 'warning'">{{item.studentAnswer.passed == 0 ? '错误' :item.studentAnswer.passed == 1? '正确' :'待批改' }}</el-tag>
|
</div>
|
<span>分数：{{data.form.examPaper.easyScore}}</span>
|
<span>解析：{{item.content.analyze}}</span>
|
<span>正确答案：{{item.answer}}</span>
|
<div style="display: flex;align-items: center;margin-top: 5px" v-if="item.studentAnswer.passed == 2">
|
<span style="color: #EAB308">批改：</span>
|
<el-input-number v-model="item.score" :min="0" :max="data.form.examPaper.easyScore" :step="1" />
|
</div>
|
<div style="display: flex;align-items: center;margin-top: 5px" v-else>
|
<span style="color: #EAB308">得分：</span>
|
<el-input-number v-model="item.studentAnswer.score" :min="0" :max="data.form.examPaper.easyScore" :step="1" disabled />
|
</div>
|
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {onMounted, reactive, ref} from "vue";
|
import Cookies from "js-cookie";
|
import {useRoute, useRouter} from "vue-router";
|
import {getClassification} from "@/api/onlineEducation/courseClass";
|
import {ElMessage} from "element-plus";
|
import {doConfirmExam, getPaperStu} from "@/api/onlineEducation/exam";
|
const route = useRoute()
|
const router = useRouter();
|
|
const backValue = ref()
|
const data = reactive({
|
queryParams: {
|
id: null,
|
paperId: null,
|
pageNum: 1,
|
pageSize: 10,
|
},
|
form: {
|
id: null,
|
paperId: null,
|
studentId: null,
|
examPaper: {},
|
questions: [],
|
student: {}
|
},
|
singleList:[],
|
judgeList: [],
|
multiList:[],
|
easyList: [],
|
});
|
onMounted(async ()=>{
|
const val = JSON.parse(route.query.val)
|
backValue.value = val
|
data.queryParams.paperId = val.paperId
|
data.queryParams.id = val.id
|
await getStuPaper()
|
})
|
|
const getStuPaper = async () => {
|
const param = {
|
paperStudentId: data.queryParams.id
|
}
|
const res = await getPaperStu(param);
|
if(res.code === 200){
|
data.form = res.data
|
data.form.totalScore = res.data.examPaper.judgeNum * res.data.examPaper.judgeScore + res.data.examPaper.multiNum * res.data.examPaper.multiScore + res.data.examPaper.singleNum * res.data.examPaper.singleScore+ res.data.examPaper.easyNum * res.data.examPaper.easyScore
|
reduceData();
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
const reduceData = () => {
|
let result = data.form.questions.reduce((a, b) => {
|
if (a[b.questionType]) {
|
a[b.questionType].push(b);
|
} else {
|
a[b.questionType] = [b];
|
}
|
return a;
|
}, {});
|
for (const resultKey in result) {
|
if(resultKey == 1){
|
data.singleList.push(result[resultKey])
|
|
}else if(resultKey == 2){
|
data.multiList.push(result[resultKey])
|
}else if(resultKey == 3){
|
data.judgeList.push(result[resultKey])
|
}else {
|
data.easyList.push(result[resultKey])
|
}
|
}
|
if(data.singleList && data.singleList.length>0){
|
data.singleList = JSON.parse(JSON.stringify(data.singleList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
if(data.judgeList && data.judgeList.length>0){
|
data.judgeList = JSON.parse(JSON.stringify(data.judgeList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content),
|
}
|
})
|
}
|
if(data.multiList && data.multiList.length>0){
|
data.multiList = JSON.parse(JSON.stringify(data.multiList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content),
|
studentAnswer: {
|
answerArr:item.studentAnswer.answer?item.studentAnswer.answer.split(','):[],
|
answer: item.studentAnswer.answer,
|
id: item.studentAnswer.id,
|
paperId: item.studentAnswer.paperId,
|
passed: item.studentAnswer.passed,
|
questionId: item.studentAnswer.questionId,
|
score: item.studentAnswer.score,
|
studentId: item.studentAnswer.studentId,
|
}
|
}
|
})
|
}
|
if(data.easyList && data.easyList.length>0){
|
data.easyList = JSON.parse(JSON.stringify(data.easyList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
}
|
const back = () => {
|
const obj = {
|
type: 'exam',
|
paperId: data.queryParams.paperId,
|
pageNum: backValue.value.pageNum,
|
pageSize: backValue.value.pageSize,
|
}
|
const v = JSON.stringify(obj)
|
router.push({ path: "/examStu", query: { val: v } });
|
}
|
const submitExam = async() => {
|
const questions = data.easyList.map(item => {
|
return {
|
questionId: item.id,
|
score: item.score,
|
}
|
})
|
const param = {
|
id:data.form.id,
|
paperId: data.form.paperId,
|
studentId: data.form.studentId,
|
questions: questions
|
}
|
|
const res = await doConfirmExam(param);
|
if(res.code === 200){
|
await getStuPaper()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
console.log('简答',param)
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
.paper-contain {
|
display: flex;
|
flex-direction: row;
|
//background-color: #eff3f7;
|
height: 100%;
|
}
|
|
.paper-left {
|
width: 270px;
|
height: 100%;
|
|
.left-content {
|
width: 270px;
|
height: 100%;
|
position: fixed;
|
z-index: 999;
|
}
|
}
|
|
.paper-right {
|
flex: 1;
|
//background-color: #fff;
|
margin-left: 20px
|
}
|
|
:deep(.el-tag--large) {
|
width: 32px
|
}
|
::-webkit-scrollbar {
|
width: 5px;
|
height: 5px;
|
background-color: #e7e7e7;
|
opacity: 0;
|
}
|
::-webkit-scrollbar-track {
|
border-radius: 10px;
|
background-color: #ffffff;
|
}
|
::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
/*-webkit-box-shadow: inset 0 0 6px rgba(154,154,154,.3);*/
|
background-color: #e7e7e7;
|
}
|
}
|
.examInfo{
|
font-size: 15px;
|
margin-top: 20px;
|
display: flex;
|
flex-direction: column;
|
line-height: 25px;
|
}
|
.toRed{
|
color: #3b4cf6;
|
}
|
</style>
|
