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

<!--
@ 作者: 秦东
@ 时间: 2024-07-13 09:34:24
@ 备注: 周
-->
<script lang='ts' setup>
import Calendar from '@/api/calendar/Calendar';
import DateClass from '@/api/calendar/DateClass';
import { dateBase } from '@/api/calendar/Calendar';
import { clockFactory } from '@/api/calendar/utils';
import { gainCalendarList } from '@/api/calendar/request';

const props = defineProps({
	bodyHight:Number,
	taDay:{
		type:Array,
		default() {
			return [2024,7,13];
		},
	},
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	},
	viewSetup:{
		type:Object,
		default(){
			return {}
		}
	}
});

//画板高度
const drawingBoardHeight = computed(()=>{
	return props.bodyHight + 50
})
//周期
const THeader = Calendar.title();
// const WeekBody = computed(()=>{
// 	Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
// 	console.log("画板高度--->",props.taDay.start[0]);
// 	return Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);

// });
const WeekBody = ref<any>([])

onMounted(()=>{
	WeekBody.value = Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
	searchatWeekList(props.searchSend)
	nextTick(()=>{
		let ddTime = DateClass.getCurrent()
		selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2])
	})
})
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
const emit = defineEmits(['getDate']);
const changeDate = (time: dateBase) => {
    selectedTime.value = time.date;
    emit('getDate', time);
}

const loadWeek = ref(false)

/**
@ 作者: 秦东
@ 时间: 2024-07-16 11:53:35
@ 功能: 获取数据
*/
const searchatWeekList = (val:any) => {
	loadWeek.value = true
	val.viewClass = {
		class:"date",
        sortWord:"",
        sort:1,
        startTime:"",
        endTime:"",
        dayType:"",
        mapWord:""
	}
	// console.log("获取每天数据",val)
	let sendInfo = {
		search:val,
		timeAry:WeekBody.value
	}
	// console.log("获取每天数据条件",sendInfo)
	gainCalendarList(sendInfo)
		.then(({data})=>{
			// console.log("获取数据",data)
			WeekBody.value = data
		})
		.finally(()=>{ loadWeek.value = false })
}

watch(()=>props.taDay,(val:any)=>{
	WeekBody.value = Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
	// console.log("监听变化",WeekBody.value)
	searchatWeekList(props.searchSend)
},{
	deep: true,
})

// defineExpose({
// 	searchatWeekList
// })
</script>
<template>
	<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
		<ul class="t-calendar-header">
            <li v-for="(item, index) in THeader" :key="index">
                {{ item }}
            </li>
        </ul>
		<div class="t-calendar-day" v-loading="loadWeek">
			<template v-if="WeekBody.length">
				<div
                    class="t-calendar-row"
                    v-for="(item, index) in WeekBody"
                    :key="index"
                >
					<CalendarItem
						:col="item"
						:time="selectedTime"
						:view-setup="props.viewSetup"
						:drawer-with="props.drawerWith"
						@changeTargetDate="changeDate"
					></CalendarItem>
				</div>
			</template>
			<template v-else>
                <div class="no-date">抱歉,暂无数据</div>
            </template>
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.monthCalendarBox{
	width: 100%;
	margin-top: 10px;
	.t-calendar-header {
		display: flex;
        width: 100%;
        height: 42px;
        padding: 0;
        box-sizing: border-box;
        li {
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	flex: 1;
        	font-size: 0.95rem;
        }
    }
	.t-calendar-day {
		display: flex;
        width: 100%;
		height: calc(100% - 42px);
        padding: 0;
        box-sizing: border-box;
		border-right: 1px solid #ebeef5;
        .t-calendar-row {
			width: calc(100%/7);

        	font-size: 0.95rem;
			border-bottom: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
			border-left: 1px solid #ebeef5;
        }
	}
}
</style>