表单设计

表单设计

这里我们以独立小节的形式专门介绍「表单设计」操作。在上一小节中，我们介绍了表单的「基础信息」和「数据模型」的配置。在「数据模型」的配置页面，点击「下一步」即可进入表单设计页面，在这里可以设计线表单的页面布局以及前端交互逻辑，见下图。

新建表单

这里可以创建多个表单，最典型的场景是先创建一个「数据管理」的列表页面，再配置一个「数据增删」的编辑页面。其中「列表页面」与菜单绑定，点击该页面的「操作」按钮，即可触发「数据增删」页面的显示。

• 点击「添加表单」按钮，创建新表单。

• 表单编码，表单的唯一标示值，推荐使用小驼峰命名规则。

• 表单名称，表单显示名称。

• 表单类型，具体规则如下。
  

• 表单数据，选择主表即可操作主表及其全部关联数据，选择关联仅能操作指定关联的数据。

表单设计

从左侧拖拽组件到中间的表单设计区域，点击组件后可在右侧的属性框中编辑组件属性，点击表单空白区域可设置表单属性。

自定义字段

为「表单」添加自定义字段，字段名推荐使用小驼峰命名规则。

自定义字段在脚本中的数据结构，以及在页面加载完成后的初始化脚本。

组件绑定自定义字段。

组件编写脚本操作该自定义字段。

添加操作按钮

目前只有「查询类型」的表单和任何类型表单的「表格组件」支持添加「操作」。

我们提供了一些内置操作，如「新建」、「编辑」、「删除」、「导出」等，默认为禁用状态，既不在页面中显示，需要时可以启用。

添加「自定义操作」。

• 操作名称，操作在页面的显示名。
• 是否启用，启用后可在页面显示，否则不显示。
• 操作按钮类型，对应 css 的显示样式。
• 操作表单，选择该操作触发后显示的表单。
• 只读表单，操作的表单是否为只读。
• 操作脚本，该操作会触发的自定义脚本，可根据实际需求自行编写。

表单脚本

本小节只是简单介绍脚本的基本用法，更多示例可参考后面的「实例讲解」小节。现在我们切换到「脚本」标签页，可以通过脚本来控制表单的行为，内置提供了十二种不同事件的脚本，通过脚本的组合可以实现复杂的功能定制，如下图所示。

在编辑脚本窗口左侧是表单数据展示，右侧是脚本编辑区域，可以通过脚本类型来切换脚本，目前支持的脚本类型如下。

• 组件数据改变。
• 组件是否禁用。
• 组件是否可见。
• 组件下拉数据改变。
• 日期组件设置日期是否禁用函数。
• 表格读取数据后回调。
• 表格读取数据前回调。
• 表单页面加载数据后回调。
• 表单页面提交数据前回调。
• 表单页面创建完毕。
• 操作是否可见。
• 操作是否禁用。

表单数据

切换到「数据」标签页，可查看当前表单所依赖的数据主表及其关联从表的字段配置信息，点击字段即可快速修改字段属性。