From dc0ce2bf7888587a3048c67b81e33cb4f7d8d6c3 Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Mon, 23 Mar 2026 10:20:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=92=E8=AF=BE=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=89=E6=8B=A9=E5=A5=97=E9=A4=90=E6=AD=A5?=
 =?UTF-8?q?=E9=AA=A4=EF=BC=8C=E8=AF=BE=E7=A8=8B=E8=AF=A6=E6=83=85=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E8=B7=B3=E8=BF=87=E5=A5=97=E9=A4=90=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 学校端/教师端排课：新增第一步「选择套餐」，支持租户一对多套餐
- 从课程详情预约上课：跳过套餐与课程包选择，从选择课程类型开始
- 课程详情页传递正确的 courseId/packageId 避免预约失败

Made-with: Cursor
---
 .../components/CreateScheduleModal.scss       |   8 +
 .../components/CreateScheduleModal.vue        | 108 +++++++++----
 .../views/teacher/courses/PrepareModeView.vue |  21 ++-
 .../components/TeacherCreateScheduleModal.vue | 143 +++++++++++++-----
 4 files changed, 215 insertions(+), 65 deletions(-)

diff --git a/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.scss b/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.scss
index 1468591..2b218f9 100644
--- a/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.scss
+++ b/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.scss
@@ -39,6 +39,14 @@
   margin-top: 24px;
 }
 
+.collections-grid {
+  .collection-card {
+    .package-count {
+      color: #FF8C42;
+    }
+  }
+}
+
 .packages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
diff --git a/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.vue b/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.vue
index 49d2f79..401a885 100644
--- a/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.vue
+++ b/reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.vue
@@ -9,6 +9,7 @@
     destroy-on-close
   >
     <a-steps :current="currentStep" size="small" class="steps-navigator">
+      <a-step title="选择套餐" />
       <a-step title="选择课程包" />
       <a-step title="选择课程类型" />
       <a-step title="选择班级" />
@@ -16,8 +17,38 @@
     </a-steps>
 
     <div class="step-content">
-      <!-- 步骤1: 选择课程包（租户仅一个套餐，直接展示套餐下课程包） -->
+      <!-- 步骤1: 选择套餐（租户可拥有多个套餐，一对多） -->
       <div v-show="currentStep === 0" class="step-panel">
+        <h3>选择套餐</h3>
+        <a-alert
+          message="请先选择要排课的套餐，再选择套餐下的课程包"
+          type="info"
+          show-icon
+          style="margin-bottom: 16px"
+        />
+        <a-spin :spinning="loadingPackages">
+          <div v-if="collections.length > 0" class="packages-section">
+            <div class="packages-grid collections-grid">
+              <div
+                v-for="coll in collections"
+                :key="coll.id"
+                :class="['package-card collection-card', { active: formData.collectionId === coll.id }]"
+                @click="selectCollection(coll)"
+              >
+                <div class="package-name">{{ coll.name }}</div>
+                <div class="package-grade">{{ Array.isArray(coll.gradeLevels) ? coll.gradeLevels.join(', ') : (coll.gradeLevels || '-') }}</div>
+                <div class="package-count">{{ coll.packageCount ?? 0 }} 个课程包</div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="!loadingPackages" class="packages-section">
+            <a-alert message="暂无课程套餐，请联系管理员" type="info" show-icon />
+          </div>
+        </a-spin>
+      </div>
+
+      <!-- 步骤2: 选择课程包 -->
+      <div v-show="currentStep === 1" class="step-panel">
         <h3>选择课程包</h3>
         <a-spin :spinning="loadingPackages">
         <div v-if="selectedCollection && selectedCollection.packages && selectedCollection.packages.length > 0" class="packages-section">
@@ -34,11 +65,11 @@
             </div>
           </div>
         </div>
-        <div v-else-if="!loadingPackages && collections.length > 0" class="packages-section">
-          <a-alert message="暂无课程包" type="warning" show-icon />
+        <div v-else-if="!loadingPackages && selectedCollection && (!selectedCollection.packages || selectedCollection.packages.length === 0)" class="packages-section">
+          <a-alert message="该套餐暂无课程包" type="warning" show-icon />
         </div>
-        <div v-else-if="!loadingPackages && collections.length === 0" class="packages-section">
-          <a-alert message="暂无课程套餐，请联系管理员" type="info" show-icon />
+        <div v-else-if="!loadingPackages && !selectedCollection" class="packages-section">
+          <a-alert message="请先选择套餐" type="info" show-icon />
         </div>
         </a-spin>
 
