postdischarge-applet/pages/detail/detail.vue

<template>
	<view class="">
		<view class="appcontent">
			<view class="item" v-for="(item, index) in questionlist.questionSubjectList" :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.questionSubjectOptionList" :key="aindex" :name="aitem.id">
						{{aitem.optionName}}
					</u-radio>
				</u-radio-group>
				<!-- 多选 -->
				<u-checkbox-group
					v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">
					<u-checkbox @change="radioChangecheck($event, aitem, index, aindex)" v-model="aitem.checked"
						v-for="(aitem, aindex) in item.questionSubjectOptionList" :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'" @tap="showtap(index)">
					<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'" @tap="showtimetap(index)">
					<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" :value="index" :mode="mode" @change="change($event)"
					immediateChange></u-calendar>
				<u-picker mode="time" @confirm="Changepicker($event)" :value="index" :params="params" immediateChange
					v-model="showtime">
				</u-picker>
			</view>
			<view class="btns" @tap='updata'>
				提交
			</view>
		</view>
		<view class="appcontent" v-if="questionlist==null||questionlist==''">
			<u-empty mode="list" icon-size='220' text='暂无内容'></u-empty>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		selectNodeContent,
		updateMessageStatus
	} from '@/api/Messagepush/Messagepush.js'
	import {
		updateTaskExecuteRecord
	} from '@/api/questionnaire/questionnaire.js'
	export default {
		props: {
			manageRouteNodeId: {
				type: Number
			}
		},
		data() {
			return {
				params: {
					hour: true,
					minute: true,
				},
				time: '',
				list: {},
				question: '',
				query: {
					id: '',
					messageStatus: 'READ'
				},
				questionlist: {},
				checked: false,
				show: false,
				showtime: false,
				showindex: '', //日期
				showtimeindex: '', //时间
				mode: 'date',
				item: null,
				timer: null,
			};
		},
		onLoad(options) {},
		mounted() {
			uni.setNavigationBarTitle({
				title: '问卷提交'
			});
			this.getlist();
		},
		watch: {
			manageRouteNodeId(newValue, oldValue) {
				this.query.id = newValue
				this.getlist();
			},
		},
		methods: {
			getlist() {
				this.query.id = this.manageRouteNodeId
				selectNodeContent(this.query.id).then(res => {
					this.questionInfoId = res.data.question.id
					this.questionlist = res.data.question
					this.questionlist.questionSubjectList.forEach(e => {
						if (e.questionType == 'MULTIPLE_CHOICE' || e.questionType ==
							'MULTIPLE_CHOICE_QUESTIONS' || e.questionType == 'SCORING_QUESTIONS' || e
							.questionType == 'COMBINATION_RADIO_SUBJECT' || e.questionType ==
							'COMBINATION_MULTIPLE_SUBJECT' || e.questionType ==
							'COMBINATION_SCORING_SUBJECT') {
							e.whetherScore = '1'
						} else {
							e.whetherScore = '0'
						}
						e.questionSubjectOptionList.forEach(el => {
							el.questionNumber = e.questionNumber
							if (e.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || e.questionType ==
								'COMBINATION_MULTIPLE_SUBJECT') {
								el.optionChooseSign = '1'
							}
						})
					})
				})
			},
			// 日期
			showtap(index) {
				this.show = true
				this.showindex = index
			},
			// 时间
			showtimetap(index) {
				this.showtime = true
				this.showtimeindex = index
			},
			// 提交
			updata() {
				if (uni.getStorageSync('patientId')) {
					this.questionlist.residentId = uni.getStorageSync('patientId')
					this.questionlist.questionInfoId = this.questionInfoId
					this.questionlist.manageRouteNodeId = this.query.id
				}
				// 对象.新名字=对象.原数组
				this.$delete(this.questionlist, 'updateBy', )
				this.$delete(this.questionlist, 'updateBy', )
				// this.$delete(this.questionlist, 'id', )
				this.questionlist.subjectResultDTOList = this.questionlist.questionSubjectList
				this.obj = JSON.parse(JSON.stringify(this.questionlist))
				delete this.obj.questionSubjectList;
				this.obj.subjectResultDTOList.forEach(e => {
					e.optionResultList = e.questionSubjectOptionList
					if (e.optionResultList.optionSubmitAnswer) {
						e.optionResultList.optionSubmitAnswer = e.optionResultList.optionSubmitAnswer
					}
					delete e.questionSubjectOptionList;
				});
				// return
				updateTaskExecuteRecord(this.obj).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
						})
						this.timer = setTimeout(e => {
							uni.navigateBack({ // 返回上一页
								delta: 1
							})
						}, 2000)
						uni.$emit('refresh')
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e, item, index) {
				this.questionlist.questionSubjectList[index].questionSubjectOptionList.forEach(el => {
					if (el.id == item.id) {
						el.optionChooseSign = '0'
					} else {
						el.optionChooseSign = '1'
					}
				})
			},
			radioGroupChange(e) {},
			// 复选框
			radioChangecheck(e, item, index, aindex) {
				if (e.value == true) {
					this.questionlist.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '0'
				} else {
					this.questionlist.questionSubjectList[index].questionSubjectOptionList[aindex].optionChooseSign = '1'
				}
			},
			// 日期
			change(e) {
				this.questionlist.questionSubjectList[this.showindex].fillBlanksAnswer = e.result
			},
			// 时间
			Changepicker(e) {
				this.time = e.hour + ':' + e.minute
				this.questionlist.questionSubjectList[this.showtimeindex].fillBlanksAnswer = this.time
			},
		}
	}
</script>
<style lang="scss">
	.appcontent {
		width: 96%;
		margin: 16rpx auto;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
		border-radius: 5rpx;

		::v-deep u-radio__icon-wrap--disabled {
			background-color: #2979ff;
		}

		.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;
			}
		}
	}

	// .message {
	// 	font-weight: 600;
	// 	font-size: 35rpx;
	// 	height: 95rpx;
	// 	text-align: center;
	// 	line-height: 95rpx;
	// }

	page {
		background-color: #F3F3F3;
	}

	::v-deep .u-empty {
		margin-top: 100rpx !important;
	}

	/deep/ .interlayer {
		margin-top: 36rpx !important;
		display: inherit;
		flex-direction: inherit;
		/* flex-wrap: inherit; */
		align-content: inherit;
		align-items: inherit;
		justify-content: inherit;
		width: 90% !important;
		padding-top: 20rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 15rpx;
		height: 100%;
		white-space: inherit;

		text {
			display: block;
			text-indent: 2em;
			margin-bottom: 20rpx;
			width: 93%;
			margin: 0 auto;
			letter-spacing: 2px;
			// word-wrap:break-word;
			word-break: break-all
		}
	}

	/deep/ .ql-size-small {
		font-size: 20rpx;
	}

	/deep/ .ql-size-large {
		font-size: 36rpx;
	}

	/deep/ .ql-size-huge {
		font-size: 46rpx;
	}

	/deep/ .richPic {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-align: 50;
		left: 50%;
		top: -30rpx;
		transform: translate(-50%);
		width: 90% !important;
	}
</style>