Project_yhfu/src/views/date.vue

<template>
	<div class="calendar-wrapper">
		<!-- 月份变换区 -->
		<div class="header rowJcAc" v-if="headerBar">


			<!-- <div class="pre " @click="changeMonth('pre')">上个月</div> -->
			<div class="yearMonth">
				<div class="arrowIcon rowJcAc" @click="changeMonth('pre')" v-if="monthOpen">
					<i class="el-icon-arrow-left"></i>
				</div>
				{{y+'-'+formatNum(m)}}
				<div class="arrowIcon rowJcAc" @click="changeMonth('next')" v-if="monthOpen">
					<i class="el-icon-arrow-right"></i>
				</div>
			</div>

			<!-- <div class="next" @click="changeMonth('next')">下个月</div> -->
		</div>

		<!-- 星期区 -->
		<div class="week">
			<div class="week-day" v-for="(item,index) in weekDay" :key="index">{{item}}</div>
		</div>

		<!-- 日历显示区 -->
		<div :class="{hide : !monthOpen}" class="content">
			<div :style="{top:positionTop + 'px'}" class="days">
				<div class="item rowJcAc" v-for="(item,index) in dates" :key="index">
					<div class="day" @click="selectOne(item,$event)" :class="{
              choose:choose==`${item.year}-${item.month}-${item.date}`,
              todayChoose: isTodayChoose(item.year,item.month,item.date) ,
              nolm:!item.isCurM,
              today:isToday(item.year,item.month,item.date),
          }">
						<div class="markDay" v-if="isMarkDay(item.year,item.month,item.date)"
							:class="[choose==`${item.year}-${item.month}-${item.date}` ? 'markDayChoose':'markDayNoChoose']">
						</div>

						<p>{{Number(item.date)}}
						<div :class="calendarDaycount(item.year,item.month,item.date)"></div>
						</p>
					</div>

				</div>
			</div>
		</div>
		<!-- 伸缩按钮：待定 -->
		<!--<div class="bottomLine rowJcAc" v-if="collapsible" @click="toggle">-->
		<!--<div></div>-->
		<!--</div>-->
		<!-- 伸缩按钮：待定 -->
		<!-- <img
      src="https://i.loli.net/2020/07/16/2MmZsucVTlRjSwK.png"
      mode="scaleToFill"
      v-if="collapsible"
      @click="toggle"
      class="weektoggle"
      :class="{ down: monthOpen }"
    /> -->
	    <div class="date-what">
			<div class="d-w-info">
				<div class="d-w-i-color d-state-zc"></div>
				正常
			</div>
			<div class="d-w-info">
				<div class="d-w-i-color d-state-t10"></div>
				≤10
			</div>
			<div class="d-w-info">
				<div class="d-w-i-color d-state-b10"></div>
				≥10
			</div>
		</div>
	</div>
</template>

