faw-report-library-web/src/components/Menu.vue

<template>
    <div class="menu-submenu" :class="{'submenu-active': $route.path.indexOf(path) !== -1}">
        <!-- 遍历菜单数据 -->
        <MenuItem :key="item.id" v-for="(item, index) in menuData" :menuItemData="item">
            <!-- 没有children的子菜单 -->
            <template v-if="!item.children">
                <div class="menu-content" :class="{'active': item.href.indexOf($route.path) !== -1 }">
                    <div class="menu-data" @click="handleRouter(item)"
                         :style="{'padding-left': item.level >= 2 ? '30px' : '10px'}">
                        <div class="menu-data-flex">
                            <img class="menu-icon" v-if="item.icon" :src="item.icon" alt="">
                            <span> <i class="icon-level2" v-if="item.level===3"></i> {{ item.label }}</span>
                        </div>
                    </div>
                </div>
            </template>
            <!-- 有children的子菜单 -->
            <template v-else>
                <div class="menu-content"
                     :class="{'active': item.href.indexOf($route.path) !== -1  , 'is-collage': !item.isCollage}"
                     @click="collageMenu(item)">
                    <div class="menu-data"
                         :class="item.level === 1 ? 'bor-b' : ''"
                         :style="{'padding-left': item.level >= 2 ? '30px' : '10px'}">
                        <div class="menu-data-flex">
                            <img class="menu-icon" v-if="item.icon" :src="item.icon" alt="">
                            <span>{{ item.label }}</span>
                        </div>
                        <template v-if="item.level === 1">
                            <i v-if="!item.isCollage" class="el-icon-arrow-right" style="margin-right: 12px;"></i>
                            <i v-else class="el-icon-arrow-down" style="margin-right: 12px;"></i>
                        </template>
                        <template v-else>
                            <i v-if="!item.isCollage" class="el-icon-plus" style="margin-right: 12px;"></i>
                            <i v-else class="el-icon-minus" style="margin-right: 12px;"></i>
                        </template>
                    </div>
                </div>
                <!-- 递归操作 -->
                <Menu :menuData="item.children" :path="item.href"></Menu>
            </template>
        </MenuItem>
    </div>
</template>

<script>
import { createLogger } from 'vuex'
import MenuItem from './MenuItem'
import login from '../api/modules/login'
import store from '../store'
export default {
  name: 'Menu',
  props: ['menuData', 'path'],
  components: {
    MenuItem
  },
  methods: {
    handleRouter (item) {
      this.$store.commit('setActiveTabIndex','')
      console.log("我点击的",item)
      if (item.belong == 0) {
        this.$store.commit('saveMenuName', item.label)
        if (this.$route.path == '/system/401Page') {

        } else {
          this.$router.push({ name: '401Page', query: this.$route.query })
        }
      } else {
        this.$store.commit('savePathUrl', item.href)
        if (item.isUrl && Number(item.isUrl || 0)) {
          const param = this.$route.query
          // delete(this.$route.query.itemHref)

          // param.itemHref = item.href
          if (this.$route.path == '/system/urlIndex') {
            this.$store.commit('saveMenuName', item.label)
            login.pageLog(this.$store.state.menuName).then(res => {
            }).catch(_ => {
            })
          } else {
            this.$store.commit('saveMenuName', item.label)
            this.$router.push({ name: 'urlIndex', query: {
              id:param.id
              } })
          }
        } else {
          if (this.$route.path === item.href) return
          // delete(this.$route.query.itemHref)
          this.$router.push({ path: item.href, query:  {
              id:this.$route.query.id
            } })
        }
      }
    },
    collageMenu (item) {
      item.isCollage = !item.isCollage
      console.log(item.isCollage)
    }
  }
}
</script>

<style lang="scss" scoped>
    .menu-submenu {
        background-color: #f3f6fd;

        &.submenu-active {
            // background-color: #f3f6fd;

        }

        .menu-content {
            overflow: hidden;
            height: 48px;

            &.active {
                .menu-data {
                    position: relative;
                    // background-color: rgba(216, 230, 246, 1);
                    background-color: #c7d0dd;
                    // border-radius: 100px 0 0 100px;
                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 4px;
                        background-color: #168fe3;
                    }

                    span {
                        // color: rgba(24, 144, 255, 1);
                        color: #333;
                    }
                }
            }

            &.is-collage + .menu-submenu {
                display: none;
            }

            .menu-data {
                cursor: pointer;
                display: flex;
                /*justify-content: space-between;*/
                align-items: center;
                padding-left: 21px;
                // margin-top: 6px;
                height: 100%;
                // background-color: #EDEDED;

                .menu-data-flex {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }

                .menu-icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                    margin-top: 0 !important;
                }
            }

            span {
                color: #262626;
                font-size: 16px;
                font-weight: 500;
                /*white-space: nowrap;*/
            }
        }

        .menu-submenu {
            .menu-data {
                span {
                    font-size: 14px;
                }
            }
        }
    }

    .icon-level2 {
        display: inline-block;
        width: 3px;
        height: 3px;
        background-color: #333;
        // background-color: rgba(183, 191, 195, 1);
        border-radius: 50%;
        margin-right: 3px;
        vertical-align: middle;
    }

    .bor-b {
        border-top: 1px solid #e3e8f3;
        border-bottom: 1px solid #e3e8f3;
    }
</style>