wen
/
jialuomaadmin
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity
Browse Source

修改。增加左侧菜单栏点击父菜单也可显示文件内容，修复外链跳转当前页面404问题

master
wen 2 years ago
parent
247edc4eae
commit
78f92bf23f
12 changed files with 82 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 6
      src/components/Breadcrumb/index.vue
  3. 1
      src/layout/components/Sidebar/Link.vue
  4. 2
      src/layout/components/Sidebar/Logo.vue
  5. 26
      src/layout/components/Sidebar/SidebarItem.vue
  6. 8
      src/layout/components/Sidebar/index.vue
  7. 12
      src/layout/components/Sidebar/leftMenusData.js
  8. 5
      src/peizhi.js
  9. 109
      src/router/index.js
  10. 2
      src/styles/element-ui.scss
  11. 17
      src/styles/sidebar.scss
  12. 2
      src/views/subfile/index.vue

1
package.json
Unescape View File

@ -15,6 +15,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.1.2", "axios": "^1.1.2",
"core-js": "3.6.5",
"element-ui": "2.13.2", "element-ui": "2.13.2",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",

6
src/components/Breadcrumb/index.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator=">"> <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
@ -30,11 +30,13 @@ export default {
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
// only show routes with meta.title // only show routes with meta.title
let matched = this.$route.matched.filter(item => item.meta && item.meta.title) let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
console.log(this.$route);
const first = matched[0] const first = matched[0]
if (!this.isDashboard(first)) { if (!this.isDashboard(first)) {
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) //matched = [{ path: '/homepage', meta: { title: 'Dashboard' }}].concat(matched)
matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched) matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched)
} }

1
src/layout/components/Sidebar/Link.vue
Unescape View File

@ -20,6 +20,7 @@ export default {
}, },
type() { type() {
if (this.isExternal) { if (this.isExternal) {
//console.log(this.isExternal);
return 'a' return 'a'
} }
return 'router-link' return 'router-link'

2
src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -25,7 +25,7 @@ export default {
data() { data() {
return { return {
title: '嘉洛马', title: '嘉洛马',
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' logo: 'https://static.jialuoma.cn/img/logo_jialuoma.png'
} }
} }
} }

26
src/layout/components/Sidebar/SidebarItem.vue
Unescape View File

@ -5,13 +5,26 @@
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</app-link> </app-link>
</template> </template>
<template v-else> <template v-else>
<a v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)" > <a class="el_submenu_link" :index="resolvePath(item.path)" v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)"></a>
<el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
<!-- <a v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)" >
<el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
@ -38,7 +51,7 @@
:base-path="resolvePath(child.path)" :base-path="resolvePath(child.path)"
class="nest-menu" class="nest-menu"
/> />
</el-submenu> </el-submenu> -->
</template > </template >
</div> </div>
</template> </template>
@ -102,14 +115,19 @@ export default {
return false return false
}, },
resolvePath(routePath) { resolvePath(routePath) {
if (isExternal(routePath)) { if (isExternal(routePath)) {
return routePath return routePath
} }
//console.log(this.basePath);
//console.log(routePath);
if (isExternal(this.basePath)) { if (isExternal(this.basePath)) {
//console.log(this.basePath);
return this.basePath return this.basePath
} }
return path.resolve(this.basePath, routePath) return path.resolve(this.basePath, routePath)
} }
} }
} }
</script> </script>

8
src/layout/components/Sidebar/index.vue
Unescape View File

