pbl_admin_table/src/components/schoolArea.vue

<template>
	<div class="schoolArea">
		<!-- <div class="allView">
			<div class="allView_icon"></div>
			<div>集团特色</div>
		</div> -->

		<div v-if="fromL.admin.school">
			<div
				class="priSchBox"
				v-for="(i, index) in fromL.admin.school.list"
				:key="index + 'a'"
			>
				<div class="primarySch" @click="cutS(item.schoolid)">
					<img src="../assets/Slog.svg" style="margin-right: 8px" alt="" />
					<div>{{ i.menuName }}</div>
				</div>
				<div class="priSchArea">
					<div
						class="schArea"
						@click="cutS(item)"
						v-for="(item, index) in i.children"
						:key="index"
						:class="{ active: activeSchool == item.schoolid }"
					>
						{{ item.name }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
	props: ["schId","schOrg"],
	data() {
		return {
			activeSchool: "",
			schorg:''
		};
	},
	computed: {
		...mapGetters(["fromL",'userinfo']),
	},
	watch: {
		schId(newValue) {
			this.activeSchool = newValue;
		},
	},
	methods: {
		cutS(val) {
			console.log('cuts',val);
			
			if (
				this.userinfo.role == 1 &&
				this.userinfo.rrole == 1 &&
				this.userinfo.type == 1
			) {
				this.activeSchool = val.schoolid;
				this.schorg = val.orgid
				this.$emit("cutSch",{ oid:val.schoolid, org :val.orgid});
			}
		},
	},
	mounted() {
		this.activeSchool = this.schId;
		this.schorg = this.schOrg;
	},
};
</script>
<style scoped>
.schoolArea {
	/* max-width: 192px;
    min-width: 192px; */
	min-height: 600px;
	width: 267px;
	min-width: 100px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	padding: 19px 13px;
	box-sizing: border-box;
	gap: 8px;
	background: #fff;
}
.allView {
	display: flex;
	width: 230px;
	height: 54px;
	font-size: 18px;
	align-items: center;
	padding: 16px;
	box-sizing: border-box;
}
.primarySch {
	display: flex;
	padding: 16px;
	padding-bottom: 4px;
}
.priSchArea {
	margin: 8px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.schArea {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	border-radius: 6px;
	padding: 7px 16px;
	padding-left: 36px;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
}
.allView_icon {
	background: url("../assets/img/zl.svg") no-repeat;
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: contain;
	margin-right: 8px;
}
.active {
	background: #e7e7e7;
	color: #453cca;
}
</style>