ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/app/calendar/calendar1/calendarPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-07-12 09:27:42
@ 备注: 日历
-->
<script lang='ts' setup>
import DateClass from '@/api/calendar/DateClass';
import { clockFactory } from '@/api/calendar/utils';

//引入页面
import MonthPage from './monthPage.vue'
import WeekPage from './weekPage.vue'
import DayPage from './dayPage.vue'


const props = defineProps({
	data: {
		type: Object,
		default() {
			return {};
		},
	},
	bodyHight:Number,
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	},
	viewSetup:{
		type:Object,
		default(){
			return {}
		}
	}
});
const  taday = ref<any>([]);
const curtteDayType = ref(1)
const curtteDay = ref(1)

const monthPageRef = ref(null)
const weekPageRef = ref(null)
const dayPageRef = ref(null)

onMounted(() => {
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	// console.log("系统加载",taday.value)
})

const curttWeek = computed(()=>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	if(curtteDayType.value != 2){
		return DateClass.getWeek(DateClass.solarWeek(taday.value[0],taday.value[1],taday.value[2]))
	}else{
		return taday.value.start[1] + "月" + taday.value.start[2]  + "-" + taday.value.end[1] + "月" + taday.value.end[2]
	}
})


const curtteMonth = computed(()=>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	if(curtteDayType.value != 2){
		if(taday.value.length >= 2){
			return taday.value[0]+"年"+taday.value[1]+"月"
		}
	}else{
		if(taday.value.start != undefined){
			return taday.value.start[0]+"年"
		}else{
			return taday.value[0]+"年"+taday.value[1]+"月"
		}
		
	}
	
})
/**
@ 作者: 秦东
@ 时间: 2024-07-12 11:12:12
@ 功能: 后退时间
*/
const backTime = () =>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	
	if(curtteDayType.value != 2){
		taday.value  = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value,-1)
	}else{
		
		let weekObject = DateClass.gobackTime(taday.value.start[0],taday.value.start[1],taday.value.start[2],curtteDayType.value,-1)
		taday.value  = weekObject
	}
	
	
}
/**
@ 作者: 秦东
@ 时间: 2024-07-12 14:04:06
@ 功能: 前进时间
*/
const forwardTime = () =>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	if(curtteDayType.value != 2){
		taday.value  = DateClass.moveTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
	}else{
		
		let weekObject = DateClass.moveTime(taday.value.start[0],taday.value.start[1],taday.value.start[2],curtteDayType.value)
		taday.value  = weekObject
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-07-13 08:33:01
@ 功能: 选择时间
*/
const pickTime = (val:number) => {
	curtteDayType.value = val
	switch (val) {
		case 2:
			taday.value = DateClass.getCurrent()
			let weekObject = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
			taday.value  = weekObject
			// curtteMonth.value = taday.value[0]+"年"
			// curttWeek.value = taday.value[1]+"月"+taday.value[2]+"日"
			// console.log("formEl---------4--------->",curttWeek.value )
			break;
		case 3:
			taday.value = DateClass.getCurrent()
			break;
		default:
			taday.value = DateClass.getCurrent()
			break;
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-07-13 16:58:07
@ 功能: 回到今日
*/
const emit = defineEmits(['getDate']);
const goTady = () => {
	taday.value = DateClass.getCurrent()
	let time = taday.value[0] + "-" + clockFactory(taday.value[1]) + "-" + clockFactory(taday.value[2])
	emit('getDate', time);
}

/**
@ 作者: 秦东
@ 时间: 2024-07-16 13:06:23
@ 功能: 查询数据
*/
const calendarSearchData = (val:any) => {
	switch(curtteDayType.value){
		case 2:
			break;
		case 3:
			dayPageRef.value.searchatDayList(val);
		default:
			break;
	}
	// console.log("查询数据",props.searchSend)
}
defineExpose({
	calendarSearchData
})
</script>
<template>
	<div class="calBox" :style="'height:calc(100vh - '+ props.bodyHight +'px)'">
		<!--日历头部-->
		<div class="calHead">
			<div>
				<i class="fa fa-calendar icont"></i>
				<el-text class="day">{{curtteMonth}}</el-text>
				<el-text class="week">{{curttWeek}}</el-text>
			</div>
			<div>
				<el-button-group class="ml-4">
					<el-button  size="small" @click="goTady()">今天</el-button>
					<el-button :color="curtteDayType==1?'#a0cfff':''" @click="pickTime(1)" size="small" >月</el-button>
					<el-button :color="curtteDayType==2?'#a0cfff':''" @click="pickTime(2)" size="small" >周</el-button>
					<el-button :color="curtteDayType==3?'#a0cfff':''" @click="pickTime(3)" size="small" >日</el-button>
					<el-button  size="small" class="fa fa-angle-left" @click="backTime()"></el-button>
					<el-button  size="small" class="fa fa-angle-right" @click="forwardTime()"></el-button>
				</el-button-group>
			</div>
		</div>
		<div class="weekNumber">
			<MonthPage ref="monthPageRef" v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" :view-setup="props.viewSetup" />
			<WeekPage ref="weekPageRef" v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" :view-setup="props.viewSetup" />
			<DayPage ref="dayPageRef" v-if="curtteDayType==3" :body-hight="props.bodyHight" :ta-day="taday"  :search-send="props.searchSend" :drawer-with="props.drawerWith" :view-setup="props.viewSetup" />
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.calBox{
	width: 100%;
	.calHead{
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
		display: flex;
		align-items: center;
  		justify-content: space-between;
		.icont{
			font-size:20px;
		}
		.day{
			font-size:20px;
			padding: 0 10px;
			font-weight: bold;
		}
	}
	.weekNumber{
		
	}
}
</style>