[考试分析] - 优化试题详情弹框

This commit is contained in:
“zouyf” 2024-10-21 16:34:39 +08:00
parent 92f23a35f9
commit a229e9933e
3 changed files with 90 additions and 8 deletions

View File

@ -0,0 +1,74 @@
<template>
<!-- 试题详情 -->
<el-drawer
v-model="activeExamInfoDrawer"
title="题目详情"
:with-header="false"
direction="rtl"
size="60%"
>
<div style="height: calc(100% - 50px);">
<el-scrollbar style="background: #F3F5F8;border-radius: 8px;">
<el-row class="drawer-main">
<el-col :span="24">
<span>{{activeExam.worktag}}</span>
<span style="margin-left: 4px" v-html="activeExam.titleFormat" ></span>
</el-col>
<el-col :span="24" style="padding: 4px" v-html="activeExam.workdescFormat">
</el-col>
<el-col :span="3" class="drawer-main-col"><em>答案</em></el-col>
<el-col :span="20" class="drawer-main-col" v-html="activeExam.workanswerFormat"></el-col>
<el-col :span="3" class="drawer-main-col"><em>分析</em></el-col>
<el-col :span="20" class="drawer-main-col" v-html="activeExam.method"></el-col>
<el-col :span="3" class="drawer-main-col"><em>解答</em></el-col>
<el-col :span="20" class="drawer-main-col" v-html="activeExam.analyse"></el-col>
<el-col :span="3" class="drawer-main-col" ><em>点评</em></el-col>
<el-col :span="20" class="drawer-main-col" v-html="activeExam.discuss"></el-col>
</el-row>
</el-scrollbar>
</div>
<div class="drawer-footer">
<el-button type="primary" @click="activeExamInfoDrawer = false">关闭</el-button>
</div>
</el-drawer>
</template>
<script setup name="examDetailsDrawerRef">
import {ref, reactive, watch} from 'vue'
const props = defineProps({
});
const activeExamInfoDrawer = ref(false);
const activeExam = ref({});
//
const acceptParams = (params) => {
activeExamInfoDrawer.value = true;
activeExam.value = params.activeExam;
}
defineExpose({
acceptParams
})
</script>
<style lang="scss" scoped>
.drawer-main{
margin: 1%;
padding: 2%;
display: flex;
text-align: left;
.drawer-main-col{
padding: 10px 0px;
}
}
.drawer-footer{
padding-top: 15px;
display: flex;
justify-content: flex-end;
box-sizing: border-box;
}
</style>

View File

@ -697,7 +697,7 @@ onUnmounted(() => {
overflow: hidden;
.classwork-score{
// overflow-y: auto;
/* overflow-y: auto; */
height: 100%;
}
}

View File

@ -17,10 +17,12 @@
<el-table-column align="center" prop="worktag" width="120"></el-table-column>
</el-table>
<!-- 试题详情 -->
<el-drawer v-model="activeExamInfoDrawer" title="题目详情" :with-header="false" direction="rtl" size="60%">
<!-- 试题详细信息 -->
<examDetailsDrawer ref="examDetailsDrawerRef"></examDetailsDrawer>
<!-- <el-drawer v-model="activeExamInfoDrawer" title="题目详情" :with-header="false" direction="rtl" size="60%">
<div style="height: calc(100% - 50px);">
<el-scrollbar style="background: #e9e9e9;border-radius: 8px;">
<el-scrollbar style="background: #F3F5F8;border-radius: 8px;">
<el-row class="drawer-main">
<el-col :span="24">
<span>{{activeExam.worktag}}</span>
@ -42,11 +44,13 @@
<div class="drawer-footer">
<el-button type="primary" @click="activeExamInfoDrawer = false">关闭</el-button>
</div>
</el-drawer>
</el-drawer> -->
</template>
<script setup>
import {ref, reactive} from 'vue'
import {ref, reactive, getCurrentInstance, nextTick} from 'vue'
import examDetailsDrawer from '@/components/exam-question/examDetailsDrawer.vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
listExamQuestion: {type: Array},
@ -57,8 +61,12 @@ const activeExamInfoDrawer = ref(false);
const activeExam = ref({});
const showExamAnalyseDrawer = (row) => {
activeExam.value = row;
activeExamInfoDrawer.value = true;
nextTick(() => {
const activeParams = {
activeExam: row,
}
proxy.$refs.examDetailsDrawerRef.acceptParams(activeParams);
})
}