From fe1688c7a36812b5790ffdec380f0d4526716aca Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Fri, 23 Apr 2021 15:46:10 +0800
Subject: [PATCH] UP

---
 public/json/user.json          |  13 +++--
 src/layout/components/side.vue |  19 +++----
 src/layout/components/tags.vue |  35 +++++-------
 src/layout/index.vue           |   1 -
 src/router/index.js            |   1 -
 src/store/index.js             |  15 +++--
 src/store/modules/viewTags.js  |  31 ++++++++++
 src/style/style.less           |   8 ++-
 src/views/home.vue             |  83 +++++++++++++--------------
 src/views/list.vue             | 100 +++++++++++++++++++++++++++++++--
 src/views/login.vue            |   9 ++-
 src/views/show.vue             |  12 +++-
 12 files changed, 229 insertions(+), 98 deletions(-)
 create mode 100644 src/store/modules/viewTags.js

diff --git a/public/json/user.json b/public/json/user.json
index 0af42750..a3b01355 100644
--- a/public/json/user.json
+++ b/public/json/user.json
@@ -15,14 +15,14 @@
 				"children": []
 			},
 			{
-				"name": "layout2",
-				"path": "/layout",
+				"name": "template",
+				"path": "/template",
 				"meta": {
-					"title": "组件",
+					"title": "模板",
 					"icon": "el-icon-files"
 				},
 				"children": [{
-						"path": "/layout/list",
+						"path": "/template/list",
 						"name": "list",
 						"meta": {
 							"title": "列表"
@@ -30,10 +30,11 @@
 						"component": "list"
 					},
 					{
-						"path": "/layout/show",
+						"path": "/template/show/:id",
 						"name": "show",
 						"meta": {
-							"title": "详情"
+							"title": "详情",
+							"hidden": true
 						},
 						"component": "show"
 					}
diff --git a/src/layout/components/side.vue b/src/layout/components/side.vue
index 1421612e..bbb2783b 100644
--- a/src/layout/components/side.vue
+++ b/src/layout/components/side.vue
@@ -58,27 +58,22 @@
 			//点击显示
 			showMenu(route) {
 				this.pmenu = route;
-				this.nextMenu = route.children;
-			},
-			//根据path获取
-			getRoute(path, menu){
-				for (var item of menu) {
-					if (item.path == path) {
-						return item;
-					}
-					if (item.children) {
-						this.getRoute(path, item.children);
-					}
-				}
+				this.nextMenu = this.filterUrl(route.children);
 			},
 			//转换外部链接的路由
 			filterUrl(map){
 				var newMap = []
 				map.forEach(item => {
 					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						return false
+					}
+					//处理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);
 					}
diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index 442b8db0..bd9f3f25 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -9,14 +9,15 @@
 			</li>
 		</ul>
 	</div>
-
-	<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
-		<li @click="refreshTab()">刷新</li>
-		<hr>
-		<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">关闭标签</li>
-		<li @click="closeOtherTabs()">关闭其他标签</li>
-	</ul>
-
+	
+	<transition name="el-zoom-in-top">
+		<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
+			<li @click="refreshTab()">刷新</li>
+			<hr>
+			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">关闭标签</li>
+			<li @click="closeOtherTabs()">关闭其他标签</li>
+		</ul>
+	</transition>
 </template>
 
 <style>
@@ -66,7 +67,7 @@
 				contextMenuItem: null,
 				left: 0,
 				top: 0,
-				tagList: []
+				tagList: this.$store.state.viewTags.viewTags
 			}
 		},
 		props: {},
@@ -92,21 +93,16 @@
 				}
 			}
 		},
