前端复杂报表设计

6,983 阅读2分钟

业务需求

总预算展示需求

总预算需求点分析

  • 首先考虑技术选型是表格的渲染,有原生的table,以及公司内部通用的UI组件的table组件。考虑用原生table会导致业务的代码复杂度很高,以后较难维护,以及右侧的滑动固定等需要额外的开发成本。最终选择了公司内的table组件做开发,这个和设计也更加切合,减少了UI颜色边距等的一些改动,提高开发效率。
  • 然后从数据结构来分析渲染规则,一共分三层,最外层是大类,第二层是产品类别,第三层是具体的产品。最初考虑是否可用树形结构来渲染,分析数据结构其实不是的,最外层的大类与二三层的数据结构不一致,一个大类可以直接用for循环遍历出来,里面的二三层直接用mtd-table提供的展开行即可,这样就满足了展开的功能需求。
  • 后面分析是发现是每列还要分三行,这儿我采用的是每列用三个div分成三行,取消表格的padding,增加下border来达到目的,这儿主要是用CSS来控制的。
  • 接下来的一个点是对右侧固定,这个可以采用组件提供的API,直接用一个fixed属性即可,比较方便。

子预算编辑提交需求

子预算需求分析

  • 这儿表格的渲染可以参考总预算的渲染逻辑和方法
  • 这儿还有的是需要支持表格的编辑的逻辑,需要通过接口判断是否为可编辑的情况,然后校验用户填入项是否符合,不符合的话,进行undo操作。
  • 下面是用户在每个输入框填完后需要实时提交到数据库里,这样可以基本避免了多人编辑同一表格的时候互相覆盖的问题,另外需要注意的是不要每次input一个数字就提交,而是用懒更新的机制,当用户失去焦点,change值的时候再去提交,这样可以大程度降低服务器的负荷。
  • 另一个需要注意的坑爹需求是还要根据用量和金额进行自动计算,还要自动计算总金额,总用量和占比。每一个输入框需要v-model数据渲染的项,所以对于数据结构的处理也需要注意下,用了一波reduce。

总结

  • 记录了一下业务开发中的一些需求分析和解决方案,有更好的实现方式方法,欢迎大家不吝指点。