日历文件

src/api/calendar/DateClass.ts

@@ -287,6 +287,115 @@ class DateClass {
         ];
         return d[n - 1];
     }
+	/**
+	@ 作者: 秦东
+	@ 时间: 2024-07-12 13:11:32
+	@ 功能: 判断公立是不是闰年
+	*/
+	
+	isLeapYear(year: number): boolean {
+		return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
+	}
+	/**
+	@ 作者: 秦东
+	@ 时间: 2024-07-12 11:50:37
+	@ 功能: 处理年月日回退数据
+	@ 1: 月；2：周；3：天
+	*/
+	gobackTime(y: number, m: number, d: number,t?:number){
+		console.log("计算时间--0--》",y,m,d,t)
+		switch(t){
+			case 2:
+				let startWeek = this.getMonday(y,m,d,'s',0)
+				let endWeek = this.getMonday(y,m,d,'e',0)
+				return {
+					start:startWeek,
+					end:endWeek
+				}
+				break;
+			case 3:
+				let day = d-1
+				if(day <= 0){
+					let month = m - 1
+					if(month <= 0){
+						y = y -1;
+						m = 12
+						d = this.solarMonth(y,m)	
+					}else{
+						m = month
+						d = this.solarMonth(y,month)
+					}
+				}else{
+					d = day
+				}
+				return [y,m,d]
+				break;
+			default:
+				let month = m - 1
+				if(month <= 0){
+					y = y -1;
+					m = 12
+					d = this.solarMonth(y,m)	
+					console.log("计算时间--1--》",y,m,d)
+				}else{
+					m = month
+					let day = this.solarMonth(y,month)
+					if(d > day){
+						d = day
+					}
+					
+				}
+				return [y,m,d]
+			break;
+				
+		}
+		
+	}
+	/**
+	@ 作者: 秦东
+	@ 时间: 2024-07-12 13:48:55
+	@ 功能: 获取周
+	*/
+	getMonday = (year: number, month: number, taday: number,type: any, dates: any) => {
+		// let now = new Date();
+		// let nowTime = now.getTime();
+
+		let dateStr = year + "-" + month + "-" + taday; // 要转换的日期字符串
+		// let nowTime = Date.parse(dateStr);
+
+		let now = new Date(dateStr);
+		let nowTime = now.getTime();
+
+		let day = now.getDay();
+		let longTime = 24 * 60 * 60 * 1000;
+		let n = longTime * 7 * (dates || 0);
+		let date: any = ''
+
+
+
+		console.log("now--->",now)
+		console.log("nowTime--->",nowTime)
+		console.log("day--->",day)
+		console.log("longTime--->",longTime)
+		console.log("n--->",n)
+
+
+
+		if (type == "s") {
+			date = nowTime - (day - 1) * longTime + n;
+		};
+		if (type == "e") {
+			date = nowTime + (7 - day) * longTime + n;
+		};
+		date = new Date(date);
+		let y: any = date.getFullYear();
+		let m: any = date.getMonth() + 1;
+		let d: any = date.getDate();
+		// m = m < 10 ? "0" + m : m;
+		// d = d < 10 ? "0" + d : d;
+		let days = y + "-" + m + "-" + d;
+		return [y, m, d];
+	}
 }
 
 export default new DateClass();

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

@@ -0,0 +1,108 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-07-12 09:27:42
+@ 备注: 日历
+-->
+<script lang='ts' setup>
+import DateClass from '@/api/calendar/DateClass';
+const props = defineProps({
+	data: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	bodyHight:Number,
+});
+const  taday = ref<any>([]);
+const curtteDayType = ref(1)
+const curtteDay = ref(1)
+
+
+const curttWeek = computed(()=>{
+	if(taday.value.length <= 0){
+		taday.value = DateClass.getCurrent()
+	}
+	return DateClass.getWeek(DateClass.solarWeek(taday.value[0],taday.value[1],taday.value[2]))
+})
+
+
+const curtteMonth = computed(()=>{
+	if(taday.value.length <= 0){
+		taday.value = DateClass.getCurrent()
+	}
+	if(taday.value.length >= 2){
+		return taday.value[0]+"年"+taday.value[1]+"月"
+	}
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-12 11:12:12
+@ 功能: 后退时间
+*/
+const backTime = () =>{
+	if(taday.value.length <= 0){
+		taday.value = DateClass.getCurrent()
+	}
+	taday.value  = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
+	
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-07-12 14:04:06
+@ 功能: 前进时间
+*/
+const forwardTime = () =>{
+	if(taday.value.length <= 0){
+		taday.value = DateClass.getCurrent()
+	}
+}
+</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" >今天</el-button>
+					<el-button :color="curtteDayType==1?'#a0cfff':''" @click="curtteDayType=1" size="small" >月</el-button>
+					<el-button :color="curtteDayType==2?'#a0cfff':''" @click="curtteDayType=2" size="small" >周</el-button>
+					<el-button :color="curtteDayType==3?'#a0cfff':''" @click="curtteDayType=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">
+			{{DateClass.getMonday(taday[0],taday[1],taday[2],'e',0) }}
+		</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>

src/components/DesignForm/app/calendarPage.vue

@@ -12,6 +12,11 @@ import {
 	getMonth,
 	getYear
 } from '@/components/DesignForm/app/calendar/calendar1/handle'
+
+//引入日历
+import CalendarPage from '@/components/DesignForm/app/calendar/calendar1/calendarPage.vue'
+
+
 const value = ref(new Date())
 let timek = new Date()
 
@@ -20,8 +25,7 @@ let timek = new Date()
 
 </script>
 <template>
-	{{getMonthFinalDay(3)}}
+	<CalendarPage :body-hight="345" />
-	<el-calendar v-model="value" />
 </template>
 <style  lang='scss' scoped>
 

src/types/components.d.ts

@@ -37,6 +37,7 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -68,6 +69,7 @@ declare module '@vue/runtime-core' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -122,11 +124,14 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
     IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']