From b32511f35e69a41f4a0fd3bf1a1f1b6d2f9717a4 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 8 May 2024 15:34:39 +0800
Subject: [PATCH] fix:layout

---
 src/layout/index.vue | 320 +++++++++++++++++++++++++++++++------------
 1 file changed, 229 insertions(+), 91 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 62e549c4..28153bff 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -6,11 +6,16 @@
 				<div class="logo-bar">
 					<!-- <img class="logo" src="img/bbmg.png"> -->
 					<!-- <span>{{ $CONFIG.APP_NAME }}</span> -->
-					<img class="logo" :src="baseLogo">
+					<img class="logo" :src="baseLogo" />
 					<span>{{ baseName }}</span>
 				</div>
 				<ul v-if="!ismobile" class="nav">
-					<li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''" @click="showMenu(item)">
+					<li
+						v-for="item in menu"
+						:key="item"
+						:class="pmenu.path == item.path ? 'active' : ''"
+						@click="showMenu(item)"
+					>
 						<el-icon>
 							<component :is="item.meta.icon || 'el-icon-menu'" />
 						</el-icon>
@@ -23,21 +28,35 @@
 			</div>
 		</header>
 		<section class="aminui-wrapper">
-			<div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
-				:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
+			<div
+				v-if="(!ismobile && nextMenu.length > 0) || !pmenu.component"
+				:class="
+					menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
+				"
+			>
 				<div v-if="!menuIsCollapse" class="adminui-side-top">
 					<h2>{{ pmenu.meta.title }}</h2>
 				</div>
 				<div class="adminui-side-scroll">
 					<el-scrollbar>
-						<el-menu :default-active="active" router :collapse="menuIsCollapse"
-							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+						<el-menu
+							:default-active="active"
+							router
+							:collapse="menuIsCollapse"
+							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
+						>
 							<NavMenu :navMenus="nextMenu"></NavMenu>
 						</el-menu>
 					</el-scrollbar>
 				</div>
-				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
-					<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
+				<div
+					class="adminui-side-bottom"
+					@click="$store.commit('TOGGLE_menuIsCollapse')"
+				>
+					<el-icon
+						><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
+							v-else
+					/></el-icon>
 				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
@@ -46,8 +65,14 @@
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
 					<router-view v-slot="{ Component }">
-						<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
-							<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
+						<keep-alive
+							:include="this.$store.state.keepAlive.keepLiveRoute"
+						>
+							<component
+								:is="Component"
+								:key="$route.fullPath"
+								v-if="$store.state.keepAlive.routeShow"
+							/>
 						</keep-alive>
 					</router-view>
 					<iframe-view></iframe-view>
@@ -60,8 +85,16 @@
 	<template v-else-if="layout == 'menu'">
 		<header class="adminui-header">
 			<div class="adminui-header-left">
-				<div class="logo-bar" style="width: 202px;background: #ffffff;margin-right: 10px;border-radius: 5px;">
-					<img class="logo" :src="baseLogo">
+				<div
+					class="logo-bar"
+					style="
+						width: 202px;
+						background: #ffffff;
+						margin-right: 10px;
+						border-radius: 5px;
+					"
+				>
+					<img class="logo" :src="baseLogo" />
 					<!-- <img class="logo" src="/img/bbmg.jpg"> -->
 				</div>
 				<div class="logo-bar">
@@ -73,17 +106,32 @@
 			</div>
 		</header>
 		<section class="aminui-wrapper">
-			<div v-if="!ismobile" :class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
+			<div
+				v-if="!ismobile"
+				:class="
+					menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
+				"
+			>
 				<div class="adminui-side-scroll">
 					<el-scrollbar>
-						<el-menu :default-active="active" router :collapse="menuIsCollapse"
-							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+						<el-menu
+							:default-active="active"
+							router
+							:collapse="menuIsCollapse"
+							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
+						>
 							<NavMenu :navMenus="menu"></NavMenu>
 						</el-menu>
 					</el-scrollbar>
 				</div>
