parent
0fddf64d10
commit
f0ae5c391e
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<section class="menu-item-container">
|
||||
<div
|
||||
class="menu-item"
|
||||
v-for="(item, routerIndex) in topMenus"
|
||||
:key="routerIndex"
|
||||
>
|
||||
<item :router="item"></item>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from "./item.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
item,
|
||||
},
|
||||
methods: {
|
||||
handleActive(path) {
|
||||
return this.$route.path.includes(path);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 顶部显示菜单
|
||||
topMenus() {
|
||||
let topMenus = [];
|
||||
this.routers.map((menu) => {
|
||||
if (menu.hidden !== true) {
|
||||
// 兼容顶部栏一级菜单内部跳转
|
||||
if (menu.path === "/") {
|
||||
topMenus.push(menu.children[0]);
|
||||
} else {
|
||||
topMenus.push(menu);
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(topMenus, "aa");
|
||||
return topMenus;
|
||||
},
|
||||
// 所有的路由信息
|
||||
routers() {
|
||||
return this.$store.state.permission.topbarRouters;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-item-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-dropdown trigger="hover">
|
||||
<div class="menu-item">
|
||||
{{ item.meta.title }}
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@click.native="handlePath(secondRoute, secondIndex)"
|
||||
v-for="(secondRoute, secondIndex) in item.children"
|
||||
:key="secondIndex"
|
||||
>
|
||||
<section v-if="!secondRoute.children">
|
||||
<svg-icon
|
||||
v-if="
|
||||
secondRoute.meta &&
|
||||
secondRoute.meta.icon &&
|
||||
secondRoute.meta.icon !== '#'
|
||||
"
|
||||
:icon-class="secondRoute.meta.icon"
|
||||
/>
|
||||
{{ secondRoute.meta.title }}
|
||||
</section>
|
||||
<section v-else>
|
||||
<menu-item
|
||||
:item="secondRoute"
|
||||
:base-path="secondRoute.path"
|
||||
></menu-item>
|
||||
</section>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MenuItem",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handlePath(item, index) {
|
||||
console.log(item, "aaa");
|
||||
// this.$router.push(item.path);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-item {
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0 10px;
|
||||
padding: 3px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="men-main">
|
||||
<div
|
||||
v-for="(item, index) in topMenus"
|
||||
:key="index"
|
||||
:class="isCurrentRoute(item.path) ? 'activeMenu' : ''"
|
||||
@click="handlerRouter(item.path)"
|
||||
>
|
||||
<div class="menu-item" v-if="!item.children">
|
||||
{{ item.meta.title }}
|
||||
</div>
|
||||
<menu-item v-else :item="item" :base-path="item.path"></menu-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import MenuItem from "../MenuItem";
|
||||
import { constantRoutes } from "@/router";
|
||||
// 隐藏侧边栏路由
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
components: {
|
||||
MenuItem,
|
||||
},
|
||||
mounted() {
|
||||
this.childrenMenus();
|
||||
},
|
||||
methods: {
|
||||
// 设置子路由
|
||||
childrenMenus() {
|
||||
var childrenMenus = [];
|
||||
this.routers.map((router) => {
|
||||
for (var item in router.children) {
|
||||
if (router.children[item].parentPath === undefined) {
|
||||
if (router.path === "/") {
|
||||
router.children[item].path = "/" + router.children[item].path;
|
||||
} else {
|
||||
if (!this.ishttp(router.children[item].path)) {
|
||||
router.children[item].path =
|
||||
router.path + "/" + router.children[item].path;
|
||||
}
|
||||
}
|
||||
router.children[item].parentPath = router.path;
|
||||
}
|
||||
childrenMenus.push(router.children[item]);
|
||||
}
|
||||
});
|
||||
return constantRoutes.concat(childrenMenus);
|
||||
},
|
||||
//是否当前路由
|
||||
isCurrentRoute(key) {
|
||||
return this.$route.path === key;
|
||||
},
|
||||
|
||||
handlerRouter(key) {
|
||||
console.log(key);
|
||||
const route = this.routers.find((item) => item.path === key);
|
||||
if (this.ishttp(key)) {
|
||||
//说明创建路由选择的是外部链接
|
||||
window.open(key, "_blank");
|
||||
} else if (!route || !route.children) {
|
||||
//没有子路由路径内部打开
|
||||
const routeMenu = this.childrenMenus().find(
|
||||
(item) => item.path === key
|
||||
);
|
||||
if (routeMenu && routeMenu.query) {
|
||||
let query = JSON.parse(routeMenu.query);
|
||||
this.$router.push({ path: key, query: query });
|
||||
} else {
|
||||
this.$router.push({ path: key });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
ishttp(url) {
|
||||
return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["sidebarRouters"]),
|
||||
theme() {
|
||||
return this.$store.state.settings.theme;
|
||||
},
|
||||
// 顶部显示菜单
|
||||
topMenus() {
|
||||
let topMenus = [];
|
||||
this.sidebarRouters.map((menu) => {
|
||||
if (menu.hidden !== true && menu.redirect !== "index") {
|
||||
// 兼容顶部栏一级菜单内部跳转
|
||||
if (menu.path === "/") {
|
||||
topMenus.push(menu.children[0]);
|
||||
} else {
|
||||
topMenus.push(menu);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return topMenus;
|
||||
},
|
||||
// 所有的路由信息
|
||||
routers() {
|
||||
return this.$store.state.permission.topbarRouters;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.men-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.menu-item {
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0 10px;
|
||||
padding: 3px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.activeMenu {
|
||||
background: #3b4aa2;
|
||||
border-radius: 32px 32px 32px 32px;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dropdown v-if="router.children" class="menu-item-box" trigger="hover">
|
||||
<div
|
||||
class="item-title"
|
||||
:class="handleActive(router.path) ? 'dropdownActive' : ''"
|
||||
>
|
||||
{{ router.meta.title }}
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="(item, itemIndex) in router.children"
|
||||
:key="itemIndex"
|
||||
>
|
||||
<div
|
||||
v-if="!item.children"
|
||||
@click="handelePath(router.path, item.path)"
|
||||
:class="handleActive(item.path) ? 'avtiveRouter' : ''"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta.icon"
|
||||
/>
|
||||
<span style="margin-left: 6px">{{ item.meta.title }} </span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta.icon"
|
||||
/>
|
||||
<span style="margin-left: 6px">{{ item.meta.title }} </span>
|
||||
<div
|
||||
class="recursion"
|
||||
v-for="(item2, item2Index) in item.children"
|
||||
:key="item2Index"
|
||||
>
|
||||
<item
|
||||
:router="item2"
|
||||
:parentRouter="router.path + '/' + item.path"
|
||||
></item>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="item-title"
|
||||
@click="handelePath(parentRouter, router.path)"
|
||||
:class="handleActive(router.path) ? 'avtiveRouter' : ''"
|
||||
>
|
||||
<span>{{ router.meta.title }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from "./item.vue";
|
||||
export default {
|
||||
name: "item",
|
||||
|
||||
props: {
|
||||
parentLevel: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
mainStyle: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
parentRouter: {
|
||||
type: "",
|
||||
},
|
||||
router: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
item,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maxRouter: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handelePath(parent, children) {
|
||||
console.log(parent, children);
|
||||
this.$router.push(`${parent}/${children}`);
|
||||
},
|
||||
handleActive(path) {
|
||||
return this.$route.path.includes(path);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/element-variables.scss";
|
||||
.item-title {
|
||||
padding: 3px 10px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 24px;
|
||||
margin: 0 5px;
|
||||
color: #fff;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dropdownActive {
|
||||
border-color: #fff !important;
|
||||
background: hsla(0, 0%, 100%, 0.15);
|
||||
}
|
||||
|
||||
.recursion {
|
||||
.item-title {
|
||||
list-style: none;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.item-title:hover {
|
||||
// background-color: #ecf5ff;
|
||||
color: $--color-primary !important;
|
||||
}
|
||||
}
|
||||
.avtiveRouter {
|
||||
color: $--color-primary !important;
|
||||
// background: $--color-primary !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<h1>数据云图</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<h1>在线申报</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<h1>项目库</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Loading…
Reference in new issue