设置UI引擎前端页面数据源表单组件属性

前提条件

• 已在当前页面添加“数据源表单”组件，具体操作请参见为UI引擎前端页面添加物料组件。
• 已创建数据源，具体操作请参见为UI引擎前端项目创建数据源。

配置入口

1. 在页面设计器的中心画布区，单击选中“数据源表单”组件。
2. 在右侧设置面板中，单击，即可展开“属性”设置面板。

模型属性

此部分的属性用于定义表单的数据源类型及数据规则，是组件生效的关键。

数据源配置

单击“数据源来源”右侧的，在弹出的窗口中，根据选择的“数据源来源”（API/JSON）完成对应参数配置。

• “数据源来源”为“API”的配置项：

  参数名称	说明
  选择数据源	选择需要配置的数据源。 如果没有可选择的数据源，可单击右侧的“新增”，前往“数据源管理”进行创建，具体操作请参见为UI引擎前端项目创建数据源。
  选择API	选择指定数据源后，进一步指定具体的API。
  选择集合	选择指定API后，系统列出其返回的数据集合。选择其一以生成字段列表（默认选中第一个非空集合）。
  字段列表	展示所选集合的所有字段，可配置每个字段是否展示及其对应的表单项类型。

• “数据源来源”为“JSON”的配置项：

  参数名称	说明
  展示字段映射值	用于指定从JSON对象中读取哪个属性作为表单项的标签文本。 如未配置，默认读取JSON对象中的“label”属性。
  prop关键字映射值	用于指定从JSON对象中读取哪个属性作为表单项的字段名称（key）。 如未配置，默认读取JSON对象中的“prop”属性。
  类型映射值	用于指定从JSON对象中读取哪个属性来定义组件的类型。 如未配置，默认使用“componentType”属性。“componentType”可选值： INPUT（输入框） SELECT（下拉框） RADIOGROUP（单选框组） CHECKBOX（复选框） CHECKBOXGROUP（复选框组） DATEPICKER（日期选择器） TIMEPICKER（时间选择器） NUMERIC（数字输入框） FLUENTEDITOR（富文本） POPEDITOR（弹出编辑） FILEUPLOAD（文件上传） USERSELECTOR（选人组件） 注意：该属性仅适用于表单组件的类型映射。如当前配置为数据源表格，则此属性的值将被忽略。
  输入JSON数据	用于配置生成表单项的JSON数组。每个数组元素（对象）代表一个表单项，需包含以下三个关键属性： 展示字段映射值：定义表单项的标签文本（如“label”）。 prop关键字映射值：定义表单项的字段名称（key，如“prop”）。 类型映射值：定义表单项的组件类型（如“componentType”）。 示例： [ { "label": "姓名", "prop": "name", "componentType": "INPUT" } ] 用户输入JSON数组后，可通过输入框底部的功能按钮完成以下操作： 点击格式化：对输入的JSON数据进行格式化，提升可读性。 点击生成字段列表：根据输入的JSON数据，解析并生成对应的字段列表。
  字段列表	用于展示JSON数据生成的字段列表，可以配置字段是否显示与字段对应的组件类型。

基础信息

此部分的属性用于配置表单的展示样式和交互状态，支持部分属性的变量绑定。

其他

如下属性适用于UI引擎所有组件，用于精细化控制。

组件事件

数据源表单组件内置核心事件，用于监听表单数据变化：

(...args) => void

(...args: any) => void

(...args: any) => void

(e: Event) => void

(e: Event) => void

组件实例属性

组件实例属性可通过“ref”引用获取，用于读取表单的核心数据状态：

组件实例方法

组件实例方法可通过“ref”调用，用于实现表单数据的主动操作和联动控制：

() => object<{
body: object;
custom: object;
mappedData: object;
methodType: string;
query: object;
url: string;
}>

(key: string, originKey: string, value: any) => void