微搭低代码MBA 培训管理系统实战 23——考勤管理:签到记录生成与查看
目录前言1 数据准备1.1 排课记录表扩展字段MBA_Schedules1.2 考勤记录表 (MBA_Attendance)2 签到记录列表页面搭建2.1 页面整体布局2.2 数据表格配置2.3 配置URL参数2.4 配置数据筛选2.5 配置查询条件2.6 配置排序字段3 排课管理页面操作列配置4 生成签到记录功能实现4.1 功能说明4.2 核心逻辑实现4.3 按钮配置5 跳转签到记录页面最终效果总结前言在上一讲中我们解决了排课的资源冲突问题。现在课程已经排好接下来教务老师需要在上课前为学员生成签到记录并在课后查看和管理签到情况。本节将详细介绍如何实现签到记录的生成、查看和管理功能。本节目标数据模型设计完善考勤记录表支持签到状态管理页面布局搭建创建签到记录管理界面核心功能实现包括签到记录的批量生成、列表查看、状态管理等功能1 数据准备1.1 排课记录表扩展字段MBA_Schedules在原有的排课记录表基础上增加签到记录生成标识字段字段名称字段标识字段类型说明签到记录生成状态attendance_generated枚举1-未生成、2-已生成防止重复生成签到记录1.2 考勤记录表 (MBA_Attendance)创建考勤记录表用于记录学员的签到状态字段名称字段标识字段类型说明关联课表rel_schedule_id关联关系关联MBA_Schedules哪节课关联学员rel_student_id关联关系关联MBA_StudentProfiles谁关联课时卡rel_card_id关联关系关联MBA_LearningCards签到时间sign_in_time日期时间实际签到时间消耗课时hours_spent数字该课程消耗课时状态status枚举1-待签到、2-已签到、3-迟到、4-请假、5-缺勤备注remark多行文本签到备注创建时间created_at日期时间自动生成更新时间updated_at日期时间自动更新2 签到记录列表页面搭建2.1 页面整体布局点击创建页面的图标输入页面的名称签到记录布局选择教务布局因为主要是教务人员使用切换到页面布局选择教务布局添加平级菜单添加签到记录菜单2.2 数据表格配置在教务布局的内容插槽下添加布局组件修改标题改为签到记录在页面布局中添加数据表格组件数据模型选择考勤记录表2.3 配置URL参数如果是从排课管理页面跳转过来我们需要知道是哪一节课。选中页面组件创建URL参数输入schedule_id2.4 配置数据筛选显示表格数据的时候我们需要只显示当前课程的签到记录。点击筛选器配置筛选条件关联课表等于我们的URL参数2.5 配置查询条件点击筛选器给表格配置查询条件添加具体的查询条件学员姓名模糊搜索通过关联学员签到状态下拉选择2.6 配置排序字段默认按照创建时间的倒序进行排序最新的签到记录显示在最前面3 排课管理页面操作列配置在排课管理页面的数据表格操作列需要配置功能按钮按钮名称功能说明显示条件生成签到根据班级花名册批量生成考勤记录签到记录生成状态 未生成签到记录跳转到签到记录列表页签到记录已生成配置好按钮之后给按钮绑定条件展示生成签到绑定为签到记录生成状态 未生成在排课生成逻辑里我们要追加一个字段排课时要设置签到记录生成状态为待生成要在表格里添加新增加的列才可以看到生成签到按钮4 生成签到记录功能实现4.1 功能说明在上课前教务老师需要为本次课程的所有学员生成签到记录。系统会根据当前排课对应的班级查询班级花名册为每个学员创建一条初始状态为待签到的考勤记录。4.2 核心逻辑实现创建自定义方法generateAttendanceRecords// 生成签到记录exportdefaultasyncfunctiongenerateAttendanceRecords({event,data}){constscheduleIddata.target._id;constclassIddata.target.rel_class_id._id;// 1. 检查是否已生成过签到记录if(data.target.attendance_generated2){return$w.utils.showToast({title:签到记录已生成请勿重复操作,icon:error});}try{$w.utils.showLoading({title:正在生成签到记录...});// 2. 查询班级花名册获取所有在读学员constrosterResawait$w.cloud.callDataSource({dataSourceName:MBA_ClassRosters,methodName:wedaGetRecordsV2,params:{filter:{where:{$and:[{rel_class_id:{$eq:classId}},{status:{$eq:1}}// 1-正常在读]}},select:{$master:true,rel_student_id:true,rel_card_id:true}}});if(rosterRes.records.length0){$w.utils.hideLoading();return$w.utils.showToast({title:该班级暂无学员,icon:error});}// 3. 批量创建考勤记录constattendanceDatarosterRes.records.map(roster({rel_schedule_id:{_id:scheduleId},rel_student_id:{_id:roster.rel_student_id._id},rel_card_id:{_id:roster.rel_card_id._id},hours_spent:0,// 初始为0签到后更新status:1,// 1-待签到}));await$w.cloud.callDataSource({dataSourceName:MBA_Attendance,methodName:wedaBatchCreateV2,params:{data:attendanceData}});// 4. 更新排课记录的签到生成状态await$w.cloud.callDataSource({dataSourceName:MBA_Schedules,methodName:wedaUpdateV2,params:{filter:{where:{_id:{$eq:scheduleId}}},data:{attendance_generated:2,// 已生成}}});$w.utils.hideLoading();$w.utils.showToast({title:成功生成${rosterRes.records.length}条签到记录,icon:success});$w.table1.refresh();// 刷新表格}catch(error){console.error(生成签到记录失败:,error);$w.utils.hideLoading();$w.utils.showToast({title:生成失败请重试,icon:error});}}4.3 按钮配置给操作列的生成签到按钮配置点击事件调用generateAttendanceRecords方法传入所在行数据5 跳转签到记录页面生成签到记录成功后操作列显示签到记录按钮。给该按钮配置点击事件打开签到记录页面传入所在行的数据标识最终效果教务人员打开排课管理页面可以看到所有的排课记录对于未生成签到记录的课程点击生成签到按钮。生成成功后操作列显示签到记录按钮点击跳转到签到记录列表。在签到记录列表中可以查看所有学员的签到状态总结本节我们完成了签到管理功能的完整实现数据模型设计扩展排课记录表增加attendance_generated字段创建考勤记录表记录学员签到状态生成签到记录根据班级花名册批量生成待签到记录防重复生成机制签到记录列表创建签到记录列表页面配置URL参数接收课程ID数据筛选显示当前课程的签到记录通过本讲的实现教务人员可以方便地管理课程签到实现从排课到签到的完整闭环。下一步我们将继续完善学员端的扫码签到功能实现真正的无纸化考勤。