FE-V2-PC/src/layout/components/Sidebar/index.vue

<template>
    <div class="max-box" :class="{'has-logo':showLogo}"
         :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
        <!--<logo :collapse="isCollapse" />-->
        <el-scrollbar class="router-button-box" :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"
                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
                :unique-opened="true"
                :active-text-color="settings.theme"
                :collapse-transition="false"
                mode="vertical"
            >
              <sidebar-item
                v-for="(route, index) in sidebarRouters"
                :key="route.path  + index"
                :item="route"
                :base-path="route.path"
              />
            </el-menu>
        </el-scrollbar>
        <!--个人信息/修改密码/退出登录-->
        <!--<el-dropdown class="user-box" trigger="click">-->
          <!--<div class="avatar-wrapper color_one">-->
            <!--<img v-if="avatar" :src="avatar" class="user-avatar">-->
            <!--<img v-if="!avatar" src="@/assets/ZDimages/tx_cion.png" class="user-avatar">-->
            <!--<p class="color_33">{{name}}</p>-->
            <!--<i class="el-icon-more"/>-->
          <!--</div>-->
          <!--<el-dropdown-menu slot="dropdown">-->
            <!--<router-link to="/user/profile">-->
              <!--<el-dropdown-item>个人中心</el-dropdown-item>-->
            <!--</router-link>-->
            <!--&lt;!&ndash;<el-dropdown-item @click.native="setting = true">&ndash;&gt;-->
              <!--&lt;!&ndash;<span>布局设置</span>&ndash;&gt;-->
            <!--&lt;!&ndash;</el-dropdown-item>&ndash;&gt;-->
            <!--<el-dropdown-item @click.native="logout">-->
              <!--<span>退出登录</span>-->
            <!--</el-dropdown-item>-->
          <!--</el-dropdown-menu>-->
        <!--</el-dropdown>-->
      <p style="height:30px;"></p>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {
    components: { SidebarItem, Logo },
    computed: {
        ...mapState(["settings"]),
        ...mapGetters(["sidebarRouters", "sidebar","avatar","name"]),
        activeMenu() {
            const route = this.$route;
            // console.log("route",route)
            const { meta, path } = route;
            // if set path, the sidebar will highlight the path you set
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            this.$parent.demo(path);
            return path;
        },
        showLogo() {
            return this.$store.state.settings.sidebarLogo;
        },
        variables() {
            return variables;
        },
        isCollapse() {
            // return !this.sidebar.opened;
        },
        setting: {
          get() {
            return this.$store.state.settings.showSettings
          },
          set(val) {
            this.$store.dispatch('settings/changeSetting', {
              key: 'showSettings',
              value: val
            })
          }
        },
    },
    methods: {
      //退出登录
      async logout() {
        // console.log('visitedViews',this.$store.state.tagsView.visitedViews)
        // console.log('routes',this.$store.state.permission.routes)
        // console.log('theme',this.$store.state.settings.theme)
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            let list = [];
            list.push(this.$store.state.tagsView.visitedViews[0]);
            this.$store.state.tagsView.visitedViews = [];
            this.$store.state.tagsView.visitedViews.push(list[0]);
            console.log('visitedViews',this.$store.state.tagsView.visitedViews)
            // location.href = localStorage.getItem('windowHref');
            this.$router.push({ path:"/login" }).catch(()=>{});
          })
        }).catch(() => {});
      }
    }

};
</script>
<style lang="scss" scoped>
  .max-box{
    /*height:100vh;*/
    display: flex;
    flex-direction: column;
    margin:5px 10px 0 0;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;

    .router-button-box{
      flex:1;
    }
    .user-box {
      width:230px;
      height:40px;
      margin:28px 0;
      margin-right: 30px;
      .avatar-wrapper {
        display: flex;
        position: relative;
        img{
          height:40px;
          width:40px;
          border-radius:50%;
        }
        p{
          flex:1;
          line-height:40px;
          margin:0 15px;
          font-size:14px;
        }
        i{
          -webkit-transform: rotateZ(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotateZ(-90deg);
        }
      }
    }
  }
  .el-dropdown-menu--medium{
    /*backAnimation: red!important;*/
    /*top:810px!important;*/
  }
</style>