优化预算管理流程：Web端实现预算编制的利器

前言：

什么是预算和预算编制

预算

预算是企业在预测、决策的基础上，以数量和金额的形式反映的企业未来一定时期内经营、投资、财务等活动的具体计划，为实现企业目标而对各种资源和企业活动的详细安排，是计划的数字化、表格化、明细化表达。预算管理的分类包括经营预算、专门决策预算和财务预算：

• 经营预算： 经营预算也叫做业务预算，是指与企业日常业务直接相关的一系列预算。包括销售预算、生产预算、采购预算、成本预算等。

• 专门决策预算： 专门决策预算是指企业重大的或不经常发生的，需要根据特定决策编制的预算，包括投融资决策预算等。

• 财务预算： 财务预算是指与企业资金收支、财务状况或经营成果相关的预算。包括资金预算、预计利润表和资产负债表等内容。

预算编制

预算编制流程的基本方式是按照"上下结合、分级编制、逐级汇总"的程序进行，主要包含以下几个步骤：

• 提出及下达目标：企业董事会根据企业发展战略和预算期经济形势的初步预测，在决策的基础上，提出下一年度企业预算目标。

• 编制上报：结合自身特点及预测预算的执行条件，提出详细的本单位预算方案，上报企业预算相关责任部门。

• 审查平衡：企业预算相关部门对各预算执行单位上报的预算方案进行审查、汇总、提出综合平衡意见。

• 审议批准：企业预算相关部门正式编制企业年度预算草案，提交董事会或经理办公会审议批准。

• 下达执行：预算委员会逐级下达各预算执行单位执行。

如何在Web端实现预算编制

全面预算解决方案用于搭建覆盖全业务的预算体系，保障企业战略目标通过预算真正落地，涉及预算编制、预算合并、预算控制、预算分析、预算考核等环节。本文将以项目成本预算、销售预算为例，结合葡萄城公司的类Excel表格控件SpreadJS，探索web端预算编制的实现方式。

接下来将分别为大家介绍 SpreadJS 在预算系统中实现的主要功能：

（1）公式函数

公式函数在预算行业中应用广泛。例如，成本预算中，各部门成本总和，直接成本率等都是业务人员根据公式函数计算而来。而销售预算中，未来销售金额也是通过一定的预测算法，结合历史数据及预测因子计算而来。这就要求线上的预算系统需要具备完善的计算能力，以满足复杂繁多的指标计算工作。而如果让研发人员根据客户需求定制对应公式，成本会随客户的业务需求不断增加且难以扩展。如果可以将业务人员线下用excel的计算能力迁移线上，就可以完美的解决该问题，而这就是SpreadJS适合做预算业务的天然优势。SpreadJS中内置460中与Excel一致的公式函数，也支持自定义公式，满足个性化计算需求。

如上图所示，可以看到销售预算总表中内容几乎均为公式堆砌，而这些基础的公式函数，在SpreadJS中可以无缝迁移。用户可以继续以类Excel的行为完成预算套表的制作。

（2）数据校验

Excel中有一个功能叫做数据验证，用于告知使用人员，对应单元格需要填写什么样类型的数据，例如可以限制单元格只能输入数字或者单元格只能在某些序列中选择。当用户填写数据不合法时，会清空对应的填写数据。SpreadJS中同样内置了数据验证的功能，在UI操作上，它和Excel一致。作为前端控件，SpreadJS也支持使用代码的形式来添加数据验证。如下图所示，在销售预算表蓝色背景区域，对输入内容进行了必须大于10000的验证，使用者会看到对应的内容提示。

除此之外，Web系统中，在进行表单提交时，通常会有一些必填字段。这里采取的SpreadJS中数据绑定的方式，对必填字段进行绑定字段，之后设置单元格背景色，用以提示使用人员对应区域为必填。

如下图成本预算中，红色部分为必须填写的字段。当预算表处于设计阶段时，可以看到右侧绑定的字段。将对应字段拉动到单元格内部，单元格内部会形成以中括号包裹字段内容的形式，这就表明，该单元格与对应字段进行了绑定。

当提交保存时，首先会利用SpreadJS中获取绑定数据相关的api，用来获取最终绑定字段的值，如果绑定字段中有空值，表明对应单元格没有填写内容，拒绝提交。具体表现形式如下所示：

这种数据绑定的形式，不仅可以用于必填值的判断，也可以用于去结构化的抽取文件中的部分数据，方便用户存取数据。

（3）签名

在审批流程中，当预算编制到对应环节时，需要对应角色在文件中进行签名，表示同意或者驳回该审批过程。SpreadJS中支持添加图片的功能，并可以将图片固定在对应的单元格上。结合一些第三方的签名插件，就可以实现签名完成之后，将对应的签名图片添加到单元格上。

当前前端实现手写签名的插件很多，大家根据自己的习惯，选择熟悉的工具即可，下图是完整的实现效果：

（4）数据对接

预算系统中，部分数据需要根据数据库记录，直接展示在对应表格中。SpreadJS中提供的设置数据的方式主要有两类，分别是：

普通模板下，基于区域设置数据；

数据绑定模式下，基于绑定关系设置数据。

在很多数据填报场景下，使用的都是数据绑定的形式，用于对接局部数据。但数据绑定是SpreadJS特有的功能，如若将文件保存的不是SpreadJS内置的格式，就会丧失该特性。为了能使用和Excel兼容的特性，这里采用名称管理器和基础的区域设置数据的形式，完成数据的对接。

名称管理器在Excel中用于对特定区域做引用标记，可以理解成它就是一片区域的名字，这个名字在整个文件中是独一无二的。根据名称管理的名字，可以直接定位引用的单元格行列信息。从而直接设置数据。如下图所示，弹框中展示的就是文件中的名称管理器列表。可以看到，每个名字后边都有对应的引用区域信息。拿到引用区域之后，借助setArray()方法，就可以轻松完成数据对接。

总结

以上就是SpreadJS在预算系统中部分功能的实现简介。如果您想了解更多有关于SpreadJS在预算系统中的应用，可以体验这个在线Demo，无论是初学者还是有经验的专业人士，都将为您提供有价值的指导和帮助。