gditDataAnaliysis/BI_front/src/components/CommonAside.vue

<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
           :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">
    <!-- 要放到导航栏里面 -->
    <h3>{{isCollapse?"菜单":"智能AI数据分析系统"}}</h3>
    <!-- 观察数据,我们发现name是唯一标识 -->
    <!-- 查看文档,index是唯一标识 -->
    <el-menu-item  :key="'/index'" :index="'/index'">
        <el-icon><location /></el-icon>
      <template #title>
        <span>图表生成</span>
      </template>
    </el-menu-item>
    <el-menu-item  :key="'/index/chart'" :index="'/index/chart'">
      <el-icon><CirclePlus /></el-icon>
      <template #title>
        <span>我的图表</span>
      </template>
    </el-menu-item>
    <el-sub-menu  :key="1" :index="1" v-if="isAdmin">
      <template #title>
      <el-icon><location /></el-icon>
        <span>后台管理</span>
      </template>
      <el-menu-item-group :key="1" :index="1">
        <el-menu-item :index="'/index/userManage'" :key="'/index/userManage'">
            <el-icon><CirclePlus /></el-icon>
          <template #title>
            <span>用户管理</span>
          </template>
        </el-menu-item>
        <el-menu-item :index="'/index/chartManage'" :key="'/index/chartManage'">
            <el-icon><CirclePlus /></el-icon>
          <template #title>
            <span>图表管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu{
  height:100vh;

  h3{
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>

<script>
import {useTabStore} from '@/stores/index'
import {isAdmin} from "../common/utils/auth.js";

const tabStore = useTabStore();
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  computed: {
    isCollapse() {
      return tabStore.isCollapse;
    },
    isAdmin(){
      return isAdmin();
    }
  }
}
</script>