pbl_admin_table/src/components/sidebarL.vue

<template>
        <div class="left">
            <!-- <div > -->
                <div class="logo2">
                    <img :src="fromL.basics.logo ? fromL.basics.logo : require('../assets/img/moren.png')" alt="">
                </div>
                <!-- <div class="ulT"> -->

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

                <!-- 权限 -->
                <div  v-for="(item,index) in appSignL(fromL.admin.sidebar.list)"
                    :key="index+1">

                    <!-- 渲染菜单类型 -->
                     <div class="ulTOne TwoBar" v-if="item.menuName">
                          <!-- 二级导航 -->
                        <transition name="slide">
                            <div class="ulTCopy2">
                                <div class="ulTCopyTit">
                                    <span>{{ item.menuName }}</span>
                                </div>
                                <div class="ulTCopyHei">
                                    <div class="ulTCopyTxt" 
                                    v-for="(i,ind) in appSignL(item.children)"
                                        @click="levTwo(i,ind,index)" :key="ind+'a'">
                                            <div class="ulTCopyTxt"
                                             :style="{background : (activeLTwo === index+1 +'+' + ind)? '#0663FE' : '',color: (activeLTwo === index+1 +'+' + ind)? '#fff' :''}"
                                            v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
                                         
                                                <div class="ulTCopyConT">{{ p.name }}</div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </transition>
                        <div class="menu_left">
                            <div class="iconW">
                                <img :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" class="logo" alt="">
                            </div>
                            <span class="barT">{{ item.menuName }}</span>
                        </div>
                        
                     </div>
                   
                
                    <!-- 渲染平台工具类型 -->
                    <div @click.stop="goto(index,item)" 
                     v-else>
                        <div class="ulTOne TwoBar" 
                        @mouseenter="mouGet(item.toolId)" 
                        v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
                          <!-- 二级导航 -->
                                <transition name="slide">
                                        <div class="ulTCopy2" v-if="item.toolId == 'appStore'">
                                            <div class="ulTCopyTit">
                                                <span>CocoFlow</span>
                                            </div>
                                            <div class="ulTCopyHei" >
                                                <span v-if="cocoFlowList[0].length" style="color: #00000066;">最近使用</span>
                                                <div class="ulTCopyTxt"  
                                                v-for="(i,ind) in cocoFlowList[0]" 
                                                @click="openNewWindow(i.url)" :key="ind+'ab'">
                                                        <div class="ulTCopyConT">{{ i.name }}</div>
                                                </div>
                                                <span v-if="cocoFlowList[1].length" style="color: #00000066;">我的收藏</span>

                                                <div class="ulTCopyTxt"
                                                v-for="(i,ind) in cocoFlowList[1]" @click="openNewWindow(i.url)" :key="ind+'a'">
                                                        <div class="ulTCopyConT">{{ i.name }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </transition>
                                <div class="menu_left" >
                                    <div class="iconW">
                                        <img class="logo"  
                                        :src="activeL === (index +1) ? p.activeIcon : p.defaultIcon" 
                                        alt="">
                                    </div>
                                    <span class="barT" :style="{color : activeL === (index +1) ? '#0051D7' :''}">
                                        {{ p.name }}
                                    </span>
                                </div>

                        </div>
                    </div>
                </div>

        </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import store from '../store'
import { API_CONFIG } from "@/common/apiConfig";

    export default {
        props:['urlAddress'],
        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('appSignL',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 {
                // 一级选中第几个
                activeL:0,
                visible:true,
                // 二级选中第几个
                activeLTwo: null,
                cocoFlowList:[],

            }
        },
        methods: {
            ...mapActions({
                logout: 'user/logout'
            }),

            mouGet(val){
                if(val != 'appStore') return
                console.log('666')
                this.getData()
            },
            // 点击一级导航
            async goto(index,val = null){
                // console.log('goto',val);
              
                // val = null 就是点击了首页
                if (val) {
                    this.activeL = index + 1               
                }else{
                    // 点击首页清空内容,并把标识去除
                    await store.commit('user/SET_AppSIGN', '')
                    this.$emit('update:urlAddress','')

                    this.$emit('getPer')
                    // 清空选中状态
                    this.activeLTwo = ''
                    this.activeL = index
                    return
                }
           
                    this.activeLTwo = ''


                    // 点击相同应用不刷新  
                    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) {
                        if (e.region == "beta") {
                            url = e.url
                        }
                    });
                    let _userinfo = this.userinfo, //登录用户信息
                    { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                    const _TscreenType = 1, _SscreenType = 3; // 常量定义
                    let queryString = ''
                    if(val.argumentList && val.argumentList.length){
                        const paramsMap = {
                        userid: _userid,
                        org: _org,
                        oid: _oid,
                        tType: _type,
                        role: _role,
                        classId: _classId,
                        TscreenType: _TscreenType,
                        SscreenType: _SscreenType
                        };

                        const canshu = val.argumentList
                        .filter(param => paramsMap[param] !== undefined)
                        .map(param => `${param}=${paramsMap[param]}`);

                        queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                    }

                    let _url = url + queryString

                    let kpl = ` <iframe 
                                    v-if="appSign && urlAddress"
                                    allow= "camera *; microphone *;display-capture;midi;encrypted-media;"
                                    frameborder="no" 
                                    border="0" 
                                    style="border:0;width:100%;height:100%;" 
                                    src="${_url}" 
                                    ref="pageCon"
                                    >
                                </iframe>`

                    let pl = {json:kpl ,stateL :true,toolId :val.toolId}

                    // 添加打开应用
                    this.$emit('AddAppJson',pl)
            },
            
            // 获取cocoFlow收藏与历史使用记录
            getData(){
                let params = [
                    {
                        functionName: API_CONFIG.ajax_appStoreSave.functionName,
                        uid: this.userinfo.userid, 
                    },
                ];
                
                this.$ajax
                    .post(API_CONFIG.baseUrl, params)
                    .then((res) => {
                        this.cocoFlowList.push(res.data[0])
                        this.cocoFlowList.push(res.data[1])
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("获取常见应用失败");
                    });
            },
            // 点击二级导航
            async levTwo(val,index,aInd){     
                
                this.activeL = ''
                this.activeL = aInd +1
                this.activeLTwo = `${aInd + 1}+${index}`

                // 点击相同应用不刷新
                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) {
                    if (e.region == "beta") {
                        url = e.url
                    }
                });

                let _userinfo = this.userinfo, //登录用户信息
                { userid: _userid, organizeid: _oid, type: _type, org: _org, role: _role, classid: _classId } = _userinfo; // 解构赋值获取用户信息
                const _TscreenType = 1, _SscreenType = 3; // 常量定义
                let queryString = ''
                if(val.argumentList && val.argumentList.length){
                    const paramsMap = {
                    userid: _userid,
                    org: _org,
                    oid: _oid,
                    tType: _type,
                    role: _role,
                    classId: _classId,
                    TscreenType: _TscreenType,
                    SscreenType: _SscreenType
                    };

                    const canshu = val.argumentList
                    .filter(param => paramsMap[param] !== undefined)
                    .map(param => `${param}=${paramsMap[param]}`);

                    queryString = canshu.length ? (url.includes('?') ? '&' : '?') + canshu.join('&') : ''; // 生成查询字符串
                }

                let _url = url + queryString
                let kpl = ` <iframe 
                                v-if="appSign && urlAddress"
                                allow= "camera *; microphone *;display-capture;midi;encrypted-media;"
                                frameborder="no" 
                                border="0" 
                                style="border:0;width:100%;height:100%;" 
                                src="${_url}" 
                                ref="pageCon"
                                >
                            </iframe>`

                let pl = {json:kpl ,stateL :true,toolId :val.toolId}

                this.$emit('AddAppJson',pl)
            },
            openNewWindow(val) {
                console.log(val);
                
                // // 基本用法：打开指定 URL
                window.open(val, "_blank");
            },
        },
       
       
    }
