結(jié)合SqlSugar Web API+Vue3+ElementPlus來(lái)構(gòu)建BS的前端解決方案,通過(guò)Vue3+ElementPlus實(shí)現(xiàn)的前端界面展示,界面美觀大方;而且業(yè)務(wù)內(nèi)容以模塊化組裝的Web界面,非常利于大型復(fù)雜系統(tǒng)的開(kāi)發(fā),極大提供了效率。

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

主體框架界面

主體框架界面左側(cè)是菜單,右邊頂部是特定導(dǎo)航條和內(nèi)容區(qū)。

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

 

用戶管理界面

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

 用戶編輯界面如下所示。

 當(dāng)然可以查看這個(gè)用戶本身?yè)碛械臋?quán)限功能點(diǎn)和擁有的菜單,如下界面所示。

  

組織機(jī)構(gòu)管理

組織機(jī)構(gòu)主要就是一個(gè)層級(jí)的對(duì)象關(guān)系,一般包含但不限于公司、部門、工作組等的定義,其中組織機(jī)構(gòu)包含用戶成員和角色成員的關(guān)系,如下界面所示。

 組織機(jī)構(gòu)包含的成員可以添加多個(gè)人員記錄,其中可以對(duì)組織成員列表進(jìn)行添加、刪除的操作。。

組織機(jī)構(gòu)中角色列表界面如下所示,其中可以對(duì)角色列表進(jìn)行添加、刪除的操作。

   

角色管理

角色信息沒(méi)有層級(jí)關(guān)系,可以通過(guò)列表展示。

 其中角色包含權(quán)限分配、角色成員和擁有菜單的維護(hù),如下是角色編輯界面,包含角色基本信息、擁有權(quán)限、包含成員、擁有菜單的管理等。菜單對(duì)于角色來(lái)說(shuō),應(yīng)該是一種界面資源,可以通過(guò)配置進(jìn)行管理對(duì)應(yīng)角色用戶的菜單。

編輯界面如下所示。

 

功能管理

我們提供管理界面來(lái)動(dòng)態(tài)維護(hù)這些功能點(diǎn)。在角色里面看到可以分配的權(quán)限內(nèi)容,就是基于這個(gè)權(quán)限表的信息展示。

這樣我們可以動(dòng)態(tài)添加或者批量添加所需要的功能點(diǎn),并且和整個(gè)權(quán)限管理模塊串聯(lián)起來(lái),形成一個(gè)完整的控制體系。

 

菜單管理

系統(tǒng)主界面的開(kāi)發(fā),基本上都是標(biāo)準(zhǔn)的界面,在系統(tǒng)左側(cè)放置系統(tǒng)菜單,右側(cè)中間區(qū)域則放置列表展示內(nèi)容,但是在系統(tǒng)菜單比較多的時(shí)候,就需要把菜單分為幾級(jí)處理。系統(tǒng)菜單在左側(cè)放置一個(gè)自定義菜單組件列表,這樣通過(guò)樹(shù)形列表的收縮折疊,就可以放置非常多的菜單功能了。

在SqlSugar + Vue + Element 快速開(kāi)發(fā)框架里面,我們BS前端的菜單和其CS的菜單是各自分開(kāi)的,我們?cè)诤笈_(tái)的權(quán)限模塊系統(tǒng)中維護(hù)菜單內(nèi)容并分配給對(duì)應(yīng)角色用戶,在用戶登錄系統(tǒng)后,動(dòng)態(tài)加載菜單展示,并通過(guò)菜單的配置信息,跳轉(zhuǎn)到對(duì)應(yīng)的路由上去進(jìn)行頁(yè)面展示處理。

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

單擊左側(cè)樹(shù)列表項(xiàng)目,會(huì)在右側(cè)展示對(duì)應(yīng)父節(jié)點(diǎn)下的菜單列表。

在右側(cè)的列表按鈕中,可以對(duì)已有的菜單進(jìn)行編輯,菜單編輯界面如下所示。

  

登錄日志

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

這個(gè)登錄日志,就是在系統(tǒng)登錄嘗試的時(shí)候,留下的記錄,可供管理員進(jìn)行跟蹤了解某個(gè)賬戶的使用情況,也可以根據(jù)這些登錄信息進(jìn)行一個(gè)統(tǒng)計(jì)報(bào)表的分析。

同時(shí),系統(tǒng)在底層對(duì)數(shù)據(jù)庫(kù)操作進(jìn)行操作日志的記錄,操作日志界面如下所示。

  

字典管理

字典管理界面,左側(cè)列出字典類型,并對(duì)字典類型下的字典數(shù)據(jù)進(jìn)行分頁(yè)展示,右側(cè)則利用分頁(yè)展示對(duì)應(yīng)字典類型的字典數(shù)據(jù),字典管理界面如下所示。

字典大類在左側(cè)列表進(jìn)行維護(hù),可以進(jìn)行新增、編輯、刪除等常規(guī)操作。對(duì)應(yīng)字典大類的新增或者編輯窗體界面如下。

 批量添加字典內(nèi)容的界面如下所示。

 

Vue3+ElementPlus工作流管理