GCLS_Page_Mobile/components/read-question/read-question.vue

<template>
	<!-- 阅读题 -->
	<view class="read-area" v-model="questionData">
		<view class="question_title">
			<text class="question_number">
				{{ questionNumberEndIsBracket(questionData.property.question_number) }}
			</text>
			<text class="question_stem" v-html="sanitizeHTML(questionData.stem)"
				:ref="'richText-1-1'+questionData.question_id"
				@longpress="previewByRichTextImg(-1,-1,questionData.question_id)"></text>
		</view>
		<view class="description"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
			v-html="sanitizeHTML(questionData.description)" :ref="'richText-2-2'+questionData.question_id"
			@longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<view class="article-area">
			<text class="article" v-html="sanitizeHTML(questionData.article)" :ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)"></text>
		</view>
		<view class="title-split"></view>
		<view class="option-area">
			<view v-if="isViewQuestion" v-for="(item, index) in questionData.question_list" :key="index">
				<SelectQuestion :questionData="item" :isEnableManualModify="questionData.property.is_enable_manual_modify"
					@setSubAnswer="setSubAnswer" v-if="item.type==='select' && item.isLoaded" ref="sub_exercise">
				</SelectQuestion>
				<JudgeQuestion :questionData="item" :isEnableManualModify="questionData.property.is_enable_manual_modify"
					@setSubAnswer="setSubAnswer" v-if="item.type==='judge'&&item.isLoaded" ref="sub_exercise">
				</JudgeQuestion>
				<MatchingQuestion :questionData="item" :isEnableManualModify="questionData.property.is_enable_manual_modify"
					@setSubAnswer="setSubAnswer" v-if="item.type==='matching'&&item.isLoaded" ref="sub_exercise">
				</MatchingQuestion>
				<FillQuestion :questionData="item" @setSubAnswer="setSubAnswer" v-if="item.type==='fill'&&item.isLoaded"
					ref="sub_exercise">
				</FillQuestion>
				<EssayQuestion :questionData="item" @setSubAnswer="setSubAnswer"
					v-if="item.type==='essay_question'&&item.isLoaded" ref="sub_exercise">
				</EssayQuestion>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		GetShareRecordInfo,
		GetExerciseQuestionIndexList,
		GetQuestionInfo,
		StartAnswer,
		GetQuestionInfo_AnswerRecord,
		FillQuestionAnswer,
		SubmitAnswer
	} from '@/api/exercise.js';
	import SelectQuestion from '@/components/select-question/select-question.vue';
	import JudgeQuestion from '@/components/judge-question/judge-question.vue';
	import MatchingQuestion from '@/components/matching-question/matching-question.vue';
	import FillQuestion from '@/components/fill-question/fill-question.vue';
	import ShortAnswerQuestion from '@/components/short-answer-question/short-answer-question.vue';
	import EssayQuestion from '@/components/essay-question/essay-question.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "read-question",
		mixins: [AnswerControlMixin],
		components: {
			SelectQuestion,
			JudgeQuestion,
			MatchingQuestion,
			FillQuestion,
			ShortAnswerQuestion,
			EssayQuestion,
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
				isViewQuestion: true,
				readQuestionData: questionData,
				readQuestionAnswerList: [],
				read_question_id: '',
			};
		},
		watch: {
			'questionData.question_list': {
				handler(val) {
					this.questionData.user_answer.isEdit = true;
				},
				immediate: true,
				deep: true
			},
			'questionData.question_id': {
				handler(val) {
					this.$emit("getUserAnswer", val, null);
					var that = this;
					var callback = function() {
						that.readQuestionData.answer_record_id = that.questionData.answer_record_id;
						that.loopWithAsyncAwait().then(function() {
							// 循环完成后执行后续操作...
							that.isViewQuestion = true;
						});
					}
					this.getReadQuestionUserAnswer(callback);
				},
				immediate: true,
				deep: true
			},
			'questionData.isReadQuestionWatch': {
				handler(val) {
					this.$nextTick().then(() => {
						let parent_answer_control = this.commonComputedAnswerControl(this.questionData.question_id);
						if (this.$refs.sub_exercise && this.$refs.sub_exercise.length > 0) {
							this.questionData.question_list.forEach((p, i) => {
								this.$refs.sub_exercise[i]?.showAnswer(
									parent_answer_control.isJudgeAnswer,
									parent_answer_control.isViewRightAnswer,
									parent_answer_control.isReadOnly,
									p.question_id,
									null,
									parent_answer_control.is_objective
								);
							})
						}

					})
				},
				immediate: true,
				deep: true
			},
		},
		methods: {
			async loopWithAsyncAwait() {
				for (let i = 0; i < this.questionData.question_list.length; i++) {
					var cur = this.questionData.question_list[i];
					await this.getReadQuestionInfo(cur);
					this.readQuestionData.parentType = this.questionData.type;
					this.readQuestionData.isSubSub = true;
					this.readQuestionData.isLoaded = true;
					var answer = this.readQuestionAnswerList.find(p => p.id == cur.id);
					if (answer) {
						this.readQuestionData.user_answer[cur.id].answer_list = answer.answer_list;
						this.setDefaultData(this.questionData.user_answer, cur.id);
						this.questionData.user_answer[cur.id].answer_list = answer.answer_list;
					}
					this.questionData.question_list[i] = this.readQuestionData;
					this.$forceUpdate();
				}
			},
			//获取题目详情
			async getReadQuestionInfo(question) {
				var that = this;
				await GetQuestionInfo({
					"question_id": question.id
				}).then((res) => {
					if (res.status && res.question && res.question.content) {
						var _questionData = JSON.parse(res.question.content);
						if (Array.isArray(_questionData.option_list)) {
							_questionData.option_list.forEach(p => {
								p.answer = '',
									p.checked = false
							})
						}
						_questionData.file_list = res.file_list;
						_questionData.question_id = question.id;

						//this.questionData, _questionData合并为新对象{}，属性值重复的后者覆盖前者
						that.readQuestionData = Object.assign({}, that.readQuestionData, _questionData);
						this.setDefaultData(that.readQuestionData.user_answer, question.id);
					}
				})
			},
			setSubAnswer(userAnswer, sub_question_id) {
				// console.log('设置答案', userAnswer);
				var parent_question_id = this.questionData.question_id;
				this.questionData.user_answer[parent_question_id].isEdit = true;
				this.questionData.user_answer[sub_question_id] = userAnswer;
			},
			//设置某个题目的答案默认格式
			setDefaultData(userAnswer, question_id) {
				if (!userAnswer[question_id]) {
					userAnswer[question_id] = {
						is_fill_answer: false, // 用户是否填写答案,
						content: '', // 答案内容（JSON 格式文本）,
						answer_list: [],
						isEdit: false,
					}
				}
			},
			//获取答案
			getReadQuestionUserAnswer: function(callback) {
				var that = this;
				GetQuestionInfo_AnswerRecord({
					answer_record_id: that.questionData.answer_record_id,
					question_id: that.questionData.question_id
				}).then((res) => {
					//	if (!res.status) return;
					that.questionData.remark = res.remark;
					let lst = [];
					if (res.user_answer.content) {
						var obj = JSON.parse(res.user_answer.content);
						if (obj)
							lst = obj.question_list;
					}
					that.readQuestionAnswerList = lst;
					if (callback && typeof callback === 'function') {
						callback();
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.read-area {
		.article-area {
			margin-top: 32rpx;
			font-size: $font-size-serial;
			background-color: $uni-bg-color-grey;
			border-radius: 16rpx;
			padding: 24rpx;
		}

		.title-split {
			margin: 48rpx 0 28rpx 0;
			height: 20rpx;
			position: relative;
			width: 110%;
			left: -5%;
			background: $uni-bg-color-grey;
			box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) inset;
		}

		.option-area {
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;

			uni-view:not(:last-child) {
				border-bottom: 1px solid #CDCDCD;
			}
		}
	}
</style>