TEAMModelOS/TEAMModelOS/ClientApp/src/common/BaseSelectArea.vue

<template>
	<div class="base-area-select">
		<div v-if="!areaList.length"></div>
		<Dropdown @on-click="onAreaSelect" v-else>
			<!-- <img class="school-logo" src="https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E5%B0%91%E5%9F%8E%E6%A0%A1%E5%BE%BD.jpg" /> -->
			<a href="javascript:void(0)"
				:class="['base-user-post', joinSchools && joinSchools.length === 1 ? 'single-school' : '']">
				{{ areaList[curAreaIndex] }}
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<div v-for="(item,index) in areaList" :key="index">
					<DropdownItem :name="index">
						<div class="school-item">
							<span>{{ item }}</span>
						</div>
					</DropdownItem>
				</div>

			</DropdownMenu>
		</Dropdown>
	</div>
	</div>
</template>

<script>
	import User from '@/service/User.js'
	export default {
		data() {
			return {
				curSchool: {
					logo: ''
				},
				user: {
					schools: []
				},
				joinSchools: [],
				areaList:[],
				curAreaIndex:0,
				otherSch:'其它学校'
			}
		},
		created() {
			// 获取本地存储中的 用户信息
			let user = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
			let schoolProfile = localStorage.school_profile ? JSON.parse(decodeURIComponent(localStorage.school_profile,
				"utf-8")) : undefined;
			this.user.schools = user.schools
			let joinSchools = user.schools && user.schools.length ? user.schools.filter(i => i.status === 'join') : null
			// 优先读取本地存储（F5刷新影响） 如果是登录进入 则是读取默认学校
			let defaultSchoolCode = localStorage.getItem('login_schoolCode') || user.defaultschool
			console.log(joinSchools);
			/* 如果没有加入的学校或者加入的学校都没有归属区 */
			if(!joinSchools || joinSchools.every(i => !i.area)){
				this.$emit('noArea')
			}else{
				joinSchools.forEach(i => {
					if(!i.area){
						i.area = {
							name:this.otherSch
						}
					}
				})
			}
			this.joinSchools = joinSchools
			// 如果本地存储已经有保存学校信息 则刷新后会直接读取之前的学校信息
			if (schoolProfile && joinSchools.length) {
				this.curSchool = joinSchools.filter(i => i.schoolId === schoolProfile.school_base.id)[0]
				this.$store.commit('setSchoolCode', this.curSchool.schoolId)
				this.areaList = [...new Set(this.joinSchools.map(i => i.area).map(j => j.name))]
				if(this.areaList.includes(this.otherSch)){
					this.areaList = this.areaList.filter(i => i !== this.otherSch)
					this.areaList.push(this.otherSch)
				}
				let defaultAreaIndex = defaultSchoolCode ? this.areaList.indexOf(joinSchools.find(i => i.schoolId === defaultSchoolCode).area.name) : 0
				this.onAreaSelect(defaultAreaIndex,defaultSchoolCode)
			} else if (joinSchools && joinSchools.length) {
				// 拿到用户管理的schools 必须是已加入的学校
				this.curSchool = user.defaultschool ? joinSchools.filter(i => i.schoolId === user.defaultschool)[0] :
					joinSchools[0]
				this.$store.commit('setSchoolCode', this.curSchool.schoolId)
				this.areaList = [...new Set(this.joinSchools.map(i => i.area).map(j => j.name))]
				if(this.areaList.includes(this.otherSch)){
					this.areaList = this.areaList.filter(i => i !== this.otherSch)
					this.areaList.push(this.otherSch)
				}
				let defaultAreaIndex = defaultSchoolCode ? this.areaList.indexOf(joinSchools.find(i => i.schoolId === defaultSchoolCode).area.name) : 0
				this.onAreaSelect(defaultAreaIndex,defaultSchoolCode)
			} else {
				// this.$Message.warning(this.$t('utils.noShoolTip'))
			}
		},
		methods: {
			/* 区级切换时，如果时因为切换学校导致切换区域，则需要把切换的学校编码带进来 否则默认第一个学校 */
			onAreaSelect(val,defaultSchoolCode){
				this.curAreaIndex = val
				let areaSchs = this.joinSchools.filter(i => i.area.name === this.areaList[this.curAreaIndex])
				let curSchIndex = defaultSchoolCode ? areaSchs.map(i => i.schoolId).indexOf(defaultSchoolCode) : 0
				this.onSchoolSelect(areaSchs[curSchIndex])
				this.$EventBus.$emit('onChangeArea', {
					areaName:this.areaList[this.curAreaIndex],
					schoolCode:defaultSchoolCode
				})
				sessionStorage.setItem('areaId',areaSchs[curSchIndex].areaId)
				sessionStorage.setItem('areaName',areaSchs[curSchIndex].area.name)
			},
			async onSchoolSelect(val) {
				console.log(val)
				console.log(this.user.schools)
				console.log(this.joinSchools)
				this.joinSchools = this.user.schools.filter(i => i.status === 'join')
				this.$EventBus.$emit('onGlobalLoading', true)
				this.curSchool = val
				let schoolCode = val.schoolId
				this.$EventBus.$emit('onChangeSchool', {
					schoolCode: schoolCode,
				})
				// 更新当前school_code
				this.$store.dispatch('user/setSchoolCode', schoolCode)
				// 更新当前school_profile以及access
				this.$store.dispatch('user/checkSchoolProfile').then(res => {
					if (res) {
						this.$User.freshLogin()
					}
				});
				setTimeout(() => {
					this.$EventBus.$emit('onGlobalLoading', false)
				}, 500)
				// this.$router.push({
				// 	name: 'home'
				// })
			},
		}
	}
</script>

<style lang="less">
	.base-area-select {
		margin-left: 20px;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		// font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
		.ivu-dropdown {
			.ivu-select-dropdown {
				width: max-content;
				width: -webkit-max-content;
				left: -35%;
			}

			.ivu-dropdown-item:hover {
				background: #83d7ff;
			}

			a {
				color: var(--primary-textColor) !important;

				&:hover {
					color: var(--primary-textColor) !important;
				}

				.ivu-icon {
					display: none;
				}

				&::after {
					content: '';
					display: inline-block;
					width: 0;
					height: 0;
					border-right: solid 8px transparent;
					border-left: solid 8px transparent;
					border-top: solid 8px #d0d0d0;
					margin-left: 8px;
					margin-bottom: 3px;
				}

			}
		}

		.single-school {
			&::after {
				display: none !important;
			}

		}

		.school-logo {
			width: 30px;
			border-radius: 50%;
			margin-right: 10px;
			margin-bottom: 5px;
			vertical-align: middle;
		}

		.school-item {
			display: flex;
			align-items: center;

			img {
				width: 30px;
				margin-right: 15px;
			}

		}
	}
</style>