一看就会，超有用活字格技能：二百零八、用组件和图文列表做自定义表单
本帖最后由 willning 于 2024-9-29 17:57 编辑活字格在V8.0 Update1中提供了强大的组件功能，结合之前的图文列表，我们就能在活字格中开发出数据驱动的自定义表单效果。
数据驱动的自定义表单，顾名思义，就是表单中的项目（输入框、单选、多选等）是根据数据来自动生成的，而不是在设计器中预先设计好的。这种设计通常会出现在问卷调查、查询面板等场景。接下来，我们将通过两个例子，分别展现如何利用组件和图文列表的功能来实现该效果。如果你正准备动手开发类似功能，可参考使用；如果暂时没有类似需求，相信也可以通过研读例子来加强对组件和图文列表的理解。
涉及到的知识点、教程和文档
[*]图文列表：https://www.grapecity.com.cn/sol ... /celltypes/repeater
[*]组件容器：https://www.grapecity.com.cn/sol ... sercontrolcontainer
[*]组件：https://www.grapecity.com.cn/sol ... lp/docs/usercontrol
[*]表格操作命令：https://www.grapecity.com.cn/sol ... datelistviewcommand
[*]对象与集合操作工具插件：https://marketplace.grapecity.co ... ductID=SP2211250001
[*]JSON数据源插件（导入JSON到表格）：https://marketplace.grapecity.co ... ductID=SP2104270001
[*]JSON序列化/反序列化命令插件：https://marketplace.grapecity.co ... ductID=SP2111150001
[*]PC组件包——Element Plus（可选）：https://marketplace.grapecity.co ... ductID=SP2203310001
例子一、查询面板
查询面板是MIS系统中非常常见的功能，查询面板由若干个查询条件输入/选择框构成，这些查询条件相互之间存在关联关系，即用户将某个查询条件选择为特定的值时，需要动态隐藏/展示其他的某个或某几个查询条件。在点击“查询”按钮时，系统需要收集该查询面板上全部查询条件，用来做数据过滤或其他操作使用。
如查询条件“是否显示自动控制”选择为模式2：显示时，查询条件“自动控制”需要显示在面板上：
但将其选择为模式1：隐藏时，“自动控制”需要隐藏，后面的项目依次递补。
完整的示例Demo如下：
https://gitee.com/kadbbz_admin/hzg-demo-repeater-and-components
看懂这个Demo的关键，是我们需要将“在设计器中完成查询面板的设计”这种静态化的思路，切换为数据驱动的思路。将查询面板封装为一个组件，其中用图文列表来承载多个查询条件。架构简图如下：
从图中我们可以看出，“数据驱动”中的数据主要是位于组件中的“FormData”表格，对该表格的操作会体现在图文列表和其中的组件上，而这些组件上的操作，也会体现在FormData表格中，再通过事件向页面发出通知。
这个组件的设计有一定复杂度，接下来我们按照数据的流转，解读该Demo的设计思路。
初始化阶段
1、页面上调用【自定义表单（查询面板）】的“设置表单结构”命令，传入查询面板的初始化状态（“表单结构定义数组”，数组中每一个元素对应了一个查询条件的定义，包含类型、ID、标签文字、单多选框的候选项目、输入提示、初始值等属性；“是否内建提交按钮”，1为内建；“是否重置表单数据”，1为重置）。示例中，该数组是通过拾取页面上的元素来完成组装，实际项目中通常是使用提前设计好的JSON反序列化而来。
2、在组件的【设置表单结构】命令中，程序会先将“表单结构定义数组”导入到“FormData”表格，然后再给改表格追加一个Type为“SUBMIT_BUTTON”的行，完成表单结构定义的初始化。
3、组件中的图文列表绑定了“FormData”表格，表格中的每一行都会在图文列表中表现为一个模板。在【图文列表模板】的隐藏区域中，类型为输入框的D2单元格绑定了Type列。这样，在D2单元格的默认命令中，我们就可以根据不同的查询条件类型，分别展示和隐藏不同的输入类组件，来完成对查询条件的动态呈现。如Type为INPUT，则展示第2行的“表单输入框”组件；SINGLE展示第3行的“表单单选框”组件；MULTI展示第4行的“表单多选框”；“SUBMIT_BUTTON”展示第5行的按钮。
4、对于不同类型的查询条件组件，系统会读取Label、输入提示、候选项目等组件属性绑定的单元格，将查询条件元素的属性传入该组件中。以“表单单选框”为例，位于A3单元格的“表单单选框”组件的【候选项目】属性绑定到图文列表模板的D3单元格（绑定了FormData的Extra1列）。
5、表单单元框的【属性变更时】命令中，系统会读取到传入的“候选项目”属性值，并通过D1单元中“EL-选择器”的【设置数据源（对象数组）】操作，完成候选项目的设置；再通过读取传入的“默认值”属性值，将该值设置到D1单元格上，完成值的初始化。
响应用户操作查询条件
6、当用户修改“EL-选择器”的选项时，会触发D1单元格的【命令】，系统会判断本次值变化的原因，如果是用户输入导致的变更，即触发该组件的“ValueChanged”事件。需要说明的是，为了避免不必要的事件，我们可以通过上下文中的“值变更原因”来过滤自动触发的值变更。此外，因为D1单元格绑定了组件的“单元格值”，这次修改将直接体现为“表单单选框”组件这个整体的值变更。
7、回到“自定义表单（查询面板）”组件的图文列表模板。首先，因为包含有“表单单选框”的A3单元格绑定了FormData表格的Value列，用户修改后的值将直接回传到FormData表格中，确保该表格的值始终与用户选择和界面展示保持一致。此外，在A3单元格的【ValueChanged命令】中，系统还会自动设置F2单元格（绑定FormData表格的ValueChangedAt列）的值为当前时间，将FormData表格中的ValueChangedAt同步更新。
8、回到“自定义表单（查询面板）”组件，K2单元格设置为FormData表格中ValueChangedAt的Sum和，这意味着该表格中任何一行（即任何一个查询条件）发生变化，都会触发到K2单元格的【命令】。于是在该命令中，系统自动触发组件的“表单数据发生变化”事件，将用户对查询面板上查询条件的操作反馈给上层页面。
9、在“自定义表单（查询面板）”组件中，我们还提供了【获取表单数据】命令，通过遍历FormData表格，拾取ID和Value两列，将用户设置的查询条件组织成数组并返回。为了便于功能开发，我们还在触发“表单数据发生变化”和“提交按钮被点击”两个事件时，先调用该命令获取当前的查询条件值，一并返回给事件的处理逻辑。
10、回退到页面，我们在包含有“自定义表单（查询面板）”组件的B12单元格上设置【表单数据发生变化】命令，处理第8步中触发的事件。在这个命令中，我们需要判断用户输入的ID为1的查询条件的值，如果不是1（显示模式：显示），则需要在预配置的查询面板结构中移除ID为2的查询条件，然后通过调用“自定义菜单（查询面板）”的“设置表单结构”命令，刷新查询面板。需要特别注意的是，此时的刷新与初始化不同，用户输入的查询条件需要给与保留，所以在“是否重置表单数据”参数中需要传入0，即不重置。
响应用户点击“查询”按钮
12、回到“自定义表单（查询面板）”组件的图文列表模板。在查询按钮所在A5单元格的【命令】中，我们将F3单元格的值设置为当前时间。因为F3绑定了FormData表格的ButtonClickAt列，点击按钮的操作将会导致FormData表格中ButtonClickAt列的变化。
13、回到“自定义表单（查询面板）”组件，与第8步类似，K3单元格设置为FormData表格中ButtonClickAt的Sum和，这意味着上一步中的按钮点击，会触发到K3单元格的【命令】。于是在该命令中，系统自动触发组件的“提交按钮被点击”事件，将用户的点击操作反馈给上层页面。需要注意的是，在第1步中，K3的值会被重置，所以需要先判断该单元格的值是否为空，如果为空则不要触发事件。
14、回到页面，我们在包含有“自定义表单（查询面板）”组件的B12单元格上设置【提交按钮被点击】命令，处理第13步中触发的事件。这里仅将查询条件序列化为JSON并弹出提示，在显示项目中，我们通常需要遍历这些输入条件，组织服务端命令中所需的查询参数。
例子二、自定义问卷
与查询面板的示例相比，自定义问卷的需求更“简单”一些，通常会采用相对固定的布局，即每个项目的Label和Input尺寸保持一致，且图文列表采用纵向布局。具体做法不再赘述。
完整的Demo如下：
https://gitee.com/kadbbz_admin/hzg-demo-customized-form.git
页:
[1]