eta_mini_crm_front/src/layout/components/LeftWrap.vue

<script setup>
import { useRouter } from 'vue-router'
import { useLayoutState } from '../hooks/index'
import {apiSystemRole} from '@/api/system'

const router = useRouter()

const { menuClose } = useLayoutState()

const navList = ref([])

function getNavList(){
    //mock navList
    navList.value = [
        {
            Path:'/customer',
            Name:'客户管理',
            Children:[
                {
                    Path:'/customer/tempUserList',
                    Name:'临时用户列表',
                }
            ]
        },
        {
            Path:'/authorMgt/authorList',
            Name:'研究员管理',
            Children:[]
        },
        {
            Path:'/customer/feedbackList',
            Name:'客户反馈',
            Children:[]
        }
    ]
    return 
  apiSystemRole.menuData().then(res=>{
    if(res.Ret===200){
      navList.value=res.Data||[]
    }
  })
}
getNavList()

const userName=computed(()=>{
  return localStorage.getItem('userName')
})

function resetpwd() {
  router.push('/system/resetPwd')
}

function logout() {
  ElMessageBox.confirm(
    '确认退出吗?',
    '提示',
    { type: 'warning', }
  ).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('userName')
    router.replace('/login')
  }).catch()
}

function getMenuIcon(item){
  if(item.Name==='用户列表') return 'menu/user'
  if(item.Name==='潜在用户列表') return 'menu/usergroup'
  if(item.Name==='PDF报告') return 'menu/pdf'
  if(item.Name==='全局检索') return 'menu/usersearch'
  return 'menu/setting'
}

</script>

<template>
  <div :class="['left-wrap', menuClose ? 'left-wrap__close' : '']">
    <el-menu
      class="menu-wrap"
      mode="vertical"
      unique-opened
      router
      :default-active="$route.path"
      :collapse="menuClose"
    >
      <template v-for="level1 in navList" :key="level1.SysMenuId">
        <el-menu-item
          :index="level1.Path"
          v-if="level1.Children.length===0"
        >
          <svg-icon :name="getMenuIcon(level1)" style="font-size:16px;"></svg-icon>
          <span>{{ level1.Name }}</span>
        </el-menu-item>
        <el-sub-menu
          :index="level1.Path"
          v-if="level1.Children.length>0"
        >
          <template #title>
            <svg-icon :name="getMenuIcon(level1)" style="font-size:16px"></svg-icon>
            <span>{{ level1.Name }}</span>
          </template>
          <el-menu-item
            v-for="child in level1.Children"
            :index="child.Path"
            :key="child.Path"
          >
            <el-icon></el-icon>
            <span>{{ child.Name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
    <div class="user-box" v-if="!menuClose">
      <div class="name-box">
        <svg-icon name="person" size="18px"></svg-icon>
        <span>{{userName}}</span>
      </div>
      <div class="opt" @click="resetpwd">修改密码</div>
      <div class="opt" @click="logout">退出登录</div>
    </div>
    <el-popover placement="right" :width="100" trigger="click">
      <template #reference>
        <div style="text-align: center">
          <svg-icon name="person" size="24px" v-if="menuClose"></svg-icon>
        </div>
      </template>
      <div>
        <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="resetpwd">修改密码</div>
        <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="logout">退出登录</div>
      </div>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
.left-wrap {
  --el-menu-bg-color: #086CE0;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.15);
  --el-menu-text-color: #ffffff;
  --el-menu-active-color: #ffae4f;
  width: 180px;
  z-index: 50;
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  padding: 8px;
  background-color: #086CE0;
  display: flex;
  flex-direction: column;
  padding-bottom: 111px;
  transition: all 0.5s;
  .menu-wrap {
    flex: 1;
    height: 100%;
    border: none;
  }
  .user-box {
    background-color: var(--el-menu-hover-bg-color);
    color: #fff;
    text-align: center;
    padding: 20px;
    .name-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 5px;
    }
    .opt {
      margin: 10px 0;
      cursor: pointer;
    }
  }
}
.left-wrap__close {
  width: 80px;
}
</style>