pbl_admin_table/src/components/sidebarL.vue

<template>
        <div class="left">
            <div class="logo2">
                <img :src="fromL.basics.logo" alt="">
            </div>
            <div class="ulT">

                <!-- 默认首页 -->
                <div @click.stop="goto(0)" :style="{background :activeL === 0 ?'#E6F0FF':'',zIndex : 10000 }">
                    <div class="menu_left">
                        <img  class="logo" :src="activeL === 0 ? require('../assets/img/sy1.svg') : require('../assets/img/sy.svg')" alt="">
                        <span  :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
                    </div>
                </div>

                <!-- 权限 -->
                <div v-for="(item,index) in appSignL(fromL.admin.sidebar.list)"
                    @click.stop="goto(index,item)" 
                    :style="{background :activeL === (index +1) ?'#E6F0FF':'',zIndex : 10000 }" 
                    :key="index+1">

                    <!-- 渲染菜单类型 -->
                    <div class="menu_left" v-if="item.menuName">
                        <img  class="logo" :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" alt="">
                        <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">{{ item.menuName }}</span>
                    </div>
                  
                    <!-- 渲染应用类型,               status判断是否被删除  isAdmin是否为管理员可见 -->
                    <div v-else>
                        <div>
                            <div v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
                                <div class="menu_left" >
                                    <div>
                                        <img class="logo3"  
                                        :src="activeL === (index +1) ? p.icon : p.activeIcon" 
                                        alt="">
                                    </div>
                                    <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">
                                        {{ p.name }}
                                    </span>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
            <div class="userInfo">
                <img style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%;margin-bottom: 4px;" :src="userinfo.headportrait ? userinfo.headportrait : require('../assets/img/toux.png')" alt="">
                <div style="margin-bottom: 8px;">{{ userinfo.username }}</div>
                <span style="cursor: pointer;padding: 5px;background-color: #e7e7e7;box-sizing: border-box;border-radius: 5px;" @click="handleLogout">退出登录</span>
            </div>
            
            <!-- 二级导航 -->
            <div class="ulTCopy" v-if="isShow && barCopy.length != 0" >
                <div class="ulTCopyTit">
                    <span>教学中心</span>
                    <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span>
                </div>

                <div style="padding: 16px;box-sizing: border-box;">
                    <div class="ulTCopyTxt" v-for="(i,ind) in appSignL(barCopy)" @click="levTwo(i)" :key="ind+'a'">
                        <div>
                            <div style="display: flex;justify-content: space-between;align-items: center;" v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
                                <div>  
                                    <img style="width: 30px;object-fit: contain;margin-right: 5px;"  
                                    :src="p.icon" 
                                    alt="">
                                </div>
                                <span>{{ p.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div v-if="isShow" @click="closeCopy" style="width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;z-index: 1;"></div>
        </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import store from '../store'

    export default {
        computed: {
            ...mapGetters(['userinfo','fromL','appSign']),
            // 如果hk，com没有图标，默认使用cn的
            AppCon(){
                return function(c) {
                    let k = JSON.parse(JSON.stringify(c))
                    let data = k.filter(e=>{
                        return e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea
                    })

                    let data2 = k.filter(e=>{
                        return e.region == 'cn'
                    })
                    
                    // 如果hk，com没有图标，默认使用cn的
                    if (!data[0].icon){
                        data[0].icon = data2[0].icon
                        data[0].activeIcon = data2[0].activeIcon
                    }
                    return data
                };
            },
            // 筛选是否为管理员可见，是否被删除
            appSignL(){
                return function(val){
                    console.log(val);
                    
                    let data = []
                    if (this.userinfo.type == 1 && this.userinfo.role == 1) {
                        val.forEach( e =>{
                            if (e.menuName || e.status == 0) {
                               data.push(e)
                            }
                        })
                    } else {
                        val.forEach( e =>{
                            if (e.menuName || (e.isAdmin == '0' && e.status == 0)) {
                               data.push(e)
                            }
                        })
                    }
                    return data
                }
            }
        },
        data() {
            return {
                // 二级弹框是否显示
                isShow:false,
                // 一级选中第几个
                activeL:0,
                // 二级分类
                barCopy:[],
             
            }
        },
        methods: {
            ...mapActions({
                logout: 'user/logout'
            }),
            async handleLogout() {
                this.$confirm('确定退出吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    loginOut()
                    .then(async () => {
                        this.$message({
                        message: '退出成功',
                        type: 'success'
                        });
                        await this.logout();
                        this.$router.push('/login');
                    })
                    .catch(err => {
                        console.error(err);
                    });
                }).catch(() => {
                    // 取消操作
                });
            },
            // 关闭二级导航遮罩层
            closeCopy(){
                this.isShow = false
            },
            // 点击一级导航
            async goto(index,val = null){
                console.log('goto',val);
                
                // val = null 就是点击了首页
                if (val) {
                    this.activeL = index + 1               
                }else{
                    // 点击首页清空内容,并把标识去除
                    await store.commit('user/SET_AppSIGN', '')
                    document.querySelector('#pageCon').innerHTML = '';
                    this.$emit('getPer')

                    this.isShow = false
                    this.activeL = index
                    return
                }


                // 有二级导航的显示二级导航.无二级则进行判断
                if (val.children) {
                    this.barCopy = JSON.parse(JSON.stringify(val.children))
                    this.isShow = true

                    // this.appSign = ''
                    // document.querySelector('#pageCon').innerHTML = '';
                }else{
                    this.isShow = false

                    // 点击相同应用不刷新  
                    if (this.appSign == val.toolId) return

                    // 更新标识
                    await store.commit('user/SET_AppSIGN', val.toolId)

                    let url = ''
                    // 查出对应账号的应用区域地址
                    val.url.forEach(e => {
                        if (e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea) {
                            url = e.url
                        }
                    });

                    let dom = document.querySelector('#pageCon')
                    
                    document.querySelector('#pageCon').innerHTML = '';
                    console.log('val',val);
                    
                    
                   
                    window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom,val.argumentList)
                   
                    // 应用标识，url,存储dom
                }
            },
            // 点击二级导航
            async levTwo(val){
              
                // 点击相同应用不刷新
                if (this.appSign == val.toolId) return

               // 更新标识
                await store.commit('user/SET_AppSIGN', val.toolId)
                
                let url = ''
                val.url.forEach(e => {
                    if (e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea) {
                        url = e.url
                    }
                });

                let dom = document.querySelector('#pageCon')
        
                document.querySelector('#pageCon').innerHTML = '';
                
                window.topU.U.MD.D.I.openApplicationWai(val.toolId, url, dom)
            }
        },
       
       
    }