@@ -70,8 +101,8 @@
         </div>
       </div>
 
-      <!-- 步骤2: 选择课程类型 -->
-      <div v-show="currentStep === 1" class="step-panel">
+      <!-- 步骤3: 选择课程类型 -->
+      <div v-show="currentStep === 2" class="step-panel">
         <h3>选择课程类型</h3>
         <a-alert
           message="请选择一个课程类型进行排课"
@@ -101,8 +132,8 @@
         </a-spin>
       </div>
 
-      <!-- 步骤3: 选择班级并分配教师 -->
-      <div v-show="currentStep === 2" class="step-panel">
+      <!-- 步骤4: 选择班级并分配教师 -->
+      <div v-show="currentStep === 3" class="step-panel">
         <h3>选择班级并分配教师</h3>
         <a-alert
           message="选择班级后，为每个班级指定授课教师"
@@ -151,8 +182,8 @@
         </div>
       </div>
 
-      <!-- 步骤4: 设置时间 -->
-      <div v-show="currentStep === 3" class="step-panel">
+      <!-- 步骤5: 设置时间 -->
+      <div v-show="currentStep === 4" class="step-panel">
         <h3>设置时间</h3>
         <a-form layout="vertical">
           <a-form-item label="排课日期" required>
@@ -212,7 +243,7 @@
     <template #footer>
       <div class="modal-footer">
         <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
-        <a-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</a-button>
+        <a-button v-if="currentStep < 4" type="primary" @click="nextStep">下一步</a-button>
         <a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button>
         <a-button @click="handleCancel">取消</a-button>
       </div>
@@ -397,21 +428,14 @@ const resetForm = () => {
   classTeacherMap.value = {};
 };
 
