SpreadJS作為一款基于 HTML5 的純前端電子表格控件,以“高速低耗、高度類似Excel、可無限擴展”為產品特色,提供移動跨平臺和瀏覽器支持,可同時滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景。

本期公開課,將由華融融通科技有限公司開發經理——郭曉東先生,為我們深入剖析:SpreadJS在金融行業的成功案例,助你快速構建基于Web Excel的指標補錄平臺。

本節公開課回放

案例分享地址:https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=59171

華融融通(北京)科技有限公司(簡稱“華融科技”)是中國華融資產管理股份有限公司發起設立的一家混合所有制金融科技服務企業,專注于不良資產行業等金融領域的科技項目落地與創新,以實現自主可控、金融創新為愿景,面向資產管理公司、銀行、證券、保險等金融企業的IT部門提供咨詢、軟件、行業解決方案和專業技術服務,以實現項目管理自主可控為目的,致力于幫助金融企業通過完善的科技系統平臺提升價值、降低項目成本。

項目介紹

華融科技采購了SpreadJS 純前端表格控件 以及 SpreadJS 在線表格編輯器,為其構建可嵌入Web 系統的企業內部指標補錄平臺。

該平臺需要使用SpreadJS組件,開發Excel模板編輯、導入導出、數據綁定、公式計算等業務模塊,通過平臺實現Excel文件無損導入導出、圖表公式聯動等需求。

常規補錄流程

一、總公司部門制定填報模板

  • 公司數據收集通常以“客戶”為中心,每個客戶擁有的信息分類以及信息內容通常是固定的,但是也是大量的。將客戶和指標信息形成了一個二維矩陣形式的基本結構。如下圖所示。

  • 總公司部門在傳統方式下是建立Excel模板,下發分公司響應部門。

二、分公司部門分發填報任務

  • 分公司部門在收到信息模板時,需要將對應的客戶分發到對應的業務部門的業務經理,完成對應的客戶信息的填報。
  • 信息分類和分發給分公司業務部門也造成了不小的工作成本。

三、分公司業務組填報信息

  • 填報內容中,有需要內容存在于不相關的系統,如果是手動填報的方式搜集,需要將這部分內容在設計模板的時候手動填充,費時費力。
  • 分公司業務組在填報信息時,通常會接收到來自不同的總公司部門要求的客戶填報內容;在填報的內容中,存在很多是重復的,需要多次重復填報。
  • 對于這類重復的信息,在各個總公司或者分公司部門之間不能很好的共享,造成多次錄入多次搜集的情況,增加了不少工作量。

四、分公司/總公司審批

  • 分公司領導對填報內容進行審批,審批后需要將結果匯總并提交到總公司,用于完成填報任務。
  • 審批過程中,會出現某些內容不合格的情況,會出現部分業務部門退回重新填報的過程。
  • 所有的審批流程都是通過線下郵件等方式處理,這種方式容易出錯,同時又容易導致信息遺漏,不利于任務的完成。
  • 匯總和搜集結果不能被重復使用,不能被持久化保存,沒有給下一次錄入帶來便利。

指標補錄平臺的設計背景

金融類指標項目繁多且瑣碎,不同的業務場景往往需要錄入不同的指標項目,大量重復性的錄入工作需要耗費業務人員大量的時間。在指標補錄平臺出現之前,業務人員只能通過人工檢查、手工錄入的形式,在Excel文檔中逐條錄入指標項目,極易出差且難以發現。

為了解決業務人員手工錄入Excel數據時所帶來的問題,指標補錄平臺項目得以立項。使用指標補錄平臺,大量重復性的指標錄入工作可以通過與Excel模板集成在系統中完成自動錄入,通過這種方式可以有效解決兩方面問題:錄入的流程規范化,以及錄入的內容可控可重用。

指標補錄平臺可以有效解決以下問題:

  1. 企業業務級別的指標尚處于梳理匯總階段,指標錄入工作遲遲不能啟動
  2. 傳統指標錄入的方式會增加工作負擔和人力成本
  3. 重復指標錄入帶來數據梳理困難
  4. 補錄內容通過郵件或其他方式審批十分繁瑣
  5. 傳統表單級別的補錄交互性差

