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

Stella981
• 阅读 815

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

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

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

二、企业介绍

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

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

三、项目背景

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

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

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

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

四、项目架构图

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

五、项目截图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

项目其他应用场景:

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

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

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

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

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

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

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

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

  • 表格行控制

  • 数据校验

  • 权限控制

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

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

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

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

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

  • 支持树型结构

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

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

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

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

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

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

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

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

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

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

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

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

(SpreadJS 在前端处理数据模板的示意图)

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

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

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

关于SpreadJS 纯前端表格控件

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
SpreadJS 应用案例:电力自动化在线数据采集报表系统
电力自动化在线数据采集报表系统,由南京畅洋科技有限公司自主研发。使用该系统,用户只需简单的配置,便可轻松获取想要的数据。该系统通过嵌入SpreadJS纯前端表格控件,可应对电力系统中针对数据处理的各项需求,让数据变得更有价值。下面,让我们一起来看看如何在“电力自动化在线数据采集报表系统”中应用表格技术,实现“数据填报(https://www.osch
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这