diff --git a/backend/dvadmin/system/models.py b/backend/dvadmin/system/models.py index e2bf262..c2ba698 100644 --- a/backend/dvadmin/system/models.py +++ b/backend/dvadmin/system/models.py @@ -162,6 +162,7 @@ class Menu(CoreModel): (1, "是"), ) is_link = models.BooleanField(default=False, verbose_name="是否外链", help_text="是否外链") + link_url = models.CharField(max_length=255, verbose_name="链接地址", null=True, blank=True, help_text="链接地址") is_catalog = models.BooleanField(default=False, verbose_name="是否目录", help_text="是否目录") web_path = models.CharField(max_length=128, verbose_name="路由地址", null=True, blank=True, help_text="路由地址") component = models.CharField(max_length=128, verbose_name="组件地址", null=True, blank=True, help_text="组件地址") diff --git a/backend/dvadmin/system/views/menu.py b/backend/dvadmin/system/views/menu.py index 7ac3c40..28dce62 100644 --- a/backend/dvadmin/system/views/menu.py +++ b/backend/dvadmin/system/views/menu.py @@ -71,8 +71,8 @@ class WebRouterSerializer(CustomModelSerializer): class Meta: model = Menu fields = ( - 'id', 'parent', 'icon', 'sort', 'path', 'name', 'title', 'is_link', 'is_catalog', 'web_path', 'component', - 'component_name', 'cache', 'visible', 'status') + 'id', 'parent', 'icon', 'sort', 'path', 'name', 'title', 'is_link','link_url', 'is_catalog', 'web_path', 'component', + 'component_name', 'cache', 'visible','is_iframe','is_affix', 'status') read_only_fields = ["id"] diff --git a/web/src/router/backEnd.ts b/web/src/router/backEnd.ts index 7efe7c8..dc42d87 100644 --- a/web/src/router/backEnd.ts +++ b/web/src/router/backEnd.ts @@ -18,8 +18,6 @@ const menuApi = useMenuApi(); const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}'); const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}'); -// 后端控制路由 - /** * 获取目录下的 .vue、.tsx 全部文件 * @method import.meta.glob @@ -45,9 +43,12 @@ export async function initBackEndControlRoutes() { await useUserInfo().setUserInfos(); // 获取路由菜单数据 const res = await getBackEndControlRoutes(); - + // 无登录权限时,添加判断 + // https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO + if (res.data.length <= 0) return Promise.resolve(true); // 处理路由(component),替换 dynamicRoutes(/@/router/route)第一个顶级 children 的路由 - dynamicRoutes[0].children = await backEndComponent(handleMenu(res.data)); + const {frameIn,frameOut} = handleMenu(res.data) + dynamicRoutes[0].children = await backEndComponent(frameIn); // 添加动态路由 await setAddRoute(); // 设置路由到 vuex routesList 中(已处理成多级嵌套路由)及缓存多级嵌套数组处理后的一维数组 @@ -80,7 +81,10 @@ export function setCacheTagsViewRoutes() { * @returns 返回替换后的路由数组 */ export function setFilterRouteEnd() { + console.log(dynamicRoutes) let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)); + // notFoundAndNoPower 防止 404、401 不在 layout 布局中,不设置的话,404、401 界面将全屏显示 + // 关联问题 No match found for location with path 'xxx' filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower]; return filterRouteEnd; } @@ -92,9 +96,11 @@ export function setFilterRouteEnd() { * @link 参考:https://next.router.vuejs.org/zh/api/#addroute */ export async function setAddRoute() { + console.log("默认路由",router.getRoutes()) await setFilterRouteEnd().forEach((route: RouteRecordRaw) => { router.addRoute(route); }); + console.log("全部路由",router.getRoutes()) } /** @@ -126,6 +132,34 @@ export function backEndComponent(routes: any) { if (!routes) return; return routes.map((item: any) => { if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string); + if(item.is_catalog){ + // 对目录的处理 + item.component = dynamicImport(dynamicViewsModules, 'layout/routerView/parent') + } + if(item.is_link){ + // 对外链接的处理 + item.meta.isIframe = !item.is_iframe + if(item.is_iframe){ + item.component = dynamicImport(dynamicViewsModules, 'layout/routerView/link') + }else { + item.component = dynamicImport(dynamicViewsModules, 'layout/routerView/iframes') + } + }else{ + console.log(item.is_iframe,item.web_path) + if(item.is_iframe){ + const iframeRoute:RouteRecordRaw = { + ...item + } + item.meta.isLink = item.path + item.path = `${item.path}Link` + item.name = `${item.name}Link` + item.component = dynamicImport(dynamicViewsModules, 'layout/routerView/link.vue') + item.meta.isIframe = !item.is_iframe + item.meta.isKeepAlive = false + item.meta.isIframeOpen = true + + } + } item.children && backEndComponent(item.children); return item; }); diff --git a/web/src/router/index.ts b/web/src/router/index.ts index b1dba30..b864473 100644 --- a/web/src/router/index.ts +++ b/web/src/router/index.ts @@ -7,7 +7,7 @@ import {useKeepALiveNames} from '/@/stores/keepAliveNames'; import {useRoutesList} from '/@/stores/routesList'; import {useThemeConfig} from '/@/stores/themeConfig'; import {Session} from '/@/utils/storage'; -import {staticRoutes} from '/@/router/route'; +import {notFoundAndNoPower,staticRoutes} from '/@/router/route'; import {initFrontEndControlRoutes} from '/@/router/frontEnd'; import {initBackEndControlRoutes} from '/@/router/backEnd'; @@ -32,7 +32,13 @@ const {isRequestRoutes} = themeConfig.value; */ export const router = createRouter({ history: createWebHashHistory(), - routes: staticRoutes, + /** + * 说明: + * 1、notFoundAndNoPower 默认添加 404、401 界面,防止一直提示 No match found for location with path 'xxx' + * 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 notFoundAndNoPower 404、401 界面。 + * 防止 404、401 不在 layout 布局中,不设置的话,404、401 界面将全屏显示 + */ + routes: [...notFoundAndNoPower, ...staticRoutes] }); /** @@ -63,14 +69,7 @@ export function formatTwoStageRoutes(arr: any) { const cacheList: Array = []; arr.forEach((v: any) => { if (v.path === '/') { - newArr.push({ - component: v.component, - name: v.name, - path: v.path, - redirect: v.redirect, - meta: v.meta, - children: [] - }); + newArr.push({component: v.component,name: v.name,path: v.path,redirect: v.redirect,meta: v.meta,children: []}); } else { // 判断是否是动态路由(xx/:id/:name),用于 tagsView 等中使用 // 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G @@ -114,13 +113,13 @@ router.beforeEach(async (to, from, next) => { if (isRequestRoutes) { // 后端控制路由:路由数据初始化,防止刷新时丢失 await initBackEndControlRoutes(); - // 动态添加路由:防止非首页刷新时跳转回首页的问题 - // 确保 addRoute() 时动态添加的路由已经被完全加载上去 - next({...to, replace: true}); + // 解决刷新时,一直跳 404 页面问题,关联问题 No match found for location with path 'xxx' + // to.query 防止页面刷新时,普通路由带参数时,参数丢失。动态路由(xxx/:id/:name")isDynamic 无需处理 + next({ path: to.path, query: to.query }); } else { // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP await initFrontEndControlRoutes(); - next({...to, replace: true}); + next({ path: to.path, query: to.query }); } } else { next(); diff --git a/web/src/router/route.ts b/web/src/router/route.ts index 1c0b1a5..9557d5c 100644 --- a/web/src/router/route.ts +++ b/web/src/router/route.ts @@ -88,4 +88,20 @@ export const staticRoutes: Array = [ title: '登录', }, }, + { + path: '/operationLog', + name: 'operationLog', + component: () => import('/@/views/system/personal/index.vue'), + meta: { + title: 'message.router.personal' + }, + }, + // { + // path: '/demo', + // name: 'demo', + // component: () => import('/@/views/system/demo/index.vue'), + // meta: { + // title: 'message.router.personal' + // }, + // } ]; diff --git a/web/src/stores/routesList.ts b/web/src/stores/routesList.ts index 5e3a249..2481bf0 100644 --- a/web/src/stores/routesList.ts +++ b/web/src/stores/routesList.ts @@ -22,5 +22,8 @@ export const useRoutesList = defineStore('routesList', { async setColumnsNavHover(bool: Boolean) { this.isColumnsNavHover = bool; }, + async addRoutesList(data: Array) { + this.routesList.push(data); + } }, }); diff --git a/web/src/utils/menu.ts b/web/src/utils/menu.ts index 34b76c1..2911230 100644 --- a/web/src/utils/menu.ts +++ b/web/src/utils/menu.ts @@ -11,7 +11,7 @@ export const handleMenu = (menuData: Array) => { const handleMeta = (item: any) => { item.meta = { title: item.title, - isLink: item.is_link, + isLink: item.link_url, isHide: !item.visible, isKeepAlive: item.cache, isAffix: item.is_affix, @@ -29,7 +29,7 @@ export const handleMenu = (menuData: Array) => { if (item.is_iframe) { item.meta = { title: item.title, - isLink: item.is_link, + isLink: item.link_url, isHide: !item.visible, isKeepAlive: item.cache, isAffix: item.is_affix, @@ -44,25 +44,23 @@ export const handleMenu = (menuData: Array) => { } // 框架内路由 - const dynamicRoutes:Array = [] + const defaultRoutes:Array = [] // 框架外路由 - const staticRoutes:Array = [] + const iframeRoutes:Array = [] menuData.forEach((val) => { - console.log(111,val.is_iframe) - if(val.is_iframe){ - staticRoutes.push(handleFrame(val)) - console.log(staticRoutes) - }else{ - dynamicRoutes.push(handleMeta(val)) - } + // if (val.is_iframe) { + // // iframeRoutes.push(handleFrame(val)) + // } else { + // defaultRoutes.push(handleMeta(val)) + // } + defaultRoutes.push(handleMeta(val)) }) - - const data = XEUtils.toArrayTree(dynamicRoutes, { + const data = XEUtils.toArrayTree(defaultRoutes, { parentKey: 'parent', strict: true, }) - const menu = [ + const dynamicRoutes = [ { path: '/home', name: 'home', component: '/system/home/index', meta: { title: 'message.router.home', @@ -77,5 +75,5 @@ export const handleMenu = (menuData: Array) => { }, ...data ] - return menu + return {frameIn:dynamicRoutes,frameOut:iframeRoutes} } diff --git a/web/src/views/system/menu/components/MenuFormCom/index.vue b/web/src/views/system/menu/components/MenuFormCom/index.vue index 95273ea..491f4ce 100644 --- a/web/src/views/system/menu/components/MenuFormCom/index.vue +++ b/web/src/views/system/menu/components/MenuFormCom/index.vue @@ -24,7 +24,7 @@ /> - + @@ -91,8 +91,8 @@ - - + + @@ -139,8 +139,7 @@ const defaultTreeProps: any = { }; const validateWebPath = (rule: any, value: string, callback: Function) => { let pattern = /^\/.*?/; - let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; - const reg = menuFormData.is_link ? patternUrl.test(value) : pattern.test(value); + const reg = pattern.test(value); if (reg) { callback(); } else { @@ -148,6 +147,17 @@ const validateWebPath = (rule: any, value: string, callback: Function) => { } }; +const validateLinkUrl = (rule: any, value: string, callback: Function) => { + let pattern = /^\/.*?/; + let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/; + const reg = pattern.test(value) || patternUrl.test(value) + if (reg) { + callback(); + } else { + callback(new Error('请输入正确的地址')); + } +}; + const props = withDefaults(defineProps(), { initFormData: () => null, treeData: () => [], @@ -162,6 +172,7 @@ const rules = reactive({ name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }], component: [{ required: true, message: '请输入组件地址', trigger: 'blur' }], component_name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }], + link_url: [{ required: true, message: '请输入外链接地址',validator:validateLinkUrl, trigger: 'blur' }], }); let deptDefaultList = ref([]); @@ -180,6 +191,7 @@ let menuFormData = reactive({ is_link: false, is_iframe: false, is_affix: false, + link_url:'' }); let menuBtnLoading = ref(false); @@ -200,6 +212,7 @@ const setMenuFormData = () => { menuFormData.is_link = !!props.initFormData.is_link; menuFormData.is_iframe =!!props.initFormData.is_iframe; menuFormData.is_affix =!!props.initFormData.is_affix; + menuFormData.link_url =props.initFormData.link_url; } }; diff --git a/web/src/views/system/menu/types.ts b/web/src/views/system/menu/types.ts index 6e6d5e3..7975478 100644 --- a/web/src/views/system/menu/types.ts +++ b/web/src/views/system/menu/types.ts @@ -46,6 +46,7 @@ export interface MenuTreeItemType { parent: number | string; is_iframe:boolean; is_affix:boolean; + link_url:string; } export interface MenuFormDataType { @@ -62,8 +63,7 @@ export interface MenuFormDataType { description: string; is_catalog: boolean; is_link: boolean; - is_iframe:boolean; - is_affix:boolean; + link_url: string; }