基于SpreadJS的指標補錄平臺設計思路

設計架構一:基于服務方式將各個補錄內容隔離開,通過模板指標模塊統一管理系統錄入的指標。

設計架構二:輕量架構設計,將服務化修正為模塊化設計,提取指標任務等基礎模塊;降低開發和運維成本。

設計架構三:統一數據存儲模型,降低數據存儲的維護難度,繼續抽離基本模塊劃分,使指標和模板管理作為中心基礎。

SpreadJS在指標平臺中的關鍵作用

  • SpreadJS作為模板編輯展現的入口
  • 通過SpreadJS在線表格編輯器嵌入模板,有利于模板的復用和設計
  • 類Excel方式的展示、Excel的導入導出等,極大地簡化了系統錄入
  • 可結合腳本完成Excel的導入、導出
  • 流程流轉過程中作為補錄入口接入
  • 大幅簡化數據綁定、數據校驗、公式計算等操作
  • 模板內容統一存儲,便于模板的維護和保存

SpreadJS補錄指標平臺流程實例

一、制定填報模板

  • 對于不同總公司部門下發的任務,都存在不同的客戶以及不同的填報內容;
  • 模板管理模塊,統一管理模板的設計和制定,將SpreadJS的在線表格編輯器嵌入系統中,完成在系統中錄入模板的需求;可以支持從Excel中或者設計器中導入模板。
  • 在模板保存時,還對模板中綁定的指標進行了統計,確立模板與指標的對應關系,利于對模板錄入內容的重復使用。

二、任務下發

  • 任務下發過程中完成將模板內容下發到分子公司的操作,選擇任務所屬類型之后,可以對該類型下的模板進行角色分配,指定分公司的填報角色。
  • 任務下發之后,該角色將會在系統中收到待辦信息,同時通過郵件等方式收到待辦提醒,分公司接收到任務后在系統代辦頁面處理客戶的分發。
  • 完成工作流程在系統中流轉。

三、內容填報

  • 內容填報過程中,涉及到一些復雜的操作:數據預填、數據校驗、公式校驗等。
  • 通過SpreadJS的類Excel操作,可以較為方便的完成這部分的功能。
  • 至于不同模板放置在相同頁面上的處理操作,在設計模板時通過動態綁定JS腳本的方式解決,可完成避免寫過多的頁面來適配模板內容。

四、負責人審批

  • 審批過程通過基于Activity的工作流程引擎來實現,這部分內容屬于通常意義上的頁面處理。
  • 無論是通過表單方式還是通過SpreadJS的方式設置模板,這樣的處理方式都是常規的,而通過SpreadJS與流程引擎的結合,更方便快速的完成了表單信息收集和復雜流程的設計。

五、任務監控

  • 對于多個補錄的流程跟蹤,可以通過監控流程的狀態達到流程的監控,時刻了解補錄的狀態。
  • 這個功能在常規郵件審核方式下是非常繁瑣的,需要通過溝通解決;通過將補錄內容放到系統中來,可以輕易的完成各個流程的監控,便于錄入任務的快速完成。

指標補錄平臺設計實現中引入SpreadJS的優勢

常規表單開發:

  • 設計開發表單,每個模板都用唯一死板的頁面開發完成
  • 所有校驗和公式必須通過JS控制
  • 外觀和靈活性方面不夠
  • 每次指標的綁定都需要每個頁面單獨處理,定制化內容太多
  • 不存在模板的概念,全部采用頁面來處理

使用了SpreadJS的方式:

  • 采用在線表格編輯器簡化模板設計
  • 采用SpreadJS完成復雜內容的展示和校驗
  • 支持多種類型的數據錄入模板,可定制化開發業務需求
  • 將綁定數據與指標關聯,完成重復指標錄入的跟蹤
  • 模板與內容分離,完成數據錄入后的解析和再分發