DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/monthSchedule/monthSchedule.vue

<template>
  <div class="month-container">
    <div class="month-top">
      <div class="m-btn-wrap">
        <span @click="handleShowLastMonth">上一月</span>
        <span @click="handleShowToday"> 当月 </span>
        <span @click="handleShowNextMonth">下一月</span>
      </div>
      <span class="m-today-date"> {{ year }}年{{ month > 9 ? month : `0${month}` }}月</span>
      <!-- <div class="m-card-status">
        <div v-for="sta in cardStatus">
          <span class="square" :style="{background:sta.color}"></span>
          <span class="title">{{ sta.title }}</span>
        </div>
      </div> -->
    </div>
    <div class="m-date-wrap">
      <ul class="m-week">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>
      <ul class="m-day">
        <li v-for="(myDay,index) in days"
            :class="{'m-isActive':myDay.isActive,'m-isCurToday':myDay.isCurToday}"
            :key="index" @click="handleChooseCard(myDay)">
          <span  class="m-date" :class="{'m-isCurMonth':myDay.isNextMonth||myDay.isLastMonth}">
            {{ myDay.day }}
          </span>
		  <slot :row="myDay"></slot>
          <!-- <template v-for="(plan,i) in myDay.planList">
            <div v-if="i<hasNumExpend&&!myDay.isExpend" :key="`plan${i}`" @click="handleDetail(plan)"
                 class="m-card-default"
                 :style="{background: cardStatus[plan.status].color}">
              <slot name="card" :row="plan"></slot>
            </div>
            <div v-if="myDay.isExpend" :key="`plan${i}`" @click="handleDetail(plan)"
                 class="m-card-default"
                 :style="{background: cardStatus[plan.status].color}">
              <slot name="card" :row="plan"></slot>
            </div>
          </template> -->
          <div class="w_expand" v-if="myDay.planList.length>hasNumExpend&&!myDay.isExpend" @click="handleExpand(myDay)">展开
          </div>
          <div class="w_shrink" v-if="myDay.planList.length>hasNumExpend&&myDay.isExpend"
               @click="handleExpand(myDay)">收缩
          </div>
        </li>
      </ul>
    </div>
	<div class="m-card-status1">
	  <div v-for="sta in cardStatus">
	    <span class="square" :style="{background:sta.color}"></span>
	    <span class="title">{{ sta.title }}</span>
	  </div>
	</div>
  </div>
</template>

<script>


import {getCurDay} from "./MyTools";

