<template>
|
<div class="list-container w-full h-full">
|
<el-scrollbar>
|
<el-card shadow="hover" class="mb-3" v-for="item in props.dataList" :key="item.id">
|
<div class="item flex justify-between items-center">
|
<div class="left-container flex flex-col justify-between">
|
<div class="top-container flex items-center">
|
<div class="title mr-5 text-xl font-bold">{{ item.examName }}</div>
|
<div class="tag">
|
<el-tag type="primary" effect="light" round v-if="item.status === 0">
|
已批改
|
</el-tag>
|
<el-tag type="danger" effect="light" round v-if="item.status === 1">
|
缺考
|
</el-tag>
|
</div>
|
</div>
|
<div class="mid-container flex items-center my-4 text-gray-700">
|
<el-icon class="mr-1">
|
<Timer />
|
</el-icon>
|
<div class="time">
|
交卷时间: {{ item.submitTime }}
|
</div>
|
</div>
|
<div class="bottom-container flex text-sm text-gray-400 mb-3">
|
<div class="bottom-item">
|
总分: {{ item.totalScore }}
|
</div>
|
<div class="bottom-item">
|
题数: {{ item.questionCount }}
|
</div>
|
<div class="bottom-item">
|
答题时间: {{ item.doTime / 60 }}分钟
|
</div>
|
</div>
|
|
<div class="grade-container flex items-center text-red-600">
|
<div class="grade-label mr-1">成绩:</div>
|
<div class="grade-num text-lg font-bold">{{ item.score }}</div>
|
</div>
|
</div>
|
<div class="right-container">
|
<div class="button-container">
|
<el-button type="primary" size="large" @click="checkExam(item)" v-if="item.status !== 1">查看试卷</el-button>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Timer } from '@element-plus/icons-vue';
|
import { useRouter } from 'vue-router';
|
import { useGradeStore } from '@/store/index.js';
|
import { getGradeInfo } from '@/api/modules/grade.js';
|
|
const gradeStore = useGradeStore();
|
|
const router = useRouter();
|
const props = defineProps({
|
dataList: {
|
type: Array,
|
default: () => []
|
}
|
});
|
|
const stateList = {
|
1: {
|
text: '未开始',
|
type: 'primary',
|
disabled: true
|
},
|
'ing': {
|
text: '进行中',
|
type: 'success',
|
disabled: false
|
},
|
'finished': {
|
text: '已结束',
|
type: 'info',
|
disabled: true
|
}
|
};
|
const loading = ref(false);
|
|
|
const checkExam = (item) => {
|
getGradeInfo(item.id).then((res) => {
|
const {id,examName, score,navbar,titleItems} = res.data;
|
gradeStore.setExamInfo({
|
id,
|
examName,
|
score,
|
navbar
|
});
|
gradeStore.setExamDetail(titleItems);
|
gradeStore.initExam(res.data.titleItems[0].questionType);
|
router.push('/grade');
|
}).catch(err => {
|
|
});
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.item {
|
width: 100%;
|
min-height: 120px;
|
}
|
|
.bottom-item {
|
margin-right: 30px;
|
}
|
</style>
|
