<template>
|
<div>
|
<div class="subject-content">
|
<div class="subject-title">
|
{{ index }}
|
<span class="subject-title-content"
|
v-html="subjectInfo.subjectName" />
|
<span class="subject-title-content">
|
( 实操题 <span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"> {{subjectInfo.score}}分 </span>)
|
</span>
|
</div>
|
|
<ul class="subject-options"
|
v-for="(option, index) in options"
|
:key="option.id">
|
<li class="subject-option pbox">
|
|
<span class="num"
|
@click="selectCheckbox($event, option)"> {{ userAnswer[index].value }} </span>
|
|
<label :for="'option' + option.id">
|
<span class="subject-option-prefix">{{ option.optionName + '.' }} </span>
|
<span v-html="option.optionContent"
|
class="subject-option-prefix" />
|
</label>
|
|
</li>
|
</ul>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'MultipleChoices',
|
data () {
|
return {
|
subjectCount: 0,
|
subjectInfo: {
|
subjectName: '',
|
score: 0
|
},
|
options: [],
|
userAnswer: [],
|
index: ''
|
}
|
},
|
watch: {
|
|
},
|
methods: {
|
getAnswer () {
|
return this.userAnswer
|
},
|
setAnswer (answer, option) {
|
if (answer != '') {
|
|
this.userAnswer = answer
|
|
} else {
|
this.userAnswer = []
|
option.forEach(item => {
|
this.userAnswer.push({ key: item.optionName, value: '' })
|
})
|
}
|
},
|
setSubjectInfo (subject, subjectCount, index) {
|
this.subjectCount = subjectCount
|
this.subjectInfo = subject
|
if (subject.hasOwnProperty('examSubjectOptions')) {
|
this.options = subject.examSubjectOptions
|
}
|
if (subject.hasOwnProperty('answer')) {
|
this.setAnswer(subject.answer, subject.examSubjectOptions)
|
}
|
this.index = index + '.'
|
},
|
getSubjectInfo () {
|
this.subjectInfo.options = this.options
|
return this.subjectInfo
|
},
|
|
selectCheckbox ($event, option) {
|
|
var flag = false;
|
|
this.userAnswer.forEach(item => {
|
if (item.value != "") {
|
flag = true
|
}
|
})
|
|
this.userAnswer
|
|
if (flag == true) {
|
// 其中最少有一个有值的
|
var onlyFlag = false;
|
var onlyValue = '';
|
var ind = 0;
|
this.userAnswer.forEach(item => {
|
if (item.value != '' && item.value > ind) {
|
ind = item.value
|
}
|
})
|
|
this.userAnswer.forEach(item => {
|
if (item.key == option.optionName) {
|
if (item.value != '') {
|
onlyValue = item.value
|
onlyFlag = true
|
item.value = ''
|
} else {
|
item.value = ind + 1
|
}
|
}
|
})
|
|
this.userAnswer.forEach(item => {
|
if (onlyFlag == true) {
|
|
if (item.value > onlyValue) {
|
item.value -= 1
|
}
|
|
}
|
})
|
|
|
} else {
|
// 全部都为空
|
this.userAnswer.forEach(item => {
|
if (item.key == option.optionName) {
|
item.value = 1
|
}
|
})
|
}
|
|
},
|
|
isChecked (optionName) {
|
return this.userAnswer.includes(optionName)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../assets/css/subject.scss';
|
|
.pbox .num {
|
// margin: 2px;
|
// text-align: center;
|
// vertical-align: middle;
|
// display: inline-block;
|
// width: 20px;
|
// height: 20px;
|
// border: 1px solid #999;
|
width: 26px;
|
height: 26px;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
margin: auto 0;
|
// opacity: 0;
|
text-align: center;
|
font-size: 18px;
|
font-weight: bold;
|
border: 1px solid #cfcfcf;
|
background-color: #ff9;
|
cursor: pointer;
|
}
|
|
.subject-options > li label {
|
height: 36px;
|
line-height: 28px !important;
|
}
|
.pbox.checked {
|
border: 1px solid #99f;
|
background-color: #ccf;
|
}
|
.pbox.checked .num {
|
border: 1px solid #ff0;
|
background-color: #ff9;
|
}
|
</style>
|
