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

<!--
@ 作者: 秦东
@ 时间: 2024-07-13 09:34:05
@ 备注: 月日历
-->
<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';

import CalendarItem from './calendarItem.vue';


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 TBody = ref<any[]>([])
const loadMonth = ref(false)
onMounted(()=>{
	TBody.value = Calendar.table(props.taDay)
	searchatMonthList(props.searchSend)
	nextTick(()=>{
		selectedTime.value = props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])
	})
})

watch(()=>props.taDay,(val:any)=>{
	TBody.value = Calendar.table(props.taDay)
	searchatMonthList(props.searchSend)
},{
	deep: true,
})


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 drawingBoardHeight = computed(()=>{
	return props.bodyHight + 50
})
//周期
const THeader = Calendar.title();
//日期
// const TBody = computed(() =>
//     Calendar.table(props.taDay)
// );
/**
@ 作者: 秦东
@ 时间: 2024-07-16 11:53:35
@ 功能: 获取数据
*/
const searchatMonthList = (val:any) => {
	loadMonth.value = true
	val.viewClass = {
		class:"date",
        sortWord:"",
        sort:1,
        startTime:"",
        endTime:"",
        dayType:"",
        mapWord:""
	}
	// console.log("获取每天数据",val)
	let sendInfo = {
		search:val,
		timeMonthAry:TBody.value,
		types:1
	}
	// console.log("获取每天数据条件",sendInfo)
	gainCalendarList(sendInfo)
		.then(({data})=>{
			// console.log("获取月份数据",data)
			TBody.value = data
		})
		.finally(()=>{ loadMonth.value = false })
}

defineExpose({
	gainCalendarList
})


</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 v-loading="loadMonth" class="t-calendar-day">
			<template v-if="TBody.length">
				<div
                    class="t-calendar-row"
                    v-for="(item, index) in TBody"
                    :key="index"
                >
					<div
                        class="t-calendar-col"
                        v-for="(col, colIdx) in item"
                        :key="colIdx"
                    >
						<CalendarItem
                            :col="col"
                            :time="selectedTime"
							:drawer-with="props.drawerWith"
							:view-setup="props.viewSetup"
                            @changeTargetDate="changeDate"
                        ></CalendarItem>
					</div>
				</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;
        flex-direction: column;
        width: 100%;
		height: calc(100% - 42px);
		.t-calendar-row {
			width: 100%;
            height: 60px;
            display: flex;
            flex: 1;
            border-bottom: 1px solid #ebeef5;
			.t-calendar-col{
				box-sizing: border-box;
                flex: 1;
                border-left: 1px solid #ebeef5;
                padding: 2px;
                font-size: 16px;
                transition: all 0.2s;
				width: calc(100%/7);
			}
			.t-calendar-col:last-child {
                border-right: 1px solid #ebeef5;
            }
		}
		.t-calendar-row:first-child {
        	border-top: 1px solid #ebeef5;
        }
	}
}
</style>