找回密码
 立即注册

QQ登录

只需一步,快速开始

willning
超级版主   /  发表于:2024-9-29 16:35  /   查看:853  /  回复:0
本帖最后由 willning 于 2024-9-29 17:57 编辑

活字格在V8.0 Update1中提供了强大的组件功能,结合之前的图文列表,我们就能在活字格中开发出数据驱动的自定义表单效果。


数据驱动的自定义表单,顾名思义,就是表单中的项目(输入框、单选、多选等)是根据数据来自动生成的,而不是在设计器中预先设计好的。这种设计通常会出现在问卷调查、查询面板等场景。接下来,我们将通过两个例子,分别展现如何利用组件和图文列表的功能来实现该效果。如果你正准备动手开发类似功能,可参考使用;如果暂时没有类似需求,相信也可以通过研读例子来加强对组件和图文列表的理解。

涉及到的知识点、教程和文档


例子一、查询面板
查询面板是MIS系统中非常常见的功能,查询面板由若干个查询条件输入/选择框构成,这些查询条件相互之间存在关联关系,即用户将某个查询条件选择为特定的值时,需要动态隐藏/展示其他的某个或某几个查询条件。在点击“查询”按钮时,系统需要收集该查询面板上全部查询条件,用来做数据过滤或其他操作使用。

如查询条件“是否显示自动控制”选择为模式2:显示时,查询条件“自动控制”需要显示在面板上:
image.png419619750.png
但将其选择为模式1:隐藏时,“自动控制”需要隐藏,后面的项目依次递补。
image.png341520690.png


完整的示例Demo如下:
https://gitee.com/kadbbz_admin/hzg-demo-repeater-and-components


