• 分类: 项目工程实践

近期在开发在线表格项目。快收工了，把一些过程&要点记录下。

目录

  • 一. 前期调研
  • 二. 实践情况
  • 三. 项目整体结构和涉及的几个主要表格技术细节
  • 四. 项目总结
一. 前期调研

根据领导需求查看了几种表格方案，如下:

结论：

  1. 需求定制化程度高
  2. 需求是不能确定的，且后续要持续迭代（未知）
  3. 预期功能较复杂，需要完全掌握相关技术要点
  4. 自主开发吧
二. 实践情况

演示

收集&整理到的需求要点

1. 实现基本的表格功能(单元格，滚动，行列索引...) 2. 业务层面自定义需求(字段，列，维度，冻结滚动，锁定页面，全屏，筛选)... 3. 数据区域
  • 支持增减模块
  • 多种输入插件(计数器，下拉，百分比，日期选择器等)
  • 单元格状态提示，禁用，草稿，错误，必填等
  • 支持 EXCEL 函数公式
  • 其他…
4. 操作
  • 表内外复制粘贴，自动填充
  • 悬浮提示
  • 键盘快捷操作(上下左右，输入&确认，进入&关闭)
  • 其他…

涉及的技术方案

1. 表格实现: 主要参考 x-spreadsheet，lucksheet 源码设计。并考虑由 业务数据转换模块 + 基础表格模块(自定义新特性) 两个主要模块组合支撑业务需求。

都是设计良好，运行可靠，功能全面的开源系统。

2. 项目搭建
  • 脚手架：ts+rollup+eslint 打包 + 类型检查
  • 单元测试：jest 必要的功能点自检
  • 样式：sass+glup 打包主题
3. 其他插件支持

  • 编辑器：element-ui+vue 支持全面的编辑插件功能

  • 函数公式：formulajs 可靠开源，支持函数公式配置

  • 代码编辑器：ace-builds

三. 整体结构

数据流转

原图地址

类图

原图地址

执行流程

原图地址

技术细节-1-表格绘制

  • canvas 模糊问题的处理

See the Pen canvas's blurry problems by 唐鸽 (@tggcs) on CodePen.

  • 表格绘制简单实现

See the Pen canvas grid demo by 唐鸽 (@tggcs) on CodePen.

技术细节-2-数据对象&功能方法分离

表格信息和数据处理方法都存储在DataProxy.ts中

技术细节-3-公式计算

  • step1: 配置公式，保存为id信息

IF(define_40b3c04b7c414a9f8bdf97afe7c273a3== '亚洲',(INPUTNUMBE_r_03561c77aa4a49f5afb7bb573ee16bcd-INPUTNUMBE_r_ffa41f7e2c4742f59e85ee1227890422)* 0.8,(INPUTNUMBE_r_03561c77aa4a49f5afb7bb573ee16bcd-INPUTNUMBE_r_ffa41f7e2c4742f59e85ee1227890422)* 0.6)

  • step2: genSheetdata2转换为标准excel公式

  • step3: excel公式计算实现，这里直接用了开源框架 formulajs

See the Pen Untitled by 唐鸽 (@tggcs) on CodePen.

技术细节-4-业务配置&表格支持转换

  • 具体见项目启动test.html
项目总结
  • 理清&沟通需求相对于技术点调研，同样是件费劲的事
  • 比较复杂的项目要做好前置的沟通，争取到领导和同事们最大程度的支持和配合(争取到合理的工时)，是个较长期且有节奏的建设过程
  • x-spreadsheet 在各个功能点上的设计都很不错，学习到了很多
  • 在线表格可以支撑公司常年的多样且复杂的预算编制和填报需求，是有很大业务价值的
参考