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