教培管家第12讲：课程排课——时空维度的资源调度
目录
- ⏳ 前情回顾
- 🎯 本节目标
- 第一步：排课——教务系统的“资源分发”
- 第二步：搭建“课程排课”页面
- 第三步：智能批量排课逻辑实现
- 3.1. 交互布局设计
- 3.2 预设数据结构
- 3.3 搭建排课弹窗视图
- 3.4 搭建排课周期
- 3.5 周卡片交互实现
- 第四步：功能验证
- 🌟 总结与预告
⏳ 前情回顾
在上一讲中，我们完成了“班级管理”，它定义了教务运行的静态规则。
然而，规则是死的，运行是活的。老师会请假、学生要补课、教室可能临时维修。
本节我们将进入教务系统的“实时调度中心”——课程排课。这是教务老师每天停留时间最长的页面，也是解决资源冲突、保障教学秩序的核心战场。
🎯 本节目标
- 时空建模：创建
Schedule（排课）模型，精细化定义每一堂课。 - 多维视图搭建：构建支持列表与日历切换的排课指挥部。
- 核心业务逻辑：
- 资源校验：实现老师与教室的实时冲突检测。
- 动态调整：支持单次课的老师更换（代课）与教室调整。
第一步：排课——教务系统的“资源分发”
排课的本质是在时间、空间、人员三个维度寻找最优交集。
创建数据源：Schedule (排课表)
| 区域 | 字段名称 | 字段标识 | 数据类型 | 备注/关联 |
|---|---|---|---|---|
| 核心关联 | 关联班级 | classId | 关联关系 | 关联 Class (班级表) |
| 课程类型 | courseType | 枚举 | 体验课 / 正课 | |
| 时空属性 | 上课日期 | date | 日期 | 具体的上课日期 |
| 开始时间 | startTime | 时间 | 如 09:00 | |
| 结束时间 | endTime | 时间 | 如 10:30 | |
| 资源调度 | 执教老师 | teacherId | 关联关系 | 关联 Employee (代课逻辑) |
| 上课教室 | classroomId | 关联关系 | 关联 Classroom (换教室逻辑) | |
| 运行指标 | 课节状态 | status | 枚举 | 1=待上课, 2=已点名, 3=已结课, 4=已停课, 5=有冲突 |
| 实到人数 | actualCount | 数字 | 老师点名后自动回填 |
💡 业务逻辑沉淀：
- 代课与换教室：虽然班级有默认配置，但
Schedule表允许对单次课进行微调，这满足了教务中常见的临时变动需求。- 状态红线：当检测到同一老师或教室在同一时间段出现在两个
Schedule记录中时，系统应自动标记为“有冲突”。- 点名与状态联动：
- 触发点：老师在手机端/工作台点击“点名”。
- 逻辑流：提交点名表单 -> 更新
Schedule记录状态为2 (已点名)-> 异步触发“消课扣费”逻辑 -> 处理完毕后状态转为3 (已结课)。
第二步：搭建“课程排课”页面
排课页面需要处理极其复杂的信息展示，我们继续在管理后台应用中进行搭建。
创建页面：在微搭应用编辑器中，新建页面“排课管理”，布局选择“左侧导航布局”。
添加组件：拖入“布局组件”，并在其中嵌入“数据表格”组件。
绑定数据：选择 Schedule（排课表），勾选全部场景。
配置筛选器：添加“上课日期”范围筛选。添加“执教老师”、“上课教室”和“课节状态”筛选。
切换到页面布局，添加菜单
第三步：智能批量排课逻辑实现
在实际业务中，教务老师很少一节一节手动录入课程。我们需要实现一个“智能排课向导”，根据班级的开课规则自动生成整个学期的课表。排课的功能我们放在班级管理实现。
3.1. 交互布局设计
智能排课弹窗采用三段式交互结构，极大提升复杂排课场景的录入效率。
3.2 预设数据结构
在页面的“变量管理”中，需手动预设以下状态变量，它们是驱动 UI 交互的“灵魂”：
currentDay: 类型：数字 (Number)，默认值：1，作用：记录当前用户正在编辑周几。
scheduleRules: 类型：对象 (Object)，默认值：{}，作用：存储所有天的排课规则。键为星期（1-7），值为该天的时段数组。
classInfo:类型*：对象 (Object)，作用：存储当前班级的默认配置（如默认老师、默认教室），用于新增时段时自动回填。
3.3 搭建排课弹窗视图
先在操作列里添加一个按钮，名称改为排课
然后选中页面组件，添加弹窗组件
给按钮设置点击事件，先设置变量赋值，将所在行数据赋值给我们的classInfo变量
然后跟一个打开弹窗方法
然后在弹窗内容里添加网格布局，设置三行一列布局
3.4 搭建排课周期
我们在班级里已经设置了排课的基本信息，这里我们要把设置的信息显示到界面上。在列里添加日期时间组件，设置为开始日期和结束日期
3.5 周卡片交互实现
这部分的“卡片”效果是通过循环展示组件配合普通容器组件实现。
先添加普通容器，里边添加循环展示
设置普通容器的布局为横向排列
循环展示：绑定数据源为固定数组。
[
{ value: 1, label: '周一' },
{ value: 2, label: '周二' },
{ value: 3, label: '周三' },
{ value: 4, label: '周四' },
{ value: 5, label: '周五' },
{ value: 6, label: '周六' },
{ value: 7, label: '周日' }
]
里边的容器添加两个文本组件，第一个文本绑定循环对象里的label值
第二个文本，绑定表达式，设置了时段我们显示数量，未设置时段的时候显示未设置
$w.page.dataset.state.scheduleRules[$w.item_repeater1.value]?.length>0? `已设 ${$w.page.dataset.state.scheduleRules[$w.item_repeater1.value]?.length} 个时段` : '未设置'
给普通容器设置样式绑定，这样在选中时背景色变为蓝色
$w.item_repeater1.value==$w.page.dataset.state.currentDay?{background:'#2563eb'} :{ background:'#ffffff'}
给文本组件设置样式绑定，选中的时候变成白色
$w.item_repeater1.value==$w.page.dataset.state.currentDay?{color:'#ffffff'} :{ color:'#333'}
视图搭建好之后给普通容器设置点击事件，给变量赋值就可以
第四步：功能验证
进入实时预览，验证排课逻辑的健壮性：
打开班级管理，点击排课按钮
切换星期，可以看到背景色跟着变化
🌟 总结与预告
本节我们搭建了排课的表结构，依托于表，我们搭建了一个星期选择功能。这里主要需要掌握数据结构的构造，样式绑定，需要具备一定的编程思维才可以实现。下节我们继续排课功能的搭建，实现时间段的设置功能。
