pdf_tech_front_end/src/components/sideMenu.vue

<script>
import { onMounted, ref } from "vue"
import { get } from '../../utils/request'
import Dashboard from '@/components/icon/menu_dashboard.vue'
import Product from '@/components/icon/menu_product.vue'
import Team from '@/components/icon/menu_team.vue'
import License from '@/components/icon/menu_license.vue'
import Device from '@/components/icon/menu_device.vue'
import Settings from '@/components/icon/menu_setting.vue'
import Support from '@/components/icon/menu_support.vue'
import Logout from '@/components/icon/logout.vue'
import { Aside } from 'element-ui'
import { userStore } from '@/store/userInfo'

export default {
  name:'sideMenu',
  components:{
    Dashboard,
    Product,
    Team,
    License,
    Device,
    Settings,
    Support,
    Logout
  },
  data() {
    return {
      userName:'',
      email:'',
      role:''
    }
  },
  mounted() {
    if (userStore().user) {
    this.userName = userStore().user.userName
    this.email = userStore().user.email
    this.role = userStore().user.role
    }
  },
  methods:{
    logout(){
      get('/pdf-tech/logout').then((res)=>{
        if (res.data.code === 200 && res.data.msg == 'success') {
          this.$router.push('login')
        }
      })
      this.$cookies.remove('accessToken')
      userStore().clearUserInfo()
    }
  },
  filters:{
    avant(){
      if (userStore().user.userName) {
        return userStore().user.userName.substr(0, 1).toUpperCase()
      }
    }
  },
  computed:{
    path () {
      if (this.$route.path === '/manage-team/create-manage-team' || this.$route.path === '/manage-team/edit-manage-team') {
        return '/manage-team'
      } else if (this.$route.path === '/manage-member/add-manage-member' || 
                this.$route.path.indexOf('/manage-member/edit-manage-member') !== -1) {
        return '/manage-member'
      } else if (this.$route.path === '/manageAdmin/addAdmin' ||
                this.$route.path.indexOf('/manageAdmin/editAdmin') !== -1) {
        return '/manageAdmin'
      }  else {
        return this.$route.path
      }
    }
  }
}
</script>

<template>
  <div class=" flex flex-col justify-between h-100vh">
    <div class="aside">
      <div class="user-info">
        <div class="head-photo"><p>{{ userName | avant() }}</p></div>
        <div class="info">
          <p>{{ userName }}</p>
          <p>{{ email }}</p>
        </div>
        <div class="type">{{ parseInt(role) === 1 ? 'Super admin' : 'Team admin' }}</div>
      </div>
      <el-menu :default-active="path" active-text-color="#1460F3" text-color="#232A40" router>
        <el-menu-item index="/dashboard">
          <Dashboard />
          <span>Dashboard</span>
        </el-menu-item>
        <el-menu-item index="/productManagement">
          <Product />
          <span>Product Management</span>
        </el-menu-item>
        <el-submenu index="3">
          <template slot="title">
            <Team />
            <span>Team Management</span>
          </template>
          <el-menu-item index="/manage-team">Manage Team</el-menu-item>
          <el-menu-item index="/manage-member">Manage Member</el-menu-item>
          <el-menu-item index="/manageAdmin">Manage Admin</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> 
            <License />
            <span>License Management</span>
          </template>
          <el-menu-item index="/licenseManage">Manage License</el-menu-item>
          <el-menu-item index="/assignlicense">Assign License</el-menu-item>
          <el-menu-item index="/volumecancel">Volume Cancel</el-menu-item> 
        </el-submenu>
        <el-menu-item index="/device">
          <Device />
          <span>Device Management</span>
        </el-menu-item>
        <el-menu-item index="/settings">
          <Settings />
          <span>Settings</span>
        </el-menu-item>
        <el-menu-item index="/support">
          <Support />
          <span>Support</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div @click="logout()" class="absolute left-0 bottom-0 w-full h-40px bg-[#F6F7F9] flex items-center cursor-pointer"><Logout class="ml-27px" /><span class="ml-11px text-14px text-[#232A40] font-bold">Log out</span></div>
  </div>
</template>

<style lang="scss" scoped>
.aside {
  padding: 48px 20px 0;
  background-color: #fff;
  ::v-deep .el-submenu.is-active,
  ::v-deep .el-submenu.is-active .el-submenu__title {
    color: #1460F3 !important;
  }
  ::v-deep .el-submenu__title {
    color: #232A40 !important;
  }
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    .head-photo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #8D9CB9;
      p {
        font-weight: 700;
        font-size: 30px;
        line-height: 39px;
        color: #FFF;
      }
    }
    .info {
      margin-top: 8px;
      text-align: center;
      word-wrap: break-word;
      word-break: break-all;
      & p:first-child {
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
        color: #232A40;
      }
      & p:last-child {
        font-size: 14px;
        line-height: 20px;
        color: #505258;
      }
    }
    .type {
      margin-top: 8px;
      padding: 4px 12px;
      height: 24px;
      background: #EEF4FF;
      border-radius: 31px;
      font-size: 12px;
      line-height: 16px;
      color: #2752A6;
      font-weight: 700;
    }
  }
}
</style>