SpreadJS 纯前端表格控件应用案例：生产采购管理软件

[GrapeCityChina]

由甘棠软件系统（上海）有限公司（简称：甘棠软件）研发的生产采购管理软件，是一款广泛应用于制造业业务模块化、全价值链成本控制和个性化定制的管理系统，可满足供应商在线报价、各配置产品间的成本差异对比、零件检查基准书及检查记录在线生成等多种业务需求。

下面，让我们一起来看看甘棠软件是如何在“生产采购管理软件”项目中，应用表格技术实现“类 Excel 报表设计”功能与业务数据采集、分析和计算的。

一、案例名称：生产采购管理软件

二、企业介绍

甘棠软件由原 IBM 的几位资深业务顾问、软件架构师和制造业经理共同创立，并于 2012 年 3 月 31 日正式注册。“甘棠”二字取意《诗经.召南》的典故，即召伯在甘棠树下勤于理政，辅佐周公治理天下。

甘棠软件的核心团队在制造业的业务咨询、大型自开发软件系统的软件架构设计与开发实施等方面具有丰富的项目经验，以业务咨询、自主知识产权的企业级应用软件、项目定制开发与实施、运维服务等核心能力，致力于提升制造业客户的 BOM 与成本管理水平。

三、项目背景

制造业的升级已在全球范围内成为一个持续的热点。其本质是制造业与信息技术的深度融合。

一方面，制造业的业务由于模块化、全价值链的成本控制、个性化定制等新管理方法的采用变得更为复杂；另一方面，SOA 服务架构、大数据、物联网、云计算等信息技术的发展日新月异。如何将两者深度结合，并落实到管理细节，将是制造业管理能力提升的关键。

制造业客户需要站在企业级的高度，通过有效的系统思考来解决企业所面临的复杂业务管理问题。但大多数制造业客户普遍缺乏具有企业级整体视角的人才、系统化的思考方式，以及解决复杂业务管理问题的方法论。

为此，甘棠软件推出了一款自主研发的生产采购管理软件，可广泛应用于制造业业务模块化、全价值链成本控制和个性化定制等场景，并满足供应商在线报价、各配置产品间的成本差异对比、零件检查基准书及检查记录在线生成等多种业务需求。该系统将制造业客户的业务与信息技术深度融合，即提升了企业的运营效率，又降低了企业的管理成本。

四、项目架构图

五、项目截图

项目应用场景一：供应商在线报价

生产采购环节，针对某个零件寻找目标供应商时，需邀请多家供应商针对该零件规格进行报价，报价内容需要细化到该零件的原材料成本、加工成本、制造费率、运输成本、包装成本、工装成本等 8 大子项，每个子项独立成表， 最终计算汇总价格信息。

该场景使用传统方式开发与 SpreadJS 方式的工作量对比：

项目应用场景二：不同配置产品间的成本差异对比

零部件的采购价格确定后，企业需根据不同产品的成本进行差异化对比，该对比信息需系统提供 Web 页面的展示方式，也需要提供 Excel 文件在线导出的功能。

该场景使用传统方式开发与 SpreadJS 方式的工作量对比：

项目应用场景三：零件检查基准书及检查记录

在零件的样件生产阶段，企业与供应商会提前约定好检查基准书，后续会按照基准书完成检查并记录判定是否合格。

该场景使用传统方式方式与 SpreadJS 的开发工作量对比：

项目其他应用场景：

1. 简易报表设计：使用 SpreadJS 作为报表模版，简化 UI 渲染端的技术实现。

2. 简化业务信息收集：将 SpreadJS 的 SSJSON 当作一个数据存储结构，以此简化数据库和后端开发工作。

3. 借助 SpreadJS 的计算引擎，实现金额计算和基于 Excel 的公式依赖管理。

六、表格技术带来的价值（选择表格控件 SpreadJS 的主要原因）

针对“供应商在线报价”的应用场景，SpreadJS 实现了：

• 表格行控制

• 数据校验

• 权限控制

• 自动生成 Excel 下载文件，自动解析 Excel 上传文件

• 衍生的纯前端 Excel 解析工具（无需编写 Java POI 代码）

针对“产品成本差异对比”的应用场景，SpreadJS 实现了：

• 扫描分析 Web UI 组件，动态构造表单模版

• 绑定数据模版并动态填充数据

• 支持树型结构

• 避免了海量数据引起的性能问题

针对“检查基准书及检查记录”应用场景，SpreadJS 实现了：

• 动态生成检查书的列和输入单元

• 为不同角色设置可编辑单元格控制权限

• 输入检查单元格与判定结果的联动计算

在生产采购管理软件的搭建中， SpreadJS 带来的价值有：

• 直接通过 Excel 来定义单元格的名称域，在前端实现了 Excel 文件解析

• 无需编写读取、解析文件的业务代码

• 纯前端处理数据，减少了文件传输以及后端处理压力

• 加速项目开发，减少业务代码编写的工作量

• 实现更高性能的前端数据展示效果，让 Excel 的可视化设计变为可能

（ SpreadJS 在前端处理数据模板的示意图）

以上就是甘棠软件应用 SpreadJS 表格控件技术研发的“生产采购管理软件”系统案例展示。

本次，由葡萄城携手部分行业用户共同发起的“企业表格技术应用开发案例大赛”正在火热进行中，欢迎提交您的应用案例，报名参赛（https://www.grapecity.com.cn/events/spjs-cases-competition/）。

关于 SpreadJS 纯前端表格控件

SpreadJS 是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户带来亲切、易用的使用体验，并满足 Web Excel 组件开发、 表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景，可极大降低企业研发成本和项目交付风险。