您的位置:首页 > 电脑软件

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

发布时间:2019-09-05 18:36:00  来源:互联网     背景:

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

  本期公开课,葡萄城特邀苏宁易购系统架构师——候健,为我们深入讲解:如何在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处理解析为模块依赖,并只支持相对路径形式。

  而static 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。Webpack默认将static目录的文件原原本本地输出,所以当页面要使用绝对路径时,资源文件就需要放在static目录下。

  因为Vue运行起来并不是静态的,我们还需要将static目录中的index.html文件内容,全部拷贝到Vue的入口文件【index.html】中。修改完所有的资源文件路径后,打开项目展示页面的控制台,我们会发现,此时已经将所有的SpreadJS以及在线表格编辑器资源引入成功了。

  从 index.js 分析SpreadJS表格编辑器与插件的加载过程:

  完成上述步骤后,打开static目录中的index.js 文件,将上图红框中的三行代码拷贝到准备加载插件的组件文件中:components/spreadjs.vue。

  spreadjs.vue:

  传统的只集成 SpreadJS 插件的方式依然有效。

  此时,打开项目展示页面,发现SpreadJS插件似乎没有被正确加载?

  下面,我们将着手解决插件未正确加载的问题:从官方提供的index.html文件中,将所有承载SpreadJS表格主体部分的元素,全部拷贝到spreadjs.vue中,替换默认的container标签。

  打开前端展示页面,就会发现原本灰色的部分,出现了一个加载动画。

  为了让Vue正确读取到spreadWrapper.html和ribbon.html的内容,需要修改项目路径,增加‘static/’根目录。

  asyncLoader.js

  完成上述步骤后,页面部分会正常显示SpreadJS的表格以及底部状态栏。

  为了让SpreadJS的菜单栏也正确显示,还需要修改fileMenu.js的路径:

  fileMenu.js

  注意,SpreadJS的菜单工具栏是通过绝对定位显示在页面上方的,为了让菜单工具栏正确显示,我们还需要调整SpreadJS工具栏距页面顶部的高度(默认为top:195px)。

  Local.cn.css:

  刷新页面,最终效果如下:

  至此,我们已经成功的将SpreadJS 纯前端表格控件和在线表格编辑器与Vue框架集成。

  修复再次进入页面插件时未加载的问题

  完成了SpreadJS与Vue的集成后,当我们点击浏览器“返回”按钮,再次进入表格编辑器页面时,会发现样式全部错乱:

  造成上述问题的原因: index.js 中的 js 代码,并不会随着路由的切换而重新执行。

  为了修复此问题,我们可以:

  1. 将插件的源码加载方式改为 ES6

  2. 在 Vue 对应的页面组件 mount 中重新调用初始化方法

  苏宁使用SpreadJS 与在线表格编辑器的应用实践

  这是我们使用SpreadJS纯前端表格控件开发的“人才台账”项目应用截图,SpreadJS已经帮我们实现了微软Office Excel 90%以上的功能,我们只需增加一些UI样式和下拉框,就可以迅速交付一套完整的基于Web的 Excel功能模块,对于提升项目研发效率、较低后期维护成本来说,SpreadJS均可提供巨大帮助。

  OK,今天的分享就到这里,大家可以自行前往SpreadJS官网下载体验,同时也可以在这里观看本次课程回放。

  SpreadJS官网访问:https://www.grapecity.com.cn/developer/spreadjs

特别提醒:本网内容转载自其他媒体,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。


返回网站首页

本文评论
十大信创领军企业联袂出席 奇安信可信浏览器开辟政企市场新赛道
4月2日,国内最大的网络安全公司奇安信通过蓝信平台举行了线上发布会,正式发布了奇安信可信浏览器......
日期:04-02
Win10将退役“磁盘清理”功能:力推更智能的存储感知
在上周微软发布的Windows 10新预览版Build 17758中,再次隆重介绍了Storage Sense(存储感知)功能。...
日期:09-17
堪比永恒之蓝:安全狗发布Windows远程桌面服务漏洞修复方案
2019年5月14日,微软发布了针对远程桌面服务的远程执行代码漏洞CVE-2019-0708的修复程序。该漏洞是预......
日期:05-16
AMD 32核“线程撕裂者”处理器ChinaJoy首秀
8月4日消息 2018年的ChinaJoy在上海新国际博览中心盛大开幕。而AMD也在E4展馆拥有自己的展厅,根据......
日期:08-04
Windows 10“省心”新功能曝光:更新完毕可立刻重启
12月23日消息 Windows系统在安装更新完毕后需要重启以完成部署,这一过程尽管有些烦人,但总是必要......
日期:12-23
Fedora 31稳定版正式发布:停止支持32位内核
经过十分短暂的跳票,在 Fedora 30 发布约五个月后,该项目于今天正式发布了 Fedora 31稳定版。尽管......
日期:10-30
华为云电脑率先连接5G时代,成为首个成熟应用
曾经,我们构想的那个万物互联、万物感知、万物智能的未来世界随着5G连接迎来里程碑的发展,俨然已......
日期:11-26
微软Office 365之后 还会有Windows 365吗?
和Windows XP、Windows Vista、Windows 7等Windows版本不同,自微软确立了云为先的发展战略以来,Wi......
日期:01-07
网络黑产猖獗,蚁盾让春节出行洒满“阳光”
2019年春运已拉开帷幕,预计全国旅客发送量将达到29.9亿人次。中国人一年一度的迁徙盛景,随着传统春......
日期:02-01
开发者讨论将 Qt 5 代码移植到 Qt 6 的工具
Qt 是一个跨平台的C++图形用户界面应用程序框架。它提供给开发者建立图形用户界面所需的功能,广泛......
日期:04-26
新增深色模式:苹果全新MacOS Mojave系统上线
(原标题:苹果全新一代电脑操作系统MacOS Mojave正式开始推送)...
日期:09-25
下载热门应用遭病毒攻击,腾讯手机管家识破木马病毒的“伪装”
此前,常州市警方破获一起利用勒索病毒作案事件,一位00后黑客自学制成勒索木马病毒,攻陷某学校的......
日期:10-26
支付宝:香港也能扫码乘车 600辆小巴即将支持
支付宝扫码坐公交已经不是新鲜事,目前已在内地120多个城市普及的“智慧公交”模式。...
日期:10-19
苹果 Safari 将利用 Face ID 和 Touch ID 支持无密码登录
北京时间 6 月 25 日早间消息,据外媒报道,苹果浏览器 Safari 14 将与 iOS 14 和 macOS Big Sur 一......
日期:06-25
下班路上老板着急让汇总信息,还好有腾讯文档
周五晚上8点 加班回家的路上拿出手机 查看微信留言 是去接孩子 ......
日期:11-15
微软承认三星Link to Windows要比Your Phone更好用
在Galaxy Note 10系列的Unpacked发布会上,三星宣布在多个领域深化和微软之间的合作。而其中之一就......
日期:08-23
货架革命,如何拿下终端货架高地?
数据显示, 每位消费者在超市每个终端展示货架前平均停留15秒, 75%的人会在5秒......
日期:07-25
谷歌翻译网页版更新:全新材料设计界面
11月29日消息 在近几个月的时间里,谷歌全新的材料设计(Material Design)语言已经面向全线产品推出......
日期:11-29
家居设计次时代来临 酷家乐“以图搜模型”功能全球首发
自谷歌、百度发布了以图搜图功能以来,一时间,效仿者纷至沓来,人工智能+搜索引擎初露峥嵘。历经图......
日期:04-03