</script>

<style scoped>
.logo{
  width: 80px;
  height: 68px;
}
.logo3{
    height: 25px;object-fit: contain;transform: scale(1.5);
}
.logo2{
  padding: 16px;
  box-sizing: border-box;
  height: 68px;
  border-bottom: .5px #e5e7eb solid;
}
.logo2 img{
  width: 37px;
}
.userInfo{
  width: 80px;
  color: #374151;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.left {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    width: 80px;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 999;

}
.left .ulT { 
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  overflow: auto;
  flex-direction: column;
  background-color: #ffffff;
}
.left .ulT div{ 
  border-radius: 10px;
}
.ulTCopy{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(256px,0);
    height: 100%;
    width: 256px;
    z-index: 999999999;
    background-color: #ffffff;
    overflow: visible; 
    transition: width 2s ease; /* 定义过渡效果 */
    box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.1),5px 3px 5px 0px rgba(0, 0, 0, 0.1);
}

.ulTCopyTit{
    height: 72px;padding: 16px;box-sizing: border-box;color: #000;font-size: 18px;font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .5px #e5e7eb solid;

}
.ulTCopyTxt{
    height: 48px;padding: 12px;box-sizing: border-box;display: flex;align-items: center;
    color: #374151;
    border-radius: 10px;
    cursor: pointer;
}
.ulTCopyTxt:hover{
    background-color: #f3f4f6;
}
.cha:hover{
    color: #000 !important;
}

.menu_left {
  width: 64px;
  height: 70px;
  font-size: 10px;
  margin-top: 3px;
  white-space: nowrap;
  color: #64748b;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  z-index: 1000000;
  text-decoration: none; /* 移除下划线 */
  cursor: pointer;
  border-radius: 10px;
  margin-top: 12px;
}
.ulT div:nth-child(1){
    margin-top: 0;
}
.menu_left:hover{
    background-color: #f3f4f6 !important;
}
.menu_left img{
  width: 22px;
  height: 20px;
}

</style>