GCLS_Page_Mobile/components/table-fill-question/table-fill-question.vue

<template>
	<!-- 填表题 -->
	<view class="table-fill-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="uni-container">
			<uni-table :style="{ width: `${questionData.property.form_width}px` }">
				<uni-tr v-if="isEnable(questionData.property.is_enable_table_header)">
					<uni-th width="50" align="left"> </uni-th>
					<uni-th v-for="(item, index) in questionData.option_header_list" align="left"
						:style="{ width: `${item.width}%` }">
						{{item.text}}
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, rowIndex) in newOption_list" :key="rowIndex">
					<uni-td>{{ rowIndex+1 }}</uni-td>
					<uni-td v-for="(column, columnIndex) in row"
						:style="{ width: `${questionData.option_header_list[columnIndex].width}%`}">
						<view class="table-area">
							<view class="table-content">
								<text v-if="column.type==='text'">{{ column.text }}</text>
								<template v-else>
									<textarea v-model="column.text" auto-height placeholder="请输入"
										:disabled="answer_control[questionData.question_id].isReadOnly" class="fill"
										:style="{ width: '100%'}" @blur="handleTone(column.text,rowIndex,columnIndex)" />
								</template>
							</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="reference" :style="{ width: `${questionData.property.form_width}px` }"
			v-if="isViewReference&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">参考答案</text>
			<view class="uni-container">
				<uni-table :style="{ width: `${questionData.property.form_width}px` }">
					<uni-tr v-if="isEnable(questionData.property.is_enable_table_header)">
						<uni-th width="50" align="left"> </uni-th>
						<uni-th v-for="(item, index) in questionData.reference_answer_option_header_list" align="left"
							:style="{ width: `${item.width}%` }">
							{{item.text}}
						</uni-th>
					</uni-tr>
					<uni-tr v-for="(row, rowIndex) in questionData.reference_answer_option_list" :key="rowIndex">
						<uni-td>{{ rowIndex+1 }}</uni-td>
						<uni-td v-for="(column, columnIndex) in row">
							<view class="table-area">
								<view class="table-content">
									<text>{{ column.text }}</text>
								</view>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<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,
		answer_control,
		addTone,
		handleToneValue,
	} from '@/pages/answer_question/common/data/common.js';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	import _ from 'lodash';
	export default {
		name: "table-fill-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
				addTone,
				handleToneValue,
				newOption_list: [],
			};
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			},
			'questionData.option_list': {
				handler(val) {
					this.newOption_list = _.cloneDeep(val);
				},
				immediate: true,
				deep: true,
			},
			newOption_list: {
				handler(val) {
					var answerList = this.questionData.user_answer[this.questionData.question_id].answer_list;
					answerList = [];
					val.forEach((item) => {
						item.forEach((li) => {
							if (['input'].includes(li.type)) {
								let findIndex = answerList.findIndex((p) => p.mark === li.mark);
								if (findIndex === -1 && li.text.length <= 0) return;
								if (findIndex !== -1 && li.text.length <= 0) {
									answerList.splice(findIndex, 1);
									return;
								}
								if (findIndex === -1) {
									answerList.push({
										mark: li.mark,
										value: li.text,
									});
									return;
								}
								if (findIndex !== -1) {
									answerList[findIndex].value = li.text;
								}
							}
						})
					});
					this.questionData.user_answer[this.questionData.question_id].answer_list = answerList;
				},
				deep: true,
			},
		},
		methods: {
			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;

					if (userAnswer.length == 0) return;
					that.newOption_list.forEach(p => {
						p.forEach(x => {
							if (!x.mark) return false;
							var en = userAnswer.find(y => y.mark == x.mark)
							if (!en) return false;
							x.text = en.value;
						})
					})
				}
				this.$emit("getUserAnswer", this.questionData.question_id, callback);

			},
			handleTone(value, i, j) {
				this.newOption_list[i][j].text = value
					.trim()
					.split(/\s+/)
					.map((item) => {
						return handleToneValue(item);
					})
					.map((item) =>
						item.map(({
							number,
							con
						}) => (number && con ? addTone(Number(number), con) : number || con || '')),
					)
					.filter((item) => item.length > 0)
					.join(' ');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.table-fill-area {
		/deep/.uni-container {
			margin-top: 12rpx;

			.uni-table-scroll {
				overflow-x: visible;

				.uni-table {
					border-left: 1px #B5B5B5 solid;
					border-top: 1px #B5B5B5 solid;
					border-radius: 8rpx;

					.uni-table-th {
						color: $uni-color-main;
						background-color: #EAEFFB;
						font-size: 32rpx;
						padding: 24rpx 16rpx;
						font-weight: 700;
						border-right: 1px #B5B5B5 solid;
						border-bottom: 1px #B5B5B5 solid;

						.uni-table-th-content {
							justify-content: center !important;
						}
					}

					.uni-table-td {
						color: #000000;
						font-size: 32rpx;
						padding: 24rpx 16rpx;
						border-right: 1px #B5B5B5 solid;
						border-bottom: 1px #B5B5B5 solid;
					}
				}
			}
		}

		.reference {
			margin: 32rpx 0;
			background-color: $uni-bg-color-grey;
			padding: 24rpx;
			font-size: 28rpx;

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

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