tonytech/kindergarten_java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 排课弹窗移除重复套餐选择步骤，统一教师端与学校端

Browse Source 
- 合并步骤1与步骤2，直接在选择课程包中展示套餐选择器
- 教师端、学校端均由5步改为4步流程
- 修复ID类型比较问题，使用宽松相等避免选中高亮异常

Made-with: Cursor
This commit is contained in:
zhonghua 2026-03-23 14:31:48 +08:00
parent 275b0da7a0
commit da415703cf
2 changed files with 112 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
reading-platform-frontend/src/views/school/schedule/components/CreateScheduleModal.vue
View File

@ -1,15 +1,7 @@
<template> <template>
<a-modal <a-modal v-model:open="visible" title="新建排课" :confirm-loading="loading" @ok="handleSubmit" @cancel="handleCancel"
v-model:open="visible" width="700px" destroy-on-close>
title="新建排课"
:confirm-loading="loading"
@ok="handleSubmit"
@cancel="handleCancel"
width="700px"
destroy-on-close
>
<a-steps :current="currentStep" size="small" class="steps-navigator"> <a-steps :current="currentStep" size="small" class="steps-navigator">
<a-step title="选择套餐" />
<a-step title="选择课程包" /> <a-step title="选择课程包" />
<a-step title="选择课程类型" /> <a-step title="选择课程类型" />
<a-step title="选择班级" /> <a-step title="选择班级" />
@ -17,74 +9,41 @@
</a-steps> </a-steps>
<div class="step-content"> <div class="step-content">
<!-- 步骤1: 选择套餐（租户可拥有多个套餐，一对多） --> <!-- 步骤1: 选择课程包（多套餐时顶部展示套餐选择器） -->
<div v-show="currentStep === 0" class="step-panel"> <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> <h3>选择课程包</h3>
<!-- 多套餐时：先选套餐 --> <!-- 多套餐时：先选套餐 -->
<div v-if="collections.length > 1" class="collection-selector"> <div v-if="collections.length > 1" class="collection-selector">
<div class="selector-label">选择课程套餐</div> <div class="selector-label">选择课程套餐</div>
<a-radio-group v-model:value="formData.collectionId" button-style="solid" class="collection-radio-group" @change="onCollectionChange"> <a-radio-group v-model:value="formData.collectionId" button-style="solid" class="collection-radio-group"
<a-radio-button @change="onCollectionChange">
v-for="col in collections" <a-radio-button v-for="col in collections" :key="col.id" :value="col.id as number">
:key="col.id"
:value="col.id as number"
>
{{ col.name }} {{ col.name }}
</a-radio-button> </a-radio-button>
</a-radio-group> </a-radio-group>
</div> </div>
<a-spin :spinning="loadingPackages"> <a-spin :spinning="loadingPackages">
<div v-if="selectedCollection && selectedCollection.packages && selectedCollection.packages.length > 0" class="packages-section"> <div v-if="selectedCollection && selectedCollection.packages && selectedCollection.packages.length > 0"
<div v-if="collections.length > 1" class="selector-label" style="margin-bottom: 12px">选择课程包</div> class="packages-section">
<div class="packages-grid"> <div v-if="collections.length > 1" class="selector-label" style="margin-bottom: 12px">选择课程包</div>
<div <div class="packages-grid">
v-for="pkg in selectedCollection.packages" <div v-for="pkg in selectedCollection.packages" :key="pkg.id"
:key="pkg.id" :class="['package-card', { active: formData.packageId == pkg.id }]" @click="selectPackage(Number(pkg.id) || pkg.id)">
:class="['package-card', { active: formData.packageId === pkg.id }]" <div class="package-name">{{ pkg.name }}</div>
@click="selectPackage(pkg.id)" <div class="package-grade">{{ Array.isArray(pkg.gradeLevels) ? pkg.gradeLevels.join(', ') :
> pkg.gradeLevels }}</div>
<div class="package-name">{{ pkg.name }}</div> <div class="package-count">{{ pkg.courseCount }} 门课程</div>
<div class="package-grade">{{ Array.isArray(pkg.gradeLevels) ? pkg.gradeLevels.join(', ') : pkg.gradeLevels }}</div> </div>
<div class="package-count">{{ pkg.courseCount }} 门课程</div>
</div> </div>
</div> </div>
</div> <div
<div v-else-if="!loadingPackages && selectedCollection && (!selectedCollection.packages || selectedCollection.packages.length === 0)" class="packages-section"> v-else-if="!loadingPackages && selectedCollection && (!selectedCollection.packages || selectedCollection.packages.length === 0)"
<a-alert message="该套餐暂无课程包" type="warning" show-icon /> class="packages-section">
</div> <a-alert message="该套餐暂无课程包" type="warning" show-icon />
<div v-else-if="!loadingPackages && !selectedCollection" class="packages-section"> </div>
<a-alert message="请先选择套餐" type="info" show-icon /> <div v-else-if="!loadingPackages && !selectedCollection" class="packages-section">
</div> <a-alert message="请先选择套餐" type="info" show-icon />
</div>
</a-spin> </a-spin>
<!-- 排课计划参考（与管理端课程包详情一致） --> <!-- 排课计划参考（与管理端课程包详情一致） -->
@ -93,13 +52,8 @@
<CalendarOutlined class="ref-icon" /> <CalendarOutlined class="ref-icon" />
<span class="ref-title">排课计划参考</span> <span class="ref-title">排课计划参考</span>
</div> </div>
<a-table <a-table :columns="scheduleRefColumns" :data-source="scheduleRefDisplay" :pagination="false" size="small"
:columns="scheduleRefColumns" bordered>
:data-source="scheduleRefDisplay"
:pagination="false"
size="small"
bordered
>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'dayOfWeek'"> <template v-if="column.key === 'dayOfWeek'">
{{ formatDayOfWeek(record.dayOfWeek) }} {{ formatDayOfWeek(record.dayOfWeek) }}
@ -115,27 +69,18 @@
</div> </div>
</div> </div>
<!-- 步骤3: 选择课程类型 --> <!-- 步骤2: 选择课程类型 -->
<div v-show="currentStep === 2" class="step-panel"> <div v-show="currentStep === 1" class="step-panel">
<h3>选择课程类型</h3> <h3>选择课程类型</h3>
<a-alert <a-alert message="请选择一个课程类型进行排课" type="info" show-icon style="margin-bottom: 16px" />
message="请选择一个课程类型进行排课"
type="info"
show-icon
style="margin-bottom: 16px"
/>
<a-spin :spinning="loadingLessonTypes"> <a-spin :spinning="loadingLessonTypes">
<div v-if="!loadingLessonTypes && lessonTypes.length === 0" class="lesson-type-empty"> <div v-if="!loadingLessonTypes && lessonTypes.length === 0" class="lesson-type-empty">
该课程包暂无课程类型，请先选择其他课程包 该课程包暂无课程类型，请先选择其他课程包
</div> </div>
<div v-else class="lesson-type-grid"> <div v-else class="lesson-type-grid">
<div <div v-for="type in lessonTypes" :key="type.lessonType"
v-for="type in lessonTypes"
:key="type.lessonType"
:class="['lesson-type-card', { active: formData.lessonType === type.lessonType }]" :class="['lesson-type-card', { active: formData.lessonType === type.lessonType }]"
:style="getLessonTagStyle(type.lessonType)" :style="getLessonTagStyle(type.lessonType)" @click="selectLessonType(type.lessonType)">
@click="selectLessonType(type.lessonType)"
>
<div class="type-icon"> <div class="type-icon">
<component :is="getLessonTypeIconComponent(type.lessonType)" /> <component :is="getLessonTypeIconComponent(type.lessonType)" />
</div> </div>
@ -146,15 +91,10 @@
</a-spin> </a-spin>
</div> </div>
<!-- 步骤4: 选择班级并分配教师 --> <!-- 步骤3: 选择班级并分配教师 -->
<div v-show="currentStep === 3" class="step-panel"> <div v-show="currentStep === 2" class="step-panel">
<h3>选择班级并分配教师</h3> <h3>选择班级并分配教师</h3>
<a-alert <a-alert message="选择班级后，为每个班级指定授课教师" type="info" show-icon style="margin-bottom: 16px" />
message="选择班级后，为每个班级指定授课教师"
type="info"
show-icon
style="margin-bottom: 16px"
/>
<div class="grade-selector"> <div class="grade-selector">
<a-radio-group v-model:value="selectedGrade" button-style="solid"> <a-radio-group v-model:value="selectedGrade" button-style="solid">
<a-radio-button value="">全部</a-radio-button> <a-radio-button value="">全部</a-radio-button>
@ -164,11 +104,8 @@
</a-radio-group> </a-radio-group>
</div> </div>
<div class="class-teacher-grid"> <div class="class-teacher-grid">
<div <div v-for="cls in filteredClasses" :key="cls.id"
v-for="cls in filteredClasses" :class="['class-teacher-card', { selected: isClassSelected(cls.id) }]">
:key="cls.id"
:class="['class-teacher-card', { selected: isClassSelected(cls.id) }]"
>
<div class="class-header" @click="toggleClass(cls.id)"> <div class="class-header" @click="toggleClass(cls.id)">
<a-checkbox :checked="isClassSelected(cls.id)" @click.stop /> <a-checkbox :checked="isClassSelected(cls.id)" @click.stop />
<div class="class-info"> <div class="class-info">
@ -177,13 +114,8 @@
</div> </div>
</div> </div>
<div v-if="isClassSelected(cls.id)" class="teacher-selector"> <div v-if="isClassSelected(cls.id)" class="teacher-selector">
<a-select <a-select v-model:value="classTeacherMap[cls.id]" placeholder="选择教师" style="width: 100%" show-search
v-model:value="classTeacherMap[cls.id]" :filter-option="filterTeacher">
placeholder="选择教师"
style="width: 100%"
show-search
:filter-option="filterTeacher"
>
<a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id"> <a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
{{ teacher.name }} {{ teacher.name }}
</a-select-option> </a-select-option>
@ -196,26 +128,18 @@
</div> </div>
</div> </div>
<!-- 步骤5: 设置时间 --> <!-- 步骤4: 设置时间 -->
<div v-show="currentStep === 4" class="step-panel"> <div v-show="currentStep === 3" class="step-panel">
<h3>设置时间</h3> <h3>设置时间</h3>
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="排课日期" required> <a-form-item label="排课日期" required>
<a-date-picker <a-date-picker v-model:value="formData.scheduledDate" style="width: 100%" placeholder="选择日期"
v-model:value="formData.scheduledDate" :disabled-date="(current) => current && current < dayjs().startOf('day')" />
style="width: 100%"
placeholder="选择日期"
:disabled-date="(current) => current && current < dayjs().startOf('day')"
/>
</a-form-item> </a-form-item>
<a-form-item label="时间段" required> <a-form-item label="时间段" required>
<a-time-range-picker <a-time-range-picker v-model:value="formData.scheduledTimeRange" format="HH:mm" style="width: 100%"
v-model:value="formData.scheduledTimeRange" :placeholder="['开始时间', '结束时间']" />
format="HH:mm"
style="width: 100%"
:placeholder="['开始时间', '结束时间']"
/>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -257,7 +181,7 @@
<template #footer> <template #footer>
<div class="modal-footer"> <div class="modal-footer">
<a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button> <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
<a-button v-if="currentStep < 4" type="primary" @click="nextStep">下一步</a-button> <a-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</a-button>
<a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button> <a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button>
<a-button @click="handleCancel">取消</a-button> <a-button @click="handleCancel">取消</a-button>
</div> </div>
@ -442,28 +366,19 @@ const resetForm = () => {
classTeacherMap.value = {}; classTeacherMap.value = {};
}; };
<<<<<<< HEAD
// 加载课程套餐列表（租户可拥有多个套餐） // 加载课程套餐列表（租户可拥有多个套餐）
=======
// 加载课程套餐列表；多套餐时展示选择器，单套餐时自动选中并加载课程包
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
const loadCollections = async () => { const loadCollections = async () => {
loadingPackages.value = true; loadingPackages.value = true;
try { try {
collections.value = await getCourseCollections(); collections.value = await getCourseCollections();
<<<<<<< HEAD
// 若仅有一个套餐，自动选中并加载其课程包，提升体验
if (collections.value.length === 1) {
await selectCollection(collections.value[0]);
=======
if (collections.value.length > 0) { if (collections.value.length > 0) {
const first = collections.value[0]; const first = collections.value[0];
formData.collectionId = first.id as number; formData.collectionId = first.id as number;
await loadPackagesForCollection(first.id); if (collections.value.length === 1) {
if (!first.packages || first.packages.length === 0) { await selectCollection(first);
message.warning(collections.value.length > 1 ? '该套餐暂无课程包' : '暂无课程包'); } else {
await loadPackagesForCollection(first.id);
} }
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
} }
} catch (error) { } catch (error) {
console.error('❌ 加载课程套餐失败:', error); console.error('❌ 加载课程套餐失败:', error);
@ -473,27 +388,13 @@ const loadCollections = async () => {
} }
}; };
<<<<<<< HEAD
// 选择套餐，并加载该套餐下的课程包 // 选择套餐，并加载该套餐下的课程包
const selectCollection = async (coll: CourseCollection) => { const selectCollection = async (coll: CourseCollection) => {
formData.collectionId = coll.id as number; formData.collectionId = coll.id as number;
=======
// 加载指定套餐下的课程包
const loadPackagesForCollection = async (collectionId: number | string) => {
const col = collections.value.find(c => c.id === collectionId);
if (!col) return;
const packages = await getCourseCollectionPackages(collectionId);
(col as any).packages = packages;
};
// 切换套餐时重新加载课程包并清空已选课程包
const onCollectionChange = async () => {
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
formData.packageId = undefined; formData.packageId = undefined;
formData.courseId = undefined; formData.courseId = undefined;
scheduleRefData.value = []; scheduleRefData.value = [];
lessonTypes.value = []; lessonTypes.value = [];
<<<<<<< HEAD
if (!coll.id) return; if (!coll.id) return;
loadingPackages.value = true; loadingPackages.value = true;
@ -508,7 +409,23 @@ const onCollectionChange = async () => {
message.error('加载课程包失败'); message.error('加载课程包失败');
} finally { } finally {
loadingPackages.value = false; loadingPackages.value = false;
======= }
};
// 加载指定套餐下的课程包
const loadPackagesForCollection = async (collectionId: number | string) => {
const col = collections.value.find(c => c.id === collectionId);
if (!col) return;
const packages = await getCourseCollectionPackages(collectionId);
(col as any).packages = packages;
};
// 切换套餐时重新加载课程包并清空已选课程包
const onCollectionChange = async () => {
formData.packageId = undefined;
formData.courseId = undefined;
scheduleRefData.value = [];
lessonTypes.value = [];
const colId = formData.collectionId; const colId = formData.collectionId;
if (colId) { if (colId) {
loadingPackages.value = true; loadingPackages.value = true;
@ -517,7 +434,6 @@ const onCollectionChange = async () => {
} finally { } finally {
loadingPackages.value = false; loadingPackages.value = false;
} }
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
} }
}; };
@ -546,7 +462,7 @@ const selectPackage = async (packageId: number) => {
// 自动选择第一门课程（用于后端API） // 自动选择第一门课程（用于后端API）
if (selectedCollection.value?.packages) { if (selectedCollection.value?.packages) {
const selectedPkg = selectedCollection.value.packages.find((p: any) => p.id === packageId); const selectedPkg = selectedCollection.value.packages.find((p: any) => p.id == packageId || Number(p.id) === packageId);
if (selectedPkg?.courses && selectedPkg.courses.length > 0) { if (selectedPkg?.courses && selectedPkg.courses.length > 0) {
// 自动设置为第一门课程 // 自动设置为第一门课程
formData.courseId = selectedPkg.courses[0].id; formData.courseId = selectedPkg.courses[0].id;
@ -667,12 +583,6 @@ const getSelectedClassesWithTeachers = () => {
const validateStep = (): boolean => { const validateStep = (): boolean => {
switch (currentStep.value) { switch (currentStep.value) {
case 0: case 0:
if (!formData.collectionId) {
message.warning('请选择套餐');
return false;
}
break;
case 1:
if (!formData.collectionId) { if (!formData.collectionId) {
message.warning('请选择套餐'); message.warning('请选择套餐');
return false; return false;
@ -686,13 +596,13 @@ const validateStep = (): boolean => {
return false; return false;
} }
break; break;
case 2: case 1:
if (!formData.lessonType) { if (!formData.lessonType) {
message.warning('请选择课程类型'); message.warning('请选择课程类型');
return false; return false;
} }
break; break;
case 3: case 2:
if (formData.classIds.length === 0) { if (formData.classIds.length === 0) {
message.warning('请至少选择一个班级'); message.warning('请至少选择一个班级');
return false; return false;
@ -706,7 +616,7 @@ const validateStep = (): boolean => {
} }
} }
break; break;
case 4: case 3:
if (!formData.scheduledDate) { if (!formData.scheduledDate) {
message.warning('请选择排课日期'); message.warning('请选择排课日期');
return false; return false;

127
reading-platform-frontend/src/views/teacher/schedule/components/TeacherCreateScheduleModal.vue
View File

@ -9,7 +9,6 @@
destroy-on-close destroy-on-close
> >
<a-steps :current="currentStep" size="small" class="steps-navigator"> <a-steps :current="currentStep" size="small" class="steps-navigator">
<a-step title="选择套餐" />
<a-step title="选择课程包" /> <a-step title="选择课程包" />
<a-step title="选择课程类型" /> <a-step title="选择课程类型" />
<a-step title="选择班级" /> <a-step title="选择班级" />
@ -17,38 +16,8 @@
</a-steps> </a-steps>
<div class="step-content"> <div class="step-content">
<!-- 步骤1: 选择套餐（租户可拥有多个套餐，一对多） --> <!-- 步骤1: 选择课程包（多套餐时顶部展示套餐选择器） -->
<div v-show="currentStep === 0" class="step-panel"> <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> <h3>选择课程包</h3>
<!-- 多套餐时：先选套餐 --> <!-- 多套餐时：先选套餐 -->
<div v-if="collections.length > 1" class="collection-selector"> <div v-if="collections.length > 1" class="collection-selector">
@ -70,8 +39,8 @@
<div <div
v-for="pkg in selectedCollection.packages" v-for="pkg in selectedCollection.packages"
:key="pkg.id" :key="pkg.id"
:class="['package-card', { active: formData.packageId === pkg.id }]" :class="['package-card', { active: formData.packageId == pkg.id }]"
@click="selectPackage(pkg.id)" @click="selectPackage(Number(pkg.id))"
> >
<div class="package-name">{{ pkg.name }}</div> <div class="package-name">{{ pkg.name }}</div>
<div class="package-grade">{{ Array.isArray(pkg.gradeLevels) ? pkg.gradeLevels.join(', ') : pkg.gradeLevels }}</div> <div class="package-grade">{{ Array.isArray(pkg.gradeLevels) ? pkg.gradeLevels.join(', ') : pkg.gradeLevels }}</div>
@ -115,8 +84,8 @@
</div> </div>
</div> </div>
<!-- 步骤3: 选择课程类型 --> <!-- 步骤2: 选择课程类型 -->
<div v-show="currentStep === 2" class="step-panel"> <div v-show="currentStep === 1" class="step-panel">
<h3>选择课程类型</h3> <h3>选择课程类型</h3>
<a-alert <a-alert
message="请选择一个课程类型进行排课" message="请选择一个课程类型进行排课"
@ -146,8 +115,8 @@
</a-spin> </a-spin>
</div> </div>
<!-- 步骤4: 选择班级（教师端单选） --> <!-- 步骤3: 选择班级（教师端单选） -->
<div v-show="currentStep === 3" class="step-panel"> <div v-show="currentStep === 2" class="step-panel">
<h3>选择班级</h3> <h3>选择班级</h3>
<a-alert <a-alert
message="请选择要排课的班级" message="请选择要排课的班级"
@ -169,8 +138,8 @@
<div v-if="myClasses.length === 0" class="empty-hint">暂无可用班级</div> <div v-if="myClasses.length === 0" class="empty-hint">暂无可用班级</div>
</div> </div>
<!-- 步骤5: 设置时间 --> <!-- 步骤4: 设置时间 -->
<div v-show="currentStep === 4" class="step-panel"> <div v-show="currentStep === 3" class="step-panel">
<h3>设置时间</h3> <h3>设置时间</h3>
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="排课日期" required> <a-form-item label="排课日期" required>
@ -210,7 +179,7 @@
<template #footer> <template #footer>
<div class="modal-footer"> <div class="modal-footer">
<a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button> <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
<a-button v-if="currentStep < 4" type="primary" @click="nextStep">下一步</a-button> <a-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</a-button>
<a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button> <a-button v-else type="primary" :loading="loading" @click="handleSubmit">创建排课</a-button>
<a-button @click="handleCancel">取消</a-button> <a-button @click="handleCancel">取消</a-button>
</div> </div>
@ -237,7 +206,6 @@ import {
getCourseCollectionPackages, getCourseCollectionPackages,
getCoursePackageLessonTypes, getCoursePackageLessonTypes,
type CourseCollection, type CourseCollection,
type CoursePackageItem,
type LessonTypeInfo, type LessonTypeInfo,
} from '@/api/school'; } from '@/api/school';
import { getTeacherClasses, createTeacherSchedule, type TeacherClass } from '@/api/teacher'; import { getTeacherClasses, createTeacherSchedule, type TeacherClass } from '@/api/teacher';
@ -377,12 +345,12 @@ const openWithPreset = async (preset: SchedulePreset) => {
} catch { } catch {
// 校本课程等场景可能无对应课程包接口，使用预设类型填充 // 校本课程等场景可能无对应课程包接口，使用预设类型填充
lessonTypes.value = preset.lessonType lessonTypes.value = preset.lessonType
? [{ lessonType: preset.lessonType, count: 1 }] ? [{ lessonType: preset.lessonType, lessonTypeName: getLessonTypeName(preset.lessonType), count: 1 }]
: []; : [];
} }
// 从选择课程类型（步骤2）开始，跳过套餐与课程包 // 从选择课程类型开始，跳过课程包选择
currentStep.value = 2; currentStep.value = 1;
}; };
const resetForm = () => { const resetForm = () => {
@ -397,28 +365,20 @@ const resetForm = () => {
lessonTypes.value = []; lessonTypes.value = [];
}; };
<<<<<<< HEAD
// 加载课程套餐列表（租户可拥有多个套餐） // 加载课程套餐列表（租户可拥有多个套餐）
=======
// 加载课程套餐列表；多套餐时展示选择器，单套餐时自动选中并加载课程包
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
const loadCollections = async () => { const loadCollections = async () => {
loadingPackages.value = true; loadingPackages.value = true;
try { try {
collections.value = await getCourseCollections(); collections.value = await getCourseCollections();
<<<<<<< HEAD
// 若仅有一个套餐，自动选中并加载其课程包，提升体验
if (collections.value.length === 1) {
await selectCollection(collections.value[0]);
=======
if (collections.value.length > 0) { if (collections.value.length > 0) {
const first = collections.value[0]; const first = collections.value[0];
formData.collectionId = first.id as number; formData.collectionId = first.id as number;
await loadPackagesForCollection(first.id); // 若仅有一个套餐，自动加载其课程包
if (!first.packages || first.packages.length === 0) { if (collections.value.length === 1) {
message.warning(collections.value.length > 1 ? '该套餐暂无课程包' : '暂无课程包'); await selectCollection(first);
} else {
await loadPackagesForCollection(first.id);
} }
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
} }
} catch (error) { } catch (error) {
console.error('加载课程套餐失败:', error); console.error('加载课程套餐失败:', error);
@ -428,27 +388,13 @@ const loadCollections = async () => {
} }
}; };
<<<<<<< HEAD
// 选择套餐，并加载该套餐下的课程包 // 选择套餐，并加载该套餐下的课程包
const selectCollection = async (coll: CourseCollection) => { const selectCollection = async (coll: CourseCollection) => {
formData.collectionId = coll.id as number; formData.collectionId = coll.id as number;
=======
// 加载指定套餐下的课程包
const loadPackagesForCollection = async (collectionId: number | string) => {
const col = collections.value.find(c => c.id === collectionId);
if (!col) return;
const packages = await getCourseCollectionPackages(collectionId);
(col as any).packages = packages;
};
// 切换套餐时重新加载课程包并清空已选课程包
const onCollectionChange = async () => {
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
formData.packageId = undefined; formData.packageId = undefined;
formData.courseId = undefined; formData.courseId = undefined;
scheduleRefData.value = []; scheduleRefData.value = [];
lessonTypes.value = []; lessonTypes.value = [];
<<<<<<< HEAD
if (!coll.id) return; if (!coll.id) return;
loadingPackages.value = true; loadingPackages.value = true;
@ -463,7 +409,23 @@ const onCollectionChange = async () => {
message.error('加载课程包失败'); message.error('加载课程包失败');
} finally { } finally {
loadingPackages.value = false; loadingPackages.value = false;
======= }
};
// 加载指定套餐下的课程包
const loadPackagesForCollection = async (collectionId: number | string) => {
const col = collections.value.find(c => c.id === collectionId);
if (!col) return;
const packages = await getCourseCollectionPackages(collectionId);
(col as any).packages = packages;
};
// 切换套餐时重新加载课程包并清空已选课程包（步骤2 多套餐时的选择器）
const onCollectionChange = async () => {
formData.packageId = undefined;
formData.courseId = undefined;
scheduleRefData.value = [];
lessonTypes.value = [];
const colId = formData.collectionId; const colId = formData.collectionId;
if (colId) { if (colId) {
loadingPackages.value = true; loadingPackages.value = true;
@ -472,7 +434,6 @@ const onCollectionChange = async () => {
} finally { } finally {
loadingPackages.value = false; loadingPackages.value = false;
} }
>>>>>>> d300fa4 (feat: 校园端排课、教师端预约排课添加套餐选择)
} }
}; };
@ -489,7 +450,7 @@ const selectPackage = async (packageId: number) => {
const collection = selectedCollection.value; const collection = selectedCollection.value;
if (collection?.packages) { if (collection?.packages) {
const pkg = collection.packages.find((p: any) => p.id === packageId); const pkg = collection.packages.find((p: any) => p.id == packageId || Number(p.id) === packageId);
if (pkg?.courses && pkg.courses.length > 0) { if (pkg?.courses && pkg.courses.length > 0) {
formData.courseId = pkg.courses[0].id; formData.courseId = pkg.courses[0].id;
@ -565,12 +526,6 @@ const getSelectedTimeRange = (): string => {
const validateStep = (): boolean => { const validateStep = (): boolean => {
switch (currentStep.value) { switch (currentStep.value) {
case 0: case 0:
if (!formData.collectionId) {
message.warning('请选择套餐');
return false;
}
break;
case 1:
if (!formData.collectionId) { if (!formData.collectionId) {
message.warning('请选择套餐'); message.warning('请选择套餐');
return false; return false;
@ -584,19 +539,19 @@ const validateStep = (): boolean => {
return false; return false;
} }
break; break;
case 2: case 1:
if (!formData.lessonType) { if (!formData.lessonType) {
message.warning('请选择课程类型'); message.warning('请选择课程类型');
return false; return false;
} }
break; break;
case 3: case 2:
if (!formData.classId) { if (!formData.classId) {
message.warning('请选择班级'); message.warning('请选择班级');
return false; return false;
} }
break; break;
case 4: case 3:
if (!formData.scheduledDate) { if (!formData.scheduledDate) {
message.warning('请选择排课日期'); message.warning('请选择排课日期');
return false; return false;
@ -615,8 +570,8 @@ const nextStep = () => {
}; };
const prevStep = () => { const prevStep = () => {
// 预设模式下从步骤2点击上一步时关闭弹窗（不展示套餐/课程包选择） // 预设模式下从选择课程类型点击上一步时关闭弹窗（不展示课程包选择）
if (isPresetMode.value && currentStep.value === 2) { if (isPresetMode.value && currentStep.value === 1) {
handleCancel(); handleCancel();
return; return;
} }