export default {
  name: 'monthSchedule',
  props: {
    //日程数据
    scheduleList: {
      type: Array,
      default:()=>[]
    },
    //是否展开，默认不展开
    isExpend:{
      type: Boolean,
      default:false
    },
    //多少进行展开
    hasNumExpend:{
      type: Number,
      default:2
    },
    //卡片状态
    cardStatus: {
      type: Object,
      default: () => {
        return {
          1: {
            title: '已过期',
            color: '#9CADADB7'
          },
          2: {
            title: '进行中',
            color: '#FF6200'
          },
          3: {
            title: '未开始',
            color: '#3291F8'
          },
        }
      }
    }
  },
  data() {
    return {
      year: '',//年
      month: '',//月
      days: [],//日期
      endTime: null,
      startTime: null,
      monthValue: '',
    }
  },
  methods: {
    //展开与缩放操作
    handleExpand (row) {
      row.isExpend = !row.isExpend
    },
    changeMonth() {
      const date = this.monthValue && this.monthValue.split('-').map(Number) || []
      if (date.length === 0) {
        return
      }
      this.year = date[0];
      this.month = date[1]
      this.days = [];
      this.pushDays();
    },
    //得到当前年这个月分有多少天
    getDays(Y, M) {
      return new Date(Y, M, 0).getDate();
    },
    //得到当前年，这个月的一号是周几
    getWeek(Y, M) {
      let now = new Date()
      now.setFullYear(this.year)
      now.setMonth(this.month - 1)
      now.setDate(1);
      return now.getDay();
    },
    /**
     * 获取本月日期
     */
    pushDays() {
      console.log(this.getDays(this.year, this.month))
      //将这个月多少天加入数组days
      for (let i = 1; i <= this.getDays(this.year, this.month); i++) {
        const _day = `${i > 9 ? i : '0' + i}`, _month = `${this.month > 9 ? this.month : '0' + this.month}`,
            date = `${this.year}-${_month}-${_day}`;
        this.days.push({
          day: _day,//
          date,
          isExpend:this.isExpend,
          planList:this.scheduleList.filter(item => item.date === date),
          isCurMonth: true,
          month: _month,
          year: `${this.year}`,
          timestamp: new Date(date).getTime(),//转换时间戳
        })
      }
      this.getLastMonthDays()
      this.getNextMonthDays()
    },
    /**
     * 获取下个月的日期
     */
    getNextMonthDays() {
      const month = this.month < 12 ? this.month + 1 : 1,
          year = this.month < 12 ? this.year : this.year + 1,
          len = 42 - this.getDays(this.year, this.month) - this.getWeek(this.year, this.month)
      //将下个月要显示的天数加入days
      for (let i = 1; i <= len; i++) {
        const _day = `${i > 9 ? i : '0' + i}`, _month = `${month > 9 ? month : '0' + month}`,
            date = `${year}-${_month}-${_day}`;
        this.days.push({
          day: _day,
          date,
          isExpend:this.isExpend,
          month: _month,
          year: `${year}`,
          planList: this.scheduleList.filter(item => item.date === date),
          isNextMonth: true,
          timestamp: new Date(date).getTime()
        })
      }
    },
    /**
     * 获取上个月的日期
     */
    getLastMonthDays() {
      const month = this.month > 1 ? this.month - 1 : this.year > 1970 ? 12 : 1,
          year = this.month > 1 ? this.year : this.year > 1970 ? this.year - 1 : 1970,
          len = this.getWeek(this.year, this.month),
          lastMonthDays = this.getDays(this.year, this.month - 1)
      //将上个月要显示的天数加入days
      for (let i = 0; i < len; i++) {
        const _month = month > 9 ? `${month}` : `0${month}`,
            date = `${year}-${_month}-${lastMonthDays - i}`;
        this.days.unshift({
          day: `${lastMonthDays - i}`,
          date,
          month: _month,
          year: `${year}`,
          isExpend:this.isExpend,
          planList: this.scheduleList.filter(item => item.date === date),
          isLastMonth: true,
          timestamp: new Date(date).getTime(),
        })
      }
    },
    /**
     * 获取日期数据
     */
    getDate() {
      let now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.pushDays();
    },
    /**
     * 下个月
     */
    handleShowNextMonth() {
      if (this.month < 12) {
        this.month = this.month + 1;
      } else {
        this.month = this.month = 1;
        this.year = this.year + 1;
      }
      this.dealCurDay();
      const dateObj = {
        date: `${this.year}-${this.month}`,
        timestamp: new Date(`${this.year}-${this.month}`).getTime()
      }
      this.$emit('changeMonth', dateObj)
    },
    /**
     * 当天
     */
    handleShowToday() {
      let now = new Date();
      this.year = now.getFullYear();
      this.month = now.getMonth() + 1;
      this.dealCurDay();
      const dateObj = {
        date: `${this.year}-${this.month}`,
        timestamp: new Date(`${this.year}-${this.month}`).getTime()
      }
      this.$emit('changeMonth', dateObj)
    },
    /**
     * 处理当天数据
     */
    dealCurDay() {
      this.days = [];
      const curDate = getCurDay()
      this.pushDays();
      this.days.forEach(item => {
        item.isCurToday = item.date === curDate
      })
    },
    /**
     * 上个月
     */
    handleShowLastMonth() {
      this.days = [];
      if (this.month > 1) {
        this.month = this.month - 1;
        this.dealCurDay();
      } else if (this.year > 1970) {
        this.month = 12;
        this.year = this.year - 1;
        this.dealCurDay();
      } else {
        this.dealCurDay();
        return new Error('只能查1970以后的月份')
      }
      const dateObj = {
        date: `${this.year}-${this.month}`,
        timestamp: new Date(`${this.year}-${this.month}`).getTime()
      }
      this.$emit('changeMonth', dateObj)
    },
    /**
     * 选择日期卡片详情
     * @param row
     */
    handleChooseCard(row = {}) {
      this.$emit('chooseEntireCard', row)
    },
    /**
     * 查看单个日程详情
     */
    handleDetail(row) {
      this.$emit('handleDetail', row)
    },
  },
  mounted() {
    this.getDate();
    this.handleShowToday()
  },
}
</script>
<style>
ul {
  list-style: none;
}
.month-container {
  width: 100%;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
}

