腾讯无极低代码跟练——队员活动打卡页

首先要睡饱
77 阅读3分钟

队员打卡页跟练，来喽~

之前已经搭建好了一个简单的活动管理系统，那么在每个活动中包含大量的队员，那么需要在系统中新增每次活动出勤统计的功能，来记录每次活动的参与人员。

pc端打卡页面

创建考勤表

首先需要一张考勤表来记录，队员的具体签入签出和个人基础信息。

image.png 添加所需的字段，包括活动ID、用户ID、签到时间和签退时间。

因为签到表属于不同的活动，因此要将这个新建的签到表与之前创建的活动表进行关联，在这里无极提供了 多表关联 的能力。

  • 将考勤表中的活动ID绑定上活动表，就可以直接在考勤表中选择对应活动

image.png

  • 将考勤表中的用户ID绑定上用户表

image.png

将字段绑定后，填入考勤表的数据信息。

多表级联

在数据源——接口集合——新建数据源——选择多表读写——初始数据库——选择对应数据库

image.png

选择对应数据库后，进行表关系配置，注意活动表与活动ID为 一对多 的关联类型。 image.png

创建页面并绑定数据

在数据源处理完之后，创建一个可视化页面。

  • 页面画布 将关联好的数据添加进页面中，拖拽出一个列表，可以直接在列表中发现已经存在关联表的内容，直接展示出活动所对应考勤表内容。 image.png

  • 弹窗画布 双击组件，下钻到活动ID和用户ID的下拉框，绑定到应数据表 image.png image.png

配置好之后在新建或编辑数据表时对应下拉框中就可以进行选择，无需手动输入

image.png

这样PC端的打卡页面就配置完成啦~

当然在现实生活中，签到打卡这样的事情可能更倾向于使用手机去完成，那么接下来我们看看如何使用H5来搭建打卡页面。

H5打卡页面

创建页面

与之前的操作不同，这次因为我们要创建的是移动端的页面因此需要将画布切换为“移动端” image.png

将刚才创建好关联的活动表拖拽到页面上，可以使用卡片组件，更为直观。 image.png

此时可以看到页面上主要的信息和功能基本呈现，但还需要做一些微调，那么可以根据实际需要对具体的展示信息进行优化。 这里可以将原本展示随机ID的地方调整为展示活动描述。 image.png

还需要将按钮名称修改一下 image.png 到这里页面的部分就差不多啦，接下来需要处理一下交互逻辑

交互逻辑

作为一个考勤系统那么要考虑的问题：所有队员都能在活动中进行签到，且每次活动每名队员仅允许一次签入签出。

  • 要补充当队员点击一次签入/签出按钮后，按钮变为不可点击状态 image.png image.png

给按钮配置数据源调用的行为，签入签出操作过程相同 image.png

全部配置好之后，可以保存预览一下啦~

成功！

avatar
文章
阅读
粉丝