carbasics2023_web_pad_v4/src/layouts/BasicLayout.vue

<template>
	<div class="global-layout">
		<a-layout class="page-layout">
			<a-layout-sider>
				<div class="layout-sider-header">
					<div class="layout-sider-header-row">
						<div class="layout-sider-header-row-icon">
							<span class="sider-header-icon">质</span>
						</div>
						<!-- <div class="layout-sider-header-row-title">质控卒中工作站</div> -->
					</div>
				</div>
				<div class="layout-sider-menu">
					<div class="menus" v-for="(item, index) in menus" :key="index">
						<div class="menu-item" :class="{'active': current == index}"
							@click="handleClickMenu(item, index)">
							<div class="menu-item-icon">
								<!-- <img src="@/assets/images/plus.png" alt="" /> -->
								<img :src="item.iconactive" alt="" v-if="current == index" />
								<img :src="item.icon" alt="" v-else />
							</div>
							<div class="menu-item-name">{{item.name}}</div>
						</div>
					</div>
				</div>
			</a-layout-sider>
			<a-layout>
				<a-layout-header>
					<div class="patient-box">
						<div class="patient-info" @click="onClickPat"
							v-if="patientData.firstAidId && patientData.finish_status != 1">
							<span class="lable">姓名: </span>
							<span class="text">{{patientData.patientName || '-'}}</span>
							<span class="lable">性别: </span>
							<span
								class="text">{{patientData.patientGender == 1 ? '女' : patientData.patientGender == 0 ? '男' : '-'}}</span>
							<span class="lable">年龄: </span>
							<span class="text">{{patientData.patientAge || '-'}}</span>
							<span class="lable">证件号: </span>
							<span
								class="text">{{patientData.patientIdCardNo ? utils.maskIDCard(patientData.patientIdCardNo) : '-'}}</span>
							<span class="lable">门急诊号: </span>
							<span class="text">{{patientData.servialNo || '-'}}</span>
						</div>
					</div>
				</a-layout-header>
				<a-layout-content ref="layoutContent" id="layoutContent">
					<div class="global-layout-content" id="globalLayoutContent">
						<router-view />
					</div>

					<a-drawer placement="left" :visible="visible" width="320" @close="onClose" :getContainer="false"
						:closable="false" :wrap-style="{ position: 'absolute' }">
						<div class="person-drawer">
							<div class="person-header">
								<div class="person-header-avatar">
									<img src="@/assets/images/ys.png" alt="" />
								</div>
								<div class="person-header-name">
									<span class="user-name">{{loginInfo?.name}}</span>
									<a-icon type="woman" />
								</div>
							</div>
							<div class="person-float-info">
								<div class="person-float-info-row"><span class="label">职位: </span><span
										class="text">{{loginInfo?.deptName}}</span></div>
								<div class="person-float-info-row"><span class="label">联系方式: </span><span
										class="text">{{loginInfo?.contract}}</span></div>
							</div>
							<div class="person-content">
								<div class="person-content-row">
									<span class="label">所属医院: </span>
									<span class="text">{{loginInfo?.hospitalName}}</span>
								</div>
								<div class="person-content-row">
									<span class="label">所属科室: </span>
									<span class="text">{{loginInfo?.deptName}}</span>
								</div>
								<div class="person-content-row">
									<span class="label">联系客服: </span>
									<span class="text">{{loginInfo?.customer}}</span>
								</div>
								<div class="person-content-row">
									<span class="label">当前版本: </span>
									<span class="text">正式版v{{loginInfo?.version}}</span>
								</div>
							</div>
							<div class="person-footer">
								<a-button class="persion-footer-button person-footer-reset" block>修改密码</a-button>
								<a-button class="persion-footer-button person-footer-logout" type="primary" block
									@click="logout">退出登录</a-button>
							</div>
						</div>
					</a-drawer>
				</a-layout-content>
			</a-layout>

		</a-layout>
	</div>

</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import store from '@/store';
	import {
		loginInfo
	} from 'api';
	import icon01 from '@/assets/images/slice/icon01.png'
	import icon01H from '@/assets/images/slice/icon01H.png'
	import icon02 from '@/assets/images/slice/icon02.png'
	import icon02H from '@/assets/images/slice/icon02H.png'
	import icon03 from '@/assets/images/slice/icon03.png'
	import icon03H from '@/assets/images/slice/icon03H.png'
	import icon04 from '@/assets/images/slice/icon04.png'
	import icon04H from '@/assets/images/slice/icon04H.png'
	export default {
		name: 'BasicLayout',
		data() {
			return {
				current: 0,
				current_: 0,
				visible: false,
				loginInfo: null,
				menus: [{
					name: '急救',
					path: '/firstaid/patientList',
					icon: icon01H,
					iconactive: icon01,
				}, {
					name: '档案',
					path: '/document',
					icon: icon02H,
					iconactive: icon02,
				}, {
					name: '质控',
					path: '/statistics',
					icon: icon03H,
					iconactive: icon03,
				}, {
					name: '我的',
					path: 'person',
					icon: icon04H,
					iconactive: icon04,
				}],
			}
		},
		computed: {
			...mapState('patient', ['patientData']),
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				if (to.fullPath == '/document') {
					vm.current = 1
					vm.current_ = 1
				} else if (to.fullPath == '/statistics') {
					vm.current = 2
					vm.current_ = 2
				} else if (to.fullPath == '/firstaid/patientList') {
					vm.current = 0
					vm.current_ = 0
				} else {
					vm.current = 0
					vm.current_ = 0
					// if (to.fullPath != '/firstaid/patientList') {
					// 	vm.$router.replace('/firstaid/patientList')
					// } 
				}
			});
		},
		methods: {
			handleClickMenu(item, index) {
				if (index != this.current) {
					this.current_ = this.current
				}
				this.current = index
				if (item.path == 'person') {
					if (this.visible) this.onClose()
					else this.showPersion()
				} else {
					this.visible = false;
					this.$router.push(item.path)
				}
			},
			onClickPat() {
				this.$router.push('/firstaid/thrombolysis')
			},
			async showPersion() {
				this.visible = true;
				document.getElementById('globalLayoutContent').style.overflowY = 'hidden';
				if (!this.loginInfo) {
					var res = await loginInfo();
					this.loginInfo = res.data || {}
				}
				this.visible = true;
			},
			onClose() {
				this.visible = false;
				console.log('ddd')
				document.getElementById('globalLayoutContent').style.overflowY = 'auto';
				this.current = this.current_
			},
			logout() {
				this.$router.replace('/login')
			}
		}
	}
</script>

<style lang="less">
	@import "./BasicLayout.less";
</style>