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="semesterId" :rules="rules.semesterId">
				<a-select v-model:value="form.semesterId" placeholder="请选择学期" allowClear @change="handleSemesterChange">
					<a-select-option v-for="item in semesterList" :key="item.id" :value="item.id">
						{{ item.name }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<!-- <a-form-item label="专业" name="majorId">
				<a-select v-model:value="form.majorId" placeholder="请选择专业" allowClear @change="handleMajorChange">
					<a-select-option v-for="item in majorList" :key="item.id" :value="item.id">
						{{ item.majorName }}
					</a-select-option>
				</a-select>
			</a-form-item> -->
			<a-form-item label="课程" name="courseId" :rules="rules.courseId">
				<a-select v-model:value="form.courseId" placeholder="请选择课程" allowClear :disabled="!form.semesterId">
					<a-select-option v-for="item in courseList" :key="item.courseId" :value="item.courseId">
						{{ item.courseName }}
					</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'
	import resourceAuditApi from '@/api/resourceAudit.js'

	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 semesterList = ref([])
	const majorList = ref([])
	const courseList = 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,
		courseId: null,
		semesterId: null,
		majorId: 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' }],
		semesterId: [{ required: true, message: '请选择学期', trigger: 'change' }],
		courseId: [{ 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
				// 如果是编辑模式，需要根据已有数据加载相应的课程列表
				if (re.semesterId) {
					// 直接加载课程列表
					loadCourseList()
				}
			})
		}
		// 加载学期列表
		const semesterLoading = message.loading('正在加载学期列表...', 0)
		resourceAuditApi
			.semesterDownList()
			.then((res) => {
				if (res.code === 200) {
					semesterList.value = res.data
				} else {
					message.error('加载学期列表失败：' + (res.msg || '未知错误'))
				}
			})
			.catch((err) => {
				message.error('加载学期列表失败：' + (err.message || '网络错误'))
			})
			.finally(() => {
				semesterLoading()
			})
		// 加载专业
		// const majorLoading = message.loading('正在加载专业列表...', 0)
		// resourceAuditApi
		// 	.majordownList()
		// 	.then((res) => {
		// 		if (res.code === 200) {
		// 			majorList.value = res.data
		// 		} else {
		// 			message.error('加载专业列表失败：' + (res.msg || '未知错误'))
		// 		}
		// 	})
		// 	.catch((err) => {
		// 		message.error('加载专业列表失败：' + (err.message || '网络错误'))
		// 	})
		// 	.finally(() => {
		// 		majorLoading()
		// 	})
	})
	// 学期变更处理函数
	const handleSemesterChange = (value) => {
		form.courseId = null
		courseList.value = []

		// 如果学期和专业都已选择，则查询课程列表
		if (value) {
			loadCourseList()
		}
	}

	// 专业变更处理函数
	// const handleMajorChange = (value) => {
	// 	form.courseId = null
	// 	courseList.value = []

	// 	// 如果学期和专业都已选择，则查询课程列表
	// 	if (value && form.semesterId) {
	// 		loadCourseList()
	// 	}
	// }

	// 加载课程列表
	const loadCourseList = () => {
		// 添加加载状态
		const courseLoading = message.loading('正在加载课程列表...', 0)
		// 根据选择的学期和专业加载课程列表
		resourceAuditApi
			.courseAllList({
				semesterId: form.semesterId,
				majorId: form.majorId
			})
			.then((res) => {
				if (res.code === 200) {
					courseList.value = res.data
				} else {
					message.error('加载课程列表失败：' + (res.msg || '未知错误'))
				}
			})
			.catch((err) => {
				message.error('加载课程列表失败：' + (err.message || '网络错误'))
			})
			.finally(() => {
				courseLoading()
			})
	}

	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,
			semesterId: null,
			majorId: null,
			courseId: 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
		majorList.value = [] // 清空专业列表
		courseList.value = [] // 清空课程列表
	}

	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>