-				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
-					<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
+				<div
+					class="adminui-side-bottom"
+					@click="$store.commit('TOGGLE_menuIsCollapse')"
+				>
+					<el-icon
+						><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
+							v-else
+					/></el-icon>
 				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
@@ -92,8 +140,14 @@
 				<!-- <Tags v-if="!ismobile && layoutTags"></Tags> -->
 				<div class="adminui-main" id="adminui-main">
 					<router-view v-slot="{ Component }">
-						<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
-							<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
+						<keep-alive
+							:include="this.$store.state.keepAlive.keepLiveRoute"
+						>
+							<component
+								:is="Component"
+								:key="$route.fullPath"
+								v-if="$store.state.keepAlive.routeShow"
+							/>
 						</keep-alive>
 					</router-view>
 					<iframe-view></iframe-view>
@@ -107,14 +161,20 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-					<img class="logo" src="img/bbmg.jpg">
+					<img class="logo" src="img/bbmg.jpg" />
 					<span>{{ $CONFIG.APP_NAME }}</span>
 				</div>
 			</div>
 			<div class="adminui-header-right">
 				<div v-if="!ismobile" class="adminui-header-menu">
-					<el-menu mode="horizontal" :default-active="active" router background-color="#222b45" text-color="#fff"
-						active-text-color="var(--el-color-primary)">
+					<el-menu
+						mode="horizontal"
+						:default-active="active"
+						router
+						background-color="#222b45"
+						text-color="#fff"
+						active-text-color="var(--el-color-primary)"
+					>
 						<NavMenu :navMenus="menu"></NavMenu>
 					</el-menu>
 				</div>
@@ -127,8 +187,14 @@
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
 					<router-view v-slot="{ Component }">
-						<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
-							<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
+						<keep-alive
+							:include="this.$store.state.keepAlive.keepLiveRoute"
+						>
+							<component
+								:is="Component"
+								:key="$route.fullPath"
+								v-if="$store.state.keepAlive.routeShow"
+							/>
 						</keep-alive>
 					</router-view>
 					<iframe-view></iframe-view>
@@ -143,16 +209,26 @@
 			<div v-if="!ismobile" class="aminui-side-split">
 				<div class="aminui-side-split-top">
 					<router-link :to="$CONFIG.DASHBOARD_URL">
-						<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
+						<img
+							class="logo"
+							:title="$CONFIG.APP_NAME"
+							src="img/logo-r.png"
+						/>
 					</router-link>
 				</div>
 				<div class="adminui-side-split-scroll">
 					<el-scrollbar>
 						<ul>
-							<li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''"
-								@click="showMenu(item)">
+							<li
+								v-for="item in menu"
+								:key="item"
+								:class="pmenu.path == item.path ? 'active' : ''"
+								@click="showMenu(item)"
+							>
 								<el-icon>
-									<component :is="item.meta.icon || el-icon-menu" />
+									<component
+										:is="item.meta.icon || el - icon - menu"
+									/>
 								</el-icon>
 								<p>{{ item.meta.title }}</p>
 							</li>
@@ -160,21 +236,35 @@
 					</el-scrollbar>
 				</div>
 			</div>
-			<div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
-				:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
+			<div
+				v-if="(!ismobile && nextMenu.length > 0) || !pmenu.component"
+				:class="
+					menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'
+				"
+			>
 				<div v-if="!menuIsCollapse" class="adminui-side-top">
 					<h2>{{ pmenu.meta.title }}</h2>
 				</div>
 				<div class="adminui-side-scroll">
 					<el-scrollbar>
-						<el-menu :default-active="active" router :collapse="menuIsCollapse"
-							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+						<el-menu
+							:default-active="active"
+							router
+							:collapse="menuIsCollapse"
+							:unique-opened="$CONFIG.MENU_UNIQUE_OPENED"
+						>
 							<NavMenu :navMenus="nextMenu"></NavMenu>
 						</el-menu>
 					</el-scrollbar>
 				</div>
