<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
title="试卷预览"
|
width="50%"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<el-card style="height: 500px;overflow: scroll">
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="state.singleList && state.singleList.length >0">
|
<span style="font-size: 18px;font-weight: 600">单选题</span>
|
<div v-for="(item,index) in state.singleList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex">
|
<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-left: 10%;margin-top: 15px">
|
<div v-for="single in item.content.items">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 30px 30px" >
|
<div v-if="state.multiList && state.multiList.length >0">
|
<span style="font-size: 18px;font-weight: 600">多选题</span>
|
<div v-for="(item,index) in state.multiList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex">
|
<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-left: 10%;margin-top: 15px">
|
<div v-for="single in item.content.items">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="state.judgeList && state.judgeList.length >0">
|
<span style="font-size: 18px;font-weight: 600">判断题</span>
|
<div v-for="(item,index) in state.judgeList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex">
|
<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-left: 10%;margin-top: 15px">
|
<div v-for="single in item.content.items">
|
<span style="font-size: 15px;margin-right: 5px">{{single.prefix}}</span>
|
<span style="font-size: 15px;margin-right: 20px">{{single.content}}</span>
|
</div>
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex;flex-direction: column;margin: 0 30px" >
|
<div v-if="state.easyList && state.easyList.length >0">
|
<span style="font-size: 18px;font-weight: 600">简答</span>
|
<div v-for="(item,index) in state.easyList" :key="index" style="margin-left: 15px;margin-top: 10px">
|
<div style="display: flex;flex-direction: column;">
|
<div style="margin-top: 10px;display: flex">
|
<span style="font-size: 15px">题目{{index+1}}：</span>
|
<span style="margin-left: 10px;font-size: 16px">{{item.title}}</span>
|
</div>
|
<el-divider />
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from 'vue'
|
import {ElMessage} from "element-plus";
|
import {getPaper} from "@/api/onlineEducation/exam";
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
const startUsername = ref('');
|
|
const state = reactive({
|
form: {
|
id: '',
|
name: '',
|
categoryId: null,
|
companyName: '',
|
companyId: null
|
},
|
questionList: [],
|
singleList:[],
|
judgeList: [],
|
multiList:[],
|
easyList: []
|
})
|
|
const openDialog = async (value) => {
|
console.log('111',value)
|
dialogVisible.value = true;
|
const res = await getPaper(value.id)
|
if(res.code == 200){
|
let result = res.data.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){
|
state.singleList.push(result[resultKey])
|
|
}else if(resultKey == 2){
|
state.multiList.push(result[resultKey])
|
}else if(resultKey == 3){
|
state.judgeList.push(result[resultKey])
|
}else {
|
state.easyList.push(result[resultKey])
|
}
|
}
|
if(state.singleList && state.singleList.length>0){
|
state.singleList = JSON.parse(JSON.stringify(state.singleList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
if(state.judgeList && state.judgeList.length>0){
|
state.judgeList = JSON.parse(JSON.stringify(state.judgeList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
if(state.multiList && state.multiList.length>0){
|
state.multiList = JSON.parse(JSON.stringify(state.multiList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
if(state.easyList && state.easyList.length>0){
|
state.easyList = JSON.parse(JSON.stringify(state.easyList[0])).map(item => {
|
return {
|
...item,
|
content: JSON.parse(item.content)
|
}
|
})
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
|
console.log('state.singleList',state.multiList)
|
}
|
|
const handleClose = () => {
|
state.singleList = [];
|
state.multiList = [];
|
state.judgeList = [];
|
state.easyList = [];
|
dialogVisible.value = false;
|
emit("getList")
|
|
}
|
const reset = () => {
|
|
}
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
|
:deep( .el-divider--horizontal) {
|
margin: 15px 0;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
