<template>
|
<div class="questionDom">
|
<div class="list-item" v-for="(pitem, pindex) in questionList" :key="pindex">
|
<div class="list-item-title">
|
{{ pitem.name }}
|
<span v-if="isPreview">(共 {{ pitem.data.length }} 题)</span>
|
</div>
|
<div class="list-item-box" v-for="(item, index) in pitem.data" :key="index">
|
<div class="list-item-box-title-box">
|
<el-checkbox
|
v-if="noCheckbox"
|
v-model="item.isCheck"
|
@change="checkItems($event, item)"
|
size="large"
|
>
|
<template #default>
|
<i class="el-icon-check"></i>
|
<span
|
class="custom-checkbox"
|
v-html="index + 1 + '、' + item.questionStem?.stemTxt"
|
></span>
|
</template>
|
</el-checkbox>
|
<div class="list-item-box-title" v-else>
|
<span>{{ index + 1 }}</span
|
>、
|
<span class="questionT" v-html="item.questionStem?.stemTxt"></span>
|
<span v-if="item.score > 0 && isPreview">（{{ item.score }} 分）</span>
|
<el-icon v-if="isDelete" @click="deleteItem(item)" class="deletIcon">
|
<Delete />
|
</el-icon>
|
</div>
|
</div>
|
<div>
|
<div class="shortAnswer" v-if="item.questionType == 'shortAnswer' && !isJudge">
|
<div class="anSwer" v-if="!isPreview">
|
<div class="anSwerText" v-if="item.questionAnswer" style="margin: 15px 0">
|
<span style="min-width: 40px">答案：</span
|
><span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
<div v-else>
|
<!-- <el-input type="textarea" disabled :placeholder="item.userAnswer"></el-input> -->
|
<div v-html="item.userAnswer"></div>
|
</div>
|
</div>
|
<div class="discuss" v-else-if="item.questionType == 'discuss' && !isJudge">
|
<div class="anSwer" v-if="!isPreview">
|
<div class="anSwerText" v-if="item.questionAnswer" style="margin: 15px 0">
|
<span style="min-width: 40px">答案：</span
|
><span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
<div v-else>
|
<!-- <el-input type="textarea" disabled :placeholder="item.userAnswer"></el-input> -->
|
<div v-html="item.userAnswer"></div>
|
</div>
|
</div>
|
<div v-if="isJudge">
|
<div class="shortAnswer anSwerText" v-if="item.answer" style="margin: 15px 0">
|
<span v-html="item.answer"></span>
|
</div>
|
<div class="scoreData">
|
<span>得分：</span>
|
<el-input-number v-model="item.score" style="width: 100px" />
|
</div>
|
</div>
|
</div>
|
<div class="completion" v-if="item.questionType == 'completion'">
|
<div class="anSwer" v-if="!isPreview">
|
<div class="anSwerText" v-if="item.questionAnswer" style="margin: 15px 0">
|
<span style="min-width: 40px">答案：</span><span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
<div v-else>
|
<el-input
|
style="width: 200px"
|
v-model="item.userAnswer"
|
disabled
|
placeholder="请填写答案"
|
></el-input>
|
</div>
|
</div>
|
<div class="classification" v-if="item.questionType == 'classification'">
|
<div class="class-item-box">
|
<span
|
class="class-item-box-span"
|
v-for="citem in item.questionOption"
|
:key="citem.index"
|
>
|
{{ citem.txt }}
|
</span>
|
</div>
|
<div class="anSwer" v-if="!isPreview">
|
<div class="anSwerText" v-if="item.questionAnswer" style="margin: 15px 0">
|
<span>答案：</span>
|
<div class="class-anSwer-box">
|
<div
|
class="class-anSwer-box-item"
|
v-for="aitem in item.questionAnswer"
|
:key="aitem.key"
|
>
|
<span>{{ aitem.name }}：</span>
|
<div
|
class="class-anSwer-box-item-box"
|
v-for="citem in aitem.option"
|
:key="citem.key"
|
>
|
<span>{{ citem.txt }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
</div>
|
<div class="judge" v-if="item.questionType == 'judge'">
|
<el-radio-group v-model="item.customAnswer">
|
<el-radio
|
v-for="ritem in item.questionOption"
|
:key="ritem.index"
|
:value="ritem.value"
|
:label="ritem.value"
|
size="large"
|
:disabled="!isPreview"
|
>
|
{{ ritem.value + '. ' + ritem.txt }}
|
</el-radio>
|
</el-radio-group>
|
<div class="anSwer" v-if="!isPreview">
|
<div v-if="item.questionAnswer" style="margin: 15px 0">
|
答案：<span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
</div>
|
<div class="singleChoice" v-if="item.questionType == 'singleChoice'">
|
<el-radio-group v-if="!isInteraction" v-model="item.customAnswer">
|
<el-radio
|
v-for="ritem in item.questionOption"
|
:key="ritem.index"
|
:value="ritem.value"
|
:label="ritem.value"
|
size="large"
|
:disabled="!isPreview"
|
>
|
{{ ritem.value + '. ' + ritem.txt }}
|
</el-radio>
|
</el-radio-group>
|
<el-radio-group v-else v-model="item.userAnswer">
|
<el-radio
|
v-for="ritem in item.questionOption"
|
:key="ritem.index"
|
:value="ritem.value"
|
:label="ritem.value"
|
size="large"
|
:disabled="isInteraction"
|
>
|
{{ ritem.value + '. ' + ritem.txt }}
|
</el-radio>
|
</el-radio-group>
|
<div class="anSwer" v-if="!isPreview">
|
<div v-if="item.questionAnswer" style="margin: 15px 0">
|
答案：<span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
</div>
|
<div class="multipleChoice" v-if="item.questionType == 'multipleChoice'">
|
<el-checkbox-group v-if="!isInteraction" v-model="item.customAnswer">
|
<el-checkbox
|
v-for="mitem in item.questionOption"
|
:key="mitem.index"
|
:value="mitem.value"
|
:label="mitem.value"
|
size="large"
|
:disabled="!isPreview"
|
>
|
{{ mitem.value + '. ' + mitem.txt }}
|
</el-checkbox>
|
</el-checkbox-group>
|
<el-checkbox-group v-else v-model="item.userAnswer">
|
<el-checkbox
|
v-for="mitem in item.questionOption"
|
:key="mitem.index"
|
:value="mitem.value"
|
:label="mitem.value"
|
size="large"
|
:disabled="isInteraction"
|
>
|
{{ mitem.value + '. ' + mitem.txt }}
|
</el-checkbox>
|
</el-checkbox-group>
|
<div class="anSwer" v-if="!isPreview">
|
<div v-if="item.questionAnswer" style="margin: 15px 0">
|
答案：<span v-html="item.questionAnswer"></span>
|
</div>
|
<div :class="isPreview ? 'questionAnalysisCon' : ''" v-if="item.questionAnalysisCon">
|
分析：<span v-html="item.questionAnalysisCon"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="jugdeBtn" v-if="isJudge">
|
<el-button type="primary" @click="submitScore">提交分数</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, onMounted } from 'vue'
|
|
const props = defineProps<{
|
questionList?: any
|
noCheckbox?: boolean
|
isDelete?: boolean
|
isPreview?: boolean
|
isJudge?: boolean
|
isInteraction?: boolean
|
}>()
|
|
const emit = defineEmits(['selectQuestion', 'deleteItem', 'judgeUpdate'])
|
|
onMounted(() => {})
|
|
const checkItems = (e: Event, item: any) => {
|
emit('selectQuestion', item)
|
}
|
|
const deleteItem = (item: any) => {
|
emit('deleteItem', item)
|
}
|
|
const submitScore = () => {
|
const list = [...props.questionList]
|
let data: any = []
|
list.forEach((item) => {
|
data.push(...item.data)
|
})
|
emit('judgeUpdate', JSON.stringify(data))
|
}
|
</script>
|
<style lang="less" scoped>
|
.questionDom {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
padding: 10px;
|
box-sizing: border-box;
|
font-family: PingFang SC;
|
.questionT {
|
// display: flex;
|
flex-wrap: wrap;
|
align-items: baseline;
|
}
|
.jugdeBtn {
|
position: absolute;
|
bottom: -40px;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.list-item {
|
width: 100%;
|
margin-bottom: 20px;
|
.list-item-title {
|
padding: 4px 0;
|
padding-left: 10px;
|
border-left: 4px solid #ff6c00;
|
color: #000;
|
margin: 15px 0;
|
}
|
}
|
|
.list-item-box {
|
margin-bottom: 20px;
|
}
|
|
::v-deep(.list-item-box-title-box) {
|
margin-bottom: 10px;
|
.el-checkbox {
|
display: flex;
|
align-items: flex-start;
|
}
|
.el-checkbox__label {
|
line-height: 22px;
|
color: #000;
|
}
|
.el-checkbox__input {
|
margin-top: 3px;
|
}
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #ff6c00;
|
}
|
}
|
|
.list-item-box-title {
|
font-weight: 400;
|
font-size: 13px;
|
color: #000000;
|
display: flex;
|
width: 100%;
|
align-items: baseline;
|
justify-content: flex-start;
|
line-height: 25px;
|
.deletIcon {
|
color: red;
|
margin-left: 10px;
|
font-size: 15px;
|
cursor: pointer;
|
}
|
}
|
|
.anSwer {
|
font-family: PingFang SC;
|
font-weight: 400;
|
font-size: 13px;
|
color: #000000;
|
line-height: 22px;
|
padding-left: 20px;
|
box-sizing: border-box;
|
.anSwerText {
|
display: flex;
|
justify-content: flex-start;
|
|
.class-anSwer-box {
|
margin-left: 10px;
|
.class-anSwer-box-item {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
.class-anSwer-box-item-box span {
|
margin-left: 10px;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
.questionAnalysisCon {
|
min-height: 40px;
|
padding: 10px;
|
background-color: #ff6a00a8;
|
}
|
}
|
.shortAnswer {
|
padding: 20px;
|
line-height: 22px;
|
border: 1px solid #eee;
|
border-radius: 5px;
|
margin: 10px 0;
|
}
|
::v-deep(.judge),
|
::v-deep(.singleChoice) {
|
width: 100%;
|
margin-bottom: 20px;
|
.el-radio-group {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
padding-left: 20px;
|
box-sizing: border-box;
|
}
|
}
|
::v-deep(.multipleChoice) {
|
width: 100%;
|
margin-bottom: 20px;
|
.el-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
padding-left: 20px;
|
box-sizing: border-box;
|
}
|
}
|
.class-item-box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
.class-item-box-span {
|
margin-left: 50px;
|
}
|
}
|
.scoreData {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
span {
|
white-space: nowrap;
|
}
|
}
|
::v-deep(.custom-checkbox) {
|
display: inline-flex;
|
justify-content: flex-start;
|
p {
|
white-space: pre-line !important;
|
}
|
}
|
}
|
</style>
|
