無論用什么框架，第一件事情就是實作動態選單，從資料庫中讀取選單配置項輸出前臺，網上翻了一大堆翻譯檔案，也看了官方英文檔案，關鍵點在于如何實作NavigationProvider和在前端呼叫abp.nav.menus.MainMenu，
后臺處理
1、建表UiMenu
public class UiMenu : FullAuditedEntity<int>, IMustHaveTenant
{
public int Pid { get; set; }
[Required]
[StringLength(50)]
public string Name { get; set; }
[Required]
[StringLength(50)]
public string DisplayName { get; set; }
[Required]
[StringLength(50)]
public string MenuType { get; set; }
[StringLength(200)]
public string Path { get; set; }
[StringLength(500)]
public string CustomData { get; set; }
[StringLength(200)]
public string Remark { get; set; }
public string Icon { get; set; }
public string Action { get; set; }
public int Order { get; set; }
public int TenantId { get; set; }
}
2、實作MyNavigationProvider
在Core專案里新建檔案夾Navigations,新建類MyNavigationProvider,需繼承NavigationProvider，
如下實作UiMneu的倉儲操作物件
private readonly IRepository<UiMenu> _repository;
public MyNavigationProvider(IRepository<UiMenu> repository)
{
_repository = repository;
}
然后重寫SetNavigation，
var allMenus = _repository.GetAllList();
foreach (var item in allMenus)
{
if (item.Pid>0)
{
//子項
context.Manager.MainMenu.GetItemByName(allMenus.Find(p => p.Id == item.Pid).Name).AddItem(
new MenuItemDefinition(
item.Name,
new LocalizableString(item.DisplayName, MyConsts.LocalizationSourceName),
url: item.Path,
icon: item.Icon,
isVisible: item.IsDeleted,
requiredPermissionName: ""
)
);
}
else
{
//父級選單
context.Manager.MainMenu.AddItem(new MenuItemDefinition(
item.Name,
new LocalizableString(item.DisplayName, MyConsts.LocalizationSourceName),
url: item.Path,
icon: item.Icon,
isVisible:item.IsDeleted,
requiredPermissionName:""//配置權限，可在UiMenu表中新加欄位配置
));
}
}
至于如何對選單表進行增刪改查維護，不是本篇主題，故略過，
前端實作
前端實作的主要是依靠官方提供的方法abp.nav.menus.MainMenu
1、創建router幫助方法 router-util.ts
import main from '../views/main.vue'
//import ParentView from '@/components/parent-view'
// 加載路由選單,從localStorage拿到路由,在創建路由時使用
// @函式: 引入組件
export const lazyLoadingCop = file => require('../views' + file + '.vue').default
class RouterHelper {
dynamicRouterAdd(): Array<Router> {
let dynamicRouter = []
window.abp.nav.menus.MainMenu.items.forEach(el => {
let obj = {
path: '/' + el.name,
name: el.name,
icon: el.icon,
permission: undefined,
meta: { title: el.displayName },
component: 'main',
children: [],
}
if (el.items.length > 0) {
el.items.forEach(child => {
obj.children.push({
path: child.name,
name: child.name,
icon: child.icon,
permission: undefined,
meta: { title: child.displayName },
component: child.url,
children: null,
})
})
dynamicRouter.push(obj)
} else {
dynamicRouter.push({
path: '/' + el.items[0].name,
name: el.items[0].name,
icon: el.items[0].icon,
permission: undefined,
meta: { title: el.items[0].displayName },
component: el.items[0].url,
children: [],
})
}
});
dynamicRouter = this.filterAsyncRouter(dynamicRouter)
return dynamicRouter
}
// @函式: 遍歷后臺傳來的路由字串，轉換為組件物件
filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'main' || route.component.name === 'main') { // Main組件特殊處理
route.component = main
}
// else if (route.component === 'parentView') { // parentView組件特殊處理
// route.component = ParentView
// }
else {
route.component = lazyLoadingCop(route.component)
}
}
if (route.children && route.children.length) {
route.children = this.filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
}
const routerHelper = new RouterHelper();
export default routerHelper;
parentView為多級選單，如果有需求可以使用，該組件摘自iView admin 2.0
解釋：
回圈abp.nav.menus.MainMenu.items，將其格式轉換為Router，方便選單呼叫，
2、修改router/index.ts
找到router/index.ts，
在beforeEach方法里添加如下代碼
let dyRouters = RouterHelper.dynamicRouterAdd()
dyRouters.forEach(element => {
appRouters.push(element);
});
router.addRoutes(appRouters)
注意參考 import RouterHelper from '../lib/router-util'
總結
一開始沒有絲毫頭緒，后臺參照使用iview admin時構建的方法進行嘗試，加之剛剛接觸typescript，用起來不是特別順手，問題的關鍵在于router/router.ts->appRouters處無法獲得abp.nav.menus.MainMenu.items在store/modules/app里雖然可以獲取，但是router中不存在，無法正常點擊跳轉，taglist同樣也無從獲取，
最終想到這種不是很完美的方法，前端仍然需要進行回圈轉換Model，但終歸是實作了動態選單，可以進行下一步操作了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/91631.html
標籤：.NET Core