-				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
-					<el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
+				<div
+					class="adminui-side-bottom"
+					@click="$store.commit('TOGGLE_menuIsCollapse')"
+				>
+					<el-icon
+						><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold
+							v-else
+					/></el-icon>
 				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
@@ -185,8 +275,14 @@
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
 					<router-view v-slot="{ Component }">
-						<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
-							<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
+						<keep-alive
+							:include="this.$store.state.keepAlive.keepLiveRoute"
+						>
+							<component
+								:is="Component"
+								:key="$route.fullPath"
+								v-if="$store.state.keepAlive.routeShow"
+							/>
 						</keep-alive>
 					</router-view>
 					<iframe-view></iframe-view>
@@ -195,11 +291,19 @@
 		</section>
 	</template>
 
-	<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>
+	<div class="main-maximize-exit" @click="exitMaximize">
+		<el-icon><el-icon-close /></el-icon>
+	</div>
 
 	<!-- <div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div> -->
 
-	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+	<el-drawer
+		title="布局实时演示"
+		v-model="settingDialog"
+		:size="400"
+		append-to-body
+		destroy-on-close
+	>
 		<setting></setting>
 	</el-drawer>
 
@@ -207,17 +311,17 @@
 </template>
 
 <script>
-import SideM from './components/sideM.vue';
-import Topbar from './components/topbar.vue';
-import Tags from './components/tags.vue';
-import NavMenu from './components/NavMenu.vue';
-import userbar from './components/userbar.vue';
-import setting from './components/setting.vue';
-import iframeView from './components/iframeView.vue';
-import autoExit from './other/autoExit.js';
-import data from './../utils/baseJson';
+import SideM from "./components/sideM.vue";
+import Topbar from "./components/topbar.vue";
+import Tags from "./components/tags.vue";
+import NavMenu from "./components/NavMenu.vue";
+import userbar from "./components/userbar.vue";
+import setting from "./components/setting.vue";
+import iframeView from "./components/iframeView.vue";
+import autoExit from "./other/autoExit.js";
+import data from "./../utils/baseJson";
 export default {
-	name: 'index',
+	name: "index",
 	components: {
 		SideM,
 		Topbar,
@@ -226,7 +330,7 @@ export default {
 		userbar,
 		setting,
 		iframeView,
-		autoExit
+		autoExit,
 	},
 	data() {
 		return {
@@ -234,102 +338,136 @@ export default {
 			menu: [],
 			nextMenu: [],
 			pmenu: {},
-			active: ''
-		}
+			active: "",
+		};
 	},
 	computed: {
 		baseName() {
 			// let baseInFo = data[data.current];
-			let baseName = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_name : '智能管理平台';
+			let baseName =
+				this.$TOOL.data.get("BASE_INFO") !== null
+					? this.$TOOL.data.get("BASE_INFO").base.base_name
+					: "智能管理平台";
 			// let baseName = baseInFo!==null?baseInFo.base.base_name:'智能管理平台';
 			return baseName;
 		},
 		baseLogo() {
 			// let baseInFo = data[data.current];
-			let base_logo = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_logo : 'img/logo.png';
+			let base_logo =
+				this.$TOOL.data.get("BASE_INFO") !== null
+					? this.$TOOL.data.get("BASE_INFO").base.base_logo
+					: "img/logo.png";
 			// let base_logo = baseInFo!==null?baseInFo.base.base_logo:'img/logo.png';
-			return base_logo
+			return base_logo;
 		},
 		ismobile() {
-			return this.$store.state.global.ismobile
+			return this.$store.state.global.ismobile;
 		},
 		layout() {
-			return this.$store.state.global.layout
+			return this.$store.state.global.layout;
 		},
 		layoutTags() {
-			return this.$store.state.global.layoutTags
+			return this.$store.state.global.layoutTags;
 		},
 		menuIsCollapse() {
-			return this.$store.state.global.menuIsCollapse
-		}
+			return this.$store.state.global.menuIsCollapse;
+		},
 	},
 	created() {
-		document.title = this.$store.state.global.baseName
+		document.title = this.$store.state.global.baseName;
 		this.onLayoutResize();
-		window.addEventListener('resize', this.onLayoutResize);
+		window.addEventListener("resize", this.onLayoutResize);
 		var menu = this.$router.sc_getMenu();
+		// console.log("menu", menu);
 		this.menu = this.filterUrl(menu);
-		this.showThis()
+		// console.log("this.menu", this.menu);
+		this.showThis();
 	},
 	watch: {
 		$route() {
-			this.showThis()
+			this.showThis();
 		},
 		layout: {
 			handler(val) {
-				document.body.setAttribute('data-layout', val)
+				document.body.setAttribute("data-layout", val);
 			},
 			immediate: true,
-		}
+		},
 	},
 	methods: {
 		openSetting() {
 			this.settingDialog = true;
 		},
 		onLayoutResize() {
-			this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
+			this.$store.commit("SET_ismobile", document.body.clientWidth < 992);
 		},
 		//路由监听高亮
 		showThis() {
-			this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
+			function hasPerm(perms_need, perms_have) {
+				let has = false;
+				for (var m = 0; m < perms_need.length; m++) {
+					if (perms_have.indexOf(perms_need[m]) > -1) {
+						has = true;
+					}
+				}
+				return has;
+			}
+			this.pmenu = this.$route.meta.breadcrumb
+				? this.$route.meta.breadcrumb[0]
+				: {};
+			let lists = this.pmenu.children;
+			let perms = this.$TOOL.data.get("PERMISSIONS") || [];
+			for (var i = 0; i < lists.length; i++) {
+				if (lists[i].meta && lists[i].meta.perms) {
+					let has = hasPerm(lists[i].meta.perms, perms);
+					if (!has) {
+						lists.splice(i, 1);
+					}
+				}
+			}
+			// console.log("this.pmenu.children", this.pmenu.children);
 			this.nextMenu = this.filterUrl(this.pmenu.children);
 			this.$nextTick(() => {
 				this.active = this.$route.meta.active || this.$route.fullPath;
-			})
+			});
 		},
 		//点击显示
 		showMenu(route) {
 			this.pmenu = route;
 			this.nextMenu = this.filterUrl(route.children);
-			if ((!route.children || route.children.length == 0) && route.component) {
-				this.$router.push({ path: route.path })
+			if (
+				(!route.children || route.children.length == 0) &&
+				route.component
+			) {
+				this.$router.push({ path: route.path });
 			}
 		},
 		//转换外部链接的路由
 		filterUrl(map) {
-			var newMap = []
-			map && map.forEach(item => {
-				item.meta = item.meta ? item.meta : {};
-				//处理隐藏
-				if (item.meta.hidden || item.meta.type == "button") {
-					return false
-				}
-				//处理http
-				if (item.meta.type == 'iframe') {
-					item.path = `/i/${item.name}`;
-				}
-				//递归循环
-				if (item.children && item.children.length > 0) {
-					item.children = this.filterUrl(item.children)
-				}
-				newMap.push(item)
-			})
+			var newMap = [];
+			map &&
+				map.forEach((item) => {
+					item.meta = item.meta ? item.meta : {};
+					//处理隐藏
+					if (item.meta.hidden || item.meta.type == "button") {
+						return false;
+					}
+					//处理http
+					if (item.meta.type == "iframe") {
+						item.path = `/i/${item.name}`;
+					}
+					//递归循环
+					if (item.children && item.children.length > 0) {
+						item.children = this.filterUrl(item.children);
+					}
+					newMap.push(item);
+				});
 			return newMap;
 		},
 		//退出最大化
 		exitMaximize() {
-			document.getElementById('app').classList.remove('main-maximize')
-		}
-	}
-}
+			document.getElementById("app").classList.remove("main-maximize");
+		},
+	},
+};
 </script>