123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- <template>
- <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
- <!-- <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
- <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
- <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
- <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
- </el-menu-item>
- </router-link>
-
- <el-submenu v-else :index="item.name||item.path">
- <template slot="title">
- <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
- <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
- </template>
-
- <template v-for="child in item.children" v-if="!child.hidden">
- <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
-
- <template v-else>
- <el-menu-item v-if="child.unfinished == true" :key="child.name" @click.native="unfinishAction()" :index="resolvePath(child.path)">
- <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
- <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
- </el-menu-item>
- <router-link v-else :to="resolvePath(child.path)" :key="child.name">
- <el-menu-item :index="resolvePath(child.path)">
- <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
- <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
- </el-menu-item>
- </router-link>
- </template>
-
- </template>
- </el-submenu> -->
-
- <div v-if="hasOneShowingChild(item.children) && !onlyOneChild.children && !item.alwaysShow" @click="onClick(item)">
- <router-link :to="resolvePath(onlyOneChild.path)">
- <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
- <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
- <span v-if="onlyOneChild.meta && onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
- </el-menu-item>
- </router-link>
-
- </div>
-
- <div v-else @click="onClick(item)">
- <router-link :to="resolvePath(item.children[0].path)">
- <el-menu-item :index="item.path">
- <template slot="title">
- <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
- <span v-if="item.meta && item.meta.title" slot="title">
- {{ generateTitle(item.meta.title) }}
- </span>
- </template>
- </el-menu-item>
- </router-link>
- </div>
- </div>
- </template>
-
- <script>
- import path from 'path'
- import { generateTitle } from '@/utils/i18n'
-
- import { mapGetters } from "vuex";
-
- export default {
- name: 'SidebarItem',
- props: {
- // route object
- item: {
- type: Object,
- required: true
- },
- isNest: {
- type: Boolean,
- default: false
- },
- basePath: {
- type: String,
- default: ''
- }
- },
- computed: {
- ...mapGetters(["permission_routers"])
- },
- data() {
- return {
- onlyOneChild: null
- }
- },
- methods: {
- hasOneShowingChild(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
- }
- })
- if (showingChildren.length === 1) {
- return true
- }
- return false
- },
- resolvePath(...paths) {
- return path.resolve(this.basePath, ...paths)
- },
- generateTitle,
- unfinishAction: function() {
- this.$message.error("功能开发中")
- },
- onClick(index) {
- this.permission_routers.map((item, i) => {
- if (this.isObjectValueEqual(item, index)) {
- this.$emit("a", i);
- }
- });
- },
- isObjectValueEqual(a, b) {
- var aProps = Object.getOwnPropertyNames(a);
- var bProps = Object.getOwnPropertyNames(b);
-
- if (aProps.length != bProps.length) {
- return false;
- }
-
- for (var i = 0; i < aProps.length; i++) {
- var propName = aProps[i];
-
- if (a[propName] !== b[propName]) {
- return false;
- }
- }
-
- return true;
- }
- }
- }
- </script>
-
- <style lang="scss">
- .menu-wrapper{
- .el-menu-item{
- background-color:#1F2D3D !important;
- color: #fff !important;
- }
- .el-menu{
- background-color:#1F2D3D !important;
- }
- .el-submenu__title{
- background-color:#1F2D3D !important;
- color: #fff !important;
- height: 32px !important;
- line-height: 32px !important;
- }
- .router-link-exact-active{
- color: rgb(64, 158, 255) !important;
- .el-menu-item{
- color: rgb(64, 158, 255) !important;
- }
- }
- }
-
- </style>
-
|