376 lines
11 KiB
Vue
376 lines
11 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 问卷模板 -->
|
||
<el-dialog title="问卷预览" :visible.sync="questionopen" width="30%">
|
||
<div class="words" v-for="(item, index) in questiondata.questionSubjectList" :key="index">
|
||
{{ index + 1 }}.{{ item.questionName }}
|
||
<span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
|
||
<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
|
||
<span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
|
||
<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
|
||
<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
|
||
<span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
|
||
<span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
|
||
<span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
|
||
<span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
|
||
<span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
|
||
<el-radio-group v-if="item.questionType == 'MULTIPLE_CHOICE' ||
|
||
item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
|
||
item.questionType == 'SCORING_QUESTIONS' ||
|
||
item.questionType == 'COMBINATION_SCORING_SUBJECT'
|
||
" v-model="questiondata[index]" class="custom-radio-group" disabled
|
||
@change="radioGroupChange($event, item)">
|
||
<el-radio class="custom" v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
|
||
:label="aitem.id" @change="radioChange($event, aitem, index)">{{ aitem.optionName }}</el-radio>
|
||
</el-radio-group>
|
||
<!-- 多选、组合多选 -->
|
||
<el-checkbox-group disabled v-model="checkeddata" @change="radioGroupChange($event, item, 'checkbox')"
|
||
v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
|
||
item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
|
||
">
|
||
<el-checkbox v-for="(aitem, aindex) in item.questionSubjectOptionList" :key="aindex"
|
||
:label="aitem.id" @change="radioChangecheck($event, aitem, index, aindex)">{{ aitem.optionName
|
||
}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
<!-- 填空题、组合填空 -->
|
||
<div v-if="item.questionType == 'FILL_IN_THE_BLANKS' ||
|
||
item.questionType == 'COMBINATION_BLANKS_SUBJECT'
|
||
" class="tk">
|
||
<el-input v-model="item.fillBlanksAnswer" disabled placeholder="请输入答案" type="textarea" />
|
||
<!-- <el-input></el-input> -->
|
||
</div>
|
||
<!-- 日期填空题、 -->
|
||
<div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" style="margin: 20px 0 10px 30px">
|
||
<el-date-picker disabled @change="timepicker($event, index)" clearable
|
||
v-model="item.fillBlanksAnswer" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
|
||
</el-date-picker>
|
||
</div>
|
||
<!-- 时间填空题 -->
|
||
<div style="margin: 20px 0 10px 30px" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
|
||
<el-time-select disabled @change="timepickerselect($event, index)" clearable
|
||
v-model="item.fillBlanksAnswer" :picker-options="{
|
||
start: '08:30',
|
||
step: '00:30',
|
||
end: '23:30',
|
||
}" placeholder="选择时间">
|
||
</el-time-select>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "questionopen",
|
||
props: ['lookitem'],
|
||
data() {
|
||
return {
|
||
checkeddata: [],
|
||
questiondata: {},
|
||
questionopen: false,
|
||
};
|
||
},
|
||
watch: {
|
||
},
|
||
created() {
|
||
this.questiondata = this.lookitem
|
||
},
|
||
mounted() {
|
||
},
|
||
watch: {
|
||
lookitem(newValue, oldValue) {
|
||
if (newValue) {
|
||
this.questiondata = newValue;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
questionopentrue() {
|
||
this.questionopen = true
|
||
},
|
||
// 日期填空题
|
||
timepicker(e, index) {
|
||
this.questiondata.questionSubjectList[index].fillBlanksAnswer = e
|
||
},
|
||
// 复选框
|
||
radioChangecheck(e, item, index, aindex) {
|
||
console.log(e, item, index, '选中某个复选框时')
|
||
if (e == true) {
|
||
this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
|
||
} else {
|
||
this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
|
||
}
|
||
},
|
||
// 时间填空题
|
||
timepickerselect(e, index) {
|
||
this.questiondata.questionSubjectList[index].fillBlanksAnswer = e
|
||
},
|
||
radioGroupChange(e, item) {
|
||
},
|
||
// 选中某个单选框时，由radio时触发
|
||
radioChange(e, item, index) {
|
||
this.questiondata.questionSubjectList[index].questionSubjectOptionList.forEach(el => {
|
||
if (el.id == item.id) {
|
||
el.optionChooseSign = '0'
|
||
}
|
||
else {
|
||
el.optionChooseSign = '1'
|
||
}
|
||
})
|
||
console.log(this.questiondata, 'this.questiondata')
|
||
this.questiondata
|
||
},
|
||
// 复选框
|
||
radioChangecheck(e, item, index, aindex) {
|
||
if (e == true) {
|
||
this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
|
||
} else {
|
||
this.questiondata.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .el-input.is-disabled .el-input__inner {
|
||
background: #fff !important;
|
||
color: #606266;
|
||
}
|
||
|
||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||
color: #606266;
|
||
background: #fff;
|
||
}
|
||
|
||
.tk {
|
||
::v-deep .el-textarea__inner {
|
||
margin: 20px 0 10px 10px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-radio {
|
||
padding: 10px;
|
||
}
|
||
|
||
::v-deep .el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px 0px 10px 24px;
|
||
}
|
||
|
||
::v-deep .el-checkbox {
|
||
padding: 10px 0 10px 0px;
|
||
// padding: 10px;
|
||
}
|
||
|
||
.custom-radio-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px 0 10px 10px;
|
||
|
||
.custom {
|
||
padding: 10px 0 10px 10px;
|
||
}
|
||
}
|
||
|
||
.bodytop {
|
||
position: relative;
|
||
top: 20px;
|
||
// height: 500px;
|
||
width: 400px;
|
||
margin: 0 auto;
|
||
// background: red;f
|
||
overflow: auto;
|
||
border: 1px solid #e2e2e2;
|
||
|
||
.titledata {
|
||
margin: 30px 0px 15px 30px;
|
||
top: 14px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.audiotop {
|
||
margin: 10px 0px 10px 30px;
|
||
}
|
||
|
||
img {
|
||
// width: 362px;
|
||
// height: 127px;
|
||
margin: 0px 0px 0px 30px;
|
||
}
|
||
|
||
.know {
|
||
margin: 11px 0px 10px 30px;
|
||
font-size: 20px;
|
||
font-weight: 550;
|
||
}
|
||
|
||
.knowlist {
|
||
margin: 10px 0px 10px 30px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 100%;
|
||
height: 500px;
|
||
// background: yellow;
|
||
}
|
||
|
||
.header {
|
||
background-color: #f1f3f5;
|
||
padding-top: 10px;
|
||
|
||
::v-deep .el-tabs__header {
|
||
margin: 0 !important;
|
||
width: 100%;
|
||
// overflow: auto;
|
||
// height: 500px;
|
||
// background: red;
|
||
}
|
||
|
||
.bottomheader {
|
||
overflow: auto;
|
||
width: 99%;
|
||
background-color: #fff;
|
||
margin: 10px auto;
|
||
padding: 10px 20px;
|
||
|
||
.sport {
|
||
padding: 10px 50px 10px 10px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.words {
|
||
font-size: 15px;
|
||
padding: 10px 50px 10px 10px;
|
||
}
|
||
|
||
.sports {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.word {
|
||
font-size: 14px;
|
||
font-weight: 550;
|
||
padding: 50px 50px 10px 10px;
|
||
}
|
||
|
||
.videoleft {
|
||
width: 40%;
|
||
height: 200px;
|
||
background: red;
|
||
}
|
||
|
||
.time {
|
||
font-size: 20px;
|
||
font-weight: 550;
|
||
padding: 10px 50px 10px 10px;
|
||
}
|
||
|
||
.number {
|
||
width: 25px;
|
||
height: 25px;
|
||
text-align: center;
|
||
display: inline-block;
|
||
color: white;
|
||
background: blue;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.nexttime {
|
||
font-size: 15px;
|
||
padding: 10px 50px 10px 10px;
|
||
}
|
||
|
||
.images {
|
||
width: 53%;
|
||
height: 241px;
|
||
margin: 0 auto;
|
||
background: red;
|
||
}
|
||
|
||
.attention {
|
||
font-size: 14px;
|
||
font-weight: 550;
|
||
padding: 10px 50px 10px 10px;
|
||
}
|
||
|
||
// .videobottom
|
||
// {
|
||
// font-size: 14px;
|
||
// font-weight: 550;
|
||
// padding: 10px 50px 10px 10px;
|
||
// }
|
||
}
|
||
|
||
.topheader {
|
||
width: 99%;
|
||
background-color: #fff;
|
||
margin: 0 auto;
|
||
|
||
.information {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 10px 20px;
|
||
height: 110px;
|
||
|
||
.top,
|
||
.bottom {
|
||
color: #666666;
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
div {
|
||
width: 25%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user {
|
||
width: 100%;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
height: 80px;
|
||
align-items: center;
|
||
line-height: 80px;
|
||
|
||
.source {
|
||
display: flex;
|
||
position: relative;
|
||
right: 59px;
|
||
position: absolute;
|
||
|
||
.item {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 20px;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.gender {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.age {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.headsculpture {
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |