<meter id="mebgu"></meter>

  • <small id="mebgu"></small>
    <tr id="mebgu"></tr>
  • <noscript id="mebgu"></noscript>
    <noframes id="mebgu"></noframes>
    <ins id="mebgu"></ins>

    <tr id="mebgu"></tr>

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

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

        主體框架界面

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

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

         

        用戶管理界面

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

         用戶編輯界面如下所示。

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

          

        組織機構管理

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

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

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

           

        角色管理

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

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

        編輯界面如下所示。

         

        功能管理

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

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

         

        菜單管理

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

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

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

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

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

          

        登錄日志

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

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

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

          

        字典管理

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

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

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

         

        Vue3+ElementPlus工作流管理

        久久久久久免费无码_老师在办公室被躁在线观看_黑人刚破完处就三P_欧美动物园观看