OnlineEducation-back-front/src/views/courseAdd/components/courseInfo.vue

<template>
	<a-form
		:model="formState"
		:rules="rules"
		ref="formRef"
		layout="horizontal"
		:label-col="{ span: 3 }"
		:wrapper-col="{ span: 21 }"
	>
		<a-form-item label="教室名称" name="courseName">
			<a-input v-model:value="formState.courseName" placeholder="输入教室名称" />
		</a-form-item>

		<a-form-item label="授课教师" name="teacherId">
			<a-select
				v-model:value="formState.teacherId"
				:fieldNames="{ label: 'name', value: 'id' }"
				:options="teacherOptions"
				placeholder="请选择授课教师"
			/>
		</a-form-item>

		<a-form-item label="课程分类" name="courseType">
			<a-select v-model:value="formState.courseType" :options="courseClass" placeholder="选择课程分类" />
		</a-form-item>

		<a-form-item label="上传封面" name="coverImageId">
			<coverUpload
				:coverImageId="formState.coverImageId"
				:imageUrl="coverImagePath"
				@handleChangeCover="handleChangeCover"
				@handleRemoveCover="handleRemoveCover"
			></coverUpload>
		</a-form-item>

		<!-- <a-form-item label="院系" name="collegeTwoId">
			<a-select
				v-model:value="formState.collegeTwoId"
				:fieldNames="{ label: 'name', value: 'id' }"
				:options="collegeMajorOptions"
				placeholder="请选择专业"
				@change="changeCollegeMajor"
			/>
		</a-form-item>
		<a-form-item label="专业" name="majorId">
			<a-select
				v-model:value="formState.majorId"
				:fieldNames="{ label: 'majorName', value: 'id' }"
				:options="majorOptions"
				placeholder="请选择专业"
			/>
		</a-form-item> -->

		<a-form-item label="教室描述" name="courseDesc">
			<quill-editor
				ref="quillEditorRef"
				placeholder="请输入教室描述"
				v-model:content="formState.courseDesc"
				style="height: 200px"
				contentType="html"
				theme="snow"
			/>
		</a-form-item>

		<a-form-item :wrapper-col="{ offset: 11, span: 2 }">
			<a-button type="primary" v-if="!courseInfoId" style="margin-right: 10px" @click="submit">提交</a-button>
			<a-button type="primary" v-if="courseInfoId" @click="editSub">编辑提交</a-button>
		</a-form-item>
	</a-form>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue'
	import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
	import { QuillEditor } from '@vueup/vue-quill'
	import '@vueup/vue-quill/dist/vue-quill.snow.css'
	import resourceAuditApi from '@/api/resourceAudit.js'
	import courseCenterApi from '@/api/courseCenter/courseinfo.js'
	import coverUpload from '@/views/myResources/coverUpload/index.vue'
	import sysConfig from '@/config/index'

	const emit = defineEmits(['nextStep'])
	import tool from '@/utils/tool'
	const props = defineProps({
		//课程id
		courseInfoId: {
			type: Number,
			required: true,
			default: null
		}
	})
	const formState = reactive({
		courseName: null,
		teacherId: null,
		courseType: null,
		courseDesc: null,
		collegeId: null, //院校一级id
		collegeTwoId: null, //院校二级id
		collegeThreeId: null, //院校三级id
		majorId: null, //专业
		coverImageId: null //封面id
	})
	const rules = {
		courseName: [{ required: true, message: '请输入教室名称', trigger: 'blur' }],
		teacherId: [{ required: true, message: '请选择授课教师', trigger: 'change' }],
		courseType: [{ required: true, message: '请选择课程分类', trigger: 'change' }],
		courseDesc: [{ required: true, message: '请输入教室描述', trigger: 'change' }],
		collegeTwoId: [{ required: true, message: '请选择院系', trigger: 'change' }],
		majorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
		coverImageId: [{ required: true, message: '请上传封面', trigger: 'change' }]
	}
	const loading = ref(false)
	const formRef = ref(null)
	const courseInfoId = ref(null) //课程表单添加成功id
	const collegeMajorOptions = ref([]) //院系
	const majorIdName = ref([]) //院系回显
	const majorOptions = ref([]) //专业
	const courseOptions = ref([]) //课程
	const teacherOptions = ref([]) //教师
	const coverImagePath = ref() // 预览回显
	const quillEditorRef = ref(null) // 预览回显
	const courseClass = tool.dictList('COURSE_TYPE')

	const handleSubmit = () => {
		// 这里添加实际提交逻辑，例如：
		// let params = {
		// 	current: pagination.pageNum,
		// 	size: pagination.pageSize,
		// 	verifyStatus: formState.verifyStatus,
		// 	fileName: formState.fileName
		// }

		// courseDesc.ops
		formState.courseDesc = toRaw(quillEditorRef.value).getHTML()
		courseCenterApi
			.add(formState)
			.then((res) => {
				courseInfoId.value = res.data.courseId
				// localStorage.setItem('courseInfoId', res.data.courseId)
				emit('nextStep', res.data.courseId)
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const handleEdit = () => {
		// collegeId
		formState.courseDesc = toRaw(quillEditorRef.value).getHTML()
		courseCenterApi
			.edit({ ...formState, courseId: courseInfoId.value })
			.then((res) => {
				emit('nextStep', courseInfoId.value)
			})
			.catch((err) => {
				console.log(err)
			})
	}
	// 封面文件id
	const handleChangeCover = (fileId) => {
		formState.coverImageId = fileId
	}
	const submit = () => {
		formRef.value.validate().then(() => {
			handleSubmit()
		})
	}
	const editSub = () => {
		formRef.value.validate().then(() => {
			handleEdit()
		})
	}
	// 移除封面文件
	const handleRemoveCover = () => {
		formState.coverImageId = null
	}
	//获取教师人员
	const getlecturerListSelector = () => {
		courseCenterApi
			.lecturerList()
			.then((res) => {
				teacherOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	//院系组织查询
	const getOrgTreeSelector = () => {
		resourceAuditApi
			.orgList()
			.then((res) => {
				collegeMajorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	const changeCollegeMajor = (value, selectedOptions) => {
		if (!value) {
			formState.collegeTwoId = ''
			// majorIdName.value = ''
			return false
		}
		formState.majorId = undefined
		// majorIdName.value = selectedOptions.map((it) => it.name).join('/')
		// formState.collegeId = value[0] || null
		// formState.collegeTwoId = value[1] || null
		// formState.collegeThreeId = value[2] || null
		// if (selectedOptions.length) {
		// 获取选中的最后一级
		// const lastSelected = selectedOptions[selectedOptions.length - 1]
		// formState.selectedCollegeMajor = {
		// 	id: lastSelected.id,
		// 	name: lastSelected.name,
		// 	fullPath: selectedOptions.map((opt) => opt.name).join(' / ')
		// }
		getCollegeMajor(formState.collegeTwoId)
		// }
	}
	const getCollegeMajor = (id) => {
		resourceAuditApi
			.zyselect({ collegeId: id })
			.then((res) => {
				majorOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	//获取课程下拉
	const getCourseAllList = () => {
		resourceAuditApi
			.courseAllList()
			.then((res) => {
				courseOptions.value = res.data
			})
			.catch((err) => {
				console.log(err)
			})
	}
	// 获取课程信息
	const getDetail = () => {
		courseInfoId.value = props.courseInfoId
		courseCenterApi.detail({ courseId: props.courseInfoId }).then((res) => {
			formState.courseName = res.data.courseName
			formState.teacherId = res.data.teacherId
			formState.collegeId = res.data.collegeId
			formState.collegeTwoId = res.data.collegeTwoId
			// majorIdName.value = res.data.collegeAllId?.split(',')
			getCollegeMajor(formState.collegeTwoId)
			formState.courseType = res.data.courseType
			formState.courseDesc = res.data.courseDesc
			toRaw(quillEditorRef.value).setHTML(formState.courseDesc)
			formState.coverImageId = res.data.coverImageId
			coverImagePath.value = res.data.coverImagePath
			formState.majorId = res.data.majorId
		})
	}
	const resetForm = () => {
		if (formState.courseName) {
			formRef.value.resetFields()
			formState.coverImageId = null
			formState.courseDesc = ''
			coverImagePath.value = undefined
			// 重置富文本编辑器内容
			if (quillEditorRef.value) {
				toRaw(quillEditorRef.value).setHTML('')
			}
		}
	}

	watch(
		() => props.courseInfoId,
		(newVal) => {
			// 初始化下拉选项数据
			getOrgTreeSelector()
			// getCourseAllList()
			getlecturerListSelector()

			if (newVal) {
				getDetail()
			} else {
				resetForm()
			}
		},
		{ immediate: true }
	)

	// 初始化数据
	// onMounted(() => {
	// 	// toRaw(quillEditorRef.value).setHTML(props.value)
	// 	// formState.courseDesc = '<p>默认内容</p>'
	// 	getOrgTreeSelector()
	// 	getCourseAllList()
	// 	getlecturerListSelector()
	// 	if (props.courseInfoId) {
	// 		getDetail()
	// 	}
	// })
</script>

<style scoped>
	.avatar-uploader > .ant-upload {
		width: 128px;
		height: 128px;
	}
	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}

	/* 调整表单间距 */
	.ant-form-item {
		margin-bottom: 16px;
	}
</style>