自定义页面表格展示主表和子表信息

创建自定义页面 | 钉钉宜搭·帮助中心

本文详细介绍了如何在应用管理界面创建和设置自定义页面的操作步骤，包括通过不同入口创建页面、设置页面属性以及使用页面设计器等内容。

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用场景

在表单内既有主表信息又有子表信息的时候，我们想要在自定义页面表格内既展示主表信息又展示子表信息，需要经过特殊的数据处理，这个时候我们可以参考以下案例。

2. 实现功能

2.1 获取数据展示到表格中

（1）在数据源处增加远程数据源

参考文档：根据条件搜索表单实例详情列表

接口配置如图：

didFetch 数据处理函数：

// 树形表格数据处理
export function handleData(content) {
  const { currentPage, data, totalCount } = content;
  if (!totalCount) { return content };
  const tableData = data.map(item => {
    const children = item.formData.tableField_lbkho7az.map((_item, index) => {
      return {
        productName: _item.textField_lbkho7b0,
        count: _item.numberField_lbkho7b1,
        isChildren: true,
        formInstId: `${item.formInstId}-${index}`,
      }
    });
    return {
      formInstId: item.formInstId,
      formUuid: item.formUuid,
      title: item.title,
      name: item.formData.employeeField_lbkho7ax,
      date: item.formData.dateField_lbkho7ay,
      children,
      isChildren: false
    }
  });
  return {
    currentPage,
    totalCount,
    data: tableData
  };
}