pbl_admin_table/src/views/HomeView.vue

<template>
  <div class="body">
   
    <div class="container">
      <div class="leftBar" style="height: 100%;">
        <sidebarL @getPer="getPer" @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress"  ref="sidebarLRef"></sidebarL>
      </div>
      <div class="table-container">

        <div class="top">
          <div class="topCon">
            <div class="title">
              <span v-if="roleUser.orgName">{{roleUser.orgName}}</span >
              <span style="color: #0663FE;font-weight: 600;">{{ roleUser.schoolName }}</span>
                
            </div>
            <div class="person">
              <div class="person_name">
                <img
                 @click="openData()"
                style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%; cursor: pointer;" 
                :src="roleUser.headportrait ? roleUser.headportrait : require('../assets/img/toux.png')" alt="">
                <div class="personInfo">
                  <div class="personInfoTit">
                    {{  roleUser.username }}
                  </div>
                  <div class="personInfoBri">
                    {{ userSuffix() }}
                  </div>
                </div>
              </div>
              <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
            </div>
          </div>
        </div>
        <!-- <router-view></router-view> -->
         <!-- 首页 -->
         <homepageL @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress" v-show="!appSign" ref="homepageLRef"></homepageL>

         <!-- 循环数组展示iframe  -->
          <div
              v-for="(item,index) in AppJSon" :key="index">
            <div style="height: calc(100vh - 60px);" v-show="item.stateL">
              <div style="height: 100%;"  v-html="item.json"></div>
            </div>
          </div>
        
         <div v-if="loading" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #fff;
              display: flex;justify-content: center;align-items: center;">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img style="height: 75px;transform: scale(2);" src="../assets/img/cocoloading.gif" alt="">
            <div style="color: #0354D7;">拼命加载中...</div>
          </div>  

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

<script>
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import sidebarL from '../components/sidebarL.vue';
import { API_CONFIG } from "@/common/apiConfig";
import store from '../store'
import homepageL from './homepageL.vue';


