baozhida-deliver-medicine/src/views/common/Base.vue

<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="space_between_in base_head">
          <topNav :iconFlag="iconFlag" @getUnpack="getUnpack"></topNav>
          <UserInfo></UserInfo>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="sideWidth+'px'">
          <div class="card_aside">
            <div class="card_menu">
              <el-menu :collapse="iconFlag" :default-active="activePath" class="el-menu-vertical-demo" router
                :collapse-transition="false" @open="handleOpen" @close="handleClose">
                <template v-for="(item,index) in menus">
                  <el-menu-item class="menu_item" :index="item.path" :key="index" @click="saveNavState(item.path)">
                    <i :class="item.meta.icon" class="menu_icon iconfont"></i>
                    <span slot="title">{{item.meta.title}}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </div>
            <div class="card_support" v-if="!iconFlag">
              <span>技术服务:宝智达科技</span>
              <span style="margin-top: 5px;">服务电话:400-600-0968</span>
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="main">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import topNav from './topNav.vue'
  import UserInfo from './userInfo.vue'
  export default {
    name: 'BaseView',
    components: {
      topNav,
      UserInfo
    },
    data() {
      return {
        menus: [],
        // 被激活的链接地址
        activePath: '',
        iconFlag: false,
        sideWidth: 200,
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.menu
      })
    },
    created() {
      this.activePath = localStorage.getItem('activePath')
      this.getLeftMenu()
    },
    methods: {
      getLeftMenu() {
        const mRoutes = this.$store.state.permission.menu;
        let mRoutesList = []
        mRoutes.forEach(item => {
          if (item.name == 'index') {
            mRoutesList = item.children
          }
        })
        this.menus = getpath(mRoutesList, '')

        function getpath(routerMap, parent) {
          routerMap.map(item => {
            item.path = `${(parent.path) || ''}/${item.name}`
            if (item.children && item.children.length > 0) {
              return getpath(item.children, item)
            }
          })
          return routerMap
        }
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      // 保存链接的激活状态
      saveNavState(activePath) {
        localStorage.setItem("activePath", activePath);
        this.activePath = activePath
      },
      // 展开收起
      getUnpack(flag) {
        if (flag) {
          this.iconFlag = false
          this.sideWidth = 200
        } else {
          this.iconFlag = true
          this.sideWidth = 64
        }
      }
    }
  }
</script>
<style>
  .el-main {
    padding: 20px 20px;
    height: calc(100vh - 60px);
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-aside {
    transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -moz-transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -o-transition: width 0.15s;
  }

  ::v-deep .el-container {
    height: calc(100vh - 1px);
  }

  .el-header {
    box-shadow: 0 5px 10px -2px #dfe5f8;
    z-index: 2;
  }

  .base_head {
    height: 100%;
  }

  .card_aside {
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 20px;
  }

  .el-menu-vertical-demo {
    border-right: none !important;
  }

  .menu_item {
    display: flex;
    align-items: center;
  }

  .menu_icon {
    font-size: 22px !important;
    margin-right: 10px;
  }

  .card_support {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    color: rgb(204, 204, 204);
    padding-left: 20px;

    span {
      font-size: 14px;
    }
  }

  ::v-deep .el-main {
    background: #fcfbff;
  }

  .main {
    height: 100%;
  }
</style>