<template>
|
<div class="sheet-container w-full h-full">
|
<el-scrollbar>
|
<el-collapse v-model="activeNames">
|
<template v-for="item, itemIndex in examDetail">
|
<el-collapse-item :title="item.title" :name="item.questionType">
|
<div class="sheet-list grid grid-cols-5 gap-4 justify-items-center">
|
<div class="sheet-item cursor-pointer flex justify-center items-center"
|
v-for="question, index in item.questionList" @click="sheetClick(item.questionType, index)"
|
:class="itemClass(question,item.questionType, index)">
|
{{ index + 1 }}
|
</div>
|
</div>
|
</el-collapse-item>
|
</template>
|
</el-collapse>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { useGradeStore } from '@/store/index.js';
|
const gradeStore = useGradeStore();
|
|
const { examDetail, currentType, currentIndex, examInfo } = storeToRefs(gradeStore);
|
|
const activeNames = ref(examDetail.value.map(item => item.questionType));
|
|
const concatQuestion = (navbar, titleList) => {
|
if (Array.isArray(titleList) && titleList.length > 0) {
|
let tempIndex = 0;
|
titleList.forEach((title) => {
|
title.questionList.forEach((question) => {
|
question.isRight = navbar[tempIndex].right;
|
tempIndex++;
|
});
|
})
|
}
|
|
}
|
|
concatQuestion(examInfo.value.navbar, examDetail.value);
|
console.log(examDetail.value);
|
|
const itemClass = (question,type,index) => {
|
return {
|
right: question.isRight === true,
|
wrong: question.isRight === false,
|
active: currentType.value === type && currentIndex.value === index
|
};
|
};
|
|
const sheetClick = (type, index) => {
|
currentType.value = type;
|
currentIndex.value = index;
|
};
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.sheet-list {
|
width: 97%;
|
}
|
|
.sheet-item {
|
width: 35px;
|
height: 35px;
|
border: 1px solid #DCDFE6;
|
background-color: #fff;
|
color: #374151;
|
}
|
|
.active {
|
border-color: #3680fa;
|
}
|
|
.right {
|
background-color: #67C23A !important;
|
color: #fff !important;
|
}
|
|
.wrong {
|
background-color: #F56C6C !important;
|
color: #fff !important;
|
}
|
</style>
|
