From ad2ec33c6a85d6459a1a0b89fc41b9e859aee187 Mon Sep 17 00:00:00 2001 From: yuk255 Date: Mon, 15 Sep 2025 16:27:30 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E8=AF=BE=E7=A8=8B?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=BF=9B=E5=85=A5=E9=94=99=E8=AF=AF=E5=88=B7?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/CourseComponents/CourseCategory.vue | 137 ++++-------------- 1 file changed, 26 insertions(+), 111 deletions(-) diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue index 9800a81..e5d0ddc 100644 --- a/src/components/admin/CourseComponents/CourseCategory.vue +++ b/src/components/admin/CourseComponents/CourseCategory.vue @@ -21,10 +21,7 @@
- - +
@@ -146,12 +143,11 @@ const loading = ref(false); const error = ref(''); // 获取课程列表 -const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean = true) => { +const getCourseList = async (forceRefresh: boolean = false) => { try { - if (showLoading) { - loading.value = true; - } + loading.value = true; error.value = ''; // 清除之前的错误状态 + courseList.value = []; const params = { keyword: searchValue.value, @@ -159,45 +155,33 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean }; console.log('🔄 获取课程列表 - Tab:', activeTab.value, 'Status:', params.status, 'Keyword:', params.keyword); - + const response = await TeachCourseApi.getTeacherCourseList(params); + loading.value = false; if (response && response.data) { - // 处理API返回的数据 - const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({ - ...course, - // 映射状态显示文本 + const courseData = response.data.result.map((course: TeachCourse): CourseDisplayItem => ({ + ...course, + // 映射状态显示文本 statusText: getStatusText(course.status), - // 确保有默认图片 image: course.cover || '/images/teacher/fj.png' })); - + // 如果是强制刷新或者第一次加载，直接设置数据 if (forceRefresh || originalCourseList.value.length === 0) { originalCourseList.value = courseData; - courseList.value = courseData; // 直接显示API返回的数据，不需要再过滤 + courseList.value = courseData; } else { // 否则进行本地过滤 originalCourseList.value = courseData; filterCourseList(); } - - console.log('✅ 课程列表加载成功，共', courseData.length, '门课程'); } } catch (err: any) { console.error('获取课程列表失败:', err); + loading.value = false; // 设置错误信息 - if (err.message?.includes('Network Error') || err.code === 'NETWORK_ERROR') { - error.value = '网络连接失败，请检查网络设置后重试'; - } else if (err.response?.status === 401) { - error.value = '登录已过期，请重新登录'; - } else if (err.response?.status === 403) { - error.value = '暂无权限访问此功能'; - } else if (err.response?.status >= 500) { - error.value = '服务器内部错误，请稍后重试'; - } else { - error.value = err.message || '加载课程数据失败，请稍后重试'; - } + error.value = err.message || '' // 清空课程列表 originalCourseList.value = []; @@ -206,9 +190,7 @@ const getCourseList = async (forceRefresh: boolean = false, showLoading: boolean // 显示错误提示 message.error(error.value); } finally { - if (showLoading) { loading.value = false; - } } }; @@ -253,21 +235,17 @@ const searchValue = ref('') const activeTab = ref('ongoing') // 监听标签页变化，重新调用接口获取数据 -watch(activeTab, async (newTab, oldTab) => { - console.log('📋 Tab切换:', oldTab, '->', newTab); +watch(activeTab, async () => { - // 立即清空当前列表，避免显示错误的数据 courseList.value = []; originalCourseList.value = []; - // 当tab切换时，重新调用接口获取对应状态的数据，但不显示加载状态 - await getCourseList(true, false); + await getCourseList(true); }); // 监听搜索值变化，进行本地过滤 watch(searchValue, () => { console.log('🔍 搜索关键词变化:', searchValue.value); - // 搜索时不重新调用接口，只进行本地过滤 filterCourseList(); }); @@ -279,8 +257,8 @@ const navigateToCreateCourse = () => { // 处理搜索 const handleSearch = async () => { console.log('🔍 执行搜索:', searchValue.value); - // 搜索时重新调用接口，传递关键词参数 - await getCourseList(true); + // 监听搜索值变化，进行本地过滤 + filterCourseList(); }; // 获取课程对应的选项列表 @@ -289,19 +267,16 @@ const getOptionsForCourse = (course: CourseDisplayItem) => { return [ { label: '下架', value: 'offline', icon: '/images/teacher/下架.png' }, { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' }, - // { label: '移动', value: 'move', icon: '/images/teacher/移动.png' }, { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' } ]; } else if (course.status === 0) { // 未开始/草稿 return [ { label: '发布', value: 'publish', icon: '/images/teacher/加号.png' }, { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' }, - // { label: '移动', value: 'move', icon: '/images/teacher/移动.png' }, { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' } ]; } else if (course.status === 2) { // 已结束 return [ - // { label: '查看', value: 'view', icon: '/images/teacher/小编辑.png' }, { label: '发布', value: 'publish', icon: '/images/teacher/加号.png' }, { label: '编辑', value: 'edit', icon: '/images/teacher/小编辑.png' }, { label: '删除', value: 'delete', icon: '/images/teacher/删除.png' } @@ -358,10 +333,6 @@ const handleOptionSelect = (value: string, course: any) => { // 发布逻辑 handlePublishCourse(course); break; - // case 'move': - // // 移动逻辑 - // handleMoveCourse(course); - // break; default: break; } @@ -437,7 +408,7 @@ const handleOfflineCourse = (course: CourseDisplayItem) => { await TeachCourseApi.editCourse(updatedData); - getCourseList(); + await getCourseList(); message.success(`课程"${course.name}"已下架，现在可以删除了`); } catch (error) { @@ -470,72 +441,20 @@ const handlePublishCourse = (course: CourseDisplayItem) => { await TeachCourseApi.editCourse(updatedData); - getCourseList(); + await getCourseList(); - message.success(`课程"${course.name}"已下架，现在可以删除了`); + message.success(`课程"${course.name}"已发布`); } catch (error) { - console.error('下架课程失败:', error); - message.error('下架课程失败，请稍后重试'); + console.error('发布课程失败:', error); + message.error('发布课程失败，请稍后重试'); } } }); }; -// 移动课程 -// const handleMoveCourse = (course: any) => { -// const currentIndex = courseList.value.findIndex(c => c.id === course.id); -// const totalCourses = courseList.value.length; - -// dialog.create({ -// title: '移动课程位置', -// content: () => h('div', [ -// h('p', `课程"${course.name}"当前位置：第 ${currentIndex + 1} 位`), -// h('p', { style: 'margin-top: 10px; margin-bottom: 10px;' }, '移动到位置：'), -// h('input', { -// type: 'number', -// min: 1, -// max: totalCourses, -// value: currentIndex + 1, -// style: 'width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px;', -// placeholder: `请输入位置 (1-${totalCourses})`, -// id: 'movePositionInput' -// }), -// h('p', { -// style: 'margin-top: 8px; font-size: 12px; color: #666;' -// }, `提示：输入 1-${totalCourses} 之间的数字`) -// ]), -// positiveText: '确定移动', -// negativeText: '取消', -// onPositiveClick: () => { -// const input = document.getElementById('movePositionInput') as HTMLInputElement; -// const newPosition = parseInt(input.value); - -// if (isNaN(newPosition) || newPosition < 1 || newPosition > totalCourses) { -// message.error(`请输入有效的位置 (1-${totalCourses})`); -// return false; // 阻止对话框关闭 -// } - -// // 执行移动操作 -// const targetIndex = newPosition - 1; -// if (targetIndex !== currentIndex) { -// // 移除课程从当前位置 -// const [movedCourse] = courseList.value.splice(currentIndex, 1); -// // 插入到新位置 -// courseList.value.splice(targetIndex, 0, movedCourse); - -// message.success(`课程"${course.name}"已移动到第 ${newPosition} 位`); -// } else { -// message.info('位置未发生变化'); -// } - -// return true; // 允许对话框关闭 -// } -// }); -// }; - - -onMounted(() => { - getCourseList(); +onMounted(async () => { + loading.value = true; + await getCourseList(); }); @@ -600,11 +519,7 @@ onMounted(() => { } .loading-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 400px; - width: 100%; + display: contents; } .error-container {