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 {