欧阳子桐 / RuoYi · 提交

转到一个项目

作者 RuoYi
提交 6130bebbb37e309633b8b4165cb9037bb5258330 1 个父辈 9f944c04

开启TopNav没有子菜单情况隐藏侧边栏

内嵌 并排对比
正在显示 27 个修改的文件 包含 57 行增加 和 52 行删除
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 #foreach($column in $columns) 4 #foreach($column in $columns)
5 #if($column.query) 5 #if($column.query)
6 #set($dictType=$column.dictType) 6 #set($dictType=$column.dictType)
@@ -176,7 +176,7 @@ public class SysMenuServiceImpl implements ISysMenuService @@ -176,7 +176,7 @@ public class SysMenuServiceImpl implements ISysMenuService
176 else if (menu.getParentId().intValue() == 0 && isInnerLink(menu)) 176 else if (menu.getParentId().intValue() == 0 && isInnerLink(menu))
177 { 177 {
178 router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon())); 178 router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon()));
179 - router.setPath("/inner"); 179 + router.setPath("/");
180 List<RouterVo> childrenList = new ArrayList<RouterVo>(); 180 List<RouterVo> childrenList = new ArrayList<RouterVo>();
181 RouterVo children = new RouterVo(); 181 RouterVo children = new RouterVo();
182 String routerPath = innerLinkReplaceEach(menu.getPath()); 182 String routerPath = innerLinkReplaceEach(menu.getPath());
@@ -7,6 +7,10 @@ @@ -7,6 +7,10 @@
7 position: relative; 7 position: relative;
8 } 8 }
9 9
  10 + .sidebarHide {
  11 + margin-left: 0!important;
  12 + }
  13 +
