微搭低代码MBA 培训管理系统实战 31——作业管理功能实现

前情回顾与本节目标
第一步：数据模型准备
- [1.1 作业表（MBA_Homeworks）](#1.1 作业表（MBA_Homeworks）)
- [1.2 作业提交表（MBA_HomeworkSubmissions）](#1.2 作业提交表（MBA_HomeworkSubmissions）)
第二步：教师端作业发布
- [2.1 创建页面](#2.1 创建页面)
- [2.2 页面布局](#2.2 页面布局)
- [2.3 添加数据表格](#2.3 添加数据表格)
- [2.4 发布作业](#2.4 发布作业)
- [2.5 表单提交方法](#2.5 表单提交方法)
第三步：学生端作业中心
- [3.1 创建页面](#3.1 创建页面)
- [3.2 页面头部](#3.2 页面头部)
- [3.3 作业列表区域](#3.3 作业列表区域)
- [3.4 提交作业](#3.4 提交作业)
最终效果
总结

前情回顾与本节目标

在上一节中，我们完成了学习卡功能。本节我们将实现作业管理功能，包括教师端发布作业和学生端查看、提交作业。

本节核心目标：

教师端作业发布：教师可以发布作业，设置截止日期
学生端作业中心：学生可以查看作业列表，提交作业

第一步：数据模型准备

1.1 作业表（MBA_Homeworks）

用于记录教师发布的作业：

字段名称	字段标识	字段类型	说明
作业ID	_id	文本	主键，系统自动生成
关联班级	rel_class_id	多对一	关联 Classes 表
关联课程	rel_schedule_id	多对一	关联 Schedules 表
作业标题	title	文本	作业标题
作业内容	content	富文本	作业详细内容
截止日期	deadline	日期时间	作业提交截止日期
发布状态	status	枚举	1-已发布、2-已结束
发布时间	created	日期时间	发布时间

1.2 作业提交表（MBA_HomeworkSubmissions）

用于记录学生提交的作业：

字段名称	字段标识	字段类型	说明
提交ID	_id	文本	主键，系统自动生成
关联作业	rel_homework_id	多对一	关联 Homeworks 表
关联学员	rel_student_id	多对一	关联 StudentProfiles 表
提交内容	content	富文本	提交的作业内容
附件列表	attachments	图片数组	附件图片
提交状态	status	枚举	1-待提交、2-已提交、3-已批改
得分	score	数字	作业得分
评语	comment	文本	教师评语
点赞数	likes	数字	点赞数
提交时间	submit_time	日期时间	提交时间
创建时间	created	日期时间	创建时间

第二步：教师端作业发布

2.1 创建页面

点击创建页面 图标，输入"作业管理"，布局选择教师布局

切换到布局设计，选择教师布局，添加平级菜单

2.2 页面布局

切换回页面设计，在教师布局下添加布局组件

修改标题，改为作业管理

2.3 添加数据表格

在页面中添加数据表格组件 ，数据模型选择MBA_Homeworks 。

2.4 发布作业

在页面中添加按钮组件 ，设置文本为"发布作业"。

选中页面组件，添加弹窗组件

添加表单容器，数据模型选择作业表

修改表单布局为双列布局

给发布按钮配置点击事件，打开弹窗

2.5 表单提交方法

创建自定义方法 publishHomework：

javascript 复制代码

export default async function publishHomework({ event, data }) {
  try {
    $w.utils.showLoading({ title: '发布中...' });
    
    // 获取表单数据
    const formData = $w.form1.value;
    
    // 1. 创建作业
    const homeworkRes = await $w.cloud.callDataSource({
      dataSourceName: 'MBA_Homeworks',
      methodName: 'wedaCreateV2',
      params: {
        data: {
          rel_class_id: { _id: formData.rel_class_id },
          rel_schedule_id: { _id: formData.rel_schedule_id },
          title: formData.title,
          content: formData.content,
          deadline: formData.deadline,
          status: '1',
          created: $w.Now()
        }
      }
    });
    
    const homeworkId = homeworkRes.id;
    
    // 2. 查询班级下的所有学员（从班级花名册获取在读学员）
    const rosterRes = await $w.cloud.callDataSource({
      dataSourceName: 'MBA_ClassRosters',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: {
          where: {
            $and: [
              { rel_class_id: { $eq: formData.rel_class_id } },
              { status: { $eq: '1' } }  // 1-在读
            ]
          }
        },
        select: { 
          $master: true,
          rel_student_id: true
        }
      }
    });
    
    const students = rosterRes.records || [];
    
    // 3. 为每个学员创建作业提交记录（状态为待提交）
    if (students.length > 0) {
      const submissionData = students.map(roster => ({
        rel_homework_id: { _id: homeworkId },
        rel_student_id: { _id: roster.rel_student_id._id },
        status: '1',  // 1-待提交
        likes: 0,
        created: $w.Now()
      }));
      
      await $w.cloud.callDataSource({
        dataSourceName: 'MBA_HomeworkSubmissions',
        methodName: 'wedaBatchCreateV2',
        params: {
          data: submissionData
        }
      });
    }
    
    $w.utils.hideLoading();
    $w.utils.showToast({ title: '发布成功', icon: 'success' });
    
    // 返回作业管理页面
   $w.modal1.close({})
   $w.table1.refresh()
    
  } catch (e) {
    console.error('发布作业失败', e);
    $w.utils.hideLoading();
    $w.utils.showToast({ title: '发布失败', icon: 'error' });
  }
}

修改表单容器的提交方法，改为调用我们的自定义方法

第三步：学生端作业中心

3.1 创建页面

点击创建页面 图标，输入"作业提交"

复制页面的ID

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

bash 复制代码

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: 'u_xue_xi_ka' });
      break;
    case 'homework':
      $w.utils.navigateTo({ pageId: 'u_zuo_ye_ti_jiao' });
      break;
    case 'resources':
      $w.utils.navigateTo({ pageId: 'resources' });
      break;
    case 'survey':
      $w.utils.navigateTo({ pageId: 'survey' });
      break;
  }
}

3.2 页面头部

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

bash 复制代码

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

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

bash 复制代码

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

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

3.3 作业列表区域

添加数据列表组件 ，数据模型选择作业提交表

字段范围选择全部字段

第一个文本组件绑定为作业的标题

第二个文本组件绑定截止日期

第三个文本绑定提交状态

3.4 提交作业

添加弹窗组件

添加表单容器，场景选择更新，数据模型选择作业提交表

给提交按钮绑定点击事件，打开弹窗，传入所在行的数据标识

给表单容器的数据标识绑定我们弹窗的入参

最终效果

教师在管理端发布作业

学员在小程序端收到待办，提交具体的作业

总结

本节完成了作业管理功能的实现：

教师端作业发布：创建作业管理页面，发布作业表单
学生端作业中心：作业列表展示，Tab切换，作业提交

微搭低代码MBA 培训管理系统实战 31——作业管理功能实现

目录

前情回顾与本节目标

第一步：数据模型准备

1.1 作业表（MBA_Homeworks）

1.2 作业提交表（MBA_HomeworkSubmissions）

第二步：教师端作业发布

2.1 创建页面

2.2 页面布局

2.3 添加数据表格

2.4 发布作业

2.5 表单提交方法

第三步：学生端作业中心

3.1 创建页面

3.2 页面头部

3.3 作业列表区域

3.4 提交作业

最终效果

总结