</script>

<style scoped>
.ulTCopy{
    overflow: auto;
    height: 100%;
}
.ulTCopy2 {
    height: 90%;
    width: 154px;
    overflow: hidden;
    background-color: rgb(255 255 255 / 98%);
    border-radius: 12px;
    position: fixed;
    left: -75px;
    top: 70px;
    z-index: -100;
    transition: transform .5s ease;

}

.TwoBar:hover .ulTCopy2{
    display: block !important;
    transform: translateX(164px) !important; /* 初始位置在视图之外 */
    z-index: -100;
    box-shadow: 0px 6px 30px 5px #0000000D;

}

.logo{
  margin: auto;
  width: 21px;
  max-height: 24px;
}

.iconW{
    width: 30px;
    height: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 1px;
    box-sizing: border-box;
}
.logo2 {
  padding: 8px;
  box-sizing: border-box;
  height: 48px;
  width: 100%;
  background-color: #fff;
  text-align: center;
}
.logo2 img{
    width: 30px;
    height: 30px;
}

.userInfo{
  width: 80px;
  color: #374151;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  background-color: #fff;
  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%;
    padding:23px 6px;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: auto;
    border-right: 1px #D5D5D5 solid;
}

.ulTOne{ 
    width: 100%;
    border-radius: 10px;
    display: flex;
    height: 48px;
    width: 48px;
    flex-wrap:nowrap;
    align-content: center;
    justify-content: center;
    position: relative;
}


.barT{
    font-size:10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu_left {
  width: 32px;
  height: 42px;
  font-size: 10px;
  color: #64748b;
  box-sizing: border-box;
  cursor: pointer;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}


.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
  z-index: -1000 !important;
}

.slide-enter{
    z-index: -1000 !important;
  transform: translateX(0); /* 进入时移动到正常位置 */
}
.slide-leave-to /* .slide-leave-active in <2.1.8 */ {
    z-index: -1000 !important;
    transform: translateX(0); /* 进入时移动到正常位置 */
}

.ulTCopyTit{
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0px;
    color: #000;
    height: 40px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: .5px #e5e7eb solid;
    background: #fff !important;
}
.ulTCopyHei{
    display: flex;flex-direction: column;
    gap: 10px;
    overflow: auto;
    padding: 10px;
    overflow-x: hidden;
    height: calc(100% - 72px);
}
.ulTCopyTxt{
    box-sizing: border-box;display: flex;
    align-items: center;
    color: #374151;
    width: 100%;
    border-radius: 10px;
    font-size: 16px;
    margin: 0;
}
.ulTCopyTxtBlock{
    width: 100%;
}
.ulTCopyConT {
    width: 100%;
    font-size: 12px;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   
}
.ulTCopyConT:hover{
    background: #e7e7e7;
    color: #000;
}
.ulTCopyTxtCon{
   display: flex;align-items: center;width: 100%;
}
/* .ulTCopyTxt:hover{
    background-color: #f3f4f6 !important;
} */
.cha:hover{
    color: #000 !important;
}


.ovlH{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>