Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-dev/pulls/157pull/160/head
@@ -17,7 +17,9 @@ export default { | |||
const vnodes = [] | |||
if (icon) { | |||
vnodes.push(<svg-icon icon-class={icon}/>) | |||
vnodes.push(<svg-icon style="font-size: 18px;margin-right: 10px;vertical-align: middle;" icon-class={icon}/>) | |||
} else { | |||
vnodes.push(<span style="display: inline-block; width: 10px;"/>) | |||
} | |||
if (title) { | |||
@@ -15,7 +15,7 @@ | |||
key="collapse" | |||
class="sidebar-logo-link" | |||
to="/"> | |||
<img v-if="logo" :src="logo" class="sidebar-logo" /> | |||
<img v-if="logo" :src="logo" class="sidebar-logo-close" /> | |||
<h1 | |||
v-else | |||
class="sidebar-title" | |||
@@ -118,7 +118,13 @@ export default { | |||
} | |||
&.collapse { | |||
.sidebar-logo { | |||
// .sidebar-logo { | |||
// margin-right: 0px; | |||
// } | |||
.sidebar-logo-close { | |||
width: 54px; | |||
height: 19px; | |||
vertical-align: middle; | |||
margin-right: 0px; | |||
} | |||
} | |||
@@ -3,16 +3,16 @@ | |||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> | |||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> | |||
<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="menuIcon" :title="onlyOneChild.meta.title" /> | |||
</el-menu-item> | |||
</app-link> | |||
</template> | |||
<el-submenu v-else 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" /> | |||
<item v-if="item.meta" icon="menuIcon" :title="item.meta.title" /> | |||
</template> | |||
<sidebar-item | |||
<sidebar-item-sub | |||
v-for="(child, index) in item.children" | |||
:key="child.path + index" | |||
:is-nest="true" | |||
@@ -30,10 +30,11 @@ import { isExternal } from '@/utils/validate' | |||
import Item from './Item' | |||
import AppLink from './Link' | |||
import FixiOSBug from './FixiOSBug' | |||
import SidebarItemSub from './SidebarItemSub' | |||
export default { | |||
name: 'SidebarItem', | |||
components: { Item, AppLink }, | |||
components: { Item, AppLink, SidebarItemSub }, | |||
mixins: [FixiOSBug], | |||
props: { | |||
// route object | |||
@@ -0,0 +1,96 @@ | |||
<template> | |||
<div v-if="!item.hidden"> | |||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> | |||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> | |||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> | |||
<item icon="" :title="onlyOneChild.meta.title" /> | |||
</el-menu-item> | |||
</app-link> | |||
</template> | |||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> | |||
<template slot="title"> | |||
<item v-if="item.meta" icon="" :title="item.meta.title" /> | |||
</template> | |||
<sidebar-item-sub | |||
v-for="(child, index) in item.children" | |||
:key="child.path + index" | |||
:is-nest="true" | |||
:item="child" | |||
:base-path="resolvePath(child.path)" | |||
class="nest-menu" | |||
/> | |||
</el-submenu> | |||
</div> | |||
</template> | |||
<script> | |||
import path from 'path' | |||
import { isExternal } from '@/utils/validate' | |||
import Item from './Item' | |||
import AppLink from './Link' | |||
import FixiOSBug from './FixiOSBug' | |||
export default { | |||
name: 'SidebarItemSub', | |||
components: { Item, AppLink }, | |||
mixins: [FixiOSBug], | |||
props: { | |||
// route object | |||
item: { | |||
type: Object, | |||
required: true | |||
}, | |||
isNest: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
basePath: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
this.onlyOneChild = null | |||
return {} | |||
}, | |||
methods: { | |||
hasOneShowingChild(children = [], parent) { | |||
if (!children) { | |||
children = []; | |||
} | |||
const showingChildren = children.filter(item => { | |||
if (item.hidden) { | |||
return false | |||
} else { | |||
// Temp set(will be used if only has one showing child) | |||
this.onlyOneChild = item | |||
return true | |||
} | |||
}) | |||
// When there is only one child router, the child router is displayed by default | |||
if (showingChildren.length === 1) { | |||
return true | |||
} | |||
// Show parent if there are no child router to display | |||
if (showingChildren.length === 0) { | |||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true } | |||
return true | |||
} | |||
return false | |||
}, | |||
resolvePath(routePath) { | |||
if (isExternal(routePath)) { | |||
return routePath | |||
} | |||
if (isExternal(this.basePath)) { | |||
return this.basePath | |||
} | |||
return path.resolve(this.basePath, routePath) | |||
} | |||
} | |||
} | |||
</script> |
@@ -28,10 +28,10 @@ | |||
mode="vertical"> | |||
<!-- 根据 sidebarRouters 路由,生成菜单 --> | |||
<sidebar-item | |||
v-for="(route, index) in routeList" | |||
v-for="(route, index) in routeList.children" | |||
:key="route.path + index" | |||
:item="route" | |||
:base-path="route.path" /> | |||
:base-path="routeList.path+ '/'+ route.path" /> | |||
</el-menu> | |||
</el-scrollbar> | |||
</div> | |||
@@ -49,9 +49,7 @@ export default { | |||
...mapState(['settings']), | |||
...mapGetters(['sidebarRouters', 'sidebar', 'choicepart']), | |||
routeList() { | |||
// return [this.partList[this.choicepart]] | |||
// return [this.sidebarRouters[29]] | |||
return [this.sidebarRouters[this.choicepart]] | |||
return this.sidebarRouters[this.choicepart] | |||
}, | |||
activeMenu() { | |||
const route = this.$route; | |||
@@ -32,11 +32,11 @@ | |||
<el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll" | |||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> | |||
<el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column> | |||
<el-table-column prop="icon" label="图标" align="center" width="100"> | |||
<!-- <el-table-column prop="icon" label="图标" align="center" width="100"> | |||
<template v-slot="scope"> | |||
<svg-icon :icon-class="scope.row.icon" /> | |||
</template> | |||
</el-table-column> | |||
</el-table-column> --> | |||
<el-table-column prop="sort" label="排序" width="60"></el-table-column> | |||
<el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" /> | |||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" /> | |||
@@ -76,7 +76,7 @@ | |||
</el-radio-group> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<!-- <el-col :span="24"> | |||
<el-form-item v-if="form.type !== 3" label="菜单图标"> | |||
<el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()"> | |||
<IconSelect ref="iconSelect" @selected="selected" /> | |||
@@ -87,7 +87,7 @@ | |||
</el-input> | |||
</el-popover> | |||
</el-form-item> | |||
</el-col> | |||
</el-col> --> | |||
<el-col :span="12"> | |||
<el-form-item label="菜单名称" prop="name"> | |||
<el-input v-model="form.name" placeholder="请输入菜单名称" /> | |||
@@ -263,9 +263,9 @@ export default { | |||
}, | |||
methods: { | |||
// 选择图标 | |||
selected(name) { | |||
this.form.icon = name; | |||
}, | |||
// selected(name) { | |||
// this.form.icon = name; | |||
// }, | |||
/** 查询菜单列表 */ | |||
getList() { | |||
this.loading = true; | |||
@@ -305,7 +305,7 @@ export default { | |||
id: undefined, | |||
parentId: 0, | |||
name: undefined, | |||
icon: undefined, | |||
// icon: undefined, | |||
type: SystemMenuTypeEnum.DIR, | |||
sort: undefined, | |||
status: CommonStatusEnum.ENABLE, | |||