-		mounted() {
+		created() {
 			this.addViewTags(this.$router.options.routes[0].children[0].children[0]);
 			this.addViewTags(this.$route);
 		},
 		methods: {
 			//增加tag
 			addViewTags(route) {
-				var ishas = this.tagList.some(item=>{
-					if(item.path == route.path){
-						return true
-					}
-				})
-				if(!ishas){
+				if(route.name){
+					this.$store.commit("pushViewTags",route)
 					this.$store.commit("pushKeepLive",route.name)
-					this.tagList.push(route)
 				}
 			},
 			//高亮tag
@@ -115,11 +111,10 @@
 			},
 			//关闭tag
 			closeSelectedTag(tag) {
-				const newtagList = this.tagList.filter(item => item.path !== tag.path)
-				this.tagList = newtagList;
+				this.$store.commit("removeViewTags", tag)
 				this.$store.commit("removeKeepLive", tag.name)
 				if (this.isActive(tag)) {
-					const latestView = newtagList.slice(-1)[0]
+					const latestView = this.tagList.slice(-1)[0]
 					if (latestView) {
 						this.$router.push(latestView)
 					} else {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4282d9cf..f07da65a 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -6,7 +6,6 @@
 		<Tags></Tags>
 		<div class="adminui-main">
 			<router-view></router-view>
-			<!-- <router-view :key="$route.fullPath"></router-view> -->
 		</div>
 	</div>
 
diff --git a/src/router/index.js b/src/router/index.js
index 5227e8a2..881f713e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,7 +34,6 @@ const routes = [{
 		]
 	},
 	{
-		name: "login",
 		path: "/login",
 		component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
 		meta: {
diff --git a/src/store/index.js b/src/store/index.js
index 51bb8386..6cb63b07 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,15 @@
+/**
+ * @description 自动import导入所有 vuex 模块
+ */
+
 import { createStore } from 'vuex';
-import keepAlive from './modules/keepAlive';
+
+const files = require.context('./modules', false, /\.js$/);
+const modules = {}
+files.keys().forEach((key) => {
+	modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
 
 export default createStore({
-	modules: {
-		keepAlive
-	}
+	modules
 });
diff --git a/src/store/modules/viewTags.js b/src/store/modules/viewTags.js
new file mode 100644
index 00000000..56d70601
--- /dev/null
+++ b/src/store/modules/viewTags.js
@@ -0,0 +1,31 @@
+export default {
+	state: {
+		viewTags: []
+	},
+	mutations: {
+		pushViewTags(state, route){
+			let target = state.viewTags.find((item) => item.path === route.path)
+			let isName = route.name
+			if(!target && isName){
+				state.viewTags.push(route)
+			}
+		},
+		removeViewTags(state, route){
+			state.viewTags.forEach((item, index) => {
+				if (item.path === route.path){
+					state.viewTags.splice(index, 1)
+				}
+			})
+		},
+		updateViewTags(state, route){
+			state.viewTags.forEach((item) => {
+				if (item.path == route.path){
+					item = Object.assign(item, route)
+				}
+			})
+		},
+		clearViewTags(state){
+			state.viewTags = []
+		}
+	}
+}
diff --git a/src/style/style.less b/src/style/style.less
index 4763fbcd..2be42c3e 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -56,9 +56,15 @@
 .adminui-tags li.active a {color: #fff;}
 
 
-.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;padding: 20px;}
+.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;}
 
 
 .el-menu {border: none!important;}
 .el-menu-item.is-active {background: #ecf5ff;}
 .el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
+
+.el-container {height: 100%;}
+.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
+.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
+.el-main {padding:15px;}
+.el-pagination {margin-top: 20px;}
\ No newline at end of file
diff --git a/src/views/home.vue b/src/views/home.vue
index cac22a3e..7b4f891c 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,47 +1,48 @@
 <template>
-	<el-row :gutter="20">
-		<el-col :span="24">
-			<el-card shadow="never">
-				<div class="welTop">
-					<div class="icon">
-						<el-avatar :size="60" src="images/avatar.jpg"></el-avatar>
-					</div>
-					<div class="main">
-						<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
-						<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
-					</div>
-					<div class="icons">
-						<div class="avatar-list">
-							<el-tooltip content="Sakuya" placement="top">
-								<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
-							</el-tooltip>
-							<el-tooltip content="Lolowan" placement="top">
-								<el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar>
-							</el-tooltip>
-							<el-tooltip content="Ali" placement="top">
-								<el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar>
-							</el-tooltip>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :span="24">
+				<el-card shadow="never">
+					<div class="welTop">
+						<div class="icon">
+							<el-avatar :size="60" src="images/avatar.jpg"></el-avatar>
+						</div>
+						<div class="main">
+							<h2>嗨~ admin，忙碌了一上午，记得吃午饭哦。</h2>
+							<p>最近更新：动态面包屑，外部链接，Iframe链接等</p>
+						</div>
+						<div class="icons">
+							<div class="avatar-list">
+								<el-tooltip content="Sakuya" placement="top">
+									<el-avatar class="avatar" :size="30" src="images/avatar.jpg"></el-avatar>
+								</el-tooltip>
+								<el-tooltip content="Lolowan" placement="top">
+									<el-avatar class="avatar" :size="30" src="images/avatar2.gif"></el-avatar>
+								</el-tooltip>
+								<el-tooltip content="Ali" placement="top">
+									<el-avatar class="avatar" :size="30" src="images/avatar3.gif"></el-avatar>
+								</el-tooltip>
+							</div>
+							<p>Participants</p>
 						</div>
-						<p>Participants</p>
 					</div>
-				</div>
-			</el-card>
-		</el-col>
-	</el-row>
-
-	<el-row :gutter="20">
-		<el-col :span="24">
-			<el-card shadow="never" header="User Permissions">
-				<el-tag v-if="$HAS('user.add')">user.add</el-tag>
-				<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
-				<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
-				<el-tag v-if="$HAS('list.add')">list.add</el-tag>
-				<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
-				<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
-			</el-card>
-		</el-col>
-	</el-row>
+				</el-card>
+			</el-col>
+		</el-row>
 
+		<el-row :gutter="15">
+			<el-col :span="24">
+				<el-card shadow="never" header="User Permissions">
+					<el-tag v-if="$HAS('user.add')">user.add</el-tag>
+					<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
+					<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
+					<el-tag v-if="$HAS('list.add')">list.add</el-tag>
+					<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
+					<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
 </template>
 
 <script>
@@ -56,7 +57,7 @@
 </script>
 
 <style scoped>
-	.el-row {margin-bottom:20px;}
+	.el-row {margin-bottom:15px;}
 	.el-tag+.el-tag {margin-left: 10px;}
 
 
diff --git a/src/views/list.vue b/src/views/list.vue
index 38db5280..4e88111a 100644
--- a/src/views/list.vue
+++ b/src/views/list.vue
@@ -1,8 +1,61 @@
 <template>
-	<div>
-		<el-empty description="LIST"></el-empty>
-		<el-input v-model="input" placeholder="请输入内容"></el-input>
-	</div>
+	<el-container>
+		<el-aside width="200px">
+			<div>
+				<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
+			</div>
+		</el-aside>
+		<el-container>
+
+			<el-header>
+				<el-button type="primary">主要按钮</el-button>
+				<el-button disabled>默认按钮</el-button>
+				<el-button disabled>默认按钮</el-button>
+				<el-dropdown style="margin-left: 10px;">
+					<el-button>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item>黄金糕</el-dropdown-item>
+							<el-dropdown-item>狮子头</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</el-header>
+
+			<el-main id="tableMain">
+				<el-card shadow="never" @selection-change='handleSelectionChange'>
+					<el-table :data="tableData" row-key="name" stripe default-expand-all :height="tableHeight">
+						<el-table-column type="selection" width="50"></el-table-column>
+						<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
+						<el-table-column label="图标" width="80">
+							<template #default="scope">
+								<i :class="scope.row.meta.icon"></i>
+							</template>
+						</el-table-column>
+						<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
+						<el-table-column label="路由地址" prop="path" width="200">
+							<template #default="scope">
+								<el-tag>{{scope.row.path}}</el-tag>
+							</template>
+						</el-table-column>
+						<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
+						<el-table-column label="是否隐藏" prop="meta.hidden">
+							<template #default="scope">
+								{{ scope.row.meta.hidden?"是":"否" }}
+							</template>
+						</el-table-column>
+
+						<el-table-column label="操作" fixed="right" width="100">
+							<template>
+								<el-button type="text" size="small">编辑</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+					<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="1000"></el-pagination>
+				</el-card>
+			</el-main>
+		</el-container>
+	</el-container>
 </template>
 
 <script>
@@ -10,11 +63,46 @@
 		name: 'list',
 		data() {
 			return {
-				input: ""
+				data: [
+					{label: '桌面'},
+					{label: '下载'},
+					{label: '文档'},
+					{label: '图片'},
+					{label: '磁盘', id: 1, children:[
+						{label: 'Windows (C)'},
+						{label: '本地磁盘 (D)'},
+						{label: '本地磁盘 (E)'}
+					]}
+				],
+				tableHeight: '0',
+				tableData: []
+			}
+		},
+		created() {
+			this.tableData = this.$TOOL.data.get("user").menuList;
+		},
+		mounted(){
+			this.$nextTick(() => {
+				this.setTableHeight()
+			})
+			window.onresize = ()=>{
+				this.setTableHeight()
+			}
+		},
+		methods: {
+			setTableHeight(){
+				this.tableHeight = this.$el.querySelector("#tableMain").offsetHeight - 40 - 78
+			},
+			handleNodeClick(data){
+				console.log(data);
+			},
+			handleSelectionChange(val) {
+				console.log(val);
 			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 31dd1900..ea454600 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -17,12 +17,11 @@
 			login: async function() {
 				var userInfo = await this.$API.user.info();
 				this.$TOOL.data.set("user", userInfo.data);
-				this.$router.replace({path: '/'});
+				this.$router.replace({
+					path: '/'
+				});
 				//开启欢迎词
-				this.$notify.success({
-					title: '登录成功',
-					message: '欢迎登录'
-				})
+				this.$message.success("Login Success 登录成功")
 			}
 		}
 	}
diff --git a/src/views/show.vue b/src/views/show.vue
index 108ad6d7..e5916476 100644
--- a/src/views/show.vue
+++ b/src/views/show.vue
@@ -10,12 +10,22 @@
 		name: 'show',
 		data() {
 			return {
+				id: this.$route.params.id,
 				input: ""
 			}
+		},
+		mounted: function() {
+			//修改tags title
+			this.$store.commit("updateViewTags", {
+				path: this.$route.path,
+				meta: {
+					title:"详情ID="+this.id
+				}
+			})
 		}
 	}
 </script>
 
 <style scoped>
 	.main {width:200px;}
-</style>
\ No newline at end of file
+</style>