# 设置物料插件的"添加数据"组件属性 #### 适用场景 在各类业务表单设计中，如请假申请、报销申请等流程表单，添加"添加数据"组件并在右侧的组件属性面板调整样式、布局及数据提交逻辑，能帮助用户快速填写表单内容，实现数据的高效提交与处理，助力业务流程顺利推进。 #### 基础信息 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 组件名 | 添加数据组件的名称，默认为"添加数据"，不可修改。 | × | | rel引用类 | 添加数据组件的ID，系统自动生成，且不可修改。 | × | | Style | 配置添加数据组件样式，支持通过CSS代码自定义添加数据组件的样式。 | √ | | 是否显示 | 设置是否显示"添加数据"的弹窗。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300844417.png "点击放大")：关闭"添加数据"的弹窗。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266164464.png "点击放大")：默认开启显示"添加数据"的弹窗。 | √ | | 弹窗标题 | 使用简洁文字表明弹窗的核心信息，方便用户快速理解。例如"添加数据"。 如果您希望在切换语言时，弹出标题同步切换，可单击![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267530.png)进行相关配置，具体操作请参见[使用国际化词条](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_clientog_0287.html#ZH-CN_TOPIC_0000002300843801__section192854165117)。 | √ | #### 模型及服务选择 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 选择模型 | 单击输入框，在弹出的"模型"窗口选择数据模型，单击"确认"。 如果没有可选择的数据模型，请[在数据编辑页面添加数据模型](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_clientog_0282.html)。 | × | | 查询数据服务 | 单击输入框，在弹出的"服务定义"窗口双击选中的流程服务编排即可绑定。 | × | | 是否为分页服务 | 用于控制是否对搜索结果进行分页处理。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300917481.png "点击放大")：不是分页服务，返回完整数据集。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300844425.png "点击放大")：分页服务，返回结果将包含分页信息。 | √ | | 选择数据方法 | 用于配置单击"添加"时从数据源获取数据的具体方法策略。支持通过JS代码自定义添加，代码示例可参见JS插件中的使用帮助。 | √ | | 更多选项类型 | 在设置"模型及服务选择"过程中，可以通过"更多选项类型"配置，以满足特定需求。 - 是否清空搜索表单：此选项用于决定在执行搜索操作之后，是否需要清空所有搜索表单中的输入内容。 - 是否清空搜索结果：此选项用于决定在完成搜索操作后，是否需要清除当前展示的所有搜索结果。 - 是否清空已选择数据：此选项用于决定在用户完成某项选择操作后，是否需要清空已选中的数据项。 - 是否显示高级搜索：此选项用于控制高级搜索面板的显示与否。 | √ | #### 表单属性 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 默认表单数据 | 用于设置表单的初始默认数据，支持通过JSON进行自定义配置。 JSON示例： ``` { "defaultFormData": { "field1": "value1", "field2": "value2", // 其他字段... } } ``` | × | | 页面布局 | 用于设置"添加数据"组件的排列方式，以便更高效、清晰地展示和收集用户信息。目前支持以下三种布局方式，默认采用 "三列布局"。 - 一列布局：将表单元素从上到下依次排列在单一列中。适用于表单字段数量较少，或者字段之间逻辑联系紧密、需要用户按顺序依次处理的情况。 - 二列布局：将表单元素分为左右两列进行排列。适用于表单字段数量适中，且字段可以合理分组的情况。例如，将相关的个人信息字段放在一列，联系方式字段放在另一列，有助于用户对表单内容进行分类和理解。 - 三列布局：将表单元素分布在三列中。适用于表单字段较多且较为复杂的场景，例如一些需要收集大量详细信息的注册表单、调查问卷等。 | × | | 表单项 | 在"模型及服务选择"下完成"选择模型"后，系统将自动展示该模型的所有属性字段作为表单项。您可以根据实际业务需求调整这些属性，从而实现多样化的功能和交互体验。 - 批量显示/隐藏：用于控制模型的全部属性字段（表单项）的整体可见性，实现一键显示或隐藏。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266164484.png)：当存在多个表单项时，长按此图标并上下拖动，调整模型属性的排列排序。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267550.png)/![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300917497.png)：单独控制某一个表单项的可见状态，灵活满足不同场景下的展示需求。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300844441.png)：允许用户修改某个表单项的具体内容，以适应更细致的定制化要求。 - 表单项标签：表单项的名称，默认为所指定模型中对应属性的中文名称。 - 表单项校验：支持通过JSON进行自定义配置，确保用户输入数据符合业务要求。 - 高级搜索：设置是否启用高级搜索选项。 - 输入类型：根据所指定模型属性的类型自动匹配相应的输入方式。支持多种输入方式，包括输入框、选人组件、选择框、文本、多选框、单选框、时间选择器和日期选择器。 - 默认值：当您将"输入类型"设置为"输入框"、"选人组件"、"选择框"、"多选框"、"单选框"、"时间选择器"或"日期选择器"时，可以根据实际业务需求为该表单项设定一个初始默认值。在用户首次访问表单时，系统会自动填充此预设值，从而提高用户体验并简化数据录入流程。 - 类型：当您将"输入类型"设置为"输入框"时，可以根据实际业务需求进行自定义设置。默认情况下，该表单项的类型会与指定模型中对应属性的数据库字段类型保持一致。此外，还支持将其设置为文本框或文本域，以满足不同的输入需求。 - 数据标识字段：当您将"输入类型"设置为"选择框"时，可以根据实际业务需求自定义设置数据标识字段。数据标识字段用于唯一标识选项数据，确保在下拉列表中每个选项都能被准确识别和区分。通过合理配置，可以更好地匹配后台数据源，提升表单的数据处理能力和用户体验。 - 数据展示字段：当您将"输入类型"设置为"选择框"时，可以根据实际业务需求自定义该字段的显示内容。 - 占位符：当您将"输入类型"设置为"输入框"、"选人组件"或"日期选择器"时，可以根据实际业务需求设置表单项输入框的提示文本。 - 最大长度：当您将"输入类型"设置为"输入框"时，可以根据实际业务需求设置输入文本的最大长度。 - 多选：当您将"输入类型"设置为"选人组件"或"选择框"时，可以根据实际业务需求启用或关闭此功能。 - 最大选中人员数：开启"多选"功能后，可以根据实际业务需求自定义允许选中的最大人员数量。 - 文本内容：当您将"输入类型"设置为"文本"时，可通过JSON格式自定义设置输入框的提示文本或默认值。 - 文本宽度：当您将"输入类型"设置为"文本"时，可以根据实际业务需求进行自定义设置输入框的宽度，以适应不同的布局要求和用户体验。 - 启用超链接：当您将"输入类型"设置为"文本"时，可以根据实际业务需求自定义设置是否启用此功能。 - 超链接地址：开启"启用超链接"后，可以根据实际业务需求自定义设置超链接的目标地址。 - 超链接新开页面：开启"启用超链接"后，可以根据实际业务需求设置超链接点击后在新窗口打开或当前窗口跳转。 - 超链接变量：开启"启用超链接"后，可以根据实际业务需求进行自定义设置链接变量，以便传递特定数据。 - 链接变量名：用于标识链接变量的自定义名称，便于区分和管理不同的链接变量。 - 链接变量值：对应链接变量实际携带的数据内容，在业务场景中起到关键作用的信息。 - 自定义超链接地址：开启"启用超链接"后，可通过JSON格式自定义设置复杂的链接地址规则。 - 点击响应函数：开启"启用超链接"后，可通过JSON格式自定义设置链接点击后的响应行为，如数据提交、页面刷新等操作。 - 可编辑：当您将"输入类型"设置为"时间选择器"或"日期选择器"时，您可以根据实际业务需求灵活决定是否允许对所选时间或日期进行手动编辑。 - 输入框尺寸：当您将"输入类型"设置为"时间选择器"时，可以根据实际业务场景下的页面布局和视觉效果需求，自由调整输入框的大小。 - 时间显示格式：当您将"输入类型"设置为"时间选择器"时，可以根据实际业务需求选择以下时间显示样式：小时、分钟、秒、小时:分钟、分钟:秒、小时:分钟:秒、AM/PM 小时、AM/PM 小时:分钟、AM/PM 小时:分钟:秒。 - 日期类型：当您将"输入类型"设置为"日期选择器"时，可以根据实际业务需求选择不同的日期选择器类型。可选类型包括：年、月、日、周、日期时间、多日期、日期时间范围、日期范围、月份范围、年份范围。 - 日期显示格式：当您将"输入类型"设置为"日期选择器"时，可以根据实际业务需求自定义日期显示格式。支持的格式包括：年、月、日、年-月、年-月-日、年-月-日 小时:分钟、年-月-日 小时:分钟:秒。 - 面板对齐方式：当您将"输入类型"设置为"时间选择器"或"日期选择器"时，可以根据实际业务需求调整面板的对齐方式。支持的对齐方式包括：左对齐、居中对齐和右对齐。 - 默认日期：当您将"输入类型"设置为"日期选择器"时，可以根据业务流程与用户使用习惯，自定义默认显示的日期，减少用户手动输入操作，提升数据录入效率。 - 默认时间：当您将"输入类型"设置为"时间选择器"时，可以根据实际业务需求设置默认显示的时间，使初始界面更贴合用户使用预期，简化操作流程。 - 启用范围选择：当您将"输入类型"设置为"时间选择器"时，可以根据实际业务需求开启或关闭此功能。 - 可选时间段：在未开启"启用范围选择"的情况下，您可以根据实际业务需求自定义单个时间选择的可选时段，精准限定时间选择范围。 - 开启占位符：开启"启用范围选择"后，可以根据实际业务需求自定义时间范围起始端的占位提示文本。 - 结束占位符：开启"启用范围选择"后，可以根据实际业务需求设置时间范围结束端的占位提示内容，引导用户准确输入。 - 分隔符：开启"启用范围选择"后，可以根据实际业务需求自定义设置时间范围之间的分隔符，如 "-"、"至"等。 - 数据传递格式：当您将"输入类型"设置为"时间选择器"或"日期选择器"时，可以根据实际业务需求，定义数据的传输格式，确保数据与系统或其他模块的兼容性。 - "时间选择器"格式：当使用"时间选择器"时，支持的选择方式包括：小时、分钟、秒、小时:分钟、分钟:秒、小时:分钟:秒、AM/PM 小时、AM/PM 小时:分钟、AM/PM 小时:分钟:秒，满足不同时间记录与展示需求。 - "日期选择器"格式：当使用"日期选择器"时，支持的选择方式包括：年、月、日、年-月、年-月-日、年-月-日 小时:分钟、年-月-日 小时:分钟:秒，适配各类业务场景下的日期数据录入与显示要求。 - 禁用日期：当您将"输入类型"设置为"日期选择器"时，可以根据实际业务需求自定义禁止选择的日期范围，避免无效或冲突的日期输入。 - 快捷项：当您将"输入类型"设置为"日期选择器"时，可以根据实际业务需求，单击![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266164492.png "点击放大")，灵活添加多个日期快捷选项，方便用户快速选择常用日期。 - 文本：自定义快捷项显示的文本内容，确保其清晰、准确地传达对应日期含义。 - 点击回调事件：支持通过JavaScript进行个性化设置，当用户点击快捷项时，可触发特定逻辑，如数据提交、页面跳转、动态更新等，实现与业务流程的深度交互。 - 选项：当您将"输入类型"设置为"多选框"或"单选框"时，可以根据实际业务需求，单击![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267590.png "点击放大")为多选框或单选框组件添加多个选项。添加完成后，您可以在展开的选项列表中进行详细配置。针对单选框，仅需设置"数据标识"和"数据展示"配置项。 - 数据标识：选项的ID，用于唯一地识别和区分每个选项。支持选择文本、数字和布尔。 - 数据展示：表示用户在页面所看到的内容。 - 启用提示：通过![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300917573.png "点击放大")/![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300844529.png "点击放大")控制当前选项是否启用提示。启用后，您需要进一步设置提示内容和提示位置。选项会根据您设置的"提示位置"出现提示图标，当鼠标悬停在提示图标上时，显示您自定义的"提示内容"提示框。 - 提示内容：启用提示后，您可以设置具体的提示内容。 - 提示位置：启用提示后，您可以指定提示图标的具体位置。支持设置的位置包括：上左、上方、上右、右上、右方、右下、下左、下方、下右、左上、左方和左下。 如果指定提示位置对应的画布空间已有组件分布，系统会自动将提示位置放置在空白区域较多的地方，避免与其他组件重叠。 - 选项数据：当您将"输入类型"设置为"选择框"时，支持通过JSON格式进行自定义选项内容、顺序及关联属性，满足多样化业务场景需求。 - 禁用：您可以根据实际业务需求开启或关闭此功能，实现对表单项操作权限的灵活管控。 - 只读：当您将"输入类型"设置为"输入框"、"时间选择器"或"日期选择器"时，可以根据实际业务需求设置表单项为只读状态，避免数据被误修改。 - 校验提示内容：当您将"输入类型"设置为"选人组件"时，可以根据实际业务需求自定义校验失败时的提示信息，便于用户快速修正操作。 | √ | #### 多选校验 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 添加数据多选校验JS | 通过JavaScript进行自定义设置，以满足复杂业务场景下的数据校验需求。 | × | | 启用API表格多选校验方法 | 您可以根据实际业务需求开启或关闭此功能，实现对API表格多选数据校验的灵活控制，满足不同业务流程要求。 | × | | API校验反参字段 | 您可以根据实际业务需求自定义设置API校验响应中携带的关键参数字段，确保校验结果数据精准对接。 | √ | | API表格多选校验方法 | 您可以根据实际业务需求，单击"绑定方法"。在弹出的"绑定API"窗口中，灵活配置API表格多选数据的校验方式，以此确保数据准确性与合规性。 - 基本配置： - 接口地址：您可以选择需要绑定的流程服务编排，精准对接业务流程中的数据校验接口。 - 请求类型：提供多种请求类型供您选择，满足不同业务操作下的校验需求。 - POST 通用：用于通用数据提交。 - GET 查询：用于数据查询。 - PUT 更新：用于数据更新。 - DELETE 删除：用于数据删除。 - 触发条件：支持进入页面和自定义两种触发条件。您可以选择在进入页面时自动触发校验，也可以根据业务规则自定义触发时机，增强校验的灵活性与针对性。 - 入参配置： - 绑定类型：提供多样化的绑定类型，支持选择模型、变量、全局变量、流程变量，方便您根据实际业务数据来源和使用场景进行灵活配置。 - 绑定字段：根据所选的绑定类型，精准指定需要绑定的具体字段，确保校验数据的准确性。 - 出参配置： - 绑定类型：支持选择模型、变量、全局变量，允许您根据业务对校验结果数据的使用需求，灵活设置出参的绑定类型。 - 绑定字段：依据所选的绑定类型，明确指定出参需要绑定的具体字段，保证校验结果数据能够准确反馈和使用。 | √ | | API校验失败提示信息 | 您可以根据实际业务需求自定义设置API校验未通过时的提示内容，便于用户快速了解错误原因并修正数据。 | √ | #### 表格属性 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 表格分页 | 支持通过JSON格式自定义分页配置，包括每页显示数量、分页样式等。 JSON示例： ``` { "pageSize": 10, // 每页显示条数 "currentPage": 1, // 当前页码 "showQuickJumper": true, // 是否显示快速跳转 "showSizeChanger": true // 是否支持调整每页条数 } ``` | √ | | 表格列 | 在"模型及服务选择"下完成"选择模型"后，系统会自动展示该模型经查询后的全部属性字段，并将其作为表格列呈现。您可以根据实际业务需求对这些表格列进行调整。 - 批量显示/隐藏：用于控制模型所有属性字段（表格列）的整体可见性，实现一键显示或隐藏。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266164580.png)：当存在多个表格列时，长按此图标并上下拖动，调整模型属性的排列排序。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267646.png)/![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300917597.png)：单独控制某一个表格列的可见状态，灵活满足不同场景下的展示需求。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300844541.png)：允许用户修改某个表格列的具体内容，以适应更细致的定制化要求。 - 列标题：用于定义表格列的名称，默认展示为所指定模型中对应属性的中文名称。 - 列字段：您可以根据实际业务需求灵活设置表格列所对应的数据源字段，确保数据准确呈现。 - 列宽：您可以根据页面布局和数据内容，自由调整表格列的宽度尺寸，以达到最佳的视觉展示效果。 - 最小列宽：您可以根据实际业务需求设定表格列允许的最小宽度值，避免因内容压缩导致数据显示不全或错乱。 - 文本溢出是否显示tooltip：您可以根据实际业务需求设置是否启用此功能。开启后，当单元格中的文本超出列宽时，将以悬浮提示框（tooltip）形式完整展示文本信息。 - 列固定：提供固定左侧和固定右侧两种方式，方便在浏览宽表格时，锁定关键列始终可见，提升数据查看效率。 - 是否排序：您可以根据实际业务需求启用或关闭此功能，满足数据筛选和分析的多样化业务需求。 - 表头tip：您可以根据实际业务需求设置是否启用此功能，帮助用户快速理解列数据含义。 - 表头tip内容：开启"表头tip"后，您可以根据实际业务需求自定义设置提示框内的显示内容，精准传达列数据相关说明。 - 列id：您可以根据实际业务需求自定义设置唯一的列标识，便于后续数据处理与功能扩展。 - 启用超链接：您可以根据实际业务需求设置是否启用此功能，实现数据与其他页面、资源的快速跳转关联。 | √ | #### 高级配置 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 是否渲染 | 在页面开发中，可能需要根据某些条件来动态显示或隐藏页面中的组件内容，您可以设置此配置项。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266164588.png "点击放大")：关闭渲染。 - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267654.png "点击放大")：开启渲染。 | √ | | 循环数据 | 表示需要循环渲染的数组。当页面存在若干份重复的、动态生成的内容时，您可以在高级面板中自定义循环数据。 | √ | | 迭代变量名 | 在循环渲染子项对应的变量名，默认为item。 | × | | 索引变量名 | 循环渲染的索引变量名，默认为index。 | × | | key | 用于标识每个循环项的唯一键值，默认为index。建议根据实际需求选择一个更合适的字段作为唯一标识符，以提高性能和避免潜在问题。 | × |