pbl_admin_table/src/views/HomeView.vue

<template>
  <div class="body">
    <!-- <div class="top">
      <div class="title">CocoClass后台管理</div>
      <div class="person">
        <div class="person_name">{{ userinfo ? userinfo.username : "" }}</div>
        <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
      </div>
    </div> -->
    <div class="container">
      <div class="leftBar" style="height: 100%;">
        <sidebarL @getPer="getPer" :urlAddress.sync="urlAddress"  ref="sidebarLRef"></sidebarL>
      </div>
      <div class="table-container">
        <!-- <router-view></router-view> -->
         <!-- 首页 -->
         <homepageL :urlAddress.sync="urlAddress" v-show="!appSign" ref="homepageLRef"></homepageL>

         <!-- 应用  -->
         <iframe 
            v-if="appSign && urlAddress"
            allow= "camera *; microphone *;display-capture;midi;encrypted-media;"
            frameborder="no" 
            border="0" 
            scrolling="no" 
            style="border:0;width:100%;height:100%;" 
            :src="urlAddress" 
            ref="pageCon"
            >
        </iframe>
         <!-- <div style="height: 100%;" id="pageCon"></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:''
    }
  },
  computed: {
    ...mapGetters(['userinfo','appSign']),
  },
  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(() => {
        // 取消操作
      });
    },
   
    // 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
    getPer() {
      this.$refs.homepageLRef.getData()

      let params = [
        {
          functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
          org: this.userinfo.org, //组织id
          oid: this.userinfo.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];
				} 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.$forceUpdate();
		},
  },
  mounted() {
      this.getPer()
  },
};
</script>

<style scoped>

.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";
}

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}
.table-container {
  /* display: flex;
  flex: 1;
  justify-content: center; */
  width: 100%;
  background-color: #F9FAFB;
}
/* .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: 999999999; */
/* } */
</style>