95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<template>
|
|
<header class="app-header" :class="[`header-${effect}`]">
|
|
<div class="header-inner">
|
|
<div class="header-before">
|
|
<!-- Logo -->
|
|
<router-link to="/">
|
|
<!-- <el-image
|
|
:src="`/img/brand_${effect === 'light' ? 'blue' : 'white'}.png`"
|
|
fit="scale-down"
|
|
></el-image> -->
|
|
<el-image
|
|
:src="`/img/logo.png`"
|
|
fit="scale-down"
|
|
style="width: 300px"
|
|
></el-image>
|
|
</router-link>
|
|
<!-- 导航菜单 -->
|
|
<el-menu
|
|
:default-active="$route.path"
|
|
mode="horizontal"
|
|
router
|
|
unique-opened
|
|
>
|
|
<template v-for="item in allModules">
|
|
<template v-if="!item.hidden && item.status">
|
|
<!-- 没有子菜单 -->
|
|
<el-menu-item
|
|
v-if="!item.children"
|
|
:key="item.id"
|
|
:index="item.path"
|
|
>
|
|
{{ item.name }}
|
|
</el-menu-item>
|
|
<!-- 有子菜单 -->
|
|
<el-submenu v-else :key="item.id" :index="item.id + ''">
|
|
<template slot="title">{{ item.name }}</template>
|
|
<template v-for="subitem in item.children">
|
|
<template v-if="!subitem.hidden && subitem.status">
|
|
<el-menu-item
|
|
v-if="!subitem.isExternal"
|
|
:key="subitem.id"
|
|
:index="subitem.path"
|
|
>
|
|
{{ subitem.name }}
|
|
</el-menu-item>
|
|
<el-menu-item
|
|
v-else
|
|
:key="subitem.id"
|
|
@click="openNewTab(subitem.path)"
|
|
>
|
|
{{ subitem.name }}
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-submenu>
|
|
</template>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
<router-link to="/search">
|
|
<el-link :underline="false">
|
|
<i class="el-icon-search"></i>
|
|
</el-link>
|
|
</router-link>
|
|
<el-link :underline="false" href="http://192.168.1.133:8080">
|
|
<div>后台入口</div>
|
|
</el-link>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import loadConfig from '@/mixins/load-config'
|
|
import { mapState } from 'vuex'
|
|
import { openNewTab } from '@/utils/common.js'
|
|
|
|
export default {
|
|
name: 'AppHeader',
|
|
mixins: [loadConfig],
|
|
props: {
|
|
effect: {
|
|
type: String,
|
|
default: 'transparent',
|
|
description: '导航栏主题，(transparent | dark | light)'
|
|
}
|
|
},
|
|
methods: {
|
|
openNewTab
|
|
},
|
|
computed: {
|
|
...mapState(['allModules'])
|
|
}
|
|
}
|
|
</script>
|