跳到主要内容

数据详情（表单模式）

数据详情（表单模式）以表单的样式只读展示单条数据，字段排布与表单视图一致，适合希望详情页与录入表单保持同一视觉结构的场景。

概述​

将「数据详情（表单模式）」拖入画布后，在属性抽屉中选择一个表单作为字段来源。运行时根据页面上下文中的数据 ID 展示该条数据。

  • 采用表单组件的渲染样式（字段标签、控件布局），但整体为只读展示。
  • 与 数据详情 的区别：数据详情使用描述列表（键值对）样式，并支持布局方式、展示列数、隐藏空字段等配置；表单模式则完全沿用表单的视觉结构，配置更简单。
  • 组件需要一个数据 ID 才能展示内容；在用户态无数据 ID 时显示加载骨架。

配置项​

配置项说明
标题详情卡片标题，支持系统环境变量占位符
表单选择字段来源表单；必填，支持按名称搜索，候选范围为当前应用下的表单

数据来源与渲染规则​

  • 组件本身不存储数据，运行时通过页面上下文解析数据 ID（优先取上下文中的 currentData.Id，其次取 dataId），再按所引用表单的字段以表单样式只读渲染该条记录。
  • 展示顺序与字段布局完全由所引用的表单决定，组件不提供列数、空值显隐等额外排布选项。

使用建议​

  1. 希望详情页与录入表单「所见即所得」一致时，选用本组件。
  2. 希望以键值对列表紧凑展示、并控制列数与空值显隐时，选用 数据详情。

下一步​

  • 数据详情 - 描述列表样式的数据详情
  • 表单 - 数据录入与编辑组件
  • 页面 - 返回平台页面总览

属性明细​

以下内容面向技术实现与 AI 检索。组件所有 meta 值均以字符串形式存储在 WidgetItem.meta 中。

组件属性（meta）​

属性名类型含义取值/存储值
Titlestring详情卡片标题展示文本，支持系统环境变量占位符替换；无默认值
MetaFormIdstring(GUID)字段来源表单 ID，必填表单主键，取自 POST /api/DataSource/GetMetaFormDataSourceWithApp；无默认值

组件固定 uid：a84f4dff-c228-4258-938d-453d2b4fa2bc。运行态读取 meta.MetaFormId 绑定表单，数据 ID 取自 cmpParams（优先 currentData.Id，其次 dataId）；标题取 meta.Title 并做系统环境变量替换。

存储示例​

完整 WidgetItem：

{
  "id": "5e7f9a1b-2c3d-4e5f-8a90-1b2c3d4e5f60",
  "uid": "a84f4dff-c228-4258-938d-453d2b4fa2bc",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "MetaFormDetail",
  "widgetTypeName": "数据详情（表单模式）",
  "meta": {
    "Title": "客户详情",
    "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f"
  },
  "children": []
}

嵌套在「基础容器（Row）> 布局列组件（Column）」中的完整位置示例：

{
  "id": "3f9c1a2b-4d5e-4f60-8a71-9b2c3d4e5f60",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": { "ColumnSpace": "5" },
  "children": [
    {
      "id": "7c1d2e3f-4a5b-4c6d-8e9f-0a1b2c3d4e5f",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": { "LayoutType": "vertical", "Align": "default", "ItemSpace": "5" },
      "children": [
        {
          "id": "5e7f9a1b-2c3d-4e5f-8a90-1b2c3d4e5f60",
          "uid": "a84f4dff-c228-4258-938d-453d2b4fa2bc",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "MetaFormDetail",
          "widgetTypeName": "数据详情（表单模式）",
          "meta": {
            "Title": "客户详情",
            "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f"
          },
          "children": []
        }
      ]
    }
  ]
}

相关接口​

接口说明
POST /api/DataSource/GetMetaFormDataSourceWithApp获取当前应用下可选择的表单选项，支持按关键字（keyWords）搜索