Эх сурвалжийг харах

fix(course): 修复课程创建和编辑时的数据初始化问题

将onMounted替换为watch监听courseInfoId变化
确保组件在课程ID变化时正确初始化数据
移除调试用的console.log语句
tanshanming 6 сар өмнө
parent
commit
24c9bc6870

BIN
public/favicon.ico


BIN
public/img/logo.png


+ 12 - 5
src/views/courseAdd/components/StudentDetails.vue

@@ -183,7 +183,7 @@
 </template>
 
 <script setup>
-	import { ref, reactive, computed, onMounted, unref } from 'vue'
+	import { ref, reactive, computed, onMounted, unref, watch } from 'vue'
 	import { message } from 'ant-design-vue'
 	import { DownOutlined } from '@ant-design/icons-vue'
 	import { getDepartmentMembers } from '@/api/course/courseDetail'
@@ -500,10 +500,17 @@
 			})
 			.filter(Boolean)
 	})
-	onMounted(async () => {
-		departments.value = await getDepartmentMembers()
-		getList()
-	})
+	watch(
+		() => selectedRowKeys.value,
+		async (newVal, oldVal) => {
+			departments.value = await getDepartmentMembers()
+			getList()
+		}
+	)
+	// onMounted(async () => {
+	// 	departments.value = await getDepartmentMembers()
+	// 	getList()
+	// })
 	function onDetail(record) {
 		detailVisible.value = true
 		let params = {

+ 27 - 12
src/views/courseAdd/components/courseInfo.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script setup>
-	import { reactive, ref, onMounted } from 'vue'
+	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'
@@ -190,7 +190,6 @@
 		courseCenterApi
 			.lecturerList()
 			.then((res) => {
-				console.log(res.data, '获取教师下拉数据')
 				teacherOptions.value = res.data
 			})
 			.catch((err) => {
@@ -284,16 +283,32 @@
 	//                             版权声明:本文为博主原创文章,遵循 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()
-		if (props.courseInfoId) {
-			getDetail()
-		}
-	})
+	watch(
+		() => props.courseInfoId,
+		(newVal) => {
+			if (newVal) {
+				getOrgTreeSelector()
+				getCourseAllList()
+				getlecturerListSelector()
+				if (props.courseInfoId) {
+					getDetail()
+				}
+			}
+		},
+		{ immediate: true }
+	)
+
+	// 初始化数据
+	// onMounted(() => {
+	// 	// toRaw(quillEditorRef.value).setHTML(props.value)
+	// 	// formState.courseDesc = '<p>默认内容</p>'
+	// 	getOrgTreeSelector()
+	// 	getCourseAllList()
+	// 	getlecturerListSelector()
+	// 	if (props.courseInfoId) {
+	// 		getDetail()
+	// 	}
+	// })
 </script>
 
 <style scoped>

+ 13 - 4
src/views/courseAdd/components/courseProduction/index.vue

@@ -238,10 +238,19 @@
 	const onAddChapter = () => {
 		getList()
 	}
-	onMounted(() => {
-		console.log('有没有id呢', props.courseInfoId)
-		getList()
-	})
+	watch(
+		() => props.courseInfoId,
+		(newVal) => {
+			if (newVal) {
+				getList()
+			}
+		},
+		{ deep: true }
+	)
+	// onMounted(() => {
+	// 	console.log('有没有id呢', props.courseInfoId)
+	// 	getList()
+	// })
 </script>
 
 <style scoped>

+ 1 - 1
src/views/courseAdd/components/studentSelection.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup>
-	import { ref, reactive, computed, onMounted } from 'vue'
+	import { ref, watch, computed, onMounted } from 'vue'
 	import resourceAuditApi from '@/api/resourceAudit.js'
 	import { Modal, Input, Tree, List, Avatar, Button } from 'ant-design-vue'
 	const emit = defineEmits(['close', 'confirm'])

+ 6 - 3
src/views/courseAdd/index.vue

@@ -2,6 +2,7 @@
 	<div style="overflow-y: auto">
 		<!-- <img :src="images" style="width: 100%; height: 100%" /> -->
 		<div>
+			-{{ courseInfoId }}-
 			<a-tabs v-model:activeKey="activeKey" type="card">
 				<a-tab-pane key="1" tab="教室信息">
 					<courseInfo :courseInfoId="courseInfoId" @nextStep="nextStep" />
@@ -24,7 +25,7 @@
 </template>
 
 <script setup>
-	import { ref, onMounted } from 'vue'
+	import { ref, computed } from 'vue'
 	import Header from '@/views/portal/components/Header.vue'
 	import Footer from '@/views/portal/components/Footer.vue'
 	import courseInfo from './components/courseInfo.vue'
@@ -41,8 +42,10 @@
 			default: null
 		}
 	})
-	const courseInfoId = ref(props.courseInfoId)
-	console.log('courseInfoId', courseInfoId.value)
+	const courseInfoId = computed(() => {
+		console.log('courseInfoId===', props.courseInfoId)
+		return props.courseInfoId
+	})
 	const nextStep = (id) => {
 		courseInfoId.value = id
 		activeKey.value = '2'

+ 1 - 0
src/views/courseManagement/index.vue

@@ -52,6 +52,7 @@
 		// router.push({
 		// 	path: '/portal/courseAdd'
 		// })
+		courseInfoId.value = null
 		courseModalVisible.value = true
 		courseModalTitle.value = '新建课程'
 	}