您现在的位置:主页 > 白姐图库开奖结果查询 > 正文
白姐图库开奖结果查询

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

发布时间:2019-09-09 浏览次数:

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

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

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

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

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

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

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

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

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

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

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

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

  与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以及在线表格编辑器资源引入成功了。

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

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

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

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

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

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

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

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

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

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

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

  DropperNecro病毒藏身SDK软件,腾讯手机管家保护用户手机财产安全

  “造极”如今已成为苏宁集团的年度核心关键词。“造极”在具体工作上的体现,...

  各类手机APP的出现使用户的连网生活丰富多彩,随着用户需求不断提高,更加细分、热门的APP雨后春笋般...

  9月4日消息 在IFA 2019上,联想宣布了一款13.3英寸的IdeaPad S540,搭载了QHD显示屏,可选英特尔第1...

  9月5日消息 宏碁在IFA公布了全新的ConceptD系列产品,面向专业用户。如果你喜欢小屏显示器的话,接...

  9月4日消息 在IFA 2019上,联想推出了更新版的IdeaPad S系列,搭载Intel 10th Comet Lake-U和NVIDIA...

  9月4日消息 今天,在IFA 2019上,华硕ROG发布了Zephyrus S GX701游戏笔记本电脑,配有300赫兹超刷新...

  9月4日消息 今天宏碁推出了一系列的新品,包括四五千的入门级别笔记本到十几万的“电竞椅&rdqu...

  9月4日消息 上个月,华为公布了自研操作系统HarmonyOS(鸿蒙OS)。日前,华为在英国伦敦举办媒体活动...

  9月4日消息 据Liliputing报道,华硕推出了AsusPro B9450FA笔记本,官方称是世界上最轻的14英寸商务...

  9月4日消息 根据WCCFTECH的报道,英伟达和华硕在IFA2019上合作推出了一款最强移动工作站&mda...

  9月5日消息,据国外媒体报道,当地时间周三晚些时候,卫星互联网提供商OneWeb表示其将在2020年前为...

  9月4日消息 今天雷蛇在IFA 2019上推出了雷蛇灵刃13潜行版水银,采用了25W的英特尔10nm处理器,支持...

  9月3日倍受关注的的红米Redmi Note 8 Pro正式上市,作为1399元价位里最耀眼的新机型, Redmi品牌总...

  9月3日消息 根据Toms Hardware报道,英特尔即将推出的3D堆叠处理器代号为Lakefield,@TUM_APISAK最...

  办公自动化简称OA,是将计算机、通信等现代化技术运用到传统办公方式中,进而形...

  9月3日消息 2019年4月,微软宣布Windows 10商店不再销售电子书籍,近期微软发布了新的支持页面,称E...

  9月3日消息 跑分网站Geekbench上已经曝光了新的高通骁龙处理器的基准测试,该处理器似乎是骁龙8cx,...

  9月3日消息 微软近期发布了针对Office Insiders的新iOS版OneDrive更新。此更新带有新的黑暗模式和改...

  9月3日消息 近期,微软发布了2019 Windows 10更新五月版18362.329正式补丁更新,用户在Windows Upda...

  网易科技讯9月2日消息 紫光集团旗下长江存储在IC China 2019前夕宣布,公司已开始量产基于Xtacking...

阿修罗| 高手论坛| 小鱼儿玄机主页| 开奖结果| 必中一肖图| 九龙图库| 开奖结果| 开奖记录| 白姐平码诗| 王中王一码| 藏宝图| 开奖结果| 杨红心水论坛| 红姐| 铁算盘|