看懂这个Demo的关键,是我们需要将“在设计器中完成查询面板的设计”这种静态化的思路,切换为数据驱动的思路。将查询面板封装为一个组件,其中用图文列表来承载多个查询条件。架构简图如下:
image.png208586119.png
从图中我们可以看出,“数据驱动”中的数据主要是位于组件中的“FormData”表格,对该表格的操作会体现在图文列表和其中的组件上,而这些组件上的操作,也会体现在FormData表格中,再通过事件向页面发出通知。
这个组件的设计有一定复杂度,接下来我们按照数据的流转,解读该Demo的设计思路。
初始化阶段
1、页面上调用【自定义表单(查询面板)】的“设置表单结构”命令,传入查询面板的初始化状态(“表单结构定义数组”,数组中每一个元素对应了一个查询条件的定义,包含类型、ID、标签文字、单多选框的候选项目、输入提示、初始值等属性;“是否内建提交按钮”,1为内建;“是否重置表单数据”,1为重置)。示例中,该数组是通过拾取页面上的元素来完成组装,实际项目中通常是使用提前设计好的JSON反序列化而来。
image.png529532470.png
2、在组件的【设置表单结构】命令中,程序会先将“表单结构定义数组”导入到“FormData”表格,然后再给改表格追加一个Type为“SUBMIT_BUTTON”的行,完成表单结构定义的初始化。
image.png181697081.png
3、组件中的图文列表绑定了“FormData”表格,表格中的每一行都会在图文列表中表现为一个模板。在【图文列表模板】的隐藏区域中,类型为输入框的D2单元格绑定了Type列。这样,在D2单元格的默认命令中,我们就可以根据不同的查询条件类型,分别展示和隐藏不同的输入类组件,来完成对查询条件的动态呈现。如Type为INPUT,则展示第2行的“表单输入框”组件;SINGLE展示第3行的“表单单选框”组件;MULTI展示第4行的“表单多选框”;“SUBMIT_BUTTON”展示第5行的按钮。
image.png515483703.png
4、对于不同类型的查询条件组件,系统会读取Label、输入提示、候选项目等组件属性绑定的单元格,将查询条件元素的属性传入该组件中。以“表单单选框”为例,位于A3单元格的“表单单选框”组件的【候选项目】属性绑定到图文列表模板的D3单元格(绑定了FormData的Extra1列)。
image.png121997374.png
5、表单单元框的【属性变更时】命令中,系统会读取到传入的“候选项目”属性值,并通过D1单元中“EL-选择器”的【设置数据源(对象数组)】操作,完成候选项目的设置;再通过读取传入的“默认值”属性值,将该值设置到D1单元格上,完成值的初始化。
image.png835402831.png
响应用户操作查询条件
6、当用户修改“EL-选择器”的选项时,会触发D1单元格的【命令】,系统会判断本次值变化的原因,如果是用户输入导致的变更,即触发该组件的“ValueChanged”事件。需要说明的是,为了避免不必要的事件,我们可以通过上下文中的“值变更原因”来过滤自动触发的值变更。此外,因为D1单元格绑定了组件的“单元格值”,这次修改将直接体现为“表单单选框”组件这个整体的值变更。
image.png921145629.png
7、回到“自定义表单(查询面板)”组件的图文列表模板。首先,因为包含有“表单单选框”的A3单元格绑定了FormData表格的Value列,用户修改后的值将直接回传到FormData表格中,确保该表格的值始终与用户选择和界面展示保持一致。此外,在A3单元格的【ValueChanged命令】中,系统还会自动设置F2单元格(绑定FormData表格的ValueChangedAt列)的值为当前时间,将FormData表格中的ValueChangedAt同步更新。
image.png108764342.png
8、回到“自定义表单(查询面板)”组件,K2单元格设置为FormData表格中ValueChangedAt的Sum和,这意味着该表格中任何一行(即任何一个查询条件)发生变化,都会触发到K2单元格的【命令】。于是在该命令中,系统自动触发组件的“表单数据发生变化”事件,将用户对查询面板上查询条件的操作反馈给上层页面。
image.png956584777.png
9、在“自定义表单(查询面板)”组件中,我们还提供了【获取表单数据】命令,通过遍历FormData表格,拾取ID和Value两列,将用户设置的查询条件组织成数组并返回。为了便于功能开发,我们还在触发“表单数据发生变化”和“提交按钮被点击”两个事件时,先调用该命令获取当前的查询条件值,一并返回给事件的处理逻辑。
image.png599806518.png
10、回退到页面,我们在包含有“自定义表单(查询面板)”组件的B12单元格上设置【表单数据发生变化】命令,处理第8步中触发的事件。在这个命令中,我们需要判断用户输入的ID为1的查询条件的值,如果不是1(显示模式:显示),则需要在预配置的查询面板结构中移除ID为2的查询条件,然后通过调用“自定义菜单(查询面板)”的“设置表单结构”命令,刷新查询面板。需要特别注意的是,此时的刷新与初始化不同,用户输入的查询条件需要给与保留,所以在“是否重置表单数据”参数中需要传入0,即不重置。
image.png703314208.png
响应用户点击“查询”按钮
12、回到“自定义表单(查询面板)”组件的图文列表模板。在查询按钮所在A5单元格的【命令】中,我们将F3单元格的值设置为当前时间。因为F3绑定了FormData表格的ButtonClickAt列,点击按钮的操作将会导致FormData表格中ButtonClickAt列的变化。
image.png401885070.png
13、回到“自定义表单(查询面板)”组件,与第8步类似,K3单元格设置为FormData表格中ButtonClickAt的Sum和,这意味着上一步中的按钮点击,会触发到K3单元格的【命令】。于是在该命令中,系统自动触发组件的“提交按钮被点击”事件,将用户的点击操作反馈给上层页面。需要注意的是,在第1步中,K3的值会被重置,所以需要先判断该单元格的值是否为空,如果为空则不要触发事件。
image.png946221923.png
14、回到页面,我们在包含有“自定义表单(查询面板)”组件的B12单元格上设置【提交按钮被点击】命令,处理第13步中触发的事件。这里仅将查询条件序列化为JSON并弹出提示,在显示项目中,我们通常需要遍历这些输入条件,组织服务端命令中所需的查询参数。
image.png809389953.png


例子二、自定义问卷
与查询面板的示例相比,自定义问卷的需求更“简单”一些,通常会采用相对固定的布局,即每个项目的Label和Input尺寸保持一致,且图文列表采用纵向布局。具体做法不再赘述。
image.png811625671.png


完整的Demo如下:
https://gitee.com/kadbbz_admin/hzg-demo-customized-form.git

评分

参与人数 2满意度 +10 收起 理由
moer + 5
赛龙周 + 5

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部