[發(fā)明專利]一種前端Vue頁面可視化配置的方法、裝置及存儲介質(zhì)

有效

• 申請?zhí)枺?/td>: 201910634030.0
• 申請日: 2019-07-15
• 公開（公告）號: CN110515683B
• 公開（公告）日: 2022-12-13
• 發(fā)明（設(shè)計）人: 黃康
• 申請（專利權(quán)）人: 平安普惠企業(yè)管理有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F16/958
• 代理公司: 北京市京大律師事務(wù)所 11321
• 代理人: 謝文強

1.一種前端Vue頁面可視化配置的方法，其特征在于，所述方法包括：

接收用戶輸入的指令，響應(yīng)于所述指令：顯示命令行的顯示窗口，在所述顯示窗口運行路由管理工具；

在所述路由管理工具中輸入路由文件夾地址，通過所述路由管理工具遍歷所述路由文件夾地址對應(yīng)的各路由文件夾，并為遍歷到的各路由文件夾分別配置路由配置信息；其中，所述路由文件夾地址是指訪問路由文件夾的路徑，所述路由文件夾包括路由配置信息、存放Vue組件的文件夾、存放路由配置信息的文件夾、Vue項目的入口文件和根組件；所述路由配置信息包括路由路徑；

啟動瀏覽器，加載人機交互UI界面，在所述UI界面中將所有路由的路由配置信息渲染為一個樹狀結(jié)構(gòu)；其中，每個路由路徑對應(yīng)多個頁面節(jié)點，頁面節(jié)點之間存在路由關(guān)系，每個頁面節(jié)點包括多個路由頁面，同一個頁面節(jié)點中的路由頁面之間存在路由關(guān)系；

通過所述樹狀結(jié)構(gòu)查詢每個路由的頁面節(jié)點之間的串聯(lián)狀態(tài)，所述串聯(lián)狀態(tài)是指頁面節(jié)點之間存在的跳轉(zhuǎn)關(guān)系；

接收針對所述樹狀結(jié)構(gòu)的預覽指令，執(zhí)行所述預覽指令，根據(jù)各頁面節(jié)點之間的串聯(lián)狀態(tài)有序和自動的跳轉(zhuǎn)到下一個頁面節(jié)點，直至預覽結(jié)束。

2.根據(jù)權(quán)利要求1所述的方法，其特征在于，對于一個審批頁面節(jié)點而言，所述審批頁面節(jié)點包括審批管理頁面、待辦頁面和審批事件回調(diào)頁面，所述審批管理頁面用于編輯表單頁面、審批和查看觸發(fā)審批事件；所述待辦 頁面用于獲取待審批數(shù)量和待審批實例；所述審批事件回調(diào)頁面用于當審批事件發(fā)生時，調(diào)用注冊的http接口返回對應(yīng)的審批事件信息。

3.根據(jù)權(quán)利要求2所述的方法，其特征在于，每個頁面節(jié)點的有效操作范圍內(nèi)均設(shè)置控制圖標，所述控制圖標包括放大圖標和縮小圖標，每個頁面節(jié)點的有效操作范圍內(nèi)設(shè)置的控制圖標僅對所述頁面節(jié)點生效。

4.根據(jù)權(quán)利要求1-3中任一項所述的方法，其特征在于，所述通過所述樹狀結(jié)構(gòu)查詢每個路由的頁面節(jié)點之間的串聯(lián)狀態(tài)，包括：

獲取查詢指令，所述查詢指令包括路由頁面的標識信息；

根據(jù)所述查詢指令在所述樹狀結(jié)構(gòu)中定位于所述標識信息對應(yīng)的目標路由頁面；

在所述樹狀結(jié)構(gòu)中查詢與所述目標路由頁面存在串聯(lián)關(guān)系的路由頁面或頁面節(jié)點。

5.根據(jù)權(quán)利要求1-3中任一項所述的方法，其特征在于，所述路由管理工具為VueDevtools工具，在Vue Devtools工具中通過選擇Vue組件，以查看Vue組件內(nèi)的數(shù)據(jù)信息；所述通過所述樹狀結(jié)構(gòu)查詢每個路由的頁面節(jié)點之間的串聯(lián)狀態(tài)，包括：

將Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理頁面節(jié)點之間的串聯(lián)狀態(tài)，以及以預設(shè)規(guī)則保證頁面節(jié)點之間的串聯(lián)狀態(tài)以一種可預測的方式發(fā)生變化；

檢測到針對所述Vue Devtools工具中Vuex選項的選擇命令后，顯示所述Vue項目內(nèi)Vuex的狀態(tài)變化信息。

6.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述方法還包括：

當檢測到鼠標移動至所述樹狀結(jié)構(gòu)中的目標頁面節(jié)點時，在所述UI界面上顯示所述目標頁面節(jié)點的縮略圖。

7.根據(jù)權(quán)利要求6所述的方法，其特征在于，所述方法還包括：

檢測到針對所述頁面節(jié)點的有效操作范圍內(nèi)的控制圖標的第一輸入；

根據(jù)所述第一輸入修改或添加路由路徑和路由頁面，以更新所述頁面節(jié)點的路由路徑和路由頁面；

顯示確認圖標；

檢測到針對所述確認圖標的輸入后，修改所述頁面節(jié)點的配置參數(shù)，并同步至與所述頁面節(jié)點對應(yīng)的路由配置文件。