OnlineEducation-back-front/src/views/exm/question/edit/single-choice.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>
				<div v-if="form.title" class="rich-text-preview" v-html="form.title" @click="inputClick(form, 'title')"></div>
				<a-input
					v-else
					v-model:value="form.title"
					readonly
					placeholder="点击编辑题干内容"
					@click="inputClick(form, 'title')"
				/>
			</a-form-item>
			<a-form-item label="选项：" required>
				<div v-for="(item, index) in form.items" :key="item.prefix" class="question-item-label">
					<a-input v-model:value="item.prefix" style="width: 50px; margin-right: 8px" />
					<div
						v-if="item.content"
						class="rich-text-preview question-item-content-input"
						style="width: 60%"
						v-html="item.content"
						@click="inputClick(item, 'content')"
					></div>
					<a-input
						v-else
						v-model:value="item.content"
						readonly
						placeholder="点击编辑选项内容"
						@click="inputClick(item, 'content')"
						class="question-item-content-input"
						style="width: 60%"
					/>
					<a-button danger size="small" class="question-item-remove" @click="questionItemRemove(index)">删除</a-button>
				</div>
			</a-form-item>
			<a-form-item label="解析：" name="analyze" required>
				<div
					v-if="form.analyze"
					class="rich-text-preview"
					v-html="form.analyze"
					@click="inputClick(form, 'analyze')"
				></div>
				<a-input
					v-else
					v-model:value="form.analyze"
					readonly
					placeholder="点击编辑解析内容"
					@click="inputClick(form, 'analyze')"
				/>
			</a-form-item>
			<a-form-item v-if="form.bankType !== '2'" 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 label="正确答案：" name="correct" required>
				<a-radio-group v-model:value="form.correct">
					<a-radio v-for="item in form.items" :value="item.prefix" :key="item.prefix">{{ item.prefix }}</a-radio>
				</a-radio-group>
			</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="questionItemAdd">添加选项</a-button>
				<a-button type="success" @click="showQuestion">预览</a-button>
			</a-form-item>
		</a-form>
		<a-modal
			v-model:visible="richEditor.dialogVisible"
			width="70%"
			:footer="null"
			:closable="false"
			centered
			destroy-on-close
		>
			<Editor v-model="richEditorContent" :toolbar="toolbar" :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'
	import '../style/common.less'
	const bankTypeEnum = computed(() => examStore.getBankTypeEnum)
	const toolbar = computed(() => examStore.toolbar)
	const examStore = useExamStore()
	const props = defineProps({
		id: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['successful'])
	const formRef = ref()
	const form = reactive({
		id: null,
		questionType: 1,
		// gradeLevel: null,
		// subjectId: null,
		title: '',
		items: [
			{ prefix: 'A', content: '' },
			{ prefix: 'B', content: '' },
			{ prefix: 'C', content: '' },
			{ prefix: 'D', content: '' }
		],
		analyze: '',
		correct: '',
		score: '',
		difficult: 0,
		bankType: null
	})
	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' }],
		correct: [{ required: true, message: '请选择正确答案', trigger: 'change' }]
	}
	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() {
		richEditor.object[richEditor.parameterName] = richEditorContent.value
		richEditor.dialogVisible = false
	}

	function questionItemRemove(index) {
		form.items.splice(index, 1)
	}

	function questionItemAdd() {
		const items = form.items
		let newLastPrefix
		if (items.length > 0) {
			let last = items[items.length - 1]
			newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
		} else {
			newLastPrefix = 'A'
		}
		items.push({ prefix: newLastPrefix, content: '' })
	}

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

	function resetForm() {
		const lastId = form.id
		formRef.value.resetFields()
		Object.assign(form, {
			id: null,
			questionType: 1,
			// gradeLevel: null,
			// subjectId: null,
			title: '',
			items: [
				{ prefix: 'A', content: '' },
				{ prefix: 'B', content: '' },
				{ prefix: 'C', content: '' },
				{ prefix: 'D', content: '' }
			],
			analyze: '',
			correct: '',
			score: '',
			difficult: 0,
			bankType: null
		})
		form.id = lastId
	}

	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 }
	}
</script>

<style lang="less" scoped>
	.app-container {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
	}
</style>