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"
					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" @click="editInfo">
								<!-- @click="openData()" -->
								<img
									style="
										width: 40px;
										height: 40px;
										object-fit: cover;
										border-radius: 50%;
										cursor: pointer;
									"
									:src="
										roleUser.headportrait
											? roleUser.headportrait
											: require('../assets/img/toux2.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>

				<!-- 首页 -->
				<homepageL
					@AddAppJson="AddAppJson"
					v-show="!appSign"
					ref="homepageLRef"
				></homepageL>

				<!-- 循环数组展示iframe  -->
				<div v-for="(item, index) in AppJSon" :key="index">
					<!-- {{ item }} -->
					<div style="height: calc(100vh - 60px)" v-show="item.stateL">
						<iframe
							allow="camera *; microphone *;display-capture;midi;encrypted-media;fullscreen *;"
							frameborder="no"
							style="border: 0; width: 100%; height: calc(100vh - 60px)"
							:src="item.json"
							:ref="item.toolId"
						>
						</iframe>
					</div>
				</div>

				<!-- 荔园首页定制工具，不保存缓存 -->
				<div style="height: calc(100vh - 60px)" v-if="clearifa">
					<iframe
						allow="camera *; microphone *;display-capture;midi;encrypted-media;fullscreen *;"
						frameborder="no"
						style="border: 0; width: 100%; height: calc(100vh - 60px)"
						:src="clearifa"
					>
					</iframe>
				</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>
		<userInfoA
			ref="userInfoA"
			:userid="roleUser.userid"
			:oid="roleUser.organizeid"
			:role="roleUser.role"
		/>
	</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 userInfoA from "../components/userInfoA.vue";
import homepageL from "./homepageL.vue";

export default {
	name: "HomeView",
	components: {
		sidebarL,
		homepageL,
		userInfoA,
	},
	data() {
		return {
			AppJSon: [],
			loading: false,
			clearifa: "",
			// 荔园集团下的学校
			mergedList: [
				"3823a6a5-1b6e-11f0-a66a-005056924926",
				"292e34dc-1b6e-11f0-a66a-005056924926",
				"21d6b367-1b6e-11f0-a66a-005056924926",
				"1a1a172d-1b6e-11f0-a66a-005056924926",
				"1197f86b-1b6e-11f0-a66a-005056924926",
				"f235659b-1b6d-11f0-a66a-005056924926",
				"d87b62d3-1b6d-11f0-a66a-005056924926",
				"c25ea59b-1b6d-11f0-a66a-005056924926",
			],
		};
	},
	computed: {
		...mapGetters(["userinfo", "appSign", "userinfo2"]),
		userSuffix() {
			let yym = "";
			return function () {
				// this.userinfo.role == 1 && this.userinfo.rrole == 1 && this.userinfo.type == 1 &&
				yym =
					Object.keys(this.userinfo2).length != 0
						? 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() {
			// this.userinfo.role == 1 && this.userinfo.rrole == 1 && this.userinfo.type == 1&&
			return Object.keys(this.userinfo2).length != 0
				? this.userinfo2
				: this.userinfo;
		},
	},
	methods: {
		...mapActions({
			logout: "user/logout",
		}),
		// 打开个人信息
		openData() {
			window.topU.U.MD.D.I.openApplication("my");
		},
		// 打开编辑弹框
		editInfo() {
			this.$refs.userInfoA.openDig();
		},
		// 打开平台应用工具
		AddAppJson(val) {
			console.log("AddAppJson", val);
			// 荔园首页工具切换，不缓存工具
			if (val.clearL) {
				this.AppJSon.forEach((e) => {
					this.$set(e, "stateL", false); // 使用 Vue.set 确保响应式
				});
				this.loading = true;
				this.clearifa = val.json;
				// 打开平台工具加载两秒
				setTimeout(() => {
					this.loading = false;
				}, 2000);
				return;
			}

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

			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); // 确保响应式更新
					}
				});

				setTimeout(() => {
					// console.log('this.$refs.appRef.contentWindow.document.body;', this.$refs[val.toolId][0].contentWindow.document.body);

					if (!this.$refs[val.toolId][0].contentWindow.document.body) {
						this.$refs[val.toolId][0].contentWindow.location.reload();
					}
				}, 2000);
			}
		},

		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(() => {
					// 取消操作
				});
		},

		// 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
		async getPer() {
			this.clearifa = "";
			// 查询首页应用
			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
				},
			];
			// 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
			// 第一步
			let res = await this.$ajax.post(API_CONFIG.baseUrl, params);
			let perData = JSON.parse(res.data[0][0].json);

			// console.log('perData',JSON.parse(JSON.stringify(perData)));

			// 第二步
			let params2 = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];

			let res2 = await this.$ajax.post(API_CONFIG.baseUrl, params2);
			let toolList = res2.data[0];
			toolList.forEach((i) => {
				i.url = JSON.parse(i.url);
				i.json = JSON.parse(i.json);
				i.argumentList = JSON.parse(i.argumentList);
			});

			// let params3 = [
			// 	{
			// 		functionName: "select_schUsuallyApp",
			// 		userid: "",
			// 		stand: "cn",
			// 	},
			// ];

			// let res3 = await this.$ajax.post(API_CONFIG.baseUrl, params3);

			// let _list = res3.data[0];

			// _list.forEach((i) => {
			// 	i.json = JSON.parse(i.json);
			// });

			// let appList = _list;

			// 第三步
			perData.desktop.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					perData.desktop.list[index] = toolList[_index];
				} else {
					console.log("无工具", i);
				}
			});
			// console.log(
			// 	"perData.admin.cocoFlow",
			// 	JSON.parse(JSON.stringify(perData.admin))
			// );

			// if (perData.admin.cocoFlow) {
			// 	perData.admin.cocoFlow.forEach((i, index) => {
			// 		let _index = appList.findIndex((i2) => i.id == i2.id);
			// 		if (_index != -1) {
			// 			let _setData = appList[_index];
			// 			_setData.setIcon = i.setIcon;
			// 			perData.admin.cocoFlow[index] = _setData;
			// 		} else {
			// 			console.log("无应用", i);
			// 		}
			// 	});
			// }
			// if (perData.admin.cocoFlow2) {
			// 	perData.admin.cocoFlow2.forEach((i, index) => {
			// 		let _index = appList.findIndex((i2) => i.id == i2.id);
			// 		if (_index != -1) {
			// 			let _setData = appList[_index];
			// 			_setData.setIcon = i.setIcon;
			// 			perData.admin.cocoFlow2[index] = _setData;
			// 		} else {
			// 			console.log("无应用", i);
			// 		}
			// 	});
			// }
			// if (perData.admin.CampusF && perData.admin.CampusF.appList) {
			// 	perData.admin.CampusF.appList.forEach((i, index) => {
			// 		let _index = appList.findIndex((i2) => i.id == i2.id);

			// 		if (_index != -1) {
			// 			let _setData = appList[_index];
			// 			_setData.setIcon = i.setIcon;
			// 			perData.admin.CampusF.appList[index] = _setData;
			// 		} else {
			// 			console.log("无应用", i);
			// 		}
			// 	});
			// }

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

			perData.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) {
							perData.admin.sidebar.list[index].children[index2] =
								_toolList[_index];
							perData.admin.sidebar.list[index].children[index2].typeId =
								perData.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) {
						perData.admin.sidebar.list[index] = _toolList[_index];
						perData.admin.sidebar.list[index].typeId =
							perData.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					}
				}
			});

			await store.commit("user/SET_FROM", perData);
			// 获取后台管理设置常见应用
			this.$refs.homepageLRef.getadmincocoFlow();
		},
	},
	mounted() {
		console.log("重新获取数据");
		this.getPer();
		if (
			!this.roleUser.cclassid &&
			!this.roleUser.rrole &&
			this.mergedList.includes(this.roleUser.org)
		) {
			this.editInfo();
		}
	},
};
</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;
	padding: 5px 0 2px;
	box-sizing: border-box;
}

.personInfoTit {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 14px;
	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>