# 快速构建证照库左树右表数据展示

来源快照：`result_data_new_260518.json`

- 来源 ID：`1969390092290643705`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**场景说明**

    在证照管理中，为实现对各种类型的证照进行统一集中管理，可以采用左树右表的方式进行证照数据展示，左侧展示证照类型，右侧展示对应类型的证照台账。为提高证照的维护效率，支持在导航树上直接新建和编辑证照类型，直接在证照台账上新建当前浏览类型下的证照信息。

效果如下图所示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694613486329859&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


**功能简介**

     新建证照类型表单和证照信息表单，前者主要包括分类（企业证照/人员证照）、类型名称；后者主要包括分类、证照类型、证照名称、证照编号、持有者、颁发日期、生效截止日期等字段；新建页面，页面布局调整为左右分栏；左侧分栏添加树组件，配置树组件的节点数据源为证照类型表单，启用选项框分组，配置节点显示名称为类型名称，节点事件动作为在当前布局的中间栏（即右侧分栏）打开证照信息的表格视图，且仅在视图上显示当前点击树节点指示类型的证照清单；为实现点击视图右上角的新建按钮时，打开证照信息新建布局的同时自动填写当前浏览树所在的证照分类和证照类型，在打开证照信息的视图页面时将当前点击树节点的所属分类和证照类型作为页面参数传递给视图页面，为新建按钮配置参数，接收点击树组件时传递过来的数据显示在新建布局上。

  


**搭建步骤**

1.新建证照类型和证照信息表单，并录入基础数据

       证照类型表单中主要包括下拉选项分类（企业证照/人员证照）、类型名称、数字字段有效和逾期用于统计各类型的有效/逾期证照的数量

证照信息表单中主要包括下拉选项分类（企业证照/人员证照）、关联e-Builder字段证照类型、下拉选项状态（有效/逾期）、证照名称、证照编号、颁发日期和生效截止日期等字段。

注意：两张表单都有下拉选项分类字段，表单设计的时候必须保持二者的value值和选项值一致，后续的点击树节点在打开的证照信息列表上新建数据时自动带入当前树节点所属分类这个需求才能实现。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694613486329884&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图1 设计证照类型和证照信息表单  


  


录入基础数据，设计证照信息表格视图  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694613521825828&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图2 录入证照信息，设计表格视图

  


2.左树右表页面设计

1).新建页面，页面布局调整为左右分栏

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694613648539708&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图3 新建页面，设置页面布局

  


2).左侧分栏添加树组件，设置树组件根节点名称为“全部”，根节点动作为打开证照信息的表格视图，打开位置为当前布局的中间栏。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694617865183255&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图4 新建树组件，配置根节点

  


3).添加树节点，节点名称为“证照类型”，来源类型为数据源，数据源为证照类型表单，启用选项框分类，选项框字段为分类，主键为数据ID，显示名为类型名称；

**节点动作** 为打开证照信息的表格视图，参数配置为链接目标的证照类型等于树节点字段数据ID，实现打开的视图上仅展示当前树节点所在类型的证照信息；添加路径参数type赋值为树节点字段数据ID、cate赋值为树节点字段分类；证照信息表格视图的新建按钮参数配置为分类等于路径参数cate，证照类型等于路径参数type，实现点击打开视图的右上角的新建按钮时自动带出当前树节点所在分类和证照类型。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694617865183295&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图5 添加树节点，配置节点属性

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694622188142594&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图6 证照信息表格视图新建按钮参数配置

  


**节点操作设置** ，启用操作数据，允许在树节点上直接新建证照类型；设置显示数量，显示名称为有效和逾期，数据源字段分别是数字字段有效和逾期，点击数字时打开对应状态的证照信息列表

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694622229200911&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

图7 设置节点操作设置

  


设置动作流更新证照状态，每天晚上23:59分触发动作流，分组汇总查询各类型逾期和有效的证照数量，并更新逾期的证照信息状态。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694622050361381&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

   图8 定时更新各类型的有效/逾期证照数量和证照状态
