OnlineEducation-back-front/src/views/exm/question/edit/gap-filling.vue

<template>
	<div class="app-container">
		<a-form :model="form" ref="formRef" :rules="rules" layout="vertical">
			<!-- <a-form-item label="年级：" name="gradeLevel" required>
				<a-select v-model:value="form.gradeLevel" placeholder="年级" @change="levelChange">
					<a-select-option v-for="item in levelEnum" :key="item.key" :value="item.key">
						{{ item.value }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="学科：" name="subjectId" required>
				<a-select v-model:value="form.subjectId" placeholder="学科">
					<a-select-option v-for="item in subjectFilter" :key="item.id" :value="item.id">
						{{ item.name + ' ( ' + item.levelName + ' )' }}
					</a-select-option>
				</a-select>
			</a-form-item> -->
			<a-form-item label="题库类型：" name="bankType" required>
				<a-select v-model:value="form.bankType" placeholder="题库类型">
					<a-select-option v-for="item in bankTypeEnum" :key="item.key" :value="item.key">
						{{ item.value }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="题干：" name="title" required>
				<a-input v-model:value="form.title" readonly @click="inputClick(form, 'title')" />
			</a-form-item>
			<a-form-item label="填空答案：" required>
				<div v-for="item in form.items" :key="item.prefix" class="question-item-label">
					<a-input
						v-model:value="item.content"
						readonly
						@click="inputClick(item, 'content')"
						class="question-item-content-input"
						style="width: 80%"
					/>
					<span class="question-item-span">分数：</span>
					<a-input-number v-model:value="item.score" :precision="1" :step="1" :max="100" />
				</div>
			</a-form-item>
			<a-form-item label="解析：" name="analyze" required>
				<a-input v-model:value="form.analyze" readonly @click="inputClick(form, 'analyze')" />
			</a-form-item>
			<a-form-item label="分数：" name="score" required>
				<a-input-number v-model:value="form.score" :precision="1" :step="1" :max="100" />
			</a-form-item>
			<a-form-item label="难度：" required>
				<a-rate v-model:value="form.difficult" class="question-item-rate" />
			</a-form-item>
			<a-form-item>
				<a-button type="primary" @click="submitForm" :loading="formLoading">提交</a-button>
				<a-button @click="resetForm">重置</a-button>
				<a-button type="success" @click="showQuestion">预览</a-button>
			</a-form-item>
		</a-form>
		<a-modal
			v-model:visible="richEditor.dialogVisible"
			width="800px"
			:footer="null"
			:closable="false"
			centered
			destroy-on-close
		>
			<Editor v-model="richEditorContent" :height="300" />
			<div style="text-align: right; margin-top: 16px">
				<a-button type="primary" @click="editorConfirm">确定</a-button>
				<a-button @click="richEditor.dialogVisible = false">取消</a-button>
			</div>
		</a-modal>
		<a-modal v-model:visible="questionShow.dialog" width="800px" :footer="null" :bodyStyle="{ padding: '24px' }">
			<QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading" />
		</a-modal>
	</div>
</template>

<script setup>
	import { ref, reactive, computed, onMounted } from 'vue'
	import { message } from 'ant-design-vue'
	import { useExamStore } from '@/store/exam'
	import tQuestionApi from '@/api/exam/question/tQuestionApi'
	import QuestionShow from '../components/Show.vue'
	import Editor from '@/components/Editor/index.vue'
	const bankTypeEnum = computed(() => examStore.getBankTypeEnum)

	const examStore = useExamStore()
	const props = defineProps({
		id: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['successful'])
	const formRef = ref()
	const form = reactive({
		id: null,
		questionType: 4,
		// gradeLevel: null,
		// subjectId: null,
		title: '',
		items: [],
		analyze: '',
		correct: '',
		score: '',
		difficult: 0,
		bankType: 1
	})
	const subjectFilter = ref([])
	const formLoading = ref(false)
	const rules = {
		bankType: [{ required: true, message: '请选择题库类型', trigger: 'change' }],
		gradeLevel: [{ required: true, message: '请选择年级', trigger: 'change' }],
		subjectId: [{ required: true, message: '请选择学科', trigger: 'change' }],
		title: [{ required: true, message: '请输入题干', trigger: 'blur' }],
		analyze: [{ required: true, message: '请输入解析', trigger: 'blur' }],
		score: [{ required: true, message: '请输入分数', trigger: 'blur' }]
	}
	const richEditor = reactive({
		dialogVisible: false,
		object: null,
		parameterName: '',
		instance: null
	})
	const richEditorContent = ref('')
	const questionShow = reactive({
		qType: 0,
		dialog: false,
		question: null,
		loading: false
	})
	const levelEnum = computed(() => examStore.levelEnum)
	const subjects = computed(() => examStore.subjects)

	onMounted(async () => {
		await examStore.initSubject()
		subjectFilter.value = subjects.value
		const id = props.id
		if (id && parseInt(id) !== 0) {
			formLoading.value = true
			tQuestionApi.select(id).then((re) => {
				Object.assign(form, re)
				formLoading.value = false
			})
		}
	})

	function inputClick(object, parameterName) {
		richEditor.object = object
		richEditor.parameterName = parameterName
		richEditorContent.value = object[parameterName] || ''
		richEditor.dialogVisible = true
	}

	function editorConfirm() {
		if (richEditor.parameterName === 'title') {
			if (questionItemReset(richEditorContent.value)) {
				richEditor.object[richEditor.parameterName] = richEditorContent.value
				richEditor.dialogVisible = false
			}
		} else {
			richEditor.object[richEditor.parameterName] = richEditorContent.value
			richEditor.dialogVisible = false
		}
	}

	function questionItemReset(content) {
		const spanRegex = /<span class="gapfilling-span (.*?)">(.*?)<\/span>/g
		const newFormItem = []
		const gapfillingItems = content.match(spanRegex)
		if (gapfillingItems === null) {
			message.error('请插入填空')
			return false
		}
		gapfillingItems.forEach((span) => {
			const pairRegex = /<span class="gapfilling-span (.*?)">(.*?)<\/span>/
			pairRegex.test(span)
			newFormItem.push({ id: null, itemUuid: RegExp.$1, prefix: RegExp.$2, content: '', score: '0' })
		})
		newFormItem.forEach((item) => {
			form.items.some((oldItem) => {
				if (oldItem.itemUuid === item.itemUuid) {
					item.content = oldItem.content
					item.id = oldItem.id
					item.score = oldItem.score
					return true
				}
			})
		})
		form.items = newFormItem
		return true
	}

	function submitForm() {
		formRef.value.validate().then((valid) => {
			if (valid) {
				formLoading.value = true
				tQuestionApi
					.edit(form)
					.then(() => {
						emit('successful')
						formLoading.value = false
					})
					.catch(() => {
						formLoading.value = false
					})
			}
		})
	}

	function levelChange() {
		form.subjectId = null
		subjectFilter.value = subjects.value.filter((data) => data.level === form.gradeLevel)
	}

	function showQuestion() {
		questionShow.dialog = true
		questionShow.qType = form.questionType
		questionShow.question = { ...form }
	}

	function resetForm() {
		const lastId = form.id
		formRef.value.resetFields()
		Object.assign(form, {
			id: null,
			questionType: 4,
			// gradeLevel: null,
			// subjectId: null,
			title: '',
			items: [],
			analyze: '',
			correct: '',
			score: '',
			difficult: 0,
			bankType: 1
		})
		form.id = lastId
	}
</script>

<style lang="less" scoped>
	.app-container {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
	}
	.question-item-label {
		margin-top: 10px;
		margin-bottom: 10px !important;
	}
	.question-item-content-input {
		margin-left: 8px;
		width: 60%;
		height: 20px;
	}
	.question-item-span {
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		box-sizing: border-box;
		margin-left: 10px;
	}
	.question-item-rate {
		line-height: 2.5;
	}
</style>