<template>
|
<div style="line-height:1.8" :class="question.template==='intelligence_title'?'fixed-div':''">
|
<div v-if="qType==1" v-loading="qLoading">
|
<div class="q-title" v-if="question.template==='intelligence_title'" @click="showPopup(qLabel+' '+question.title)" v-html="qLabel+' '+question.title" style="font-size: x-large"/>
|
<div class="q-title" v-else v-html="qLabel+' '+question.title" style="font-size: x-large"/>
|
<div class="q-content" :hidden="question.template==='intelligence_title'">
|
<el-radio-group v-model="answer.content" @change="answer.completed = true">
|
<el-radio class="intelligence-el_radio" v-for="(item, index) in question.items" :key="item.prefix" :label="item.prefix" @change="jumpNext" :disabled="answer.readOnly" :style="{display:displayVal}">
|
<span class="question-prefix" style="font-size: 18px">{{abcValue[index+1]}}.</span>
|
<span v-html="item.content" class="q-item-span-content" style="font-size: 18px"></span>
|
<br>
|
</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div v-else-if="qType==2" v-loading="qLoading">
|
<div class="q-title" v-html="question.title"/>
|
<div class="q-content">
|
<el-checkbox-group v-model="answer.contentArray" @change="answer.completed = true" >
|
<el-checkbox v-for="item in question.items" :label="item.prefix" :key="item.prefix" @change="jumpNext" >
|
<span class="question-prefix">{{item.prefix}}.</span>
|
<span v-html="item.content" class="q-item-span-content"></span>
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div v-else-if="qType==3" v-loading="qLoading">
|
<div class="q-title" v-html="question.title" style="display: inline;margin-right: 10px"/>
|
<span style="padding-right: 10px;">(</span>
|
<el-radio-group v-model="answer.content" @change="answer.completed = true" >
|
<el-radio v-for="item in question.items" :key="item.prefix" :label="item.prefix" @change="jumpNext" >
|
<span v-html="item.content" class="q-item-span-content"></span>
|
</el-radio>
|
</el-radio-group>
|
<span style="padding-left: 10px;">)</span>
|
</div>
|
<div v-else-if="qType==4" v-loading="qLoading">
|
<div class="q-title" v-html="question.title"/>
|
<div>
|
<el-form-item :label="item.prefix" :key="item.prefix" v-for="item in question.items" label-width="50px" style="margin-top: 10px;margin-bottom: 10px;">
|
<el-input v-model="answer.contentArray[item.prefix-1]" @change="answer.completed = true" />
|
</el-form-item>
|
</div>
|
</div>
|
<div v-else-if="qType==5" v-loading="qLoading">
|
<div class="q-title" v-html="question.title"/>
|
<div>
|
<el-input v-model="answer.content" type="textarea" rows="5" @change="answer.completed = true"/>
|
</div>
|
</div>
|
<div v-else>
|
</div>
|
<!-- 弹窗 -->
|
<div v-if="isPopupVisible" id="content-popup" class="popup" @click="closePopupOnOutsideClick">
|
<div class="popup-content">
|
<span class="close" @click="closePopup">×</span>
|
<div v-html="popupHtmlContent" class="popup-html"></div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
export default {
|
name: 'QuestionIntelligenceShow',
|
data () {
|
return {
|
abcValue: { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F' },
|
isPopupVisible: false
|
// abcValue: { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F' }
|
}
|
},
|
props: {
|
question: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
},
|
answer: {
|
type: Object,
|
default: function () {
|
return { id: null, content: '', contentArray: [] }
|
}
|
},
|
qLoading: {
|
type: Boolean,
|
default: false
|
},
|
qType: {
|
type: Number,
|
default: 0
|
},
|
qLabel: {
|
type: String,
|
default: ''
|
},
|
order: {
|
type: Number,
|
default: 0
|
},
|
displayVal: {
|
type: String,
|
default: 'block'
|
}
|
},
|
mounted () {
|
|
},
|
methods: {
|
jumpNext () {
|
let _this = this
|
// this.answer.readOnly = true
|
// if (this.answer.content === null || this.answer.content.trim() === '') {
|
// return
|
// }
|
setTimeout(function () {
|
_this.$emit('callNextSubject', [_this.order])
|
}, 500)
|
},
|
showPopup (content) {
|
this.popupHtmlContent = content
|
this.isPopupVisible = true
|
this.$nextTick(() => {
|
const popupElements = document.querySelectorAll('.popup-html p img')
|
popupElements.forEach(popupElement => {
|
if (popupElement) {
|
if (popupElements.length > 1) {
|
popupElement.style.width = '50%'
|
} else {
|
popupElement.style.width = '100%'
|
}
|
}
|
})
|
})
|
},
|
closePopup () {
|
this.isPopupVisible = false
|
},
|
closePopupOnOutsideClick (event) {
|
if (event.target.id === 'content-popup') {
|
this.closePopup()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
span:hover {
|
font-weight: bold;
|
}
|
.intelligence-el_radio {
|
margin-right: 60px;
|
}
|
|
.popup {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.8);
|
z-index: 1000;
|
}
|
.popup-content {
|
position: relative;
|
background-color: #fff;
|
padding: 20px;
|
border-radius: 8px;
|
overflow-y: auto;
|
}
|
.close {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
font-size: 24px;
|
color: #000;
|
cursor: pointer;
|
}
|
.thumbnail {
|
margin-bottom: 10px;
|
cursor: pointer;
|
}
|
.popup-html {
|
font-size: 16px;
|
color: #333;
|
}
|
</style>
|
