表单新增和查询场景的应用实践

最近更新时间:2024-06-07 14:59:21

我的收藏

需求背景

在一些日常表单场景中:酒店/民宿预约、服务预约、医疗预约、比赛报名、活动报名、会议签到等涉及到数据新增、查询、更新,需要在用户提交表单后展示结果信息。

实践步骤

表单新增场景

1. 构建表单场景数据模型。
1.1 新建数据模型活动报名,其中字段选择活动关联活动名称模型。



1.2 活动名称模型结构展示,其中将活动名称设为主列。



1.3 活动名称模型数据填充展示。



2. 编辑器中使用表单组件,表单场景选择新增,数据模型选择活动报名,代码区新增变量 var1,类型为对象。



3. 调整表单容器提交按钮事件面板,执行事件结构如下。



3.1 变量赋值事件,在数据源方法执行后触发 event 事件,将返回结果赋值给变量 var1。



3.2 打开页面事件,这里以表单提交详情目标页面(目前页面可以提前创建),并传递参数 ID,ID 值绑定变量如下。



3.3 变量 var1 数据结构展示。
{
"id": "a453259766603632025661ec43aa40b0",
"Id": "a453259766603632025661ec43aa40b0"
}
4. 目标页面使用数据详情组件,选择数据筛选条件。



筛选条件展示,其中 $w.page.dataset.params.id 为上一页面传递过来的参数 ID。



5. 场景构建完成,填写表单信息。



6. 表单信息填写完成,提交表单。



7. 表单提交成功后,跳转到目标页面表单提交详情




表单查询场景

1. 构建表单场景数据模型。
1.1 新建数据模型会议签到,模型字段展示。



1.2 前往数据模型后台添加测试数据。



1.3 测试数据展示。



2. 在编辑器中构建下图场景,用户输入姓名手机进行签到,签到成功后,向用户展示会场号以及会议座位号,新建对象类型变量 var1。



3. 会议签到按钮配置点击事件。



3.1 调用数据源方法,配置如上图,入参查询条件如下,出参赋值给变量 var1。



3.2 变量 var1 赋值成功后,进行逻辑分支判断,判断 var1 是否是空对象,其中 Object.keys($w.page.dataset.state.var1).length 表示对象长度,如果长度是0,说明数据源方法未查询到结果,从而说明签到姓名和手机号无法在数据模型中匹配到对应的数据。



3.3 逻辑分支判断满足条件时,执行打开弹窗事件,在弹窗内容拼接会场号与座位号。



3.4 逻辑分支判断不满足条件时,执行消息提示事件。



4. 签到场景构建完成,签到成功展示。



5. 签到失败展示。