From b67a8f8de562416d4cfc5871188c78ea86881777 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 11 May 2021 17:06:12 +0800
Subject: [PATCH] UP

---
 src/layout/components/head.vue  | 14 +++++++-
 src/layout/components/sideM.vue | 58 +++++++++++++++++++++++++++++++++
 src/layout/index.vue            | 40 ++++++++++++++++++++---
 src/store/modules/global.js     | 10 ++++++
 4 files changed, 117 insertions(+), 5 deletions(-)
 create mode 100644 src/layout/components/sideM.vue
 create mode 100644 src/store/modules/global.js
diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
index dbdc3244..0020b4f9 100644
--- a/src/layout/components/head.vue
+++ b/src/layout/components/head.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="adminui-header">
 		<div class="left-panel">
-			<el-breadcrumb separator-class="el-icon-arrow-right">
+			<div v-if="ismobile" class="mobile-nav-icon panel-item" @click="mobileNav">
+				<i class="el-icon-menu"></i>
+			</div>
+			<el-breadcrumb v-if="!ismobile" separator-class="el-icon-arrow-right">
 				<template v-for="(item) in breadList" v-bind:key="item" >
 					<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
 				</template>
@@ -92,6 +95,11 @@
 			this.userNameF = this.userName.substring(0,1);
 			this.getBreadcrumb();
 		},
+		computed:{
+			ismobile(){
+				return this.$store.state.global.ismobile
+			}
+		},
 		watch: {
 			$route() {
 				this.getBreadcrumb();
@@ -122,6 +130,10 @@
 			//标记已读
 			markRead(){
 				this.msgList = []
+			},
+			//移动端打开菜单，暴露父组件事件
+			mobileNav(){
+				this.$emit('mobile-nav')
 			}
 		}
 	}
diff --git a/src/layout/components/sideM.vue b/src/layout/components/sideM.vue
new file mode 100644
index 00000000..5da30dd3
--- /dev/null
+++ b/src/layout/components/sideM.vue
@@ -0,0 +1,58 @@
+<template>
+	<el-menu :default-active="$route.fullPath" @select="select" router>
+		<NavMenu :navMenus="menu"></NavMenu>
+	</el-menu>
+</template>
+
+<script>
+	import NavMenu from './NavMenu.vue';
+
+	export default {
+		components: {
+			NavMenu
+		},
+		data() {
+			return {
+				menu: [],
+			}
+		},
+		created: function() {
+			var menu = this.$TOOL.data.get("user").menuList;
+			var home = this.$router.options.routes[0].children[0];
+			menu.unshift(home);
+			this.menu = this.filterUrl(menu)
+		},
+		setup() {
+
+		},
+		watch: {
+
+		},
+		methods: {
+			select(){
+				this.$parent.$el.click()
+			},
+			//转换外部链接的路由
+			filterUrl(map){
+				map.forEach((item,index) => {
+					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						map.splice(index, 1);
+					}
+					//处理http
+					if(item.path.startsWith('http') && item.meta.target!='_blank'){
+						item.path = `/${encodeURIComponent(item.path)}`;
+					}
+					//递归循环
+					if(item.children&&item.children.length > 0){
+						this.filterUrl(item.children);
+					}
+
+				})
+
+				return map;
+			}
+		}
+	}
+</script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 65dee27e..6828dddf 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,28 +1,60 @@
 <template>
-	<Side></Side>
+	<Side v-if="!ismobile"></Side>
 
 	<div class="aminui-body el-container">
-		<Head></Head>
-		<Tags></Tags>
+		<Head @mobile-nav="mobileNav"></Head>
+		<Tags v-if="!ismobile"></Tags>
 		<div class="adminui-main" id="adminui-main">
 			<router-view></router-view>
 		</div>
 	</div>
 
+	<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="mobileNavBox" direction="ltr" :with-header="false" append-to-body destroy-on-close>
+		<SideM></SideM>
+	</el-drawer>
+
 </template>
 
 <script>
 	import Side from './components/side.vue';
+	import SideM from './components/sideM.vue';
 	import Head from './components/head.vue';
 	import Tags from './components/tags.vue';
 
 	export default {
 		name: 'index',
-		setup() {},
 		components: {
 			Side,
+			SideM,
 			Head,
 			Tags
+		},
+		data() {
+			return {
+				mobileNavBox: false
+			}
+		},
+		computed:{
+			ismobile(){
+				return this.$store.state.global.ismobile
+			}
+		},
+		mounted() {
+			this.onLayoutResize();
+			window.addEventListener('resize', this.onLayoutResize);
+		},
+		methods: {
+			onLayoutResize(){
+				const clientWidth = document.body.clientWidth;
+				if(clientWidth < 992){
+					this.$store.commit("SET_ismobile", true)
+				}else{
+					this.$store.commit("SET_ismobile", false)
+				}
+			},
+			mobileNav(){
+				this.mobileNavBox = true
+			}
 		}
 	}
 </script>
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
new file mode 100644
index 00000000..479d9012
--- /dev/null
+++ b/src/store/modules/global.js
@@ -0,0 +1,10 @@
+export default {
+	state: {
+		ismobile: false,
+	},
+	mutations: {
+		SET_ismobile(state, key){
+			state.ismobile = key
+		}
+	}
+}
