跳到主要内容

表单

表单组件用于在页面中嵌入一个已有的表单，承载数据的录入与编辑，是搭建新建页、编辑页的核心组件。

概述​

将「表单」拖入画布后，在属性抽屉中选择一个已配置好的表单，即可在页面中渲染该表单的字段与提交逻辑。

  • 组件引用表单资源，表单本身在 表单配置 模块中维护。
  • 可设置表单的默认形态（创建态 / 编辑态）与操作按钮的对齐方式。
  • 运行态下，若页面上下文中已带有 formState（如从详情页进入编辑），则以上下文状态为准；否则使用组件配置的默认形态。
  • 未选择表单时，组件在画布中显示「待配置」占位提示。

配置项​

配置项说明
表单选择一个表单；必填，支持按名称搜索，候选范围为当前应用下的表单
默认表单形态表单初始状态：创建态 / 编辑态，默认「创建态」
操作按钮对齐方式表单提交操作按钮的对齐方式：左对齐 / 右对齐，默认「左对齐」

表单形态与数据传递​

  • 组件配置的 DefaultFormState 只作为兜底：运行态若上下文传入 formState（例如从数据列表行进入编辑），则优先使用上下文值；未传入时按默认形态渲染。
  • 编辑态需要数据 ID（dataId）；从数据列表进入时由页面上下文自动携带，组件据此解析要编辑的记录。组件也会优先读取上下文中的 currentData。
  • 「表单」下拉候选由当前应用的 appId 决定，因此组件的可选范围随所处应用变化。

使用建议​

  1. 新建场景与编辑场景可分别使用两个页面，通过「默认表单形态」区分，减少运行态参数依赖。
  2. 编辑场景需要页面上下文中提供数据 ID，从数据列表行进入详情/编辑页时会自动携带。

下一步​

属性明细​

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

组件属性（meta）​

属性名类型含义取值/存储值
MetaFormIdstring(GUID)引用的表单 ID，必填表单主键，取自 POST /api/DataSource/GetMetaFormDataSourceWithApp；无默认值
DefaultFormStatestring默认表单形态create（默认，创建态） / edit（编辑态）
ActionAlignstring操作按钮对齐方式left（默认，左对齐） / right（右对齐）

组件固定 uid：7746fc31-58fd-474e-9c59-28baa2bb587e。运行态读取 meta.MetaFormId 绑定表单，按 cmpParams.formState || meta.DefaultFormState 决定形态，数据 ID 取自 cmpParams（优先 currentData.Id，其次 dataId），按钮对齐取 meta.ActionAlign（缺省 left）。

存储示例​

完整 WidgetItem：

{
  "id": "8a2b4c6d-1e3f-4a5b-9c7d-2e4f6a8b0c1d",
  "uid": "7746fc31-58fd-474e-9c59-28baa2bb587e",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "MetaForm",
  "widgetTypeName": "表单",
  "meta": {
    "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f",
    "DefaultFormState": "create",
    "ActionAlign": "left"
  },
  "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": "8a2b4c6d-1e3f-4a5b-9c7d-2e4f6a8b0c1d",
          "uid": "7746fc31-58fd-474e-9c59-28baa2bb587e",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "MetaForm",
          "widgetTypeName": "表单",
          "meta": {
            "MetaFormId": "c3d4e5f6-a7b8-4c9d-0e1f-2a3b4c5d6e7f",
            "DefaultFormState": "edit",
            "ActionAlign": "right"
          },
          "children": []
        }
      ]
    }
  ]
}

相关接口​

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