結合SqlSugar Web API+Vue3+ElementPlus來構建BS的前端解決方案，通過Vue3+ElementPlus實現的前端界面展示，界面美觀大方；而且業務內容以模塊化組裝的Web界面，非常利于大型復雜系統的開發，極大提供了效率。

1、Vue3+TypeScript+ElementPlus的前端功能介紹

主體框架界面

主體框架界面左側是菜單，右邊頂部是特定導航條和內容區。

 其中頂部導航條，提供查詢、全屏切換、修改布局大小、多語言選擇菜單、頭像及快捷菜單處理。

 

用戶管理界面

用戶列表包括分頁查詢及列表展示、以及可以利用按鈕進行新增、編輯、查看用戶記錄，或者對指定用戶進行重置密碼操作。

 用戶編輯界面如下所示。

 當然可以查看這個用戶本身擁有的權限功能點和擁有的菜單，如下界面所示。

  

組織機構管理

組織機構主要就是一個層級的對象關系，一般包含但不限于公司、部門、工作組等的定義，其中組織機構包含用戶成員和角色成員的關系，如下界面所示。

 組織機構包含的成員可以添加多個人員記錄，其中可以對組織成員列表進行添加、刪除的操作。。

組織機構中角色列表界面如下所示，其中可以對角色列表進行添加、刪除的操作。

   

角色管理

角色信息沒有層級關系，可以通過列表展示。

 其中角色包含權限分配、角色成員和擁有菜單的維護，如下是角色編輯界面，包含角色基本信息、擁有權限、包含成員、擁有菜單的管理等。菜單對于角色來說，應該是一種界面資源，可以通過配置進行管理對應角色用戶的菜單。

編輯界面如下所示。

 

功能管理

我們提供管理界面來動態維護這些功能點。在角色里面看到可以分配的權限內容，就是基于這個權限表的信息展示。

這樣我們可以動態添加或者批量添加所需要的功能點，并且和整個權限管理模塊串聯起來，形成一個完整的控制體系。

 

菜單管理

系統主界面的開發，基本上都是標準的界面，在系統左側放置系統菜單，右側中間區域則放置列表展示內容，但是在系統菜單比較多的時候，就需要把菜單分為幾級處理。系統菜單在左側放置一個自定義菜單組件列表，這樣通過樹形列表的收縮折疊，就可以放置非常多的菜單功能了。

在SqlSugar + Vue + Element 快速開發框架里面，我們BS前端的菜單和其CS的菜單是各自分開的，我們在后臺的權限模塊系統中維護菜單內容并分配給對應角色用戶，在用戶登錄系統后，動態加載菜單展示，并通過菜單的配置信息，跳轉到對應的路由上去進行頁面展示處理。

菜單資源管理的列表界面界面如下所示

單擊左側樹列表項目，會在右側展示對應父節點下的菜單列表。

在右側的列表按鈕中，可以對已有的菜單進行編輯，菜單編輯界面如下所示。

  

登錄日志

登錄日志，這個就是用戶嘗試登錄的時候，留下的記錄信息，其中包括用戶的登錄用戶名，ID，IP地址、登錄時間，以及登錄是否成功的狀態等信息。

這個登錄日志，就是在系統登錄嘗試的時候，留下的記錄，可供管理員進行跟蹤了解某個賬戶的使用情況，也可以根據這些登錄信息進行一個統計報表的分析。

同時，系統在底層對數據庫操作進行操作日志的記錄，操作日志界面如下所示。

  

字典管理

字典管理界面，左側列出字典類型，并對字典類型下的字典數據進行分頁展示，右側則利用分頁展示對應字典類型的字典數據，字典管理界面如下所示。

字典大類在左側列表進行維護，可以進行新增、編輯、刪除等常規操作。對應字典大類的新增或者編輯窗體界面如下。

 批量添加字典內容的界面如下所示。

 

Vue3+ElementPlus工作流管理