教室信息 回显 修改正常

src/views/courseAdd/components/courseInfo.vue

@@ -32,9 +32,7 @@
 				@handleRemoveCover="handleRemoveCover"
 			></coverUpload>
 		</a-form-item>
-		<a-form-item label="教室描述" name="courseDesc">
-			<quill-editor v-model:content="formState.courseDesc" contentType="html" theme="snow" />
-		</a-form-item>
+
 		<a-form-item label="院系" name="collegeId">
 			<a-cascader
 				v-model:value="majorIdName"
@@ -53,6 +51,18 @@
 				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: 5, span: 12 }">
 			<a-button
 				type="primary"
@@ -76,6 +86,8 @@
 	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({
@@ -94,7 +106,7 @@
 		collegeId: null, //院校一级id
 		collegeTwoId: null, //院校二级id
 		collegeThreeId: null, //院校三级id
-		majorId: '1', //专业
+		majorId: null, //专业
 		coverImageId: null //封面id
 	})
 	const rules = {
@@ -115,6 +127,7 @@
 	const courseOptions = ref([]) //课程
 	const teacherOptions = ref([]) //教师
 	const coverImagePath = ref() // 预览回显
+	const quillEditorRef = ref(null) // 预览回显
 	const courseClass = tool.dictList('COURSE_TYPE')
 
 	const handleSubmit = () => {
@@ -126,6 +139,9 @@
 		// 	verifyStatus: formState.verifyStatus,
 		// 	fileName: formState.fileName
 		// }
+
+		// courseDesc.ops
+		formState.courseDesc = toRaw(quillEditorRef.value).getHTML()
 		courseCenterApi
 			.add(formState)
 			.then((res) => {
@@ -140,6 +156,8 @@
 	}
 	const handleEdit = () => {
 		console.log('表单编辑数据:', formState)
+		// collegeId
+		formState.courseDesc = toRaw(quillEditorRef.value).getHTML()
 		courseCenterApi
 			.edit({ ...formState, courseId: courseInfoId.value })
 			.then((res) => {
@@ -229,20 +247,35 @@
 	}
 	// 获取课程信息
 	const getDetail = () => {
-		courseCenterApi.detail({ id: props.courseInfoId }).then((res) => {
+		courseInfoId.value = props.courseInfoId
+		courseCenterApi.detail({ courseId: props.courseInfoId }).then((res) => {
 			console.log(res.data, '课程信息详情')
 			formState.courseName = res.data.courseName
 			formState.teacherId = res.data.teacherId
+			formState.collegeId = res.data.collegeId
 			majorIdName.value = res.data.collegeAllId?.split(',')
 			getCollegeMajor(majorIdName.value[majorIdName.value.length - 1])
 			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 quill = toRaw(myQuillEditor.value).getQuill()
+	//   if (myQuillEditor.value) {
+	//     quill.getModule('toolbar').addHandler('image', imgHandler)
+	//   }
+
+	// ————————————————
+
+	//                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
 
+	// 原文链接：https://blog.csdn.net/moanuan/article/details/128240291
 	onMounted(() => {
+		// toRaw(quillEditorRef.value).setHTML(props.value)
+		// formState.courseDesc = '<p>默认内容</p>'
 		getOrgTreeSelector()
 		getCourseAllList()
 		getlecturerListSelector()

src/views/courseAdd/index.vue

@@ -1,36 +1,51 @@
 <template>
-	<div style="margin: 20px 500px">
-		<a-tabs v-model:activeKey="activeKey" type="card">
-			<a-tab-pane key="1" tab="教室信息">
-				<courseInfo :courseInfoId="courseInfoId" @nextStep="nextStep" />
-			</a-tab-pane>
-			<a-tab-pane key="2" tab="课程制作">
-				<courseProduction />
-			</a-tab-pane>
-			<a-tab-pane key="3" tab="学员管理">
-				<div>这里是学员管理的内容</div>
-			</a-tab-pane>
-			<a-tab-pane key="4" tab="作业布置">
-				<div>这里是作业布置的内容</div>
-			</a-tab-pane>
-			<a-tab-pane key="5" tab="测试布置">
-				<div>这里是测试布置的内容</div>
-			</a-tab-pane>
-		</a-tabs>
+	<div style="overflow-y: auto">
+		<!-- <img :src="images" style="width: 100%; height: 100%" /> -->
+		<a-layout>
+			<Header @onChangeCurrent="onChangeCurrent" />
+			<div style="width: 71%; margin-left: 10%">
+				<a-tabs v-model:activeKey="activeKey" type="card">
+					<a-tab-pane key="1" tab="教室信息">
+						<courseInfo :courseInfoId="courseInfoId" @nextStep="nextStep" />
+					</a-tab-pane>
+					<a-tab-pane key="2" tab="课程制作">
+						<courseProduction />
+					</a-tab-pane>
+					<a-tab-pane key="3" tab="学员管理">
+						<div>这里是学员管理的内容</div>
+					</a-tab-pane>
+					<a-tab-pane key="4" tab="作业布置">
+						<div>这里是作业布置的内容</div>
+					</a-tab-pane>
+					<a-tab-pane key="5" tab="测试布置">
+						<div>这里是测试布置的内容</div>
+					</a-tab-pane>
+				</a-tabs>
+			</div>
+		</a-layout>
+		<Footer />
 	</div>
 </template>
 
 <script setup>
 	import { ref, onMounted } from 'vue'
+	import Header from '@/views/portal/components/Header.vue'
+	import Footer from '@/views/portal/components/Footer.vue'
 	import courseInfo from './components/courseInfo.vue'
 	import courseProduction from './components/courseProduction/index.vue'
 	import { useRoute, useRouter } from 'vue-router'
+	const router = useRouter()
 	const route = useRoute()
 	const activeKey = ref('1') // 默认选中的标签页
 	const courseInfoId = ref(route.query.id || null) // 编辑课程信息id
 	const nextStep = () => {
 		activeKey.value = '2'
 	}
+	const onChangeCurrent = (current) => {
+		router.push({
+			path: '/' + current
+		})
+	}
 	// onMounted(() => {
 	// })
 </script>

src/views/courseManagement/components/ListView.vue

@@ -9,7 +9,7 @@
 		:pagination="false"
 		size="small"
 	>
-		<template #bodyCell="{ column, text }">
+		<template #bodyCell="{ column, text, record }">
 			<template v-if="column.dataIndex === 'publishTime'">{{ formatTimestamp(text) }}</template>
 			<template v-if="column.dataIndex === 'action'">
 				<a-button size="small" @click="handleDetail(record)" style="margin-right: 5px">详情</a-button>
@@ -39,6 +39,8 @@
 	import collegeApi from '@/api/college'
 
 	const router = useRouter()
+
+	const emit = defineEmits(['handleEdit'])
 	//发布按钮状态
 	const releaseVisible = ref(false)
 	const loading = ref(false) // 列表loading
@@ -121,6 +123,8 @@
 	const handleEdit = (record) => {
 		console.log('编辑记录', record)
 		// 在这里添加编辑记录的逻辑
+
+		emit('handleEdit', record)
 	}
 
 	// 上架按钮点击事件

src/views/courseManagement/index.vue

@@ -12,7 +12,7 @@
 					新建课程
 				</a-button>
 				<div style="height: 10px"></div>
-				<ListView ref="listViewRef" style="margin-top: 10px"></ListView>
+				<ListView ref="listViewRef" style="margin-top: 10px" @handleEdit="handleEdit"></ListView>
 			</div>
 		</a-layout>
 		<Footer />
@@ -46,13 +46,25 @@
 	const handleNewCourse = () => {
 		console.log('新建课程111')
 		// 在这里添加新建课程的逻辑
-		dialogViewRef.value.open()
+		// dialogViewRef.value.open()
+
+		router.push({
+			path: '/portal/courseAdd'
+		})
 	}
 	const handlerSearch = (data) => {
 		console.log('新建课程')
 		// 在这里添加新建课程的逻辑
 		listViewRef.value.setList(data)
 	}
+	const handleEdit = (item) => {
+		router.push({
+			path: '/portal/courseAdd',
+			query: {
+				id: item.courseId
+			}
+		})
+	}
 
 	const pagination = reactive({
 		pageSize: 10,