carbasics2023_web_pad_v4/src/components/Nav.vue

<!--
 * @desc: 导航
 * @Author: gaowenya
 * @Date: 2023-06-21 11:00
 * @LastEditors: 
 * @LastEditTime: 
-->
<template>
	<header class="header" :class="getPatient === false ? 'mt' : ''">
		<div class="header-content" v-if="getChangeText.title || getPatient">
			<div class="header-back" v-if="isBack" @click="toBack">
				<a-icon type="left" />返回
			</div>
			<div class="header-title">
				<span v-if="getChangeText.title">
					{{ getChangeText.title }}
				</span>
				<p v-else class="caret-top">
					姓名:
					<span> {{ patientData.patientName || '暂无' }} </span>
					性别:
					<span>
						{{ sex[patientData.patientGender] || '暂无' }}
					</span>
					年龄:
					<span> {{ patientData.patientAge || '暂无' }} </span>
					证件号:
					<span> {{ patientData.jzh || '暂无' }} </span>
					急诊号:
					<span> 暂无 </span>
				</p>
			</div>
			<div class="header-right" v-if="isMore" @click="changeOverviewType">
				{{ getChangeText.text }}<a-icon type="swap" />
			</div>
		</div>
	</header>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
	data() {
		return {
			sex: {
				0: '男',
				1: '女',
			},
			overview: {
				title: '',
				text: '',
			},
		};
	},
	computed: {
		...mapState('patient', ['patientData', 'overviewType']),
		...mapState('storm', ['isBack', 'isMore']),
		getChangeText() {
			if (this.overviewType === 'info') {
				return {
					title: '患者信息',
					text: '切换至概览',
				};
			} else if (this.overviewType === 'overview') {
				return {
					title: '患者概览',
					text: '切换至详情',
				};
			}
			return {
				title: '',
				text: '',
			};
		},
		getPatient() {
			if (!this.patientData) return false;
			const { patientName, patientGender, patientAge, patientIdCardNo } =
				this.patientData;
			console.log(' this.patientData: ', this.patientData);
			let sex = {
				0: '男',
				1: '女',
			};
			if (!patientName) return false;
			return `姓名: ${patientName}  性别: ${sex[patientGender]}  年龄: ${
				patientAge || ''
			} 证件号: ${patientIdCardNo} 急诊号: 暂无`;
		},
	},
	methods: {
		...mapMutations('patient', ['setOverviewType']),
		toBack() {
			window.history.go(-1);
		},
		changeOverviewType() {
			if (this.overviewType === 'info') {
				this.overview = {
					title: '患者概览',
					text: '切换至概览',
				};
				this.setOverviewType('overview');
			} else if (this.overviewType === 'overview') {
				this.overview = {
					title: '患者信息',
					text: '切换至详情',
				};
				this.setOverviewType('info');
			}
		},
	},
};
</script>

<style scoped lang="less">
.header {
	width: 100%;
	display: flex;
	background: linear-gradient(180deg, #dbeaff, #fbfdff 50%);
	box-shadow: 0px 0.25px 0px 0px rgba(0, 0, 0, 0.2);
	.caret-top {
		margin: 0;
		span {
			color: #70798c;
			margin-right: 5px;
		}
	}
	&.mt {
		margin-top: 10px;
	}
	.header-content {
		flex: 1;
		height: 60px;
		display: flex;
		position: relative;
		align-items: center;
	}
	.header-back {
		position: absolute;
		top: 16px;
		left: 24px;
		font-size: 24px;
	}
	.header-right {
		position: absolute;
		top: 16px;
		right: 24px;
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		flex: 1;
		font-size: 24px;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
	}
}
</style>