528 lines
15 KiB
Vue
528 lines
15 KiB
Vue
<template>
|
||
<div class="course-edit-view">
|
||
<a-page-header
|
||
:title="isEdit ? '编辑课程包' : '创建课程包'"
|
||
@back="() => router.back()"
|
||
>
|
||
<template #extra>
|
||
<a-space>
|
||
<a-button @click="handleSaveDraft" :loading="saving">保存草稿</a-button>
|
||
<a-button v-if="isEdit" type="primary" @click="handleSaveAndSubmit" :loading="saving">
|
||
保存
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-page-header>
|
||
|
||
<a-spin :spinning="loading" tip="正在加载课程数据...">
|
||
<a-card :bordered="false" style="margin-top: 16px;">
|
||
<!-- 步骤导航 -->
|
||
<a-steps :current="currentStep" size="small" @change="onStepChange">
|
||
<a-step title="基本信息" />
|
||
<a-step title="课程介绍" />
|
||
<a-step title="排课参考" />
|
||
<a-step title="导入课" />
|
||
<a-step title="集体课" />
|
||
<a-step title="领域课" />
|
||
<a-step title="环创建设" />
|
||
</a-steps>
|
||
|
||
<!-- 完成度进度条 -->
|
||
<div class="completion-bar">
|
||
<span>完成度</span>
|
||
<a-progress :percent="completionPercent" :status="completionStatus" size="small" />
|
||
</div>
|
||
|
||
<!-- 步骤内容 -->
|
||
<div class="step-content">
|
||
<!-- 步骤1：基本信息 -->
|
||
<Step1BasicInfo
|
||
v-show="currentStep === 0"
|
||
ref="step1Ref"
|
||
v-model="formData.basic"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤2：课程介绍 -->
|
||
<Step2CourseIntro
|
||
v-show="currentStep === 1"
|
||
ref="step2Ref"
|
||
v-model="formData.intro"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤3：排课参考 -->
|
||
<Step3ScheduleRef
|
||
v-show="currentStep === 2"
|
||
ref="step3Ref"
|
||
v-model="formData.scheduleRefData"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤4：导入课 -->
|
||
<Step4IntroLesson
|
||
v-show="currentStep === 3"
|
||
ref="step4Ref"
|
||
:course-id="courseId"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤5：集体课 -->
|
||
<Step5CollectiveLesson
|
||
v-show="currentStep === 4"
|
||
ref="step5Ref"
|
||
:course-id="courseId"
|
||
:course-name="formData.basic.name"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤6：领域课 -->
|
||
<Step6DomainLessons
|
||
v-show="currentStep === 5"
|
||
ref="step6Ref"
|
||
:course-id="courseId"
|
||
:course-name="formData.basic.name"
|
||
@change="handleDataChange"
|
||
/>
|
||
|
||
<!-- 步骤7：环创建设 -->
|
||
<Step7Environment
|
||
v-show="currentStep === 6"
|
||
ref="step7Ref"
|
||
v-model="formData.environmentConstruction"
|
||
@change="handleDataChange"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 步骤导航按钮 -->
|
||
<div class="step-actions">
|
||
<a-button v-if="currentStep > 0" @click="prevStep">
|
||
上一步
|
||
</a-button>
|
||
<a-button v-if="currentStep < 6" type="primary" @click="nextStep">
|
||
下一步
|
||
</a-button>
|
||
<a-button v-if="currentStep === 6" type="primary" :loading="saving" @click="handleSave">
|
||
{{ isEdit ? '保存' : '创建' }}
|
||
</a-button>
|
||
</div>
|
||
</a-card>
|
||
</a-spin>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, computed, onMounted, provide } from 'vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { message } from 'ant-design-vue';
|
||
import Step1BasicInfo from './components/Step1BasicInfo.vue';
|
||
import Step2CourseIntro from './components/Step2CourseIntro.vue';
|
||
import Step3ScheduleRef from './components/Step3ScheduleRef.vue';
|
||
import Step4IntroLesson from './components/Step4IntroLesson.vue';
|
||
import Step5CollectiveLesson from './components/Step5CollectiveLesson.vue';
|
||
import Step6DomainLessons from './components/Step6DomainLessons.vue';
|
||
import Step7Environment from './components/Step7Environment.vue';
|
||
import { getCourse, createCourse, updateCourse } from '@/api/course';
|
||
import {
|
||
getLessonList,
|
||
createLesson,
|
||
updateLesson,
|
||
deleteLesson,
|
||
createStep,
|
||
updateStep,
|
||
deleteStep,
|
||
} from '@/api/lesson';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const isEdit = computed(() => !!route.params.id);
|
||
const courseId = computed(() => Number(route.params.id));
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const currentStep = ref(0);
|
||
|
||
// 步骤组件引用
|
||
const step1Ref = ref();
|
||
const step2Ref = ref();
|
||
const step3Ref = ref();
|
||
const step4Ref = ref();
|
||
const step5Ref = ref();
|
||
const step6Ref = ref();
|
||
const step7Ref = ref();
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
basic: {
|
||
name: '',
|
||
themeId: undefined as number | undefined,
|
||
grades: [] as string[],
|
||
pictureBookName: '',
|
||
coreContent: '',
|
||
duration: 25,
|
||
domainTags: [] as string[],
|
||
coverImagePath: '',
|
||
},
|
||
intro: {
|
||
introSummary: '',
|
||
introHighlights: '',
|
||
introGoals: '',
|
||
introSchedule: '',
|
||
introKeyPoints: '',
|
||
introMethods: '',
|
||
introEvaluation: '',
|
||
introNotes: '',
|
||
},
|
||
scheduleRefData: '',
|
||
environmentConstruction: '',
|
||
});
|
||
|
||
// 计算完成度
|
||
const completionPercent = computed(() => {
|
||
let filled = 0;
|
||
let total = 0;
|
||
|
||
// 基本信息必填项
|
||
total += 4;
|
||
if (formData.basic.name) filled++;
|
||
if (formData.basic.themeId) filled++;
|
||
if (formData.basic.grades.length > 0) filled++;
|
||
if (formData.basic.coreContent) filled++;
|
||
|
||
// 课程介绍（8项可选）
|
||
total += 8;
|
||
if (formData.intro.introSummary) filled++;
|
||
if (formData.intro.introHighlights) filled++;
|
||
if (formData.intro.introGoals) filled++;
|
||
if (formData.intro.introSchedule) filled++;
|
||
if (formData.intro.introKeyPoints) filled++;
|
||
if (formData.intro.introMethods) filled++;
|
||
if (formData.intro.introEvaluation) filled++;
|
||
if (formData.intro.introNotes) filled++;
|
||
|
||
return Math.round((filled / total) * 100);
|
||
});
|
||
|
||
const completionStatus = computed(() => {
|
||
if (completionPercent.value >= 75) return 'success';
|
||
if (completionPercent.value >= 50) return 'normal';
|
||
return 'exception';
|
||
});
|
||
|
||
// 获取课程详情
|
||
const fetchCourseDetail = async () => {
|
||
if (!isEdit.value) return;
|
||
|
||
loading.value = true;
|
||
try {
|
||
const res = await getCourse(courseId.value) as any;
|
||
const course = res.data || res;
|
||
|
||
// 基本信息
|
||
formData.basic.name = course.name;
|
||
formData.basic.themeId = course.themeId;
|
||
formData.basic.grades = course.gradeTags ? JSON.parse(course.gradeTags) : [];
|
||
formData.basic.pictureBookName = course.pictureBookName || '';
|
||
formData.basic.coreContent = course.coreContent || '';
|
||
formData.basic.duration = course.duration || 25;
|
||
formData.basic.domainTags = course.domainTags ? JSON.parse(course.domainTags) : [];
|
||
formData.basic.coverImagePath = course.coverImagePath || '';
|
||
|
||
// 课程介绍
|
||
formData.intro.introSummary = course.introSummary || '';
|
||
formData.intro.introHighlights = course.introHighlights || '';
|
||
formData.intro.introGoals = course.introGoals || '';
|
||
formData.intro.introSchedule = course.introSchedule || '';
|
||
formData.intro.introKeyPoints = course.introKeyPoints || '';
|
||
formData.intro.introMethods = course.introMethods || '';
|
||
formData.intro.introEvaluation = course.introEvaluation || '';
|
||
formData.intro.introNotes = course.introNotes || '';
|
||
|
||
// 排课参考
|
||
formData.scheduleRefData = course.scheduleRefData || '';
|
||
|
||
// 环创建设
|
||
formData.environmentConstruction = course.environmentConstruction || '';
|
||
} catch (error) {
|
||
message.error('获取课程详情失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 步骤导航
|
||
const onStepChange = (step: number) => {
|
||
if (step > currentStep.value) {
|
||
// 前进时验证当前步骤
|
||
if (!validateCurrentStep()) {
|
||
return;
|
||
}
|
||
}
|
||
currentStep.value = step;
|
||
};
|
||
|
||
const prevStep = () => {
|
||
if (currentStep.value > 0) {
|
||
currentStep.value--;
|
||
}
|
||
};
|
||
|
||
const nextStep = () => {
|
||
if (!validateCurrentStep()) {
|
||
return;
|
||
}
|
||
if (currentStep.value < 6) {
|
||
currentStep.value++;
|
||
}
|
||
};
|
||
|
||
// 验证当前步骤
|
||
const validateCurrentStep = () => {
|
||
if (currentStep.value === 0) {
|
||
const result = step1Ref.value?.validate();
|
||
if (!result?.valid) {
|
||
message.warning(result?.errors[0] || '请完成基本信息');
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
};
|
||
|
||
// 处理数据变化
|
||
const handleDataChange = () => {
|
||
// 数据变化时可以自动保存草稿
|
||
};
|
||
|
||
// 保存草稿
|
||
const handleSaveDraft = async () => {
|
||
await handleSave(true);
|
||
};
|
||
|
||
// 保存
|
||
const handleSave = async (isDraft = false) => {
|
||
// 防止重复提交
|
||
if (saving.value) {
|
||
return;
|
||
}
|
||
|
||
saving.value = true;
|
||
let savedCourseId = courseId.value;
|
||
|
||
try {
|
||
// 1. 保存课程包基本信息
|
||
const courseData = {
|
||
name: formData.basic.name,
|
||
themeId: formData.basic.themeId,
|
||
gradeTags: JSON.stringify(formData.basic.grades),
|
||
pictureBookName: formData.basic.pictureBookName,
|
||
coreContent: formData.basic.coreContent,
|
||
duration: formData.basic.duration,
|
||
domainTags: JSON.stringify(formData.basic.domainTags),
|
||
coverImagePath: formData.basic.coverImagePath,
|
||
// 课程介绍
|
||
introSummary: formData.intro.introSummary,
|
||
introHighlights: formData.intro.introHighlights,
|
||
introGoals: formData.intro.introGoals,
|
||
introSchedule: formData.intro.introSchedule,
|
||
introKeyPoints: formData.intro.introKeyPoints,
|
||
introMethods: formData.intro.introMethods,
|
||
introEvaluation: formData.intro.introEvaluation,
|
||
introNotes: formData.intro.introNotes,
|
||
// 排课参考
|
||
scheduleRefData: formData.scheduleRefData,
|
||
// 环创建设
|
||
environmentConstruction: formData.environmentConstruction,
|
||
};
|
||
|
||
console.log('Saving course data...', { isDraft, isEdit: isEdit.value });
|
||
|
||
if (isEdit.value) {
|
||
await updateCourse(courseId.value, courseData);
|
||
console.log('Course updated successfully');
|
||
} else {
|
||
const res = await createCourse(courseData) as any;
|
||
savedCourseId = res.data?.id || res.id;
|
||
console.log('Course created with ID:', savedCourseId);
|
||
// 更新路由以支持后续保存
|
||
if (savedCourseId) {
|
||
router.replace(`/admin/courses/${savedCourseId}/edit`);
|
||
}
|
||
}
|
||
|
||
if (!savedCourseId) {
|
||
throw new Error('无法获取课程ID');
|
||
}
|
||
|
||
// 2. 保存导入课
|
||
try {
|
||
const introLessonData = step4Ref.value?.getSaveData();
|
||
if (introLessonData) {
|
||
console.log('Saving intro lesson...');
|
||
await saveLesson(savedCourseId, introLessonData, 'INTRO');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Failed to save intro lesson:', error);
|
||
// 继续保存其他内容，不中断
|
||
}
|
||
|
||
// 3. 保存集体课
|
||
try {
|
||
const collectiveLessonData = step5Ref.value?.getSaveData();
|
||
if (collectiveLessonData) {
|
||
console.log('Saving collective lesson...');
|
||
await saveLesson(savedCourseId, collectiveLessonData, 'COLLECTIVE');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Failed to save collective lesson:', error);
|
||
// 继续保存其他内容，不中断
|
||
}
|
||
|
||
// 4. 保存领域课
|
||
try {
|
||
const domainLessonsData = step6Ref.value?.getSaveData() || [];
|
||
for (const lessonData of domainLessonsData) {
|
||
console.log('Saving domain lesson:', lessonData.lessonType);
|
||
await saveLesson(savedCourseId, lessonData, lessonData.lessonType);
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Failed to save domain lessons:', error);
|
||
// 继续保存其他内容，不中断
|
||
}
|
||
|
||
message.success(isDraft ? '草稿保存成功' : (isEdit.value ? '保存成功' : '创建成功'));
|
||
|
||
if (!isDraft) {
|
||
router.push('/admin/courses');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Save failed:', error);
|
||
const errorMsg = error.response?.data?.message || error.message || '未知错误';
|
||
const errorDetails = error.response?.data?.errors?.join(', ') || '';
|
||
message.error(`保存失败: ${errorMsg}${errorDetails ? ' - ' + errorDetails : ''}`);
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
};
|
||
|
||
// 保存单个课程
|
||
const saveLesson = async (courseId: number, lessonData: any, lessonType: string) => {
|
||
if (!lessonData) {
|
||
console.log('No lesson data to save for type:', lessonType);
|
||
return;
|
||
}
|
||
|
||
const lessonPayload = {
|
||
lessonType: lessonData.lessonType || lessonType,
|
||
name: lessonData.name || `${lessonType === 'INTRO' ? '导入课' : lessonType === 'COLLECTIVE' ? '集体课' : lessonType}`,
|
||
description: lessonData.description || '',
|
||
duration: lessonData.duration || 25,
|
||
videoPath: lessonData.videoPath || '',
|
||
videoName: lessonData.videoName || '',
|
||
pptPath: lessonData.pptPath || '',
|
||
pptName: lessonData.pptName || '',
|
||
pdfPath: lessonData.pdfPath || '',
|
||
pdfName: lessonData.pdfName || '',
|
||
objectives: lessonData.objectives || '',
|
||
preparation: lessonData.preparation || '',
|
||
extension: lessonData.extension || '',
|
||
reflection: lessonData.reflection || '',
|
||
assessmentData: lessonData.assessmentData || '',
|
||
useTemplate: lessonData.useTemplate || false,
|
||
};
|
||
|
||
let lessonId = lessonData.id;
|
||
|
||
try {
|
||
if (lessonData.isNew || !lessonData.id) {
|
||
// 创建新课程
|
||
console.log('Creating new lesson:', lessonType);
|
||
const res = await createLesson(courseId, lessonPayload) as any;
|
||
lessonId = res.data?.id || res.id;
|
||
console.log('Lesson created with ID:', lessonId);
|
||
} else {
|
||
// 更新现有课程
|
||
console.log('Updating lesson:', lessonId);
|
||
await updateLesson(lessonData.id, lessonPayload);
|
||
}
|
||
|
||
// 保存教学环节
|
||
if (lessonData.steps && lessonData.steps.length > 0 && lessonId) {
|
||
for (const step of lessonData.steps) {
|
||
const stepPayload = {
|
||
name: step.name || '教学环节',
|
||
content: step.content || '',
|
||
duration: step.duration || 5,
|
||
objective: step.objective || '',
|
||
};
|
||
|
||
try {
|
||
if (step.isNew || !step.id) {
|
||
await createStep(courseId, lessonId, stepPayload);
|
||
} else {
|
||
await updateStep(step.id, stepPayload);
|
||
}
|
||
} catch (stepError: any) {
|
||
console.error('Failed to save step:', stepError);
|
||
}
|
||
}
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Failed to save lesson:', error);
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
// 保存并提交
|
||
const handleSaveAndSubmit = async () => {
|
||
await handleSave(false);
|
||
};
|
||
|
||
onMounted(() => {
|
||
fetchCourseDetail();
|
||
});
|
||
|
||
// 提供courseId给子组件
|
||
provide('courseId', courseId);
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.course-edit-view {
|
||
padding: 24px;
|
||
}
|
||
|
||
.completion-bar {
|
||
margin-top: 16px;
|
||
padding: 12px 16px;
|
||
background: #fafafa;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
span {
|
||
font-size: 13px;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
:deep(.ant-progress) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.step-content {
|
||
min-height: 400px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.step-actions {
|
||
margin-top: 32px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #f0f0f0;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: flex-end;
|
||
}
|
||
</style>
|