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

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小时内处理完毕。


返回网站首页 本文来源:互联网

本文评论
《沉睡魔咒2》与朱莉再续前缘,腾讯手机管家提醒勿下山寨病毒软件
当魔法力量与人类欲望相互碰撞,受人尊重的女王化身毁灭使者,邪恶女巫成为守护一方和平的卫士。迪士...
日期:10-18
Windows 10 Build 19002发布:蓝牙配对优化向快速通道成员开放
10月18日消息 微软今天面向Windows Insider快速通道的用户发布了20H1的最新预览版系统更新,内部版...
日期:10-18
Ubuntu 20.04 LTS代号“Focal Fossa”,明年4月正式发布
Ubuntu 19.10“Eoan Ermine”刚刚发布,20.04版本也已开始亮相。仍然遵循英文字母顺序的...
日期:10-18
金山文档上线“跨表引用”,在线文档分水岭渐显
作为一款专业在线协作文档工具,金山WPS旗下的金山文档日前上线了“跨表格引用数据”功能...
日期:10-17
这两个实用的WPS功能,让PPT制作更轻松
不管是学校里的学生,还是职场的上班族,大部分会选择WPS作为处理办公文档的软件。为了能满足大家日...
日期:10-17
预警!永恒之蓝下载器木马新增BlueKeep漏洞检测代码,未修复比例高达近30%
近日,腾讯安全御见威胁情报中心监测发现,“永恒之蓝下载器”木马再次更新,新增了BlueK...
日期:10-17
微软Windows 10计算器更新:全面支持三角学、 函数(f)
10月16日消息 Windows 10系统内置了一款计算器,也可以从应用商店下载,并且具有一些专用于更高级工...
日期:10-16
谷歌Chrome浏览器测试新功能:解决爱吃内存问题
10月15日消息 谷歌Chrome浏览器是Windows上占用资源最多的应用程序之一,如果安装扩展程序或打开过...
日期:10-15
Safari浏览器欺诈网站警告功能引发用户隐私担忧
有用户发现,在苹果的Safari的隐私条款中有一个特别的条款。叫做 Fraudulent Webstie Warning ,欺...
日期:10-14
Mac终于和iTunes说再见了 那Windows用户呢?
macOS Catalina 的发布可能会减少 Mac iTunes 用户对苹果著名的臃肿的媒体管理和播放应用程序的抱怨...
日期:10-14
微软Windows 10更新助手存漏洞:黑客可执行系统级权限代码
10月12日消息 据外媒报道,Microsoft Windows 10 Update Assistant(微软Win 10更新助手)中的一个安...
日期:10-12
《中国机长》等国庆档大片叫座,手机观影当心中招木马病毒
“我和我的祖国,一刻也不能分割,无论我走到哪里,都流出一首赞歌……”王菲翻...
日期:10-12
PS和LR在苹果macOS Catalina上出现“兼容性问题”
macOS Catalina正式版已经推出多日,但如果你是PhotoShop和Lightroom的重度用户的话,建议你暂时不...
日期:10-09
删除的微信聊天记录怎么恢复?专业软件让恢复变得轻而易举
如果未来的某一天,我很不不幸的遭遇了车祸或者是其他意外,那我一定一定是不愿意死的,因为&hellip...
日期:10-08
苹果手机微信聊天记录怎么彻底删除?左滑删除只是掩耳盗铃!
苹果手机微信聊天记录怎么彻底删除?这个月苹果官网又推出新款手机苹果iPhone11Pro,很多土豪小伙伴...
日期:09-30
淘集集可以提现吗?如何提现?
随着越来越多人用淘集集app进行购物,也听说了淘集集购物返红包,甚至可以直接体现,这是真的吗?要怎么...
日期:09-29
如何用智能电视观看网盘内容?当贝市场一招搞定
智能电视上的视频内容很多时候无法满足我们用户需求,这时应该怎么办?当贝小编今天就给大家解答一下...
日期:09-29
Windows 10补丁KB4517210发布,升级1903版本更顺畅了
9月29日消息 Windows 10版本1903(2019年5月更新)正式准备进行大规模部署推送,并且微软现在正在推出...
日期:09-29
Mozilla的Firefox Nightly不再对TLS 1.0和TLS 1.1提供支持
Mozilla在最新的Firefox Nightly版本中已不再对TLS 1.0和TLS 1.1加密协议提供支持。此举是继苹果、...
日期:09-29
腾讯安全:IE浏览器曝远程执行代码漏洞 腾讯安全强势推出漏洞修复工具
近日,微软发布一例远程执行代码漏洞(CVE-2019-1367)漏洞修复补丁,攻击者可利用网页挂马和邮件进行...
日期:09-27
  专栏介绍
王涵 的专栏
王涵发表的文章
积分:
自我介绍 :