結(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ā)，極大提供了效率。
主體框架界面
主體框架界面左側(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)系，一般包含但不限于公司、部門(mé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è)列出字典類(lèi)型，并對(duì)字典類(lèi)型下的字典數(shù)據(jù)進(jìn)行分頁(yè)展示，右側(cè)則利用分頁(yè)展示對(duì)應(yīng)字典類(lèi)型的字典數(shù)據(jù)，字典管理界面如下所示。
字典大類(lèi)在左側(cè)列表進(jìn)行維護(hù)，可以進(jìn)行新增、編輯、刪除等常規(guī)操作。對(duì)應(yīng)字典大類(lèi)的新增或者編輯窗體界面如下。
批量添加字典內(nèi)容的界面如下所示。
Vue3+ElementPlus工作流管理