.month-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1% 0;
  box-sizing: border-box;

}

.month-top .m-btn-wrap {
  width: 200px;
  display: flex;
  justify-content: space-around;
  color: #409EFF;

}

.month-top .m-btn-wrap > span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;

}

.month-top .m-card-status {
  display: flex;
  width: 20%;
  justify-content: flex-end;
}

.month-top .m-card-status > div {
  flex: 1;
  display: flex;
  padding: 0 2%;
  white-space: nowrap;
  line-height: 20px;
  box-sizing: border-box;

}

.month-top .m-card-status > div .square {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-sizing: border-box;
}

.month-top .m-card-status > div .title {
  display: flex;
  align-items: center;
  line-height: 16px;
  margin-left: 4px;
  font-size: 14px;
}

.m-date-wrap {
  width: 100%;
  height: auto;

}

.m-date-wrap .m-week {
  width: 100%;
  height: 40px;
  margin: 0;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  font-size: 16px;
  background: #EAEDF2;
  box-sizing: border-box;
  padding-left: 0%;

}

.m-date-wrap .m-week > li {
  width: 14.28%;
  padding-left: 1%;
  box-sizing: border-box;
  text-align: center;
}

.m-date-wrap .m-day {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  font-size: 14px;
  flex-wrap: wrap;
  box-sizing: border-box;

}

.m-day .m-date{
  cursor: pointer;
}

.m-date-wrap .m-day > li {
  width: 14.28%;
  padding: 1%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

.m-date-wrap .m-day > li .m-card-default {
  cursor: pointer;
  width: 100%;
  min-height: 60px;
  border-radius: 8px;
  display: flex;
  margin: 6% 0;
  flex-direction: column;
  justify-content: space-around;
  white-space: nowrap;
  color: #fff;
  background: #FF6200;
  padding: 2% 4%;
  box-sizing: border-box;
}

.m-card-default span{
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-date-wrap .m-day > li:nth-child(n+8) {
  border-top: none;
}

.m-date-wrap .m-day > li:nth-child(n+1) {
  border-right: none;
}

.m-date-wrap .m-day > li:nth-child(7n) {
  border-right: 1px solid #ddd
}

.m-isCurMonth {
  background: #fff;
  color: #c0c4cc;
}

/* .m-isCurToday {
  background: #ECF5FF;
  color: #FF2525;
} */


.m-isActive {
  background: #ECF5FF;
  color: #409EFF;
}

.w_expand, .w_shrink {
  color: #0A98D5;
  cursor: pointer;
  width: 100%;
  padding: 2% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.m-card-status1{
	display: flex;
}
.m-card-status1 > div{
	padding: 4px;
}
.m-card-status1 .square{
	display: inline-block;
	margin-right: 4px;
	border-radius: 50%;
	width: 10px;
	height: 10px;
}
</style>