使用内嵌页面 Page

绑定到可编辑表格

Page 可通过简单配置实现如下效果：

选中可编辑表格行数据，右侧编辑面板显示对应的子表单进行编辑。

配置界面如下：

如下是这个示例表单的完整配置 json，可以直接复制到表单设计器查看演示效果。

{
  "form": {
    "defaultSubmitButton": false,
    "defaultCancelButton": false,
    "labelLayout": "vertical",
    "title": "Page Demo"
  },
  "fields": [
    {
      "component": "Stack",
      "componentProps": {
        "flexDirection": "row"
      },
      "fields": [
        {
          "component": "Card",
          "style": {
            "flex": 1,
            "minWidth": "400px"
          },
          "fields": [
            {
              "component": "Stack",
              "componentProps": {
                "flexDirection": "column",
                "gap": 20
              },
              "fields": [
                {
                  "component": "Grid",
                  "fields": [
                    {
                      "id": "name",
                      "title": "名称",
                      "title_i18n_en-US": "Name",
                      "component": "Input",
                      "validation": {
                        "maxLength": 200
                      }
                    },
                    {
                      "id": "count",
                      "title": "数量",
                      "component": "NumberPicker"
                    },
                    {
                      "id": "date",
                      "title": "日期",
                      "component": "DatePicker"
                    },
                    {
                      "id": "file",
                      "title": "附件",
                      "component": "Upload",
                      "componentProps": {
                        "listType": "text"
                      }
                    }
                  ],
                  "componentProps": {
                    "colNumber": 2,
                    "columnGap": 20,
                    "rowGap": 20
                  },
                  "style": {
                    "width": "600px"
                  }
                },
                {
                  "component": "EditableTable",
                  "id": "sub-editable-table",
                  "title": "子可编辑表格",
                  "fieldConfig": {
                    "formEntityToken": "sub-table-form",
                    "pbcToken": "grandchild-editable-table",
                    "relations": [
                      {
                        "colId": "parentDataId",
                        "filterType": "text",
                        "type": "equals",
                        "filter": "$CURRENT_FORM_DATA_ID"
                      }
                    ]
                  },
                  "componentProps": {
                    "columnDefs": [
                      {
                        "type": "TEXT_COLUMN",
                        "colId": "name",
                        "field": "name",
                        "headerName": "子名称",
                        "editable": true,
                        "cellEditorParams": {
                          "validation": {
                            "maxLength": 200
                          }
                        }
                      },
                      {
                        "type": "TEXTAREA_COLUMN",
                        "colId": "description",
                        "field": "description",
                        "headerName": "子描述",
                        "editable": true,
                        "cellEditorParams": {}
                      }
                    ]
                  }
                }
              ]
            }
          ]
        },
        {
          "id": "edit-panel-page",
          "component": "Page",
          "componentProps": {
            "//bindComponentId": "sub-editable-table",
            "openFormProps": {
              "formType": "ENTITY",
              "pbcToken": "grandchild-editable-table",
              "formEntityToken": "sub-table-form",
              "formEntityLayoutToken": "default",
              "FormRendererProps": {}
            },
            "emptyFields": [
              {
                "component": "Stack",
                "componentProps": {
                  "flexDirection": "column",
                  "alignItems": "center",
                  "justifyContent": "center"
                },
                "fields": [
                  {
                    "component": "Icon",
                    "componentProps": {
                      "name": "solar:moon-sleep-bold-duotone",
                      "size": 72,
                      "color": "rgb(0 0 0 / 50%)"
                    },
                    "style": {
                      "margin": "64px 0 12px 0"
                    }
                  },
                  {
                    "component": "Text",
                    "componentProps": {
                      "content": "选中一行进行编辑"
                    }
                  },
                  {
                    "component": "Text",
                    "componentProps": {
                      "content": "当前没有任何行选中"
                    },
                    "style": {
                      "color": "rgb(00"
                    }
                  }
                ],
                "style": {}
              }
            ],
            "ResizableProps": {
              "maxGap": 700,
              "min": 200
            },
            "empty": true,
            "bindComponentId": "sub-editable-table"
          },
          "style": {
            "width": "400px",
            "padding": "24px",
            "background": "white",
            "borderRadius": "var(--card-radius)"
          }
        }
      ]
    },
    {
      "component": "Stack",
      "componentProps": {
        "justifyContent": "flex-end"
      },
      "style": {
        "marginTop": 12
      },
      "fields": [
        {
          "component": "Button",
          "componentProps": {
            "content": "提交",
            "type": "primary",
            "action": {
              "type": "submit",
              "successAction": {
                "type": "cancel"
              }
            }
          }
        },
        {
          "component": "Button",
          "componentProps": {
            "content": "取消",
            "action": {
              "type": "cancel"
            }
          }
        }
      ]
    }
  ]
}

通过 API 自定义动作

如果默认设置选项的 “绑定到可编辑表格” 行为不满足需求，可以通过 Page 组件的 JS API 自定义其行为。

如下示例 JS 代码完整的实现了上述组件自带的 “绑定到可编辑表格” 行为。

1. 取消表单设计器里的 Page 组件设置项 绑定到组件。

2. 将如下 JS 代码复制到表单的 JS 代码里，修改对应代码则可以修改对应行为。

formApi.on('ready', () => {
  const tableApi = formApi.getFieldApi('sub-editable-table');
  const pageApi = formApi.getFieldApi('edit-panel-page');

  // 表格选中行发生变化，渲染编辑面板
  tableApi.gridApi.addEventListener('selectionChanged', () => {
    const selectRowData = tableApi.gridApi.getSelectedRows()[0];

    if (!selectRowData) {
      // 清空选中行，按照需求显示 empty
      pageApi.renderEmpty();
    } else if (pageApi.formApi) {
      // 有 pageApi.formApi 表示 page 里的表单已经渲染，只需要修改数据即可
      pageApi.formApi.setData(selectRowData);
    } else {
      // 否则先渲染内容，然后在下面 pageApi.on('formApiReady', () => {}) 里再去设置选中行的数据
      pageApi.renderContent();
    }
  });

  // 表格数据更新，同步到右侧编辑面板
  tableApi.gridApi.addEventListener('cellValueChanged', (event) => {
    const newData = event.data;
    if (pageApi.formApi) {
      pageApi.formApi.setData(newData);
    }
  });

  // 只有在 formApiReady pageApi.formApi 才有值,
  pageApi.on('formApiReady', () => {
    pageApi.formApi.on('ready', () => {
      const selectRowData = tableApi.gridApi.getSelectedRows()[0];
      if (selectRowData) {
        pageApi.formApi.setData(selectRowData);
      }
    });

    // 编辑面板更新，同步到表格
    // pageApi.renderContent() 可能会导致 pageApi.formApi 发生变化，所以每次 formApiReady 过后都需要重新绑定 change 事件
    pageApi.formApi.on('change', (newData) => {
      tableApi.updateRow(newData);
    });
  });
});

API

完整的 Page API 参考在此处 Page