SpreadJS表格控件应用案例：雨诺订单管理系统（OMS）

由青岛雨诺研发的雨诺订单管理系统，为各医疗零售门店提供了统一、简单的操作界面，通过打通线上线下平台，在两个信息孤岛之间搭建通信桥梁，实现了订单、库存、财务信息在线上平台和线下ERP之间自由流转。

下面，让我们一起来看看青岛雨诺是如何在"雨诺订单管理系统"中应用表格技术，实现""与线下线上数据对接的。

案例名称：__青岛雨诺 – 雨诺订单管理系统（雨诺OMS）

企业介绍

青岛雨诺网络信息股份有限公司（证券代码837579）（简称：青岛雨诺）成立于2002年，是一家医药行业信息化全面解决方案提供商，业务涵盖ERP、WMS、SRM、B2B、B2C、O2O、移动互联及健康管理、医药新零售、未来药店等多个细分领域。

项目背景

在移动互联网时代，新零售已成为医药零售领域的新风口，O2O业务如火如荼。如何借助信息化手段管理好此类业务，成为了相关企业新的课题。

对于这类企业来说，其最大的痛点是如何解决线上线下系统的信息孤岛问题，如：

线上O2O平台只负责管理线上的订单流程，如接单、派送、完成及售后等，其无法管理线下企业的库存和财务信息。线下企业一般都是通过ERP对库存财务等进行管理，但各个平台的后台结构不同，经常造成系统操作困难和高昂的培训成本。

基于这个背景，雨诺OMS系统应运而生，该系统为零售门店提供了统一、简单的操作界面，打通了线上线下平台，并在两个信息孤岛之间搭建通信桥梁，实现了订单、库存、财务信息在线上平台和线下ERP之间自由流转。

对线上，OMS已经对接了全国各大电商平台30个左右，大部分以O2O为主。对线下，OMS支持医药流通领域的数家ERP供应商，能够满足大部分线下企业的管理需求，同时提供二次扩展能力，允许对接任何ERP服务商，截止当前，OMS已经在50余家客户中成功应用，每年为客户提供数千万的订单服务。

项目架构图

项目截图

OMS为企业提供了订单、库存和财务的对接，支持各类订单状态处理、库存价格同步，以及各种财务费用计算，并出具财务对账单。

表格技术带来的价值

青岛雨诺在研发"雨诺订单管理系统"之初，曾遭遇以下问题，且一直未寻找到合适的解决方案：

用户无法在前端灵活的排序筛选数据。用户无法对录入的数据执行公式计算。系统数据的处理性能难以达到要求，如在数据分页时，无法一次性加载，用户使用起来十分不方便。系统操作复杂，用户最终体验差。

为克服上述困难，青岛雨诺的项目开发团队经过考察选型，最终决定使用葡萄城的SpreadJS 纯前端表格控件来搭建系统原型，主要基于以下几点考虑：

用户体验：选择SpreadJS最主要的原因，是看重了SpreadJS高度类似 Excel 的功能和使用体验，将SpreadJS嵌入系统后，即刻便能实现类Excel的布局和操作模式。对于财务人员来说，他们已经习惯使用Excel来处理数据，因此，SpreadJS能让他们更快、更容易的使用系统。高性能：通过集成SpreadJS，系统不但提供了几乎所有的 Excel 函数支持，还满足了用户自定义公式、跨表格引用等多场景下的计算需求，轻松实现了数据聚合，让"雨诺订单管理系统"，从能用变成了好用。

以上就是青岛雨诺应用SpreadJS表格控件技术研发的"雨诺订单管理系统"案例展示，如需查看 SpreadJS 的更多应用案例或需要了解 SpreadJS 的更多功能特性，欢迎访问。

关于SpreadJS 纯前端表格控件

是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备"高性能、跨平台、与 Excel 高度兼容"的产品特性，备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐，并被中国软件行业协会认定为"中国优秀软件产品"。

Axure教程：外卖订单平台——用中继器做商品列表购物车

编辑导语：当我们在外卖平台选购商品时，如果有购物车功能则会方便不少。不仅可以让用户有多种选择，还能起到暂时收藏，方便下次购买的作用。今天，本文作者就使用Axure，教我们如何用中继器做外卖订单平台中商品列表的购物车。

Hello，今天作者已外卖订单平台的购物车的案例，教大家如果用中继器来实现一个自动计算总额的商品商品列表购物车。

原型演示地址：https://cty930.axshare.com/#g=1

开始教学了~~~~

一、材料准备

中继器×1，图片×1，加号按钮×1，减号按钮×1，结算按钮×1，购物车图标×1，文本×7，文本分别为商品名称、商品介绍、销售量、价格、数量、合计金额、配送费。

二、原件摆放

中继器内原件摆放：将商品名称、商品介绍、销售量、价格、数量、图片、加号按钮和减号按钮按下图所示摆放。

中继器外原件摆放：将购物车图标、合计金额、配送费、结算按钮如下图摆放，并组合转为动态面板，固定于底部，配送费改为根据需求设定。

三、中继器表格设置

我们需要添加6列：

picture：代表商品图片，我们右键或者复制粘贴图片到表格即可；name：商品名称；jieshao：商品介绍；xiaoshouliang：商品的销售量；jiage：商品价格；shuliang：用户加入购物车的数量，因为一开是为0，所以全部填写0。

填写表格内数据即可，小提示，可以在excel里面填写好再复制粘贴，能够大大提高效率哦。

四、交互设计

设置中继器内文本：在中继器每项加载时，把中继器表格内对应的数据，设置到对应的文本里，这里用设置文本的事件，让数量文本=[[Item.shuliang]]；价格文本=￥[[Item.jiage]]，销售量文本=月售[[Item.xiaoshouliang]]，商品介绍文本=[[Item.jieshao]]，商品名称文本=[[Item.name]]。