carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-ing.vue

<template>
	<div class="throm-ing">
		<div class="throm-step">
			<a-steps progress-dot :current="currentIndex" direction="vertical" @change="handleClickStep">
				<a-step :status="currentIndex == 0 ? 'process' : currentIndex > 0 ? 'finish' : 'wait'" title="选择药物"
					:description="stepDesc.drugDesc" />
				<a-step :status="currentIndex == 1 ? 'process' : currentIndex > 1 ? 'finish' : 'wait'" title="0min"
					:description="stepDesc.min0Desc" />
				<a-step :status="currentIndex == 2 ? 'process' : currentIndex > 2 ? 'finish' : 'wait'" title="15min" 
					:description="stepDesc.min15Desc" />
				<a-step :status="currentIndex == 3 ? 'process' : currentIndex > 3 ? 'finish' : 'wait'" title="30min" 
					:description="stepDesc.min30Desc" />
				<a-step :status="currentIndex == 4 ? 'process' : currentIndex > 4 ? 'finish' : 'wait'" title="45min" 
					:description="stepDesc.min45Desc" />
				<a-step :status="currentIndex == 5 ? 'process' : currentIndex > 5 ? 'finish' : 'wait'" title="60min" 
					:description="stepDesc.min60Desc" />
				<a-step :status="currentIndex == 6 ? 'process' : currentIndex > 6 ? 'finish' : 'wait'" title="不良反应" />
				<a-step :status="currentIndex == 7 ? 'process' : currentIndex > 7 ? 'finish' : 'wait'" title="溶栓记录" />
			</a-steps>
		</div>
		<div class="throm-content">
			<ThromIngDrug v-if="currentIndex == 0" @next="handleNext"></ThromIngDrug>
			<ThromIngMin timercode="JMRS-Q-NIHSS" v-else-if="currentIndex == 1" @next="handleNext"></ThromIngMin>
			<ThromIngMin timercode="JMRS-15-NIHSS" v-else-if="currentIndex == 2" @next="handleNext"></ThromIngMin>
			<ThromIngMin timercode="JMRS-30-NIHSS" v-else-if="currentIndex == 3" @next="handleNext"></ThromIngMin>
			<ThromIngMin timercode="JMRS-45-NIHSS" v-else-if="currentIndex == 4" @next="handleNext"></ThromIngMin>
			<ThromIngMin timercode="JMRS-60-NIHSS" v-else-if="currentIndex == 5" @next="handleNext"></ThromIngMin>
			<ThromIngReactions v-else-if="currentIndex == 6" @next="handleNext"></ThromIngReactions>
			<ThromIngRecord v-else-if="currentIndex == 7" @next="handleNextStep"></ThromIngRecord>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	import ThromIngDrug from './throm-ing-selDrug.vue';
	import ThromIngMin from './throm-ing-min.vue';
	import ThromIngMin15 from './throm-ing-min15.vue';
	import ThromIngMin30 from './throm-ing-min30.vue';
	import ThromIngMin45 from './throm-ing-min45.vue';
	import ThromIngMin60 from './throm-ing-min60.vue';
	import ThromIngReactions from './throm-ing-reactions.vue';
	import ThromIngRecord from './throm-ing-record.vue';
	export default {
		name: "ThromBefore",
		components: {
			ThromIngDrug,
			ThromIngMin,
			ThromIngMin15,
			ThromIngMin30,
			ThromIngMin45,
			ThromIngMin60,
			ThromIngReactions,
			ThromIngRecord,
		},
		data() {
			return {
				currentIndex: 0,
				stepDesc: {
					drugDesc: '阿尼普酶',
					min0Desc: 'NIHSS评分: 0',
					min15Desc: 'NIHSS评分: 15',
					min30Desc: 'NIHSS评分: 30',
					min45Desc: 'NIHSS评分: 45',
					min60Desc: 'NIHSS评分: 60',
				}
			}
		},
		computed: {
			...mapState('patient', ['patientData', 'book']),
		},
		
		mounted() {
			
		},
		created() {
			console.log('patientData', this.patientData)
			console.log('book', this.book)
		},
		methods: {
			handleClickStep(current){
				this.currentIndex = current;
			},
			handleNext() {
				this.currentIndex++
			},
			handleNextStep() {
				this.$emit('next')
			}
		},
	}
</script>

<style lang="less">
	.throm-ing {
		display: flex;

		.throm-step {
			padding: 10px;
			margin-right: .2rem;
			background-color: #fff;
			.ant-steps-vertical .ant-steps-item-content {
				min-height: 4rem;
			}

			.ant-steps-item-title {
				padding: 0;
			}

			.ant-steps-item-finish {
				.ant-steps-item-title {
					color: #000000;
				}
			}

			.ant-steps-item-process {
				.ant-steps-item-title {
					color: #007AFF;
					// border-bottom: 1px solid #007AFF;
					border-bottom: 3px solid transparent;
					/* 设置透明的底部边框 */
					border-image: linear-gradient(to right, #fff, #007AFF) 1;
					/* 使用渐变色填充边框 */
					border-radius: 10px;
					/* 设置圆角 */
				}
			}
		}

		.throm-content {
			padding: 10px;
			flex: 1;
			background-color: #fff;

			.ant-form .ant-form-item-label label {
				font-size: 0.85rem;
				font-weight: bold;
			}
			.ant-form-item{
				background: #f9f9f9;
				margin-bottom: .5rem;
				padding: 12px;
				border-radius: 4px;
			}
			.ant-radio-button-wrapper {
				padding: 0 1.64vw;
				height: 3.64vw;
				line-height: 3.64vw;
				font-size: 0.75rem !important;
				margin-right: 1.82vw;
				margin-bottom: 0.91vw;
				border: 0.5px solid #a3acbf;
				border-radius: 0.55vw;
				vertical-align: middle;
				&:before,
				.ant-radio-button-wrapper-checked:before {
					display: none !important;
				}

				&:first-child,
				&:last-child {
					border-radius: 6px !important;
				}

				&:last-child {
					margin-right: 0;
				}
			}

			.solid {
				.ant-checkbox-wrapper {
					background: #f9f9f9;
					border: 0.5px solid #a3acbf;
					border-radius: 6px;
					vertical-align: middle;
					margin-right: 20px;
					margin-bottom: 10px;
					font-size: 0.75vw !important;
					line-height: 40px;
					padding: 0 6px;
					height: 40px;
					min-width: 0 !important;

					&.ant-checkbox-wrapper-checked {
						background: #007AFF;
						color: #fff;
					}

					.ant-checkbox {
						display: none;
					}
				}
			}
	
		}

		.common-picker {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;
		}

		.btns {
			padding: 0 20% 1rem;
		}

		.ant-form-item {
			margin-bottom: .5rem;
		}

		.ant-card-head .ant-tabs-bar {
			border-bottom-width: 0;
		}

		.ant-card-bordered {
			border: none;

			.ant-card-head {
				border-bottom: none;
			}
		}
	}
</style>