SpreadJS与Vue集成，苏宁集团『极客办公』系统开发案例

　　“造极”如今已成为苏宁集团的年度核心关键词。“造极”在具体工作上的体现，代表着苏宁不断追求极致的工匠精神，即对待每一个环节，都要严格要求、精益求精。“极客办公”系统，正是在这种环境下应运而生。

　　本期公开课，葡萄城特邀苏宁易购系统架构师——候健，为我们深入讲解：如何在Vue脚手架工程中，整合SpreadJS纯前端表格控件与在线表格编辑器源码，实现Web版全功能Excel的具体实践。

· 点此查看视频回放：https://www.grapecity.com.cn/support/webinars

　　苏宁易购集团股份有限公司(简称“苏宁易购”)成立于1990年，是中国领先的O2O智慧零售商。面对互联网、物联网、大数据时代，苏宁易购持续推进智慧零售和线上线下融合战略，主打全品类经营、全渠道运营、全球化拓展，开放物流云、数据云和金融云，通过门店端、PC端、移动端和家庭端的四端协同，为用户带来无处不在的一站式服务体验。

　　苏宁易购采购 SpreadJS 纯前端表格控件，主要是为其构建基于Web 端 + Vue 集成的Excel数据管理系统，即“极客办公平台”，该系统用于收集集团内部信息数据，代替常用的 excel表格，通过在线填报的方式汇总、审批、合并数据，以达到实时管控、协同办公的目的。

　　了解更多关于 SpreadJS 纯前端表格控件：https://www.grapecity.com.cn/developer/spreadjs

　　苏宁易购“极客办公平台”简介

　　“极客办公平台”是苏宁易购全新的内部管理系统，该系统使用SpreadJS完成了Web端Excel 数据交互、在线Excel功能开发以及数据填报模块等功能。

　　在采购SpreadJS 之前，公司管理内部信息的办法是：在Excel上安装插件，通过插件与数据库通信，实现数据权限管控，这样做非常的低效且混乱。而新的极客办公平台提供了更加灵活的管理方式和更为亲切的办公体验。

　　为保证新老系统顺利过渡，需要完成大量的Excel数据迁移工作，因此，新老系统对Excel文件的兼容性至关重要。借助SpreadJS 纯前端无损导入导出Excel这一产品特性，极客办公平台得以顺利完成交付并迅速投入使用。

　　1.极客办公平台现阶段的主要使用场景为人事信息录入管理，分为管理端和填报端两大模块。

　　2.管理端负责设计填报模板，如字段名称、数据类型、必填项等。填报端主要负责用户填报的权限管控。

　　3.系统前端生成的Excel模板文件会通过json传递至后端解析处理，系统根据模板信息生成数据库Table并保存。

　　开发环境介绍

　　1. 前端框架：Vue、webpack、vue-cli

　　2. 表格插件：SpreadJS V12、在线表格编辑器

　　在开发阶段最好引用未压缩的SpreadJS组件代码库(上图标红的代码文件)，这样可以方便调试。

　　使用脚手架搭建标准 Vue 工程

　　创建Vue脚手架工程命令：

　　项目目录结构如下：

　　前端展示界面如下：

　　点击【表格页面】，此时呈现的效果如下图(因为目前为止，我们还没有集成SpreadJS的插件和在线表格编辑器，因此该区域显示为一块灰色的DIV)：

　　集成 SpreadJS 纯前端表格控件与在线表格编辑器

　　SpreadJS在线表格编辑器目录结构：

　　Vue工程目录结构：

　　与Vue集成步骤：将SpreadJS在线表格编辑器目录中【src】下的所有文件拷贝到Vue工程目录的static 文件下即可。

　　这里有个小问题：为什么要把SpreadJS在线表格编辑器的源码复制到static 目录，而不是assets 目录?

　　其实通过Vue的官方说明，就可以理解：首先，assets文件夹和static文件夹在vue-cli生成的项目中，都是用来存放静态资源的。assets目录中的文件会被webpack处理解析为模块依赖，并只支持相对路径形式。