10 .sidebar-container { 14 .sidebar-container {
11 -webkit-transition: width .28s; 15 -webkit-transition: width .28s;
12 transition: width 0.28s; 16 transition: width 0.28s;
@@ -71,7 +71,7 @@ export default { @@ -71,7 +71,7 @@ export default {
71 for (var item in router.children) { 71 for (var item in router.children) {
72 if (router.children[item].parentPath === undefined) { 72 if (router.children[item].parentPath === undefined) {
73 if(router.path === "/") { 73 if(router.path === "/") {
74 - router.children[item].path = "/redirect/" + router.children[item].path; 74 + router.children[item].path = "/" + router.children[item].path;
75 } else { 75 } else {
76 if(!this.ishttp(router.children[item].path)) { 76 if(!this.ishttp(router.children[item].path)) {
77 router.children[item].path = router.path + "/" + router.children[item].path; 77 router.children[item].path = router.path + "/" + router.children[item].path;
@@ -87,22 +87,23 @@ export default { @@ -87,22 +87,23 @@ export default {
87 // 默认激活的菜单 87 // 默认激活的菜单
88 activeMenu() { 88 activeMenu() {
89 const path = this.$route.path; 89 const path = this.$route.path;
90 - let activePath = this.defaultRouter(); 90 + let activePath = path;
91 if (path.lastIndexOf("/") > 0) { 91 if (path.lastIndexOf("/") > 0) {
92 const tmpPath = path.substring(1, path.length); 92 const tmpPath = path.substring(1, path.length);
93 activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); 93 activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
  94 + this.$store.dispatch('app/toggleSideBarHide', false);
94 } else if ("/index" == path || "" == path) { 95 } else if ("/index" == path || "" == path) {
95 if (!this.isFrist) { 96 if (!this.isFrist) {
96 this.isFrist = true; 97 this.isFrist = true;
97 } else { 98 } else {
98 activePath = "index"; 99 activePath = "index";
99 } 100 }
  101 + this.$store.dispatch('app/toggleSideBarHide', true);
  102 + } else if(!this.$route.children) {
  103 + activePath = path;
  104 + this.$store.dispatch('app/toggleSideBarHide', true);
100 } 105 }
101 - var routes = this.activeRoutes(activePath);  
102 - if (routes.length === 0) {  
103 - activePath = this.currentIndex || this.defaultRouter()  
104 - this.activeRoutes(activePath);  
105 - } 106 + this.activeRoutes(activePath);
106 return activePath; 107 return activePath;
107 }, 108 },
108 }, 109 },
@@ -121,29 +122,21 @@ export default { @@ -121,29 +122,21 @@ export default {
121 const width = document.body.getBoundingClientRect().width / 3; 122 const width = document.body.getBoundingClientRect().width / 3;
122 this.visibleNumber = parseInt(width / 85); 123 this.visibleNumber = parseInt(width / 85);
123 }, 124 },
124 - // 默认激活的路由  
125 - defaultRouter() {  
126 - let router;  
127 - Object.keys(this.routers).some((key) => {  
128 - if (!this.routers[key].hidden) {  
129 - router = this.routers[key].path;  
130 - return true;  
131 - }  
132 - });  
133 - return router;  
134 - },  
135 // 菜单选择事件 125 // 菜单选择事件
136 handleSelect(key, keyPath) { 126 handleSelect(key, keyPath) {
137 this.currentIndex = key; 127 this.currentIndex = key;
  128 + const route = this.routers.find(item => item.path === key);
138 if (this.ishttp(key)) { 129 if (this.ishttp(key)) {
139 // http(s):// 路径新窗口打开 130 // http(s):// 路径新窗口打开
140 window.open(key, "_blank"); 131 window.open(key, "_blank");
141 - } else if (key.indexOf("/redirect") !== -1) {  
142 - // /redirect 路径内部打开  
143 - this.$router.push({ path: key.replace("/redirect", "") }); 132 + } else if (!route || !route.children) {
  133 + // 没有子路由路径内部打开
  134 + this.$router.push({ path: key });
  135 + this.$store.dispatch('app/toggleSideBarHide', true);
144 } else { 136 } else {
145 // 显示左侧联动菜单 137 // 显示左侧联动菜单
146 this.activeRoutes(key); 138 this.activeRoutes(key);
  139 + this.$store.dispatch('app/toggleSideBarHide', false);
147 } 140 }
148 }, 141 },
149 // 当前激活的路由 142 // 当前激活的路由
@@ -159,9 +152,8 @@ export default { @@ -159,9 +152,8 @@ export default {
159 if(routes.length > 0) { 152 if(routes.length > 0) {
160 this.$store.commit("SET_SIDEBAR_ROUTERS", routes); 153 this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
161 } 154 }
162 - return routes;  
163 }, 155 },
164 - ishttp(url) { 156 + ishttp(url) {
165 return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1 157 return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
166 } 158 }
167 }, 159 },
@@ -108,6 +108,7 @@ export default { @@ -108,6 +108,7 @@ export default {
108 value: val 108 value: val
109 }) 109 })
110 if (!val) { 110 if (!val) {
  111 + this.$store.dispatch('app/toggleSideBarHide', false);
111 this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes); 112 this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
112 } 113 }
113 } 114 }
1 <template> 1 <template>
2 <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> 2 <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
3 <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> 3 <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
4 - <sidebar class="sidebar-container"/>  
5 - <div :class="{hasTagsView:needTagsView}" class="main-container"> 4 + <sidebar v-if="!sidebar.hide" class="sidebar-container" />
  5 + <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
6 <div :class="{'fixed-header':fixedHeader}"> 6 <div :class="{'fixed-header':fixedHeader}">
7 <navbar /> 7 <navbar />
8 <tags-view v-if="needTagsView" /> 8 <tags-view v-if="needTagsView" />
@@ -164,6 +164,12 @@ export const dynamicRoutes = [ @@ -164,6 +164,12 @@ export const dynamicRoutes = [
164 } 164 }
165 ] 165 ]
166 166
  167 +// 防止连续点击多次路由报错
  168 +let routerPush = Router.prototype.push;
  169 +Router.prototype.push = function push(location) {
  170 + return routerPush.call(this, location).catch(err => err)
  171 +}
  172 +
167 export default new Router({ 173 export default new Router({
168 mode: 'history', // 去掉url中的# 174 mode: 'history', // 去掉url中的#
169 scrollBehavior: () => ({ y: 0 }), 175 scrollBehavior: () => ({ y: 0 }),
@@ -3,7 +3,8 @@ import Cookies from 'js-cookie' @@ -3,7 +3,8 @@ import Cookies from 'js-cookie'
3 const state = { 3 const state = {
4 sidebar: { 4 sidebar: {
5 opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, 5 opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
6 - withoutAnimation: false 6 + withoutAnimation: false,
  7 + hide: false
7 }, 8 },
8 device: 'desktop', 9 device: 'desktop',
9 size: Cookies.get('size') || 'medium' 10 size: Cookies.get('size') || 'medium'
@@ -30,6 +31,9 @@ const mutations = { @@ -30,6 +31,9 @@ const mutations = {
30 SET_SIZE: (state, size) => { 31 SET_SIZE: (state, size) => {
31 state.size = size 32 state.size = size
32 Cookies.set('size', size) 33 Cookies.set('size', size)
  34 + },
  35 + SET_SIDEBAR_HIDE: (state, status) => {
  36 + state.sidebar.hide = status
33 } 37 }
34 } 38 }
35 39
@@ -45,6 +49,9 @@ const actions = { @@ -45,6 +49,9 @@ const actions = {
45 }, 49 },
46 setSize({ commit }, size) { 50 setSize({ commit }, size) {
47 commit('SET_SIZE', size) 51 commit('SET_SIZE', size)
  52 + },
  53 + toggleSideBarHide({ commit }, status) {
  54 + commit('SET_SIDEBAR_HIDE', status)
48 } 55 }
49 } 56 }
50 57
@@ -22,12 +22,7 @@ const permission = { @@ -22,12 +22,7 @@ const permission = {
22 state.defaultRoutes = constantRoutes.concat(routes) 22 state.defaultRoutes = constantRoutes.concat(routes)
23 }, 23 },
24 SET_TOPBAR_ROUTES: (state, routes) => { 24 SET_TOPBAR_ROUTES: (state, routes) => {
25 - // 顶部导航菜单默认添加统计报表栏指向首页  
26 - const index = [{  
27 - path: 'index',  
28 - meta: { title: '统计报表', icon: 'dashboard' }  
29 - }]  
30 - state.topbarRouters = routes.concat(index); 25 + state.topbarRouters = routes
31 }, 26 },
32 SET_SIDEBAR_ROUTERS: (state, routes) => { 27 SET_SIDEBAR_ROUTERS: (state, routes) => {
33 state.sidebarRouters = routes 28 state.sidebarRouters = routes
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="任务名称" prop="jobName"> 4 <el-form-item label="任务名称" prop="jobName">
5 <el-input 5 <el-input
6 v-model="queryParams.jobName" 6 v-model="queryParams.jobName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="任务名称" prop="jobName"> 4 <el-form-item label="任务名称" prop="jobName">
5 <el-input 5 <el-input
6 v-model="queryParams.jobName" 6 v-model="queryParams.jobName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="登录地址" prop="ipaddr"> 4 <el-form-item label="登录地址" prop="ipaddr">
5 <el-input 5 <el-input
6 v-model="queryParams.ipaddr" 6 v-model="queryParams.ipaddr"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
4 <el-form-item label="登录地址" prop="ipaddr"> 4 <el-form-item label="登录地址" prop="ipaddr">
5 <el-input 5 <el-input
6 v-model="queryParams.ipaddr" 6 v-model="queryParams.ipaddr"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="系统模块" prop="title"> 4 <el-form-item label="系统模块" prop="title">
5 <el-input 5 <el-input
6 v-model="queryParams.title" 6 v-model="queryParams.title"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="参数名称" prop="configName"> 4 <el-form-item label="参数名称" prop="configName">
5 <el-input 5 <el-input
6 v-model="queryParams.configName" 6 v-model="queryParams.configName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
4 <el-form-item label="部门名称" prop="deptName"> 4 <el-form-item label="部门名称" prop="deptName">
5 <el-input 5 <el-input
6 v-model="queryParams.deptName" 6 v-model="queryParams.deptName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="字典名称" prop="dictType"> 4 <el-form-item label="字典名称" prop="dictType">
5 <el-select v-model="queryParams.dictType"> 5 <el-select v-model="queryParams.dictType">
6 <el-option 6 <el-option
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="字典名称" prop="dictName"> 4 <el-form-item label="字典名称" prop="dictName">
5 <el-input 5 <el-input
6 v-model="queryParams.dictName" 6 v-model="queryParams.dictName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
4 <el-form-item label="菜单名称" prop="menuName"> 4 <el-form-item label="菜单名称" prop="menuName">
5 <el-input 5 <el-input
6 v-model="queryParams.menuName" 6 v-model="queryParams.menuName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="公告标题" prop="noticeTitle"> 4 <el-form-item label="公告标题" prop="noticeTitle">
5 <el-input 5 <el-input
6 v-model="queryParams.noticeTitle" 6 v-model="queryParams.noticeTitle"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="岗位编码" prop="postCode"> 4 <el-form-item label="岗位编码" prop="postCode">
5 <el-input 5 <el-input
6 v-model="queryParams.postCode" 6 v-model="queryParams.postCode"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
4 <el-form-item label="用户名称" prop="userName"> 4 <el-form-item label="用户名称" prop="userName">
5 <el-input 5 <el-input
6 v-model="queryParams.userName" 6 v-model="queryParams.userName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
4 <el-form-item label="角色名称" prop="roleName"> 4 <el-form-item label="角色名称" prop="roleName">
5 <el-input 5 <el-input
6 v-model="queryParams.roleName" 6 v-model="queryParams.roleName"
1 <template> 1 <template>
2 <!-- 授权用户 --> 2 <!-- 授权用户 -->
3 <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body> 3 <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
4 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true"> 4 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
5 <el-form-item label="用户名称" prop="userName"> 5 <el-form-item label="用户名称" prop="userName">
6 <el-input 6 <el-input
7 v-model="queryParams.userName" 7 v-model="queryParams.userName"
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 </el-col> 27 </el-col>
28 <!--用户数据--> 28 <!--用户数据-->
29 <el-col :span="20" :xs="24"> 29 <el-col :span="20" :xs="24">
30 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 30 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
31 <el-form-item label="用户名称" prop="userName"> 31 <el-form-item label="用户名称" prop="userName">
32 <el-input 32 <el-input
33 v-model="queryParams.userName" 33 v-model="queryParams.userName"
1 <template> 1 <template>
2 <!-- 导入表 --> 2 <!-- 导入表 -->
3 <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body> 3 <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
4 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true"> 4 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
5 <el-form-item label="表名称" prop="tableName"> 5 <el-form-item label="表名称" prop="tableName">
6 <el-input 6 <el-input
7 v-model="queryParams.tableName" 7 v-model="queryParams.tableName"
1 <template> 1 <template>
2 <div class="app-container"> 2 <div class="app-container">
3 - <el-form :model="queryParams" ref="queryForm" size="small" inline="true" v-show="showSearch" label-width="68px"> 3 + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4 <el-form-item label="表名称" prop="tableName"> 4 <el-form-item label="表名称" prop="tableName">
5 <el-input 5 <el-input
6 v-model="queryParams.tableName" 6 v-model="queryParams.tableName"