宜搭子表单(自定义页面全部展示)

效果:

增加自定义页面

添加表格组件，配置数据源

远程API       getData

请求地址：

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

请求参数：

{
  formUuid:state.formUuid,
  pageSize:state.pageSize,
  currentPage:state.currentPage
}

填加数据处理didFetch：

function didFetch(content) {
  return this.handleData(content);
}

填加数据处理onError：

function onError(error) {
  this.utils.toast({
    title: error.message,
    type: 'error'
  });
}

变量：        formUuid

'表单编码'

变量：        pageSize

10

变量：        currentPage

1

配置JS代码

/**
* 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。当然，你也可以咨询身边的技术顾问或者联系宜搭平台的技术支持获得服务（可能收费）。
* 我们可以用 JS 面板来开发一些定制度高功能，比如：调用阿里云接口用来做图像识别、上报用户使用数据（如加载完成打点）等等。
* 你可以点击面板上方的 「使用帮助」了解。
*/

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
}

// 树形表格数据处理
export function handleData(content) {
  const { currentPage, data, totalCount } = content;
  if (!totalCount) { return content };
  const tableData = data.map(item => {
    const children = item.formData.tableField_lru5tsb6.map((_item, index) => {
      return {
        chan: _item.textField_lru5tsb7,
        zhong: _item.textField_lru5tsb8,
        isChildren: true,
        formInstId: `${item.formInstId}-${index}`,
      }
    });
    return {
      formInstId: item.formInstId,
      formUuid: item.formUuid,
      title: item.title,
      name: item.formData.employeeField_lru5tsb3,
      date: item.formData.dateField_lru5tsb4,
      children,
      isChildren: false
    }
  });
  return {
    currentPage,
    totalCount,
    data: tableData
  };
}

// 成员数据处理
export function renderCell(value, index, rowData) {
  return <span>{value}</span>;
}

// 查看详情
export function onDetail(rowData) {
  const { formInstId, formUuid } = rowData;
  this.utils.router.push(`${window.location.origin}/${window.pageConfig.appType || window.g_config.appKey}/formDetail/${formUuid}`, { formInstId, }, true, true);
}

export function actionRender(title, rowData) {
  const { isChildren } = rowData;
  return isChildren ? false : title;  // return false 则不显示
}

表格属性配置（字段类型与原表单一至）

数据源

state.getData || []

操作列详情绑定

分页配置

可折叠树形表格