跳到主要内容

数据详情

数据详情组件以只读方式展示单条数据的字段信息，字段与布局来源于所选的表单配置，适合搭建详情页。

概述​

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

  • 字段的展示顺序、显隐、类型渲染均遵循所选表单的配置。
  • 支持配置布局方式（水平 / 垂直）与展示列数，控制字段的排布密度。
  • 支持隐藏空字段，避免详情页出现大量空值行。
  • 组件需要一个数据 ID 才能展示内容；在编辑器中会提示需在运行时查看效果，在用户态无数据 ID 时显示加载骨架。

配置项​

配置项说明
标题详情卡片标题，支持系统环境变量占位符
表单选择字段来源表单；必填，支持按名称搜索
布局方式字段标签与值的排布：垂直布局（标签在上） / 水平布局（标签在左），默认「水平布局」
展示列数字段分几列展示，取值 0 ~ 4，0 表示由组件自适应
隐藏空字段开启后不展示值为空的字段

数据来源与渲染规则​

  • 组件本身不存储数据，运行时通过页面上下文解析数据 ID（优先取上下文中的 currentData.Id，其次取 dataId），再按所引用表单的字段渲染只读描述列表。
  • LayoutType 控制标签与值的排布方向：horizontal 为标签在左、值在右；vertical 为标签在上、值在下。
  • Column 大于 0 时按该列数均分字段，0 时由组件自适应列数。
  • HideEmptyField 为 'true' 时跳过值为空的字段，适合字段较多、数据稀疏的详情页。

使用建议​

  1. 详情页通常由「数据详情 + 审批流 + 评论」组合而成，数据 ID 由列表行进入时自动携带。
  2. 字段较多时，可将布局方式设为「水平布局」并使用 2 ~ 3 列，缩短页面高度。

下一步​

属性明细​

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

组件属性（meta）​

属性名类型含义取值/存储值
Titlestring详情卡片标题展示文本，支持系统环境变量占位符替换；无默认值
MetaFormIdstring(GUID)字段来源表单 ID，必填表单主键，取自 POST /api/DataSource/GetMetaFormDataSourceWithApp；无默认值
LayoutTypestring字段布局方式horizontal（默认，水平布局） / vertical（垂直布局）
Columnstring(number)字段展示列数0（默认，自适应） ~ 4
HideEmptyFieldstring(boolean)是否隐藏空字段true / false（默认）

组件固定 uid：53b40ade-58c5-4d1a-bb69-52b87e4295a7。运行态仅在上下文能解析出数据 ID 时渲染：布局 LayoutType、列数 Column、空值显隐 HideEmptyField 均从 meta 读取；无数据 ID 时显示加载骨架。

存储示例​

完整 WidgetItem：

{
  "id": "2d4e6f80-1a3b-4c5d-9e7f-0a1b2c3d4e5f",
  "uid": "53b40ade-58c5-4d1a-bb69-52b87e4295a7",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "MetaDetail",
  "widgetTypeName": "数据详情",
  "meta": {
    "Title": "客户详情",
    "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f",
    "LayoutType": "horizontal",
    "Column": "2",
    "HideEmptyField": "true"
  },
  "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": "2d4e6f80-1a3b-4c5d-9e7f-0a1b2c3d4e5f",
          "uid": "53b40ade-58c5-4d1a-bb69-52b87e4295a7",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "MetaDetail",
          "widgetTypeName": "数据详情",
          "meta": {
            "Title": "客户详情",
            "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f",
            "LayoutType": "horizontal",
            "Column": "2",
            "HideEmptyField": "true"
          },
          "children": []
        }
      ]
    }
  ]
}

相关接口​

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