@ -3,7 +3,6 @@
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:router="true"
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="variables.menuBg" :background-color="variables.menuBg"
@ -53,12 +52,9 @@ export default {
const route = this.$route const route = this.$route
const { meta, path } = route const { meta, path } = route
const menusindex = window.location.href const menusindex = window.location.href
console.log(1);
// 因为菜单栏的生成和路由是解耦的，因为动态获取以及添加的菜单都是用的同一个path带不同参数，路由没法获取，所以通过获取地址来选中 // 因为菜单栏的生成和路由是解耦的，因为动态获取以及添加的菜单都是用的同一个path带不同参数，路由没法获取，所以通过获取地址来选中
//let getcan = menusindex.split('?id');
//console.log(menusindex.indexOf('?id'));
if (menusindex.indexOf('?id') != -1) { if (menusindex.indexOf('?id') != -1) {
//console.log(menusindex.split('/#'));
return menusindex.split('/#')[1] return menusindex.split('/#')[1]
} }
@ -89,7 +85,7 @@ export default {
// //menusdata[0].children = [] // //menusdata[0].children = []
// } // }
newMenu = { newMenu = {
path: '/subfile?id='+item.id, path: '/filemange/subfile?id='+item.id,
meta: { title: item.directory }, meta: { title: item.directory },
class: 'file', class: 'file',
children:[] children:[]

12
src/layout/components/Sidebar/leftMenusData.js
Unescape View File

@ -36,14 +36,14 @@ var menusdata = [
{ {
id: '1', id: '1',
path: '/filemange', path: '/filemange/index',
class: 'file', class: 'file',
meta: { title: '文件管理', icon: 'dashboard' }, meta: { title: '文件管理', icon: 'el-icon-s-help' },
children:[] children:[]
}, },
{ {
path: '/usermange', path: '/usermange/index',
meta: { title: '用户管理', icon: 'dashboard' } meta: { title: '用户管理', icon: 'form' }
}, },
{ {
@ -65,8 +65,8 @@ var menusdata = [
] ]
}, },
{ {
path: 'https://dev.filesite.io/', path: 'https://dev.filesite.io',
meta: { title: '前端展示页面', icon: 'dashboard' } meta: { title: '前端展示页面', icon: 'link' }
} }
] ]

5
src/peizhi.js
Unescape View File

@ -0,0 +1,5 @@
let peizhi = {
dizhi: 'http://192.168.0.100'
}
export default peizhi

109
src/router/index.js
Unescape View File

@ -46,6 +46,7 @@ export const constantRoutes = [
{ {
path: '/', path: '/',
component: Layout, component: Layout,
redirect: '/homepage',
children: [{ children: [{
path: 'homepage', path: 'homepage',
name: 'Homepage', name: 'Homepage',
@ -54,13 +55,14 @@ export const constantRoutes = [
}] }]
}, },
{ {
path: '/', path: '/filemange',
component: Layout, component: Layout,
redirect: '/filemange/index',
meta: { title: '文件管理', icon: 'el-icon-s-help' }, meta: { title: '文件管理', icon: 'el-icon-s-help' },
children: [ children: [
{ {
path: 'filemange', path: 'index',
name: 'filemange', name: 'Filemange',
component: () => import('@/views/filemange/index'), component: () => import('@/views/filemange/index'),
meta: { title: '', icon: 'dashboard' } meta: { title: '', icon: 'dashboard' }
}, },
@ -73,28 +75,22 @@ export const constantRoutes = [
] ]
}, },
{ {
path: '/', path: '/usermange',
component: Layout, component: Layout,
children: [{ name: 'usermange',
path: 'usermange', children: [
name: 'Usermange', {
component: () => import('@/views/usermanage/index'), path: 'index',
meta: { title: '用户管理', icon: 'dashboard' } name: 'Usermange',
}] component: () => import('@/views/usermanage/index'),
meta: { title: '用户管理', icon: 'form' }
}
]
}, },
// {
// path: '/',
// component: Layout,
// children: [{
// path: 'subfile',
// name: 'Subfile',
// component: () => import('@/views/subfile/index'),
// meta: { title: '文件管理', icon: 'dashboard' }
// }]
// },
{ {
path: '/systme', path: '/systme',
component: Layout, component: Layout,
redirect: '/systme/changepass',
name: 'systme', name: 'systme',
meta: { title: '系统管理', icon: 'el-icon-s-help' }, meta: { title: '系统管理', icon: 'el-icon-s-help' },
children: [ children: [
@ -118,77 +114,24 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: 'external-link', { path: '*', redirect: '/404', hidden: true }
component: Layout,
children: [
{
path: 'https://dev.filesite.io/',
meta: { title: '前端展示页面', icon: 'link' }
}
]
},
// 404 page must be placed at the end !!! // 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
] ]
const createRouter = (a) => new Router({ const createRouter = () => new Router({
//mode: 'history', // require service support //mode: 'history', // require service supportmode: 'history',
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: a routes: constantRoutes
}) })
//let router const router = createRouter()
const router = createRouter(constantRoutes)
// 动态添加路由
// import { mirlist } from '@/api/user'
// let pachs = () => import('@/views/filemange/index');
// mirlist().then(response => {
// let datamain = response.data;
// //routesData(datamain.data.menus);
// //console.log(response);
// datamain.data.menus.forEach(item => {
// menus.push(
// {
// path: item.directory,
// name: item.directory,
// component: pachs,
// meta: { title: item.directory, icon: 'dashboard' }
// }
// );
// });
// //console.log(menus);
// //router = createRouter(constantRoutes)
// console.log(router.options);
// router = createRouter(constantRoutes)
// // {
// // path: 'filemange',
// // name: 'Filemange',
// // component: () => import('@/views/filemange/index'),
// // meta: { title: '文件管理', icon: 'dashboard' }
// // }
// }).catch(function (error) {
// Message({
// showClose: true,
// message: error,
// type: 'error'
// });
// });
//router = createRouter(constantRoutes)
//router.addRoutes(constantRoutes);
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() { export function resetRouter() {
const newRouter = createRouter() const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router 重置路由器 router.matcher = newRouter.matcher // reset router
} }
// router.reloadRouter = function () {
// router.matcher = new Router({
// mode: "history",
// constantRoutes
// }).matcher
// }
export default router export default router

2
src/styles/element-ui.scss
Unescape View File

@ -47,3 +47,5 @@
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
} }
.el-submenu__title i{color:#FFF;}

17
src/styles/sidebar.scss
Unescape View File

@ -20,6 +20,10 @@
z-index: 2002; z-index: 2002;
overflow: hidden; overflow: hidden;
.el_submenu_link{width:76%;height:56px;z-index:100;position:absolute;left:0;top:0;bottom:0;right:10%;}
.el_submenu_link:hover{background-color:rgba(0, 0, 0, 0.3);}
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@ -67,14 +71,15 @@
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
} }
.el-menu>div{position:relative;}
// menu hover // menu hover
.submenu-title-noDropdown, // .submenu-title-noDropdown,
.el-submenu__title { // .el-submenu__title {
&:hover { // &:hover {
background-color: $menuHover !important; // background-color: $menuHover !important;
} // }
} // }
.is-active>.el-submenu__title { .is-active>.el-submenu__title {
color: $subMenuActiveText !important; color: $subMenuActiveText !important;

2
src/views/subfile/index.vue
Unescape View File

@ -14,7 +14,7 @@
<el-button type="primary" icon="el-icon-search">搜索</el-button> <el-button type="primary" icon="el-icon-search">搜索</el-button>
</div> </div>
<div> <div>
</div> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save