表单设计

本节将学习到低代码平台的普通表单、自定义表单、主从表单的创建及使用。

创建表单

表单类型

普通表单：通过统一的接口进行增删改查。 自定义查询表单：通过自定义的接口进行增删改查，须手动绑定事件及接口的调用。

表结构--是否关联现有数据库表

单表数据：绑定单个数据表，需对数据表字段和表单进行绑定。 主从表单：绑定一对多关系的数据表，可选多个从表，需对数据表字段和表单进行绑定。

普通表单

先拖拽出对应表单项，在配置其属性，如（唯一名称：数据键名；标签：显示名称）等。

再选择需要展示的字段

一个简单的表格就实现了

自定义查询表单

先拖拽出数据表格，再配置表格列及绑定数据实现自定义查询表单。

表格列的字段配置，可自定义配置绑定的对应数据源字段、显示名称、宽度等。

配置好数据源后，在表格中绑定数据源。

自定义查询的表格就配置好了

注意

若没按要求添加约束则会导致后续表单审批流程异常。

1. 若单表表单必须包含如下约束字段。
2. 主从表表单则主表必须包含如下约束字段，子表不做要求。 后端表设计的约束如下：

单表查询

选择要进行查询的数据库表

拖拽出对应表单项，给唯一名称属性绑定对应的数据表字段。

选择需要显示的表格字段

单表查询的表格就配置好了

主从表单

选择主表及从表，从表可以配置多个数据表，外键字段选择数据表的主键。

拖拽生成表单，给表单项的唯一名称属性绑定对应数据表字段。

拖出子表单组件，并绑定对应数据库表。

绑定数据表后，拖拽表单项到子表单中，唯一名称属性下拉项为所绑定数据表的字段。

选择需要显示的表格字段

生成的主从表格模块

常见问题

数据表格列的自定义渲染，使用render函数

适用于自定义转化数据格式，通过params.row传入的参数进行处理。

return h('span', params.row.report_state == 1 ? '汇报记录' : '未汇报记录');

对表单字段的预处理

适用于表单初始值需要动态赋值的情况，通过 setFieldValue(fieldName, fieldValue) 设置。

fieldName： 字段名。

fieldValue： 设置的字段值。

数据源返回数据处理

对获取到的数据结果进行加工处理，将处理过的数据return出去，参数说明如下：

result： 接口返回的数据对象。

isSandbox： 是否为数据源测试，测试数据源是为true，其他状态为false。

DSV： 数据源参数变量对象。

VFR： 当前绑定的v-form-render组件实例，可以调用其API方法。

处理返回数据例子如下：

无需另外处理返回的数据格式（建议按照这个格式返回）

输入源默认是返回 result.data.data

数据表格操作按钮点击事件

数据表格操作按钮点击事件参数(buttonName, rowIndex, row)

buttonName： 被点击按钮名称，通过下面第二张图处设置（数据表格-操作按钮编辑）。

rowIndex： 被点击按钮所在行索引。

row： 被点击按钮所在行数据对象。

弹出窗口自定义保存数据

注意：弹出窗口、侧滑抽屉容器内的组件，不能跟容器之外的组件直接交互，需要通过getParentFormRef()方法获取到父级VFormRender才可以进行交互。

通过getParentFormRef()方法可以获取到父级的属性及表单对象，将获取到的值通过axios去进行接口调用

查询数据字典数据例子

参数：

    "pageNo": DSV.currentPage,    // 数据表格组件分页页码
    "pageSize": DSV.pageSize,     // 数据表格组件分页大小
    "searchParam": VFR.widgetRefList.search.fieldModel,   // 获取搜索框的搜索内容，**search为组件唯一名称**
    "typeCode": "MaterialType"     // 所查询的字典类型
}