调用触发应用:页面点击按钮轮动展示数据

学员管理过程中,高效的作业提交与管理机制至关重要。

通过页面与调用触发相结合的方式,不仅能满足学员便捷查看和提交作业的需求,还可广泛应用于作品提交、工单提交等场景。

本方案聚焦于团队内培训考核的实际需求,旨在打造一个直观、便捷的作业提交页面

1、场景需求简介

某企业团队内训用一对一教学模式,教师按固定课程讲次授课,每次授课后布置相应作业,学生需完成并提交作业。

为提升学生使用体验,培训老师期望设计一个作业提交页面,满足以下功能需求:

  • 作业查看便捷性:学生在做作业前,可直观看到所有未提交作业,减少查找时间与精力成本。
  • 作业详情查看与提交:做作业时,学生能以字段组组件查看指定作业的详情,包括讲次和作业视频字段。同时,通过显眼的页面按钮组件,可轻松上传作业图片至提交作业字段。
  • 多作业切换操作:做多份作业时,学生可借助 “上一份” 、“下一份” 、“展示当前任务” 等页面按钮组件,方便地展示不同未提交作业的详情,并重复进行查看与提交操作。

本篇重点介绍通过调用触发实现组件的数据切换、打开详情页/指定字段页面,便于学员查看、提交作业

效果如下:

2、系统结构简介

  • 核心表格 - 学习任务表:作为页面组件调用的关键表格,用于记录学生待完成作业、提交作业以及教师评价等信息。
    • img
  • 核心页面 - 作业提交
    • img
    • 任务详情展示:利用字段组组件,展示待提交作业的单条数据详情,默认按照展示顺序,将序号最小且未提交的作业排在首位。
    • 待提交任务明细:通过网格视图组件,呈现所有未提交作业的详细信息,便于学生整体浏览。
    • 按钮功能区:设置按钮组件,通过调用触发实现相应任务,如切换作业详情、提交作业等功能。

3、解决方案

本需求方案的基本原理如下:

① 字段组组件默认展示「展示顺序」字段序号最小的数据;

② 上一页/下一页按钮通过修改「展示顺序」的值,控制字段组组件中显示哪条数据;

③ 展开当前任务同理①,即筛选到学生为自己且「展示顺序」字段序号最小的数据并打开数据详情页;

④ 提交作业、修改作业配置原理同③。

下面我们以“上一页”、“展开当前任务”按钮为例,介绍调用触发实现按钮与组件联动配置方法。需求效果如下:

  • 点击“上一页(下一页)”,可切换作业详情展示区的数据;
  • 点击“展开当前任务”,可弹出当前详情展示区的数据详情页。

3.1 配置字段组

字段组组件 “任务详情展示” 依据 “展示顺序” 字段,按从小到大的顺序进行排序展示。同时筛选“未提交”作业的数据,确保学生优先看到最早的未提交作业。

img

3.2 切换任务详情展示数据

通过改变 “展示序号” 字段的值,实现 “上一页 / 下一页” 按钮对作业详情展示区数据的切换。

3.2.1 “上一页” 解决方案

img

点击 “上一页”,数据切换顺序是任务 1 切换到任务 5、任务 5 切换到任务 4,依此类推。

对应序号变化为任务 1 序号变②、任务 2 序号变③…… 任务 5 序号变①。

为使数据按任务日期顺序轮动,需修改所有数据的序号,可分两种情况计算展示序号:

  • 序号①→序号②→...→序号④:需要任务1-4的序号向后推一位,即原始序号+1;
  • 序号⑤→序号①:需要序号⑤修改为第一位,即原始序号-除本任务外的任务总数(即循环次数)。

具体配置按照两种计算逻辑分为两个部分,如下:

节点#1:查询数据源表格中序号最大的数据

在【学习任务表】查询归属于当前触发人的所有作业数据。

img

按照展示顺序字段中,数值由大到小排序,取到序号最大的数据。

img

节点#2:查找除最大序号以外的所有数据

在【学习任务表】查询当前触发人的所有作业数据并排除最大序号数据。

img

节点#3:循环修改展示序号

添加循环,让#2中获取的多条数据逐个进入循环。

img

节点#4:逐个修改序号

通过数组循环对这些数据的展示序号进行修改,使其原始序号加 1。

img

节点#5:修改#1获取的数据

最后修改原始序号最大的数据,将其展示序号修改为:原始序号-除本任务外的任务总数(即循环次数)。

img

3.2.2 调用触发-下一页原理简介

img

点击 “下一页” 时,数据切换顺序是从任务 1 切换到任务 2 、任务 2 切换到任务 3,依此类推。

这就要求将任务 2 - 5 的序号向前移一位,比如任务 2 序号变为①、任务 3 序号变为② ,而任务 1 的序号变为⑤。

基于此,展示序号的计算逻辑分为两类:

  • 对于序号⑤到序号①的任务(即任务 2 - 5),需将其原始序号减 1,实现序号向前移一位。
  • 对于序号①的任务(即任务 1),需将其原始序号加上除自身外的任务总数(即循环次数),使其变为最后一位。

通过这样的计算逻辑,就能实现点击 “下一页” 时,任务按日期顺序不断轮动切换。

详细配置参考3.2.1,这里不再赘述。

3.3 展开当前任务

点击 “展开当前任务” 按钮,弹出当前详情展示区的数据,且数据随页面切换而变化。

配置时,调用触发启动节点保持默认设置,获取当前详情页展示区的数据节点,其数据源、排序及筛选条件与字段组组件一致。

在【学习任务表】中筛选归属于当前触发人且提交作业为未上传的数据,按 “展示顺序” 排序,数值最小的数据排在前面,确保弹出的是当前展示的未提交作业详情。

img

排序依据「展示顺序」字段,数值最小的数据排在前面。

img

以上,调用触发根据修改序号,切换展示的数据以及打开当前展示的数据就实现了。

2025-04-23 更新
147 次查看
0