王者荣耀妲己全衣去除贴吧
您的位置:首頁>>電腦軟件

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小時內處理完畢。


返回網站首頁 本文來源:互聯網

本文評論
友情提示:評論功能暫時關閉,請掃描上方二維碼進群交流!
十款違法有害App公布:開心消消消、時尚快拍等上榜
9月17日消息 據新華社報道,國家計算機病毒應急處理中心近期在“凈網2019”專項行動中通...
日期:09-17
5款校園必備神器,WPS助你更加高效
隨著科技的迅猛發展,校園教學硬件設施和學校教學都加快了智能化進程,教學不再只是單純的“教...
日期:09-16
Win10負優化總算解除:不再卡頓
8月30日,微軟面向Windows 10五月更新(v1903)用戶推送了補丁KB4512941,沒想到意外翻車,造成部分用...
日期:09-12
高玩用Excel重制《文明1》 ,四核i5占用率100%
根據PC Game的報道,最初的《文明》已有28年的歷史,1991年首次在MS-DOS上發布。現在,國外一名高玩...
日期:09-08
SpreadJS與Vue集成,蘇寧集團『極客辦公』系統開發案例
“造極”如今已成為蘇寧集團的年度核心關鍵詞。“造極”在具體工作上的體現,...
日期:09-05
DropperNecro病毒藏身SDK軟件,騰訊手機管家保護用戶手機財產安全
各類手機APP的出現使用戶的連網生活豐富多彩,隨著用戶需求不斷提高,更加細分、熱門的APP雨后春筍般...
日期:09-05
聯想發布 IdeaPad S540:2K屏,可選AMD R5 3500U
9月4日消息 在IFA 2019上,聯想宣布了一款13.3英寸的IdeaPad S540,搭載了QHD顯示屏,可選英特爾第1...
日期:09-05
宏碁推出22英寸專業顯示器:99% Adobe RGB,75Hz刷新率
9月5日消息 宏碁在IFA公布了全新的ConceptD系列產品,面向專業用戶。如果你喜歡小屏顯示器的話,接...
日期:09-05
聯想推出新款IdeaPad S340:13.3英寸,十代酷睿+MX 250
9月4日消息 在IFA 2019上,聯想推出了更新版的IdeaPad S系列,搭載Intel 10th Comet Lake-U和NVIDIA...
日期:09-05
ROG推出新款Zephyrus S筆記本,搭載 300 Hz刷新率屏幕
9月4日消息 今天,在IFA 2019上,華碩ROG發布了Zephyrus S GX701游戲筆記本電腦,配有300赫茲超刷新...
日期:09-05
宏碁推出ConceptD 9 Pro 筆記本:i9+RTX 5000,17.3英寸4K翻轉屏
9月4日消息 今天宏碁推出了一系列的新品,包括四五千的入門級別筆記本到十幾萬的“電競椅&rdqu...
日期:09-05
華為:搭載鴻蒙OS的筆記本電腦和智能手表將在海外上市
9月4日消息 上個月,華為公布了自研操作系統HarmonyOS(鴻蒙OS)。日前,華為在英國倫敦舉辦媒體活動...
日期:09-05
華碩推出新款AsusPro B9商務筆記本,僅重880克
9月4日消息 據Liliputing報道,華碩推出了AsusPro B9450FA筆記本,官方稱是世界上最輕的14英寸商務...
日期:09-05
英偉達與華碩推出最強移動工作站:搭載RTX 6000,24GB顯存
9月4日消息 根據WCCFTECH的報道,英偉達和華碩在IFA2019上合作推出了一款最強移動工作站—&mda...
日期:09-05
OneWeb宣布2020年在北極地區提供高速衛星互聯網
9月5日消息,據國外媒體報道,當地時間周三晚些時候,衛星互聯網提供商OneWeb表示其將在2020年前為...
日期:09-05
雷蛇推出靈刃13潛行版水銀:25W i7-1065G7,Iris Plus核顯
9月4日消息 今天雷蛇在IFA 2019上推出了雷蛇靈刃13潛行版水銀,采用了25W的英特爾10nm處理器,支持...
日期:09-04
游戲網絡延遲優化,MediaTek G90T芯片助紅米Note8 Pro實力圈粉
9月3日倍受關注的的紅米Redmi Note 8 Pro正式上市,作為1399元價位里最耀眼的新機型, Redmi品牌總...
日期:09-04
英特爾Lakefield 3D堆疊芯片曝光:超低壓5核心,性能比肩奔騰G5400
9月3日消息 根據Tom's Hardware報道,英特爾即將推出的3D堆疊處理器代號為Lakefield,@TUM_APISAK最...
日期:09-03
無需公網IP,蒲公英幫你實現遠程訪問OA系統
行業背景
  辦公自動化簡稱OA,是將計算機、通信等現代化技術運用到傳統辦公方式中,進而形...
日期:09-03
微軟宣布:Windows 10 Edge瀏覽器將停止支持ePub電子書
  9月3日消息 2019年4月,微軟宣布Windows 10商店不再銷售電子書籍,近期微軟發布了新的支持頁面,稱E...
日期:09-03
  專欄介紹
王涵 的專欄
王涵發表的文章
積分:
自我介紹 :
 
王者荣耀妲己全衣去除贴吧 跑马计划手机版 时时彩后二包和值稳赚 彩仙阁官网 广东时时投注站 比千里马更好的软件 pk10自动投注软件论坛 pt电子游戏注册子 北京pk10定位胆规则 二人麻将规则及图解 辛运飞艇计划数据 彩票有没有网上投注 ag揭秘 超级大乐透 网赌百人牛牛赢的规律 赛车1期回血精准计划免费 人能力的高低与遵循规律