设置UI引擎前端页面树形模板组件属性

xdm模型

用于绑定具有“树形结构”功能的xDM-F数据模型。绑定后，系统将自动解析模型字段并生成对应的表单项，无需手动配置基础字段。

配置步骤：

1. 单击“选择模型”，弹出“绑定数据模型”窗口。
2. 在弹出的窗口中，依次完成以下选择：
   • 选择xDM-F模型服务：从下拉列表中选择已在“数据源管理”中创建的xDM-F模型服务。

     如果列表为空，请先前往“数据源管理”创建，具体操作请参见为UI引擎前端项目创建数据源。

   • 选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。
   • 选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。
3. 单击“确认”，完成绑定。

否

配置模型字段

完成“xdm模型”绑定后，系统会自动解析模型结构，并将其所有属性转换为字段列表。单击“点击配置模型字段”，可在弹出的窗口中对字段进行精细化设置。

该窗口会根据所选模型提供“基础属性”与“扩展属性”页签。切换至相应页签后，可根据业务需求进行以下配置：

• 字段状态：控制字段在表单中的显示状态，所有字段默认状态为“已使用”。
  • 已使用：字段在表单中显示。
  • 未使用：字段在表单中隐藏。

  如果模型属性定义为必填，则该字段强制保持为“已使用”状态，不支持设置为“未使用”。

• 字段排序：通过拖拽调整字段在表单中的展示顺序。
• 字段编辑：单击字段所在行的进行配置。
  • 表单项标签：自定义该字段在前端表单中显示的标签名称。
  • 字段名：由系统根据模型自动生成，为固定值，不可修改。

否

布局模型表单

完成“xdm模型”绑定后，可通过此配置项自定义表单的栅格布局，以适配多样化的页面排版需求（如大屏表单、紧凑型操作表单）。单击“点击布局模型表单”，即可在弹出的窗口中进行可视化布局配置。

该窗口会根据所选模型提供“基础属性”与“扩展属性”页签。切换至相应页签后，可针对全局栅格及具体字段区块进行以下配置：

• 栅格配置：定义表单整体的网格结构及间距样式。
  • 行数：设置表单栅格总行数。
  • 列数：设置表单栅格总列数。
  • 行间距（px）：设置栅格行之间的间距，单位为像素。
  • 列间距（px）：设置栅格列之间的间距，单位为像素。
• 区块配置：配置字段区块在栅格中的布局位置，各项默认值均为1。
  • 行位置：区块起始行号。
  • 列位置：区块起始列号。
  • 跨行数：区块在垂直方向所占的行数。
  • 跨列数：区块在水平方向所占的列数。
• 可拖动下方区块进行布局调整：通过拖拽下方“已使用”模型字段，直观调整其在栅格中的具体位置。

否

树节点显示字段

指定树节点在页面上展示的xDM-F模型字段，默认显示id字段。

否

自定义提交函数

支持绑定自定义提交函数，用于处理表单提交后的逻辑（如保存数据到后端）。函数需返回“Promise”对象以支持异步操作。

是

组件名称

当前组件的固定名称，不可修改，用于系统内部标识。

否

标签宽度

设置表单字段标签的宽度，默认为150px。

是

基础属性标题

设置“基础属性”折叠面板的标题。

此配置项仅在“xdm模型”绑定单实体模型时生效。

是

扩展属性标题

设置“扩展属性”折叠面板的标题。

此配置项仅在“xdm模型”绑定单实体模型时生效。

是

元素id值

对应HTML标签的“id”属性，同一页面内必须唯一。

是

样式类

对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。

是

ref引用类

对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件，会自动填充默认值。

是