export default {
  name: "HomeView",
  components:{
    sidebarL,
    homepageL
  },
  data() {
    return {
      perData:[],
      toolList:[],
      form:{},
      urlAddress:'',
      AppJSon:[],
      loading:false
    }
  },
  computed: {
    ...mapGetters(['userinfo','appSign','userinfo2']),
    userSuffix(){
      let yym = ''
      return function() {
        
        
        yym = this.userinfo.role == 1 && this.userinfo.rrole == 1 && this.userinfo.type == 1 && this.userinfo2 !== '' ? this.userinfo2 : this.userinfo
       
        let val = yym.accountNumber

        let userName = JSON.parse(JSON.stringify(val))

        const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
        
        // // 判断用户输入账户带不带后缀
        if (!regEmail.test(userName)) {
          console.log('111');
        } else {
          const parts = userName.split('@');
          userName = parts[0];
        }

        return userName
      }
    },
    roleUser(){
        return this.userinfo.role == 1 && this.userinfo.rrole == 1 && this.userinfo.type == 1&& this.userinfo2 !== '' ? this.userinfo2 : this.userinfo
    }
  },
  methods: {
    ...mapActions({
      logout: 'user/logout'
    }),
    openData(){
        window.topU.U.MD.D.I.openApplication('my')
    },
    // 打开平台应用工具
    AddAppJson(val){
      console.log('val',val);

      // 判断有没有打开过这个应用
      let data = this.AppJSon.filter(e=>{
        return val.toolId == e.toolId
      })
      // console.log('data',data);

      if (data.length == 0) {   //为0则添加进列表,并将其他的展示状态改为false
        this.loading = true

        // 打开平台工具加载两秒
        setTimeout(() => {
          this.loading = false
        }, 2000);
        this.AppJSon.forEach(e=>{
          this.$set(e, 'stateL', false); // 使用 Vue.set 确保响应式
        })
        this.AppJSon.push(val)
      }else{
        this.AppJSon.forEach(e=>{
          if (val.toolId == e.toolId) {  //已经打开过了,将点击的工具展示状态改为false
            this.$set(e, 'stateL', true); // 使用 Vue.set 确保响应式
          }else{
            this.$set(e, 'stateL', false); // 确保响应式更新
          }
        })
      }
    },

    
    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(() => {
        // 取消操作
      });
    },
   
    // 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
    getPer() {
      // 查询首页应用
      this.$refs.homepageLRef.getData()
      //查询cocofrow最近使用与收藏
      this.$refs.sidebarLRef.getData()

      let params = [
        {
          functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
          org: this.roleUser.org, //组织id
          oid: this.roleUser.organizeid, //学校id
        },
      ];
      
      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          let data = res.data[0]
          // console.log('data', data)
          this.perData= JSON.parse(data[0].json)
          this.getToolData()



        })
        .catch((err) => {
          console.error("请求失败，错误信息：", err);
        });
    },
    getToolData() {
			let params = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					let _data = res.data;
					let _list = _data[0];
					_list.forEach((i) => {
						i.url = JSON.parse(i.url);
						i.json = JSON.parse(i.json);
						i.argumentList = JSON.parse(i.argumentList);
					});
					this.toolList = _list;
          // console.log('_list',_list);
          
					this.setDataListToo(_list);
				})
				.catch((err) => {
					console.log(err);
					this.$message.error("获取工具数据失败");
				});
		},
    async setDataListToo(toolList = []) {
      // console.log('toolList',toolList);
      
			let _form = JSON.parse(JSON.stringify(this.perData));
			// _form.desktop.list.forEach((i, index) => {
			// 	let _index = toolList.findIndex((i2) => i == i2.id);
			// 	if (_index != -1) {
			// 		_form.desktop.list[index] = toolList[_index];
			// 	} else {
			// 		console.log("无工具", i);
			// 	}
			// });

			_form.admin.index.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					_form.admin.index.list[index] = toolList[_index];
          _form.admin.index.list[index].hovered = false
				} else {
					console.log("无工具", i);
				}
			});

			_form.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					i.children.forEach((i2, index2) => {
						let _toolList = JSON.parse(JSON.stringify(toolList))
						let _index = _toolList.findIndex((i3) => i2 == i3.id);
						
						if (_index != -1) {
							_form.admin.sidebar.list[index].children[index2] = _toolList[_index];
							_form.admin.sidebar.list[index].children[index2].typeId = _form.admin.sidebar.list[index].typeId + "," +_toolList[_index].id;
						} else {
							console.log("无工具", i);
						}
					});
				} else {
					let _toolList = JSON.parse(JSON.stringify(toolList))
					let _index = _toolList.findIndex((i2) => i == i2.id);
					if (_index != -1) {
						_form.admin.sidebar.list[index] = _toolList[_index];
						_form.admin.sidebar.list[index].typeId =
							_form.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					} 
				}
			});

      // console.log('_form',_form);
      await store.commit('user/SET_FROM', _form)
      // 获取后台管理设置常见应用
      this.$refs.homepageLRef.getadmincocoFlow()
      
			this.$forceUpdate();
		},
  },
  mounted() {
      this.getPer()
  },
};
</script>

<style scoped>
.top{
  width: 100%;
  padding: 0 90px;
  display: flex;
  height: 60px;
  box-sizing: border-box;
}
.topCon{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.title{
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #969BA3;
  display: flex;
  gap: 11px;
}
.person{
  display: flex;
  align-items: center;
}
.person_name{
  display: flex;
  gap: 9px;
}
.personInfo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.personInfoTit{
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #000000;
}
.personInfoBri{
  font-family: PingFang SC;
  font-weight: 300;
  font-size: 10px;
  line-height: 100%;
  color: #969BA3;
}
.container {
  display: flex;
  width: 100%;
  height: 100vh;
}
.container >>> .el-loading-mask{
  z-index: 0;
}
.table-container {
  /* display: flex;
  flex: 1;
  justify-content: center; */
  width: 100%;
  background-color: #F9FAFB;
  position: relative;
}
.leftBar{
  /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px 6px rgb(0 0 0 / 0.1); */
  /* overflow: visible;  */
  z-index: 999;
}
</style>