GCLS_Page_Mobile/components/sort-question/sort-question.vue

<template>
	<!-- 排序题 -->
	<view class="sort-area" id="sort-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"
			v-html="sanitizeHTML(questionData.description)" :ref="'richText-2-2'+questionData.question_id"
			@longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<view class="sort-option-area">
			<view class="sort-option-box" v-for="(item,index) in newOption_list" :key="item.mark">
				<text v-if="isHorizontal" class="serial-number"
					:style="{'font-size':questionData.property.option_question_number_font_size}">
					{{ computedQuestionNumber(index,questionData.option_number_show_mode) }}
				</text>
				<SortableSort :sortableID="questionData.question_id+'_'+item.mark" :dataList="item.data_list"
					:isHorizontal="isHorizontal" @saveAnswerList="saveAnswerList"
					:class="[isHorizontal?'sort-item-area-h':'sort-item-area',computedAnswerClass(item.mark)]" ref="parent_ref"
					:disabled="answer_control[questionData.question_id].isReadOnly" />
			</view>
		</view>
		<template v-if="answer_control[questionData.question_id].isViewRightAnswer">
			<uni-title type="h1" title="正确答案:"></uni-title>
			<view class="sort-option-area">
				<view class="sort-option-box" v-for="(item,index) in questionData.option_list" :key="index">
					<text v-if="isHorizontal" class="serial-number"
						:style="{'font-size':questionData.property.option_question_number_font_size}">
						{{ computedQuestionNumber(index,questionData.option_number_show_mode) }}</text>
					<view :class="isHorizontal?'sort-item-area-h':'sort-item-area'">
						<view :class="isHorizontal?'sort-item-box-h':'sort-item-box'" v-for="(con,indexC) in item.data_list"
							:key="indexC">
							<view :class="isHorizontal?'item-content-h':'item-content'" v-html="sanitizeHTML(con.content)"
								:ref="'richText'+index+indexC+questionData.question_id"
								@longpress="previewByRichTextImg(index,indexC,questionData.question_id)"></view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="reference" v-if="isViewAnalysis&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">解析</text>
			<text class="reference-answer" v-html="sanitizeHTML(questionData.analysis)"
				:ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)">
			</text>
		</view>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		layout_type_list,
		computedQuestionNumber,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import SortableSort from '@/components/SortableSort/SortableSort.vue';
	import Sortable from 'sortablejs';
	import _ from 'lodash';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "sort-question",
		mixins: [AnswerControlMixin],
		components: {
			SortableSort
		},
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				layout_type_list,
				computedQuestionNumber,
				answer_control,
				markList: [],
				disrupted: true,
				newOption_list: [],
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val, oldVal) {
					this.newOption_list = _.cloneDeep(this.questionData.option_list);
					var cur = this.commonComputedAnswerControl(val);
					if (!cur.isReadOnly) {
						this.newOption_list.forEach(p => {
							p.data_list = p.data_list.sort(() => Math.random() - 0.5);
						})
					}
					this.markList = this.newOption_list.map(p => {
						return {
							mark: p.mark,
							value_list: p.data_list.map(m => m.mark)
						};
					})
					this.$nextTick(() => {
						//返回当前题目的高度
						var clientHeight = 0;
						const element = document.getElementById('sort-area');
						clientHeight = element.clientHeight;
						uni.$emit('receiveClientHeight', clientHeight);

						this.setUserAnswer();
					})
				},
				immediate: true,
				deep: true
			},
			answer_control: {
				handler(val) {
					// this.setUserAnswer();
				},
				immediate: true,
				deep: true
			},
		},
		computed: {
			isHorizontal() {
				return this.questionData.property.layout_type === layout_type_list[0].value;
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		methods: {
			saveAnswerList(mark, value_list) {
				if (!mark) return;
				const en = this.markList.find(item => item.mark === mark);
				if (en == null) {
					this.markList.push({
						'mark': mark,
						'value_list': value_list
					});
				} else {
					en.value_list = value_list;
				}
				this.saveUserAnswer();
			},
			//保存答案
			saveUserAnswer: function() {
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].answer_list = this.markList;
				this.questionData.user_answer[questionId].isEdit = true;
				var ansed = this.questionData.user_answer[questionId].answer_list;
				this.questionData.user_answer[questionId].is_fill_answer = ansed.length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.$set(this.questionData.user_answer[questionId], 'answer_list', ansed);
			},
			//回显
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var userAnswer = [];
					var questionId = that.questionData.question_id;
					var _ua = that.questionData.user_answer[questionId];
					if (_ua && _ua.answer_list && _ua.answer_list.length > 0)
						userAnswer = _ua.answer_list;

					var hasAnswer = userAnswer.length > 0;
					if (!hasAnswer)
						that.saveUserAnswer();
					var tmpList = _.cloneDeep(that.newOption_list);
					that.newOption_list = [];
					// 按照指定顺序排序
					tmpList.forEach((p, i) => {
						p.data_list.sort((a, b) => {
							const indexA = hasAnswer ? userAnswer[i].value_list.indexOf(a.mark) : 0;
							const indexB = hasAnswer ? userAnswer[i].value_list.indexOf(b.mark) : 0;
							return indexA - indexB;
						});
					})

					setTimeout(function() {
						that.newOption_list = tmpList;
					});
				};
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},
			computedAnswerClass() {
				var question_id = this.questionData.question_id;
				var cur = this.commonComputedAnswerControl(question_id);
				if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
					return '';
				}
				if (cur.isJudgeAnswer) {
					var answer_list = this.questionData.answer.answer_list;
					var user_answer_list = this.questionData.user_answer[question_id].answer_list;
					if (user_answer_list.length <= 0) {
						user_answer_list = this.newOption_list.map(p => {
							return {
								mark: p.mark,
								value_list: p.data_list.map(m => m.mark)
							};
						})
					}
					this.$nextTick(() => {
						for (let i = 0; i < answer_list.length; i++) {
							const myComponents = this.$refs.parent_ref;
							var wrong_ress = this.findDifferentValues(answer_list[i].value_list, user_answer_list[i].value_list);
							wrong_ress.forEach(mark => {
								myComponents[i].$refs[mark][0].$el.classList.add('wrong');
							})
							var right_ress = this.findCommonElements(answer_list[i].value_list, user_answer_list[i].value_list);
							right_ress.forEach(mark => {
								myComponents[i].$refs[mark][0].$el.classList.add('right');
							})
						}
					});
				}
				return '';
			},
			findDifferentValues(arr1, arr2) {
				let result = [];
				for (let i = 0; i < arr1.length; i++) {
					if (arr1[i] !== arr2[i]) {
						result.push(arr2[i]);
					}
				}
				return result;
			},
			findCommonElements(arr1, arr2) {
				return arr1.filter((element, index) => element === arr2[index]);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sort-area {
		.sort-option-area {
			margin: 32rpx 0;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;

			.sort-option-box {
				display: flex;
				align-items: top;

				.serial-number {
					margin-right: 16rpx;
					font-size: $font-size-serial;
				}

				.sort-item-area {
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;
					font-size: $font-size-serial;

					.sort-item-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						column-gap: 32rpx;

						.item-content {
							flex: 1;
							padding: 20rpx;
							border-radius: 8rpx;
							background-color: $uni-bg-color-grey;
						}
					}
				}

				.sort-item-area-h {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					column-gap: 32rpx;
					row-gap: 32rpx;
					font-size: $font-size-serial;

					.sort-item-box-h {
						display: flex;
						flex-direction: column;
						align-items: center;
						row-gap: 8rpx;

						.item-content-h {
							flex: 1;
							padding: 20rpx;
							border-radius: 8rpx;
							background-color: $uni-bg-color-grey;
						}
					}
				}
			}
		}

		.reference {
			margin: 32rpx 0;
			background-color: #f9f8f9;
			padding: 24rpx;

			.reference-title {
				display: block;
				line-height: 64rpx;
				color: #4E5969;
				font-size: 28rpx;
			}

			.reference-answer {
				color: #1D2129;
				line-height: 48rpx;
				font-size: 14pt;
			}
		}
	}
</style>