300 lines
7.9 KiB
Vue
300 lines
7.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
|
||
<view class="app">
|
||
<view class="item" v-for="(item, index) in questiondata.subjectResultList" :key="index">
|
||
<view class="title">
|
||
{{Number(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>
|
||
</view>
|
||
<!-- 单选。组合单选 -->
|
||
<u-radio-group v-if="
|
||
item.questionType == 'MULTIPLE_CHOICE' ||
|
||
item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
|
||
item.questionType == 'SCORING_QUESTIONS' ||
|
||
item.questionType == 'COMBINATION_SCORING_SUBJECT'
|
||
" v-model="item.checked" @change="radioGroupChange($event,item)">
|
||
<u-radio @change="radioChange($event,aitem,index)"
|
||
v-for="(aitem, aindex) in item.optionResults" :key="aindex" :name="aitem.id">
|
||
{{aitem.optionName}}
|
||
</u-radio>
|
||
</u-radio-group>
|
||
<!-- 多选 -->
|
||
<u-checkbox-group @change="checkboxGroupChange" v-if="
|
||
item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
|
||
item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
|
||
">
|
||
<u-checkbox @change="checkboxChange" v-model="aitem.checked"
|
||
v-for="(aitem, aindex) in item.optionResults" :key="aindex"
|
||
:name="aitem.id">{{aitem.optionName}}</u-checkbox>
|
||
</u-checkbox-group>
|
||
<!-- 填空题、组合填空 -->
|
||
<view class="" v-if="
|
||
item.questionType == 'FILL_IN_THE_BLANKS' ||
|
||
item.questionType == 'COMBINATION_BLANKS_SUBJECT'
|
||
">
|
||
<u-input placeholder="请输入" v-model="item.fillBlanksAnswer" type="textarea" :height="100"
|
||
:customStyle="{lineHeight: '30px'}" placeholder-style="color: #8E8E8E" />
|
||
</view>
|
||
<!-- 日期填空题、 -->
|
||
<view class="datatime" v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">
|
||
<text v-if="!item.fillBlanksAnswer">请选择出生日期</text>
|
||
<text v-else class="testitem">{{item.fillBlanksAnswer}}</text>
|
||
<image src="@/static/huijiantou.png" mode=""></image>
|
||
</view>
|
||
<!-- 时间填空题 -->
|
||
<view class="datatime" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
|
||
<text v-if="!item.fillBlanksAnswer">请选择时间</text>
|
||
<text v-else class="testitem">{{item.fillBlanksAnswer}}</text>
|
||
<image src="@/static/huijiantou.png" mode=""></image>
|
||
</view>
|
||
|
||
<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
|
||
<u-picker mode="time" @confirm="Changepicker" :value="index" :params="params" v-model="showtime">
|
||
</u-picker>
|
||
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
selectQuestionSubmit
|
||
} from '@/api/questionnaire/questionnaire.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
questiondata: {},
|
||
checkeddata: [],
|
||
checked: false,
|
||
params: {
|
||
// year: true,
|
||
// month: true,
|
||
// day: true,
|
||
hour: true,
|
||
minute: true,
|
||
// second: true,
|
||
// timestamp: true
|
||
},
|
||
time: '',
|
||
|
||
showtime: false,
|
||
|
||
show: false,
|
||
mode: 'date',
|
||
value: '',
|
||
list: [{
|
||
name: 'apple',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: 'banner',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: 'orange',
|
||
disabled: false
|
||
}
|
||
],
|
||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||
questions: null,
|
||
timer: null,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.patientQuestionSubmitResultId = options.patientQuestionSubmitResultId
|
||
console.log('this.patientQuestionSubmitResultId')
|
||
this.selectScriptInfodata()
|
||
|
||
},
|
||
methods: {
|
||
selectScriptInfodata() {
|
||
console.log('9999999999999')
|
||
selectQuestionSubmit(this.patientQuestionSubmitResultId).then(res => {
|
||
this.questiondata = res.data
|
||
this.questiondata.subjectResultList.forEach((e) => {
|
||
e.optionResults.forEach((el) => {
|
||
if (
|
||
(el.optionChooseSign == "0" &&
|
||
(e.questionType == "MULTIPLE_CHOICE") ||
|
||
e.questionType == "COMBINATION_RADIO_SUBJECT")
|
||
) {
|
||
e.checked = el.id;
|
||
} else if (
|
||
el.optionChooseSign == "0" &&
|
||
e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
|
||
) {
|
||
el.checked = true;
|
||
// this.checkeddata.push(el.id);
|
||
} else if (
|
||
el.optionChooseSign == "0" &&
|
||
e.questionType == "SCORING_QUESTIONS"
|
||
) {
|
||
e.checked = el.id;
|
||
} else if (
|
||
e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
|
||
el.optionChooseSign == "0"
|
||
) {
|
||
el.checked = true;
|
||
|
||
// this.checkeddata.push(el.id);
|
||
}
|
||
});
|
||
console.log(this.questiondata, 'this.questiondata')
|
||
});
|
||
|
||
|
||
})
|
||
},
|
||
// 日期
|
||
change(e) {
|
||
// this.show=true
|
||
console.log(e);
|
||
},
|
||
// 时间
|
||
Changepicker(e, item) {
|
||
// console.log(e,item,'909090')
|
||
this.time = e.hour + ':' + e.minute
|
||
console.log(this.time, '909090')
|
||
},
|
||
// 选中某个单选框时，由radio时触发
|
||
radioChange(e, item, index) {
|
||
console.log(e, item, index)
|
||
this.list.answers[index].optionId = item.id
|
||
console.log(this.list, '---')
|
||
},
|
||
// 选中任一radio时，由radio-group触发
|
||
radioGroupChange(e) {
|
||
// console.log(e);
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
height: 100vh;
|
||
background-color: #F7F5F5;
|
||
padding: 30rpx 0 0 0;
|
||
overflow: scroll;
|
||
|
||
.app {
|
||
pointer-events: none;
|
||
width: 96%;
|
||
margin: 16rpx auto;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 5rpx;
|
||
padding-bottom: 200rpx;
|
||
|
||
.btns {
|
||
width: 90%;
|
||
margin: 100rpx auto;
|
||
background-color: #26A888;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
height: 60rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.item {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
// padding: 30rpx 0;
|
||
|
||
.datatime {
|
||
width: 636rpx;
|
||
height: 63rpx;
|
||
background: #F6F6F6;
|
||
margin: 12rpx auto;
|
||
border-radius: 5rpx;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.testitem {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
|
||
text {
|
||
padding-left: 20rpx;
|
||
line-height: 63rpx;
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #8E8E8E;
|
||
}
|
||
|
||
image {
|
||
width: 9rpx;
|
||
height: 17rpx;
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 50%;
|
||
-webkit-transform: translateY(-50%);
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
::v-deep .u-input__textarea.data-v-fdbb9fe6 {
|
||
background: #F6F6F6 !important;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
::v-deep .u-input {
|
||
width: 636rpx;
|
||
// height: 63rpx;
|
||
background: #F6F6F6;
|
||
margin: 12rpx auto;
|
||
border: none;
|
||
border-radius: 5rpx;
|
||
|
||
}
|
||
|
||
::v-deep .u-input__input.data-v-fdbb9fe6 {
|
||
font-size: 26rpx !important;
|
||
}
|
||
|
||
|
||
::v-deep .u-radio-group {
|
||
display: inline-grid;
|
||
}
|
||
|
||
::v-deep .u-checkbox-group {
|
||
display: inline-grid;
|
||
}
|
||
|
||
::v-deep .u-checkbox {
|
||
padding: 20rpx;
|
||
|
||
}
|
||
|
||
::v-deep .u-radio {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.title {
|
||
padding: 40rpx 0 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |