微搭低代码MBA 培训管理系统实战 29——我的课表

目录

• 前情回顾与本节目标
• 第一步：数据模型准备
• • [1.1 课程表（MBA_Schedules）](#1.1 课程表（MBA_Schedules）)
  • [1.2 考勤记录表（MBA_Attendance）](#1.2 考勤记录表（MBA_Attendance）)
  • [1.3 请假记录表（MBA_LeaveRequests）](#1.3 请假记录表（MBA_LeaveRequests）)
• 第二步：搭建课表页面布局
• • [2.1 创建页面](#2.1 创建页面)
  • [2.2 页面头部](#2.2 页面头部)
  • [2.3 课程列表区域](#2.3 课程列表区域)
• 第三步：请假功能
• 最终效果
• 总结

前情回顾与本节目标

在上一节中，我们完成了课程签到功能。本节我们将实现"我的课表"功能，展示学员的所有课程安排，包括即将开课、已出勤、缺课等不同状态的课程。

本节核心目标：

• 课表页面布局：使用低代码组件搭建课表页面
• 数据加载：查询学员的课程安排和考勤记录
• 状态展示：显示课程状态（即将开课、已出勤、缺课）

---

第一步：数据模型准备

1.1 课程表（MBA_Schedules）

用于记录班级的课程安排：

字段名称	字段标识	字段类型	说明
课表ID	_id	文本	主键，系统自动生成
关联班级	rel_class_id	多对一	关联 Classes 表
课程名称	course_name	文本	课程名称
授课老师	teacher_name	文本	授课老师姓名
上课日期	class_date	日期	课程日期
开始时间	start_time	日期时间	课程开始时间
结束时间	end_time	日期时间	课程结束时间
上课地点	location	文本	上课地点
状态	status	枚举	1-未开始、2-进行中、3-已结束

1.2 考勤记录表（MBA_Attendance）

用于记录学员的签到信息：

字段名称	字段标识	字段类型	说明
签到ID	_id	文本	主键，系统自动生成
关联学员	rel_student_id	多对一	关联 StudentProfiles 表
关联课程	rel_schedule_id	多对一	关联 Schedules 表
签到时间	checkin_time	日期时间	签到时间
签到状态	status	枚举	0-未签到、1-正常签到、2-迟到、3-早退、4-已请假
签到方式	checkin_type	枚举	1-扫码、2-手动

1.3 请假记录表（MBA_LeaveRequests）

用于记录学员的请假申请：

字段名称	字段标识	字段类型	说明
请假ID	_id	文本	主键，系统自动生成
关联学员	rel_student_id	多对一	关联 StudentProfiles 表
关联考勤记录	rel_attendance_id	多对一	关联 Attendance 表
请假原因	reason	文本	请假原因
请假类型	leave_type	枚举	1-事假、2-病假、3-其他
申请时间	apply_time	日期时间	提交请假申请的时间
审批状态	approval_status	枚举	0-待审批、1-已通过、2-已拒绝
审批人	approver	文本	审批人姓名
审批时间	approve_time	日期时间	审批时间
审批备注	approve_remark	文本	审批备注

---

第二步：搭建课表页面布局

2.1 创建页面

点击创建页面 图标，输入"我的课表"

复制页面的ID

回到首页，找到我们的快捷菜单跳转方法，修改页面ID

export default function({event, data}) {
const actionType = data.target;
  
  switch(actionType) {
    case 'checkin':
      $w.utils.navigateTo({ pageId: 'u_jin_ri_qie_dao' });
      break;
    case 'schedule':
      $w.utils.navigateTo({ pageId: 'u_wo_de_ke_biao' });
      break;
    case 'card':
      $w.utils.navigateTo({ pageId: 'learning_card' });
      break;
    case 'homework':
      $w.utils.navigateTo({ pageId: 'homework' });
      break;
    case 'resources':
      $w.utils.navigateTo({ pageId: 'resources' });
      break;
    case 'survey':
      $w.utils.navigateTo({ pageId: 'survey' });
      break;
  }
}

2.2 页面头部

添加容器组件 ，设置宽、高和背景色

:root {
  width: 100%;
  min-height: 100vh;
  background-color: #F6F7F9;
}

继续添加普通容器，设置背景色、内边距和圆角

:root {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 48px 20px 24px 20px;
  border-radius: 0 0 24px 24px;
}

里边添加文本组件，设置文本颜色、字号和加粗的效果

2.3 课程列表区域

添加数据列表组件 ，数据模型选择考勤记录表

修改普通容器的样式，设置为卡片样式

:root {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  margin-bottom: 12px;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}

将数据列表的字段范围切换为查询全部

第一个文本组件绑定课程名称

$w.item_listView1.rel_course_id.name

第二个文本绑定上课时间

$w.DateText($w.item_listView1.rel_schedule_id.course_date, 'YYYY-MM-DD')+" "+$w.DateText($w.item_listView1.rel_schedule_id.start_time, 'HH:mm')

将右侧的图标组件改为文本组件，绑定考勤状态

$w.app.utils.formatEnum($w.item_listView1.status, 'zhuangtai', $w.app)

在文本下添加一个按钮，命名为请假

给按钮绑定条件展示，当状态是待签到的时候显示

$w.item_listView1.status=="1"

---

第三步：请假功能

添加弹窗组件 ，修改标题为请假申请

添加表单容器组件，设置数据模型为请假记录表

选择关联学员组件，设置选中值为当前登录用户的数据标识

选中关联课程组件，设置选中值为弹窗的入参

选中申请时间组件，设置选中时间为当前时间

选中弹窗组件，关闭底部按钮显示

关闭弹窗默认打开状态

设置请假按钮的点击事件，打开弹窗，传入所在行的数据标识

给表单容器的提交方法增加一个弹窗关闭方法

最终效果

在首页点击我的课表图标

列表显示需要签到的课程

如果是未签到的课程可以进行请假申请

总结

本节完成了"我的课表"功能的实现，并增加了请假功能：

1. 课表页面布局：头部、课程列表、状态标签、操作按钮
2. 数据加载：查询课程安排和考勤记录
3. 状态展示：即将开课、已出勤、已请假、缺课四种状态
4. 请假功能：请假弹窗、表单提交、状态更新