# 设置UI引擎前端页面搜索模板组件属性 搜索模板组件是UI引擎封装的一体化搜索组件，基于xDM-F数据模型快速构建"搜索表单+结果表格"联动体系，适配设备台账搜索、生产数据筛选、物料信息查询、故障记录检索等场景。该组件支持搜索条件自定义、表单布局调整、结果表格配置等核心功能，可快速实现数据的精准检索与可视化展示，提升操作效率。 #### 前提条件 - 已在当前页面添加"搜索模板"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 - 已创建数据源，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"搜索模板"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002507556210.png)，即可展开"属性"设置面板。 #### 模型属性 此部分配置用于关联xDM-F数据模型、绑定搜索基础数据，是组件实现数据检索功能的核心前提。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | xdm模型 | 用于绑定xDM-F数据模型。选择后，系统自动关联模型字段，快速生成搜索表单与结果表格的基础列，无需手动搭建字段结构。 配置步骤： 1. 单击"选择模型"，弹出"绑定数据模型"窗口。 2. 在弹出的窗口中，依次完成以下选择： - 选择xDM-F模型服务：从下拉列表中选择已在"数据源管理"中创建的xDM-F模型服务。 如果列表为空，请先前往"数据源管理"创建，具体操作请参见[为UI引擎前端项目创建数据源](https://support.huaweicloud.com/usermanual-idme/idme_ui_0107.html)。 - 选择租户：根据所选的xDM-F模型服务，选择其应用运行态下的目标租户。 - 选择目标数据模型：根据所选租户，从其可用模型列表中选择需要绑定的数据模型。 3. 单击"确认"，完成绑定。 | 否 | | xdm模型页面配置 | 用于关联xDM-F模型的页面配置规则，统一搜索模板与模型页面的展示逻辑、交互规范，具体配置请参见[配置xDM-F模型页面]。 | 否 | | 配置搜索表单默认数据 | 设置搜索表单的默认填充值（如默认搜索"运行中"状态的设备、默认筛选当前产线的物料）。 | 是 | #### 配置xDM-F模型页面 - **搜索表单项配置** ：用于自定义搜索表单的展示样式、字段范围与布局结构，适配不同检索需求。 | 配置类型 | 配置说明 | |:---|:---| | 基础配置 | 用于定义搜索表单的基础交互样式与文本标识。 - 搜索按钮文字：自定义搜索按钮文本（如"检索设备"、"查询物料"），默认为"搜索"。 - 重置按钮文字：自定义重置按钮文本（如"清空条件"），默认为"重置"。 - 标签宽度：设置表单标签占位宽度。可根据字段名称长度调整。 - 是否不使用展开更多：选择是否隐藏"展开更多"按钮，所有搜索字段直接展示（字段较少时开启，字段较多时关闭以节省空间）。 | | 表单字段配置 | 配置搜索表单的可用字段，仅支持模型的**列表属性** 和**已入库属性**（保障搜索数据的规范性与可用性）。 - 添加字段：在"未选表单项"中勾选目标属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509827628.png)，移入"已选表单项"。 - 移除字段：在"已选表单项"中勾选目标属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509787612.png)，移回"未选表单项"。 **注意：**"lastUpdateTime"字段为系统固定保留项，默认为"已选表单项"，不支持移除。 | | 栅格配置 | 用于自定义搜索表单的栅格布局，适配大屏、紧凑型操作界面等不同场景。 - 行数：设置表单总行数（根据字段数量合理分配，如8个字段设为4行）。 - 列数：设置表单总列数（大屏场景设为3列，紧凑型界面设为2列）。 - 行间距（px）：设置行之间的间距（建议16px，提升可读性）。 - 列间距（px）：设置列之间的间距（建议24px，避免字段挤压）。 | | 区块配置 | 用于精准定位字段在表单中的布局位置。 可配置行位置、列位置、跨行数、跨列数（默认均为1）。 | | 可拖动下方区块进行布局调整 | 支持拖动下方字段区块可视化调整位置，建议将时间字段放在表单顶部或右侧，提升检索便捷性。 | - **搜索表格项配置** ：结果展示配置，用于自定义搜索结果表格的展示内容与操作功能。 | 配置类型 | 配置说明 | |:---|:---| | 设置表格最大高度 | 控制表格内容的最大展示高度。当内容超出设定值时，表格内部启用滚动条。 单位支持px和百分比，不支持vh。 | | 是否显示工具栏 | 控制表格工具栏的整体显示/隐藏。 工具栏默认包含"创建"、"删除"、"批量操作"和"设置"按钮。 | | 是否显示设置按钮 | 控制工具栏中"设置"按钮的显示/隐藏。 | | 创建按钮 | 用于配置"创建"按钮的文字和显示状态。 - 按钮文字：设置"创建"按钮要显示的文字，默认为"创建"。 - 是否显示：控制"创建"按钮是否展示。 | | 删除按钮 | 用于配置"删除"按钮的文字和显示状态。 - 按钮文字：设置"删除"按钮要显示的文字，默认为"删除"。 - 是否显示：控制"删除"按钮是否展示。 | | 是否显示操作列 | 控制表格是否展示行级操作列。 | | 是否显示编辑按钮 | 控制操作列是否展示"编辑"按钮。 | | 是否显示删除按钮 | 控制操作列是否展示"删除"按钮。 | | 是否显示检出按钮 | 控制操作列是否展示"检出"按钮。 仅当"xdm模型"绑定的模型为M-V模型实体时，此配置项才会显示。 | | 是否显示检入按钮 | 控制操作列是否展示"检入"按钮。 仅当"xdm模型"绑定的模型为M-V模型实体时，此配置项才会显示。 | | 是否显示撤销检出按钮 | 控制操作列是否展示"撤销检出"按钮。 仅当"xdm模型"绑定的模型为M-V模型实体时，此配置项才会显示。 | | 是否显示修订按钮 | 控制操作列是否展示"修订"按钮。 仅当"xdm模型"绑定的模型为M-V模型实体时，此配置项才会显示。 | | 是否显示管理员更新按钮 | 控制操作列是否展示"管理员更新"按钮。 仅当"xdm模型"绑定的模型为M-V模型实体时，此配置项才会显示。 | | 表格字段配置 | 用于定义搜索结果表格的展示字段。 - 添加字段：在"未选表格项"中勾选目标属性（如设备名称、运行温度、所属车间），单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541427617.png)，移入"已选表格项"。 - 移除字段：在"已选表格项"中勾选目标属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002541347607.png)，移回"未选表格项"。 | - **创建/修改表单项配置** ：弹窗表单配置，用于配置单击表格"编辑/新增"按钮后弹出的表单，适配数据的新增与修改场景。 系统会根据"xdm模型"所选模型的类型，在"创建/修改表单项配置"页签下显示不同的属性子页签： - 单实体模型、关系实体：包含"基础属性"、"扩展属性"页签。 - M-V模型实体：包含"版本属性"、"主对象属性"、"分支对象属性"页签。 切换至相应页签后，可根据业务需求进行以下配置： | 配置类型 | 配置说明 | |:---|:---| | 表单项配置 | 用于定义新增/修改弹窗表单的可用字段。 - 添加字段：在"未选表单项"中勾选目标属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509827626.png)，移入"已选表单项"。 - 移除字段：在"已选表单项"中勾选目标属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002509787610.png)，移回"未选表单项"。 | | 栅格配置 | 用于自定义弹窗表单的栅格布局，适配弹窗尺寸与字段展示需求。 - 行数：根据字段数量设置（如10个字段设为5行）。 - 列数：弹窗场景建议设为2列（避免弹窗过宽）。 - 行间距（px）：设置行之间的间距，建议16px。 - 列间距（px）：设置列之间的间距，建议20px。 | | 区块配置 | 用于定位字段在弹窗表单中的位置，支持配置行位置、列位置、跨行数、跨列数（默认均为1）。 | | 可拖动下方区块进行布局调整 | 支持拖动下方字段区块可视化调整位置，建议将时间字段放在表单顶部或右侧，提升检索便捷性。 | #### 其他 如下属性适用于UI引擎所有组件，用于精细化控制。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 |