|
|
|
@ -6,24 +6,29 @@ |
|
|
|
:collapse="sidebarFold" |
|
|
|
:collapseTransition="false" |
|
|
|
class="site-sidebar__menu"> |
|
|
|
<el-menu-item style=" padding-left: 15px;" class="menu"> |
|
|
|
<span slot="title"> <el-input v-model="search" placeholder="搜索" |
|
|
|
@keyup.enter.native="searchMenu"></el-input></span> |
|
|
|
<i type="primary" class="el-icon-search" @click="searchMenu()"></i> |
|
|
|
</el-menu-item> |
|
|
|
<el-menu-item index="home" @click="$router.push({ name: 'home' })"> |
|
|
|
<icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg> |
|
|
|
<span slot="title">{{$t('commonhomePage')}}</span> |
|
|
|
<span slot="title">{{ $t('commonhomePage') }}</span> |
|
|
|
</el-menu-item> |
|
|
|
<!-- <el-submenu index="demo">--> |
|
|
|
<!-- <template slot="title">--> |
|
|
|
<!-- <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span>demo</span>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- <el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">--> |
|
|
|
<!-- <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span slot="title">echarts</span>--> |
|
|
|
<!-- </el-menu-item>--> |
|
|
|
<!-- <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">--> |
|
|
|
<!-- <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span slot="title">ueditor</span>--> |
|
|
|
<!-- </el-menu-item>--> |
|
|
|
<!-- </el-submenu>--> |
|
|
|
<!-- <el-submenu index="demo">--> |
|
|
|
<!-- <template slot="title">--> |
|
|
|
<!-- <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span>demo</span>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- <el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">--> |
|
|
|
<!-- <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span slot="title">echarts</span>--> |
|
|
|
<!-- </el-menu-item>--> |
|
|
|
<!-- <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">--> |
|
|
|
<!-- <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>--> |
|
|
|
<!-- <span slot="title">ueditor</span>--> |
|
|
|
<!-- </el-menu-item>--> |
|
|
|
<!-- </el-submenu>--> |
|
|
|
<sub-menu |
|
|
|
v-for="menu in menuList" |
|
|
|
:key="menu.menuId" |
|
|
|
@ -36,77 +41,167 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import SubMenu from './main-sidebar-sub-menu' |
|
|
|
import { isURL } from '@/utils/validate' |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
dynamicMenuRoutes: [] |
|
|
|
import SubMenu from './main-sidebar-sub-menu' |
|
|
|
import {isURL} from '@/utils/validate' |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dynamicMenuRoutes: [], |
|
|
|
search: '', |
|
|
|
categoryList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
SubMenu |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
sidebarLayoutSkin: { |
|
|
|
get() { |
|
|
|
return this.$store.state.common.sidebarLayoutSkin |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
SubMenu |
|
|
|
sidebarFold: { |
|
|
|
get() { |
|
|
|
return this.$store.state.common.sidebarFold |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
sidebarLayoutSkin: { |
|
|
|
get () { return this.$store.state.common.sidebarLayoutSkin } |
|
|
|
}, |
|
|
|
sidebarFold: { |
|
|
|
get () { return this.$store.state.common.sidebarFold } |
|
|
|
menuList: |
|
|
|
{ |
|
|
|
get() { |
|
|
|
return this.$store.state.common.menuList |
|
|
|
}, |
|
|
|
set(val) { |
|
|
|
this.$store.commit('common/updateMenuList', val) |
|
|
|
} |
|
|
|
}, |
|
|
|
menuList: { |
|
|
|
get () { return this.$store.state.common.menuList }, |
|
|
|
set (val) { this.$store.commit('common/updateMenuList', val) } |
|
|
|
menuActiveName: { |
|
|
|
get() { |
|
|
|
return this.$store.state.common.menuActiveName |
|
|
|
}, |
|
|
|
menuActiveName: { |
|
|
|
get () { return this.$store.state.common.menuActiveName }, |
|
|
|
set (val) { this.$store.commit('common/updateMenuActiveName', val) } |
|
|
|
set(val) { |
|
|
|
this.$store.commit('common/updateMenuActiveName', val) |
|
|
|
} |
|
|
|
}, |
|
|
|
mainTabs: { |
|
|
|
get() { |
|
|
|
return this.$store.state.common.mainTabs |
|
|
|
}, |
|
|
|
mainTabs: { |
|
|
|
get () { return this.$store.state.common.mainTabs }, |
|
|
|
set (val) { this.$store.commit('common/updateMainTabs', val) } |
|
|
|
set(val) { |
|
|
|
this.$store.commit('common/updateMainTabs', val) |
|
|
|
} |
|
|
|
}, |
|
|
|
mainTabsActiveName: { |
|
|
|
get() { |
|
|
|
return this.$store.state.common.mainTabsActiveName |
|
|
|
}, |
|
|
|
mainTabsActiveName: { |
|
|
|
get () { return this.$store.state.common.mainTabsActiveName }, |
|
|
|
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) } |
|
|
|
set(val) { |
|
|
|
this.$store.commit('common/updateMainTabsActiveName', val) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
$route: 'routeHandle' |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]') |
|
|
|
this.routeHandle(this.$route) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 搜索菜单方式1 start |
|
|
|
searchMenu1() { |
|
|
|
|
|
|
|
if (this.search == "") { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
} else { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
// this.menuList = this.treeFindPath(this.menuList).filter(this.search) |
|
|
|
let list = this.treeFindPath(this.menuList) |
|
|
|
list = this.distinct(list, list); |
|
|
|
this.menuList = list.filter(item => item.name.indexOf(this.search) != -1) |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
$route: 'routeHandle' |
|
|
|
// 树结构菜单转换list |
|
|
|
treeFindPath(tree, path = []) { |
|
|
|
if (!tree) return [] |
|
|
|
for (const data of tree) { |
|
|
|
path.push(data) |
|
|
|
if (data.list != null) { |
|
|
|
path.push(...data.list) |
|
|
|
delete data.list |
|
|
|
} |
|
|
|
this.treeFindPath(data.list, path) |
|
|
|
} |
|
|
|
|
|
|
|
return path |
|
|
|
}, |
|
|
|
created () { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]') |
|
|
|
this.routeHandle(this.$route) |
|
|
|
// 搜索菜单方式1 去重 end |
|
|
|
distinct(a, b) { |
|
|
|
return Array.from(new Set([...a, ...b])) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 路由操作 |
|
|
|
routeHandle (route) { |
|
|
|
if (route.meta.isTab) { |
|
|
|
// tab选中, 不存在先添加 |
|
|
|
var tab = this.mainTabs.filter(item => item.name === route.name)[0] |
|
|
|
if (!tab) { |
|
|
|
if (route.meta.isDynamic) { |
|
|
|
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0] |
|
|
|
if (!route) { |
|
|
|
return console.error('未能找到可用标签页!') |
|
|
|
} |
|
|
|
} |
|
|
|
tab = { |
|
|
|
menuId: route.meta.menuId || route.name, |
|
|
|
name: route.name, |
|
|
|
title: route.meta.title, |
|
|
|
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', |
|
|
|
iframeUrl: route.meta.iframeUrl || '', |
|
|
|
params: route.params, |
|
|
|
query: route.query |
|
|
|
// 搜索菜单方式2 start |
|
|
|
searchMenu() { |
|
|
|
if (this.search == "") { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
} else { |
|
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]') |
|
|
|
this.menuList = this.filterTree(this.menuList,this.search) |
|
|
|
console.log(this.menuList) |
|
|
|
} |
|
|
|
}, |
|
|
|
filterTree (tree = [], map , arr = []) { |
|
|
|
if (!tree.length) |
|
|
|
return [] |
|
|
|
for (let item of tree) { |
|
|
|
if (map.indexOf(item.name)>-1){ |
|
|
|
|
|
|
|
} |
|
|
|
continue |
|
|
|
let node = {...item, list: []} |
|
|
|
arr.push(node) |
|
|
|
if (item.list && item.list.length) |
|
|
|
this.filterTree(item.list, map, node.list) } |
|
|
|
return arr |
|
|
|
}, |
|
|
|
// 路由操作 |
|
|
|
routeHandle(route) { |
|
|
|
if (route.meta.isTab) { |
|
|
|
// tab选中, 不存在先添加 |
|
|
|
var tab = this.mainTabs.filter(item => item.name === route.name)[0] |
|
|
|
if (!tab) { |
|
|
|
if (route.meta.isDynamic) { |
|
|
|
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0] |
|
|
|
if (!route) { |
|
|
|
return console.error('未能找到可用标签页!') |
|
|
|
} |
|
|
|
this.mainTabs = this.mainTabs.concat(tab) |
|
|
|
} |
|
|
|
this.menuActiveName = tab.menuId + '' |
|
|
|
this.mainTabsActiveName = tab.name |
|
|
|
tab = { |
|
|
|
menuId: route.meta.menuId || route.name, |
|
|
|
name: route.name, |
|
|
|
title: route.meta.title, |
|
|
|
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', |
|
|
|
iframeUrl: route.meta.iframeUrl || '', |
|
|
|
params: route.params, |
|
|
|
query: route.query |
|
|
|
} |
|
|
|
this.mainTabs = this.mainTabs.concat(tab) |
|
|
|
} |
|
|
|
this.menuActiveName = tab.menuId + '' |
|
|
|
this.mainTabsActiveName = tab.name |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
.menu .el-input__inner { |
|
|
|
background: transparent; |
|
|
|
width: 100px; |
|
|
|
font-size: 12px; |
|
|
|
color: #FFFFFF; |
|
|
|
border: #0BB2D4; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
[li_she]
5 years ago