新功能:

1.菜单新增框架外显示字段
2023-12-24 23:05:00 +08:00
parent 68b3d479ca
commit 7ae15022c0
9 changed files with 106 additions and 42 deletions
--- 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;
 	});
--- 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<string> = [];
    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();
--- a/web/src/router/route.ts
+++ b/web/src/router/route.ts
@@ -88,4 +88,20 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 			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'
+	// 	},
+	// }
 ];
--- 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<string>) {
+			this.routesList.push(data);
+		}
 	},
 });
--- a/web/src/utils/menu.ts
+++ b/web/src/utils/menu.ts
@@ -11,7 +11,7 @@ export const handleMenu = (menuData: Array<any>) => {
    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<any>) => {
        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<any>) => {
    }

    // 框架内路由
-    const dynamicRoutes:Array<any> = []
+    const defaultRoutes:Array<any> = []
    // 框架外路由
-    const staticRoutes:Array<any> = []
+    const iframeRoutes:Array<any> = []

    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<any>) => {
        },
        ...data
    ]
-    return menu
+    return {frameIn:dynamicRoutes,frameOut:iframeRoutes}
 }
--- a/web/src/views/system/menu/components/MenuFormCom/index.vue
+++ b/web/src/views/system/menu/components/MenuFormCom/index.vue
@@ -24,7 +24,7 @@
 				/>
 			</el-form-item>

-			<el-form-item v-if="!menuFormData.is_link" label="路由地址" prop="web_path">
+			<el-form-item  label="路由地址" prop="web_path">
 				<el-input v-model="menuFormData.web_path" placeholder="请输入路由地址，请以/开头" />
 			</el-form-item>

@@ -91,8 +91,8 @@
 					<el-input v-model="menuFormData.component_name" placeholder="请输入组件名称" />
 				</el-form-item>

-				<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" label="Url" prop="web_path">
-					<el-input v-model="menuFormData.web_path" placeholder="请输入Url" />
+				<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" label="外链接" prop="link_url">
+					<el-input v-model="menuFormData.link_url" placeholder="请输入外链接地址" />
 				</el-form-item>

 				<el-form-item v-if="!menuFormData.is_catalog" label="缓存">
@@ -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<IProps>(), {
 	initFormData: () => null,
 	treeData: () => [],
@@ -162,6 +172,7 @@ const rules = reactive<FormRules>({
 	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<MenuTreeItemType[]>([]);
@@ -180,6 +191,7 @@ let menuFormData = reactive<MenuFormDataType>({
 	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;
 	}
 };

--- 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;
 }