-// 加载课程套餐列表，租户仅一个套餐时自动加载其课程包
+// 加载课程套餐列表（租户可拥有多个套餐）
 const loadCollections = async () => {
   loadingPackages.value = true;
   try {
     collections.value = await getCourseCollections();
-    if (collections.value.length > 0) {
-      const first = collections.value[0];
-      formData.collectionId = first.id as number;
-      const packages = await getCourseCollectionPackages(first.id);
-      if (first) {
-        (first as any).packages = packages;
-      }
-      if (!packages || packages.length === 0) {
-        message.warning('该套餐暂无课程包');
-      }
+    // 若仅有一个套餐，自动选中并加载其课程包，提升体验
+    if (collections.value.length === 1) {
+      await selectCollection(collections.value[0]);
     }
   } catch (error) {
     console.error('❌ 加载课程套餐失败:', error);
@@ -421,6 +445,30 @@ const loadCollections = async () => {
   }
 };
 
+// 选择套餐，并加载该套餐下的课程包
+const selectCollection = async (coll: CourseCollection) => {
+  formData.collectionId = coll.id as number;
+  formData.packageId = undefined;
+  formData.courseId = undefined;
+  scheduleRefData.value = [];
+  lessonTypes.value = [];
+
+  if (!coll.id) return;
+  loadingPackages.value = true;
+  try {
+    const packages = await getCourseCollectionPackages(coll.id);
+    (coll as any).packages = packages || [];
+    if (!packages || packages.length === 0) {
+      message.warning('该套餐暂无课程包');
+    }
+  } catch (error) {
+    console.error('加载套餐课程包失败:', error);
+    message.error('加载课程包失败');
+  } finally {
+    loadingPackages.value = false;
+  }
+};
+
 // 加载班级列表
 const loadClasses = async () => {
   try {
@@ -568,7 +616,13 @@ const validateStep = (): boolean => {
   switch (currentStep.value) {
     case 0:
       if (!formData.collectionId) {
-        message.warning('请选择课程套餐');
+        message.warning('请选择套餐');
+        return false;
+      }
+      break;
+    case 1:
+      if (!formData.collectionId) {
+        message.warning('请选择套餐');
         return false;
       }
       if (!formData.packageId) {
@@ -580,13 +634,13 @@ const validateStep = (): boolean => {
         return false;
       }
       break;
-    case 1:
+    case 2:
       if (!formData.lessonType) {
         message.warning('请选择课程类型');
         return false;
       }
       break;
-    case 2:
+    case 3:
       if (formData.classIds.length === 0) {
         message.warning('请至少选择一个班级');
         return false;
@@ -600,7 +654,7 @@ const validateStep = (): boolean => {
         }
       }
       break;
-    case 3:
+    case 4:
       if (!formData.scheduledDate) {
         message.warning('请选择排课日期');
         return false;
diff --git a/reading-platform-frontend/src/views/teacher/courses/PrepareModeView.vue b/reading-platform-frontend/src/views/teacher/courses/PrepareModeView.vue
index b43b196..0611661 100644
--- a/reading-platform-frontend/src/views/teacher/courses/PrepareModeView.vue
+++ b/reading-platform-frontend/src/views/teacher/courses/PrepareModeView.vue
@@ -124,6 +124,10 @@ const lessons = ref<any[]>([]);
 const classes = ref<any[]>([]);
 const selectedClassId = ref<number>();
 
+/** 预约上课时使用的 courseId（Course.id）和 packageId，从加载数据中解析 */
+const scheduleCourseId = ref<number>();
+const schedulePackageId = ref<number>();
+
 // 预约上课相关
 const scheduleModalRef = ref<InstanceType<typeof TeacherCreateScheduleModal>>();
 
@@ -192,6 +196,10 @@ const loadCourseData = async () => {
       const res = await getTeacherSchoolCourseFullDetail(courseId.value as any);
       data = res.data || res;
 
+      // 预约上课：校本课程使用 sourceCourseId 作为 courseId
+      scheduleCourseId.value = data.sourceCourseId ?? data.sourceCourse?.id;
+      schedulePackageId.value = data.id;
+
       // 转换校本课程包数据结构
       course.value = {
         id: data.id,
@@ -246,6 +254,10 @@ const loadCourseData = async () => {
     } else {
       // 加载标准课程包（id 传 string 避免 Long 精度丢失）
       data = await teacherApi.getTeacherCourse(courseId.value);
+      // 预约上课：标准课程包，data.id 为 Course.id，首课的 courseId 与之相同
+      scheduleCourseId.value = data.courseLessons?.[0]?.courseId ?? data.id;
+      schedulePackageId.value = data.id;
+
       course.value = {
         ...data,
         courseLessons: data.courseLessons || [],
@@ -383,14 +395,15 @@ const showScheduleModal = () => {
     message.warning('课程数据异常，暂无课程');
     return;
   }
-  const pkgId = parseInt(courseId.value, 10);
-  if (isNaN(pkgId)) {
-    message.warning('课程 ID 无效');
+  const pkgId = schedulePackageId.value ?? parseInt(courseId.value, 10);
+  const cid = scheduleCourseId.value ?? firstLesson.courseId ?? firstLesson.id;
+  if (!cid) {
+    message.warning('课程数据异常，无法预约');
     return;
   }
   scheduleModalRef.value?.openWithPreset({
     packageId: pkgId,
-    courseId: firstLesson.id,
+    courseId: cid,
     lessonType: firstLesson.lessonType || 'INTRODUCTION',
     classId: selectedClassId.value,
   });
diff --git a/reading-platform-frontend/src/views/teacher/schedule/components/TeacherCreateScheduleModal.vue b/reading-platform-frontend/src/views/teacher/schedule/components/TeacherCreateScheduleModal.vue
index 0c428e2..830788b 100644
--- a/reading-platform-frontend/src/views/teacher/schedule/components/TeacherCreateScheduleModal.vue
+++ b/reading-platform-frontend/src/views/teacher/schedule/components/TeacherCreateScheduleModal.vue
@@ -9,6 +9,7 @@
     destroy-on-close
   >
     <a-steps :current="currentStep" size="small" class="steps-navigator">
+      <a-step title="选择套餐" />
       <a-step title="选择课程包" />
       <a-step title="选择课程类型" />
       <a-step title="选择班级" />
@@ -16,8 +17,38 @@
     </a-steps>
 
     <div class="step-content">
-      <!-- 步骤1: 选择课程包（租户仅一个套餐，直接展示套餐下课程包） -->
+      <!-- 步骤1: 选择套餐（租户可拥有多个套餐，一对多） -->
       <div v-show="currentStep === 0" class="step-panel">
+        <h3>选择套餐</h3>
+        <a-alert
+          message="请先选择要预约的套餐，再选择套餐下的课程包"
+          type="info"
+          show-icon
+          style="margin-bottom: 16px"
+        />
+        <a-spin :spinning="loadingPackages">
+          <div v-if="collections.length > 0" class="packages-section">
+            <div class="packages-grid collections-grid">
+              <div
+                v-for="coll in collections"
+                :key="coll.id"
+                :class="['package-card collection-card', { active: formData.collectionId === coll.id }]"
+                @click="selectCollection(coll)"
+              >
+                <div class="package-name">{{ coll.name }}</div>
+                <div class="package-grade">{{ Array.isArray(coll.gradeLevels) ? coll.gradeLevels.join(', ') : (coll.gradeLevels || '-') }}</div>
+                <div class="package-count">{{ coll.packageCount ?? 0 }} 个课程包</div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="!loadingPackages" class="packages-section">
+            <a-alert message="暂无课程套餐，请联系管理员" type="info" show-icon />
+          </div>
+        </a-spin>
+      </div>
+
+      <!-- 步骤2: 选择课程包 -->
+      <div v-show="currentStep === 1" class="step-panel">
         <h3>选择课程包</h3>
         <a-spin :spinning="loadingPackages">
         <div v-if="selectedCollection && selectedCollection.packages && selectedCollection.packages.length > 0" class="packages-section">
@@ -34,11 +65,11 @@
             </div>
           </div>
         </div>
-        <div v-else-if="!loadingPackages && collections.length > 0" class="packages-section">
-          <a-alert message="暂无课程包" type="warning" show-icon />
+        <div v-else-if="!loadingPackages && selectedCollection && (!selectedCollection.packages || selectedCollection.packages.length === 0)" class="packages-section">
+          <a-alert message="该套餐暂无课程包" type="warning" show-icon />
         </div>
-        <div v-else-if="!loadingPackages && collections.length === 0" class="packages-section">
-          <a-alert message="暂无课程套餐，请联系管理员" type="info" show-icon />
+        <div v-else-if="!loadingPackages && !selectedCollection" class="packages-section">
+          <a-alert message="请先选择套餐" type="info" show-icon />
         </div>
         </a-spin>
 
@@ -70,8 +101,8 @@
         </div>
       </div>
 
-      <!-- 步骤2: 选择课程类型 -->
-      <div v-show="currentStep === 1" class="step-panel">
+      <!-- 步骤3: 选择课程类型 -->
+      <div v-show="currentStep === 2" class="step-panel">
         <h3>选择课程类型</h3>
         <a-alert
           message="请选择一个课程类型进行排课"
@@ -101,8 +132,8 @@
         </a-spin>
       </div>
 
-      <!-- 步骤3: 选择班级（教师端单选） -->
-      <div v-show="currentStep === 2" class="step-panel">
+      <!-- 步骤4: 选择班级（教师端单选） -->
+      <div v-show="currentStep === 3" class="step-panel">
         <h3>选择班级</h3>
         <a-alert
           message="请选择要排课的班级"
@@ -124,8 +155,8 @@
         <div v-if="myClasses.length === 0" class="empty-hint">暂无可用班级</div>
       </div>
 
-      <!-- 步骤4: 设置时间 -->
-      <div v-show="currentStep === 3" class="step-panel">
+      <!-- 步骤5: 设置时间 -->
+      <div v-show="currentStep === 4" class="step-panel">
         <h3>设置时间</h3>
         <a-form layout="vertical">
           <a-form-item label="排课日期" required>
@@ -165,7 +196,7 @@
     <template #footer>
       <div class="modal-footer">
         <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
-        <a-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</a-button>
+        <a-button v-if="currentStep < 4" type="primary" @click="nextStep">下一步</a-button>
         <a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button>
         <a-button @click="handleCancel">取消</a-button>
       </div>
@@ -206,6 +237,8 @@ const visible = ref(false);
 const loading = ref(false);
 const loadingLessonTypes = ref(false);
 const currentStep = ref(0);
+/** 从课程详情进入时，跳过套餐与课程包选择 */
+const isPresetMode = ref(false);
 
 const collections = ref<CourseCollection[]>([]);
 const loadingPackages = ref(false);
@@ -301,9 +334,12 @@ export interface SchedulePreset {
   courseId: number;
   lessonType: string;
   classId?: number;
+  /** 可选，若已知所属套餐可传入以节省请求 */
+  collectionId?: number;
 }
 
 const open = () => {
+  isPresetMode.value = false;
   visible.value = true;
   currentStep.value = 0;
   resetForm();
@@ -311,8 +347,9 @@ const open = () => {
   loadMyClasses();
 };
 
-/** 从课程中心打开，预填课程包、课程类型、班级，直接进入选择班级或设置时间 */
+/** 从课程详情打开：跳过套餐与课程包，从选择课程类型开始 */
 const openWithPreset = async (preset: SchedulePreset) => {
+  isPresetMode.value = true;
   visible.value = true;
   resetForm();
   formData.packageId = preset.packageId;
@@ -321,13 +358,17 @@ const openWithPreset = async (preset: SchedulePreset) => {
   formData.classId = preset.classId;
 
   await loadMyClasses();
-  await loadLessonTypes(preset.packageId);
-
-  if (preset.classId) {
-    currentStep.value = 3; // 直接到设置时间
-  } else {
-    currentStep.value = 2; // 到选择班级
+  try {
+    await loadLessonTypes(preset.packageId);
+  } catch {
+    // 校本课程等场景可能无对应课程包接口，使用预设类型填充
+    lessonTypes.value = preset.lessonType
+      ? [{ lessonType: preset.lessonType, count: 1 }]
+      : [];
   }
+
+  // 从选择课程类型（步骤2）开始，跳过套餐与课程包
+  currentStep.value = 2;
 };
 
 const resetForm = () => {
@@ -342,21 +383,14 @@ const resetForm = () => {
   lessonTypes.value = [];
 };
 
-// 租户仅一个套餐，自动加载其课程包
+// 加载课程套餐列表（租户可拥有多个套餐）
 const loadCollections = async () => {
   loadingPackages.value = true;
   try {
     collections.value = await getCourseCollections();
-    if (collections.value.length > 0) {
-      const first = collections.value[0];
-      formData.collectionId = first.id as number;
-      const packages = await getCourseCollectionPackages(first.id);
-      if (first) {
-        (first as any).packages = packages;
-      }
-      if (!packages || packages.length === 0) {
-        message.warning('该套餐暂无课程包');
-      }
+    // 若仅有一个套餐，自动选中并加载其课程包，提升体验
+    if (collections.value.length === 1) {
+      await selectCollection(collections.value[0]);
     }
   } catch (error) {
     console.error('加载课程套餐失败:', error);
@@ -366,6 +400,30 @@ const loadCollections = async () => {
   }
 };
 
+// 选择套餐，并加载该套餐下的课程包
+const selectCollection = async (coll: CourseCollection) => {
+  formData.collectionId = coll.id as number;
+  formData.packageId = undefined;
+  formData.courseId = undefined;
+  scheduleRefData.value = [];
+  lessonTypes.value = [];
+
+  if (!coll.id) return;
+  loadingPackages.value = true;
+  try {
+    const packages = await getCourseCollectionPackages(coll.id);
+    (coll as any).packages = packages || [];
+    if (!packages || packages.length === 0) {
+      message.warning('该套餐暂无课程包');
+    }
+  } catch (error) {
+    console.error('加载套餐课程包失败:', error);
+    message.error('加载课程包失败');
+  } finally {
+    loadingPackages.value = false;
+  }
+};
+
 const loadMyClasses = async () => {
   try {
     myClasses.value = await getTeacherClasses();
@@ -456,7 +514,13 @@ const validateStep = (): boolean => {
   switch (currentStep.value) {
     case 0:
       if (!formData.collectionId) {
-        message.warning('请选择课程套餐');
+        message.warning('请选择套餐');
+        return false;
+      }
+      break;
+    case 1:
+      if (!formData.collectionId) {
+        message.warning('请选择套餐');
         return false;
       }
       if (!formData.packageId) {
@@ -468,19 +532,19 @@ const validateStep = (): boolean => {
         return false;
       }
       break;
-    case 1:
+    case 2:
       if (!formData.lessonType) {
         message.warning('请选择课程类型');
         return false;
       }
       break;
-    case 2:
+    case 3:
       if (!formData.classId) {
         message.warning('请选择班级');
         return false;
       }
       break;
-    case 3:
+    case 4:
       if (!formData.scheduledDate) {
         message.warning('请选择排课日期');
         return false;
@@ -499,6 +563,11 @@ const nextStep = () => {
 };
 
 const prevStep = () => {
+  // 预设模式下从步骤2点击上一步时关闭弹窗（不展示套餐/课程包选择）
+  if (isPresetMode.value && currentStep.value === 2) {
+    handleCancel();
+    return;
+  }
   currentStep.value--;
 };
 
@@ -580,6 +649,12 @@ defineExpose({ open, openWithPreset });
 
 .packages-section { margin-top: 24px; }
 
+.collections-grid {
+  .collection-card {
+    .package-count { color: #722ed1; }
+  }
+}
+
 .packages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));