关键字：自动化、报表、WAP

自动化

指机器设备、系统或过程（生产、管理过程）在没有人或较少人的直接参与下，按照人的要求，经过自动检测、信息处理、分析判断、操纵控制，实现预期的目标的过程

这是自动化的广泛定义，那么在前端项目中如何做到自动化呢？
首先是配置，在前端组件化泛滥的今天，一个良好的配置项和API显得尤为重要

  • 低耦合 例如React中的纯函数组件思想，给组件传入相同的props得到的必定是同样的结果
  • 可复用性 复用性越强，则暴露的接口越多，也更灵活。但带来的缺点是API过于复杂，所以需要给定默认值，也就是可根据需求传入配置
  • 后端对接 后端需要对API进行独立封装，更语义化，前端拿到的还是基础API，并进行解析展示相应模块和组件
  • 后台配置 通过可视化的方式进行报表配置，并将配置项保存到数据库，同时所见即所得，在配置页可增加预览报表功能

报表

简单来说，在我们的业务需求中，图表 + 表格 = 报表。根据两者的不同比重可以进行不同的定制

  • 图表 主要是灵活性/易用性的取舍问题。我们通过后端返回全部图表配置，前端仅进行渲染工作，这样带来的好处是完全通过后端配置，灵活性很高，并且后端可以进行封装，对一些通用配置可统一处理，也保持了易用性
  • 表格 表格的复杂度完全取决于业务需求。并且表格的可配置性很低，所以很多需求需要单独处理。可以先对基础表格进行一些业务需求的定制，比如排序、筛选、头部固定等功能，然后再根据复杂需求进行深度定制，在前端对表格配置进行转换，并提出公共函数进行处理
  • 下钻功能 下钻指的是点击进入子级页面，在层级数不确定的情况下可以使用递归组件，控制好标识和父子页面的关键的前提下，可以简化大量工作

WAP

表格在WAP上展示是一个难题，相对较小的设备屏幕，更小的展示空间，如何获得更多更直观的数据信息?

  • fixed 重要表格行、列固定，如总计行、分类列等
  • overflow 既然屏幕空间小，那么滚动表的不可避免的
  • 性能优化 在数据量小的情况下，可以获取所有分类的报表数据，直接在内存中进行数据切换展示。数据量大的情况则可以滚动加载，根据滚动条加载当前视觉窗口的数据，即无限滚动的原理

后记

这篇文章并没有设计到具体的开发框架和架构，只是提供一个开发模式和流程控制，在这个基础上可以选型任何前端框架，保证代码质量的情况下，都可以搭建一个快速、易用、并强大的前端自动化报表平台