QHD_ZhongYiYuan_YiJiYuYue/ZiZhuJi/src/views/PlanList.vue

<template>
	<div>
		<div class="userInfo">
			<div v-if="MianInfo">
				<div class="title">选择预约日期及时段</div>
				<div class="row" style="justify-content: space-around; font-size: 18px;color: #fff;">
					<div class="row">
						<div class="label">登记号：</div>
						<div class="value">{{MianInfo.reg_num}}</div>
					</div>
					<div class="row">
						<div class="label">医嘱：</div>
						<div class="value">{{MianInfo.entrust}}</div>
					</div>
				</div>

			</div>


			<div class="date">
				<el-date-picker size="large" @change="dateSelecteFunc()"
					style="width: 100%; border-radius: 20px;height: 60px;" v-model="SearchInfo.date" range-separator="至"
					start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
			</div>
		</div>
		<div class="list" v-loading="loading">
			<div class="info" v-for="(item,index) in List">
				<div>
					<div class="row">
						<div class="label">执行科室：</div>
						<div class="value">{{MianInfo.implement_department}}</div>
					</div>
					<div class="row">
						<div class="label">资源：</div>
						<div class="value">{{item.department_resources_name}}</div>
					</div>
					<div class="row">
						<div class="label">时间段：</div>
						<div class="value" v-if="item.begin_time">{{item.begin_time.substring(0,5)}}~{{item.end_time.substring(0,5)}}</div>
					</div>
				</div>
			
				<div class="right">
					<div class="right_top">
						<div class="button" @click="StartYuYue(item)">确认</div>
					</div>
					<div class="right_bottom">已约/总数：<span style="color: darkturquoise;">{{item.used_count}}</span>/{{item.count}}</div>
				</div>
			</div>
			<div v-if="List==null || List.length==0">
				<el-empty description="当前日期无号源" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		GetEnablePlan,
		GetServiceDateTime,H5_YuYue
	} from "@/api/api.js";
	import {
		ElMessage,ElMessageBox 
	} from 'element-plus'
	import {
		ref,
		nextTick,
		onMounted
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()

	let SearchInfo = ref({
		date: '',
	})
	let loading=ref(false)
	let List = ref([])
	let MianInfo = ref(null); //主表信息
	const GetList = () => {
		loading.value=true
		GetEnablePlan({
			...SearchInfo.value
		}).then(res => {
			loading.value=false
			if (res.status) {
				List.value = res.data.plan_list
				MianInfo.value = res.data.mainInfo
				SearchInfo.value.mainlistid = [MianInfo.value.id]
			}
		})
	}
	const dateSelecteFunc = (e) => {

		GetList()
	}
	const StartYuYue=(item)=>{
		 ElMessageBox.confirm(
		    '确定预约 '+SearchInfo.value.date+' '+item.begin_time.substring(0,5)+'~'+item.end_time.substring(0,5)+' 时段吗？',
		    'Warning',
		    {
		      confirmButtonText: 'OK',
		      cancelButtonText: 'Cancel',
		      type: 'warning',
		    }
		  )
		    .then(() => {
				console.log(66666)
		      SearchInfo.value.planid=item.id
		      H5_YuYue({...SearchInfo.value}).then(res => {
		      			  if(res.status){
		      				 
		      				 setTimeout(function(){
		      					 window.location.href ='./#/checkitemmainlist';
		      				 },1000)
		      				 
		      			  } else{
							  ElMessage.error(res.msg)
						  }
		      })	
		    })
		    .catch(() => {
		       
		    })
	 
	}

	onMounted(() => {
		SearchInfo.value = JSON.parse(decodeURIComponent(route.query.data))

		var today = new Date();
		// 格式化日期为YYYY-MM-DD形式
		function formatDate(date) {
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要+1
			var day = ("0" + date.getDate()).slice(-2);
			return year + "-" + month + "-" + day;
		}
		SearchInfo.value.date = formatDate(today);
		GetList()
	})
</script>

<style scoped>
	.CheckItemMain {
		height: calc(100vh);
		background-color: #eef7fa;
		padding-top: 30px;
	}

	.row {
		display: flex;
		align-items: center;

	}

	.title {
		font-size: 23px;
		font-weight: bolder;
		color: #1b706d;
		margin-bottom: 20px;
	}

	.userInfo {
		border: 1px solid #ccc;
		border-radius: 4px;
		padding:20px 20px;
		background-color: #33cdc9;
		margin-bottom: 50px;

	}

 

	.date {
		padding: 8px;
		text-align: center;
		width: 50%;
		margin-top: 16px;
		transform: translate(50%, 55px);
	}

	.label {
		font-size: 18px;
		color: #fff;
	}

	.value {
		font-size: 22px;
		font-weight: 900;
		 
	}
	.list{
		margin-top: 60px;
		padding-bottom: 10px;
	 
		background-color: #ebebeb;
		display:flex;
		flex-direction: column;
		justify-content: center;
	}
	.info{
		background-color: #fff;
		padding: 40px 40px 20px 40px;
		display: flex;
		justify-content: space-between;
		border-radius: 20px;
		color: #333;
		 
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		 
	}
	.info .row{
		margin-bottom: 20px;
	}
	.info .row .label{ 
		font-size: 14px;
		color:#333;
	}
	.info .row .value{
		font-weight: 700;
		font-size: 14px;
	}
	.info .right{
		 
	}
	.info .right .right_top{
		display: flex;
		justify-content: center;
	}
	.info .right .right_bottom{
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}
	.button{
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		background-color: #33cdc9;
		 
		border-radius: 10px;
		color: #fff;
	}
</style>