<script>
import {
  getEventByCalendar
} from '@/api/forest'
	export default {
		name: "ren-calendar",
		props: {
			// 星期几为第一天(0为星期日)
			weekstart: {
				type: Number,
				default: 0,
			},
			// 标记的日期
			markDays: {
				type: Array,
				default: () => {
					return [];
				},
			},
			//是否展示月份切换按钮
			headerBar: {
				type: Boolean,
				default: true,
			},
			// 是否展开
			open: {
				type: Boolean,
				default: true,
			},
			//是否可收缩
			collapsible: {
				type: Boolean,
				default: true,
			},
			//未来日期是否不可点击
			disabledAfter: {
				type: Boolean,
				default: false,
			},
			// 默认选中日期
			selectDate: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				weektext: ["日", "一", "二", "三", "四", "五", "六"],
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				dates: [], // 当前月的日期数据
				positionTop: 0,
				monthOpen: false,
				choose: "",
				isCurM: true,
        eventByCalendarList:[]
			};
		},
		created() {
      this.monthDay(this.y, this.m);
			// !this.open && this.toggle();
		},
		watch: {
			// 点击返回今天
			selectDate() {
				if (this.selectDate) {
					this.choose = this.selectDate
					this.y = Number(this.selectDate.split('-')[0])
					this.m = Number(this.selectDate.split('-')[1])
					this.monthDay(this.y, this.m);
					if (!this.monthOpen) {
						let index = -1;
						this.dates.forEach((i, x) => {
							this.isChoose(i.year, i.month, i.date) && (index = x);
						});
						this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 42;
					}
				}


			},
			m() {
				this.$emit('changeMonth', {
					year: this.y,
					month: this.m
				})
			},
			dates() {
				this.$emit('changeDates', {
					dates: this.dates
				})
			}
		},
		mounted() {
			if (this.selectDate) {
				this.choose = this.selectDate
				this.y = this.selectDate.split('-')[0]
				this.m = this.selectDate.split('-')[1]
			} else {
				this.choose = this.getToday().date;
			}
			this.toggle()

		},
		computed: {
			// 顶部星期栏
			weekDay() {
				return this.weektext
					.slice(this.weekstart)
					.concat(this.weektext.slice(0, this.weekstart));
			},
		},
		methods: {
      // 标记日期状态颜色
      calendarDaycount(y, m, d) {
        let day=y + "-" + this.formatNum(m) + "-" + this.formatNum(d)
        if(this.eventByCalendarList!=null&&this.eventByCalendarList.length>0){
          for (let i = 0; i < this.eventByCalendarList.length; i++) {
            if(this.eventByCalendarList[i].day==day&&this.eventByCalendarList[i].daycount>0&&this.eventByCalendarList[i].daycount<=10){
              return "date-state-pointer d-state-t10"
            }else if(this.eventByCalendarList[i].day==day&&this.eventByCalendarList[i].daycount>10){
              return "date-state-pointer d-state-b10"
            }
          }
        }
        return "date-state-pointer d-state-zc";
      },
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? "0" + res : res;
			},
			getToday() {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth();
				let d = date.getDate();
				let week = new Date().getDay();
				let weekText = ["日", "一", "二", "三", "四", "五", "六"];
				let formatWeek = "星期" + weekText[week];
				let today = {
					date: y + "-" + this.formatNum(m + 1) + "-" + this.formatNum(d),
					week: formatWeek,
				};
				return today;
			},
			// 获取当前月份数据
      async monthDay(y, month) {
        let param={ day: y+"-"+this.formatNum(Number(month)) }
        await getEventByCalendar(param).then(res => {
          //获取日历颜色状态
          this.eventByCalendarList=res.data;
        })
        this.dates = [];
        let m = Number(month);
        let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m - 1, 0).getDate(); // 上一月的最后一天
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
				let startDay = (() => {
					// 周初有几天是上个月的
					if (firstDayOfMonth == weekstart) {
						return 0;
					} else if (firstDayOfMonth > weekstart) {
						return firstDayOfMonth - weekstart;
					} else {
						return 7 - weekstart + firstDayOfMonth;
					}
				})();
				let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
				for (let i = 1; i <= startDay; i++) {
          this.dates.push({
						date: this.formatNum(lastDayOfLastMonth - startDay + i),
						day: weekstart + i - 1 || 7,
						month: m - 1 >= 1 ? this.formatNum(m - 1) : 12,
						year: m - 1 >= 1 ? y : y - 1,
						isCurM: false
					});
				}
				for (let j = 1; j <= lastDateOfMonth; j++) {
          this.dates.push({
						date: this.formatNum(j),
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: this.formatNum(m),
						year: y,
						isCurM: true, //是否当前月份
					});
				}
				for (let k = 1; k <= endDay; k++) {
          this.dates.push({
						date: this.formatNum(k),
						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
						month: m + 1 <= 12 ? this.formatNum(m + 1) : 1,
						year: m + 1 <= 12 ? y : y + 1,
						isCurM: false
					});
				}
			},
			isFutureDay(y, m, d) {
				//是否未来日期
				let ymd = `${y}/${m}/${d}`;
				let formatDY = new Date(ymd.replace(/-/g, "/"));
				let showTime = formatDY.getTime();
				let curTime = new Date().getTime();
				if (showTime > curTime) {
					return true;
				} else {
					return false;
				}
			},
			// 标记日期
			isMarkDay(y, m, d) {
				let flag = false;
				for (let i = 0; i < this.markDays.length; i++) {
					let dy = `${y}-${m}-${d}`;
					if (this.markDays[i] == dy) {
						flag = true;
						break;
					}
				}
				return flag;
			},
			isToday(y, m, d) {
				let checkD = y + "-" + m + "-" + d;
				let today = this.getToday().date;
				if (checkD == today) {
          return true;
				} else {
					return false;
				}
			},
			isTodayChoose(year, month, day) {
				let checkD = year + "-" + month + "-" + day;
				let today = this.getToday().date;
				return this.choose == `${year}-${month}-${day}` && checkD == today
			},
			isChoose(y, m, d) {
				let checkD = y + "-" + m + "-" + d;
				return this.choose == checkD
			},
			// 展开收起
			toggle() {
				this.monthOpen = !this.monthOpen;
				if (this.monthOpen) {
					this.positionTop = 0;
				} else {
					let index = -1;
					this.dates.forEach((i, x) => {
						this.isChoose(i.year, i.month, i.date) && (index = x);
					});
					this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 42;
				}
			},
			// 点击回调
			selectOne(i) {
				let markDay = this.isMarkDay(i.year, i.month, i.date);
				let date = `${i.year}-${i.month}-${i.date}`;
				let selectD = new Date(date).getTime();
				let curTime = new Date().getTime();
				let week = new Date(date).getDay();
				let weekText = ["日", "一", "二", "三", "四", "五", "六"];
				let formatWeek = "星期" + weekText[week];
				let response = {
					date: date,
					week: formatWeek,
				};
				// if (!i.isCurM) {
				//   // console.log('不在当前月范围内');
				//   return false;
				// }
				if (selectD > curTime) {
					if (this.disabledAfter) {
						console.log("未来日期不可选");

						return false;
					} else {
						this.choose = date;
						if (markDay && i.isCurM) {
							this.$emit("onDayClick", response);
						}
					}
				} else {
					this.choose = date;
					if (i.isCurM) {
						this.$emit("onDayClick", response);
					} else {
						this.y = i.year
						this.m = i.month
            this.monthDay(this.y, this.m);
						this.$emit("onDayClick", response);
					}
				}
				this.$emit("setDate", response);
				//   console.log(response);
        this.$emit("selectDay", date);
			},
			//改变年月
			changYearMonth(y, m) {
        this.monthDay(y, m);
				this.y = y;
				this.m = m;
			},
			changeMonth(type) {
				this.y = parseInt(this.y)
				this.m = parseInt(this.m)
				if (type == "pre") {

					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = parseInt(this.y) - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
        this.monthDay(this.y, this.m);
				// this.$emit("changeMonth");
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/base.scss';
	//状态
	.d-state-zc {
		background-color: $date-state1;
	}

	.d-state-t10 {
		background-color: $date-state2;
	}

	.d-state-b10 {
		background-color: $date-state3;
	}

	.bottomLine {
		padding-top: 12px;
		padding-bottom: 12px;

		>div {
			width: 32px;
			height: 3px;
			background: none;
			border-radius: 2px;
		}
	}

	.nolm {
		color: #2b4376 !important;
	}

	.calendar-wrapper {
		text-align: center;

		.header {
			.yearMonth {
				font-size: 16px;
				line-height: 23px;
				color: $inBlue;
				margin: 0 32px;
				display: flex;
				justify-content: center;
			}


		}

		.week {
			display: flex;
			justify-content: space-around;
			width: 100%;
			align-items: center;
			height: 19px;
			line-height: 19px;
			font-size: 13px;
			font-weight: 600;
			margin-top: 5px;
			color: $inBlue;
		}

		.content {
			position: relative;
			transition: height 0.4s ease;

			.days {
				transition: top 0, 3s;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;
				font-size: 14px;
				line-height: 19px;

				.item {
					position: relative;
					display: block;
					height: 33px;
					line-height: 33px;
					width: calc(100% / 7);

					.day {
						font-style: normal;
						display: inline-block;
						position: relative;
						vertical-align: middle;
						width: 30px;
						font-weight: 500;
						height: 30px;
						line-height: 30px;
						overflow: hidden;
						border-radius: 50%;
						cursor: pointer;
						color: #3d8bbc;
						font-size: 11px;

						.date-state-pointer {
							position: absolute;
							bottom: 1px;
							left: 50%;
							transform: translateX(-50%);
							width: 4px;
							height: 4px;
							border-radius: 5px;
						}




						&.choose {
							background-color: #3a4350;
							color: #fff !important;
						}

						&.todayChoose {
							background-color: #1A7AF8 !important;
							color: #fff;
						}

					}


					.notSigned {
						font-style: normal;
						width: 8rpx;
						height: 8rpx;
						background: #fa7268;
						border-radius: 10rpx;
						position: absolute;
						left: 50%;
						bottom: 0;
						pointer-events: none;
					}

					.today {
						color: #ffffff;
						background-color: #3c56b5;
					}

					.markDayNoChoose {
						background: #1A7AF8;
					}

					.markDayChoose {
						background: #fff;
					}

					.markDay {
						width: 4px;
						height: 4px;
						border-radius: 50%;
						position: absolute;
						left: 16px;
						bottom: 4px;
						pointer-events: none;
					}
				}
			}
		}

		.hide {
			height: 42px !important;
		}

		.arrowIcon {
			width: 40px;
			height: 23px;
			cursor: pointer;
			margin: 0 5px;

		}

		.arrowIcon:hover {
			background-color: #202e62;

			i {
				color: #fff;
			}

		}

		// .weektoggle {
		//   width: 85px;
		//   height: 32px;
		//   position: relative;
		//   left: 50%;
		//   margin-left: -42px;
		//   bottom: -42px;
		//   &.down {
		//     transform: rotate(180deg);
		//     bottom: 0;
		//   }
		// }
		.date-what{
			width: 100%;
			color: $inBlue;
			display: flex;
			align-items: center;
			padding:.4rem 1rem ;
			position: absolute;
			bottom: 0;
			justify-content: space-between;
			.d-w-info{
				display: flex;
				align-items: center;
				.d-w-i-color{
					width: 1rem;
					height: 1rem;
					margin-right: .5rem;
					border-radius: .2rem;
				}
			}
		}
	}
</style>