great_service/src/views/ticket/schedulingConfiguration/index.vue

<template>
  <div class="app-container app-calendar-container">
    <div>
      <el-button  type="primary" @click="handlePerFormList('ADD')">排期配置</el-button>
    </div>
    <div v-loading="loading">
      <el-calendar v-model="timeValue" v-if="showCalendar">
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <div @click.stop="selectTime(data.day)" :class="[data.day == today?'today_yes':'today_no']">
            <span>{{ data.day.split('-').slice(1).join('-') }}</span>
            <div style="width: 100%; display: flex;flex-wrap: wrap;" >
              <div 
              :key="index"
              :style="{marginLeft: index%2 == 0?'':'20px',color: item.status == 1 ?'#67c23a':'#909399'}"
              v-for="(item,index) in getPerFormList(data)"
              @click.stop="handlePerFormDeatils(item)"
              >
              {{ item.performTimeStart }}-{{ item.performTimeEnd }}
              </div>
            </div>
            
          </div>
          
        </template>
      </el-calendar>
      <!-- <calendarBox /> -->
    </div>
    <!-- 排期详情  -->
    <perFormDeatils ref="perFormDeatils" @getList="getList" />

    <!-- 排期列表 -->
    <perFormListBox ref="perFormListBox" @getList="getList" />
  </div>
</template>

<script>

import { calendarList } from '@/api/ticketMr/schedulingConfiguration'

import moment from "moment"
import calendarBox from './dialog/calendarBox.vue';
import perFormDeatils from './dialog/perFormDeatils.vue';
import perFormListBox from './dialog/perFormListBox.vue';
export default {
  name: "SchedulingConfiguration",
  dicts: [],
  components: { calendarBox,perFormDeatils,perFormListBox },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        startDate: null,
        endDate: null,
      },
      timeValue: new Date(),
      perFormList: [],
      showCalendar: false,
      today: moment().format("YYYY-MM-DD")
    };
  },
  created() {
    this.showCalendar = false
    this.queryParams = {
        startDate: moment(this.timeValue).startOf('month').format("YYYY-MM-DD"),
        endDate: moment(this.timeValue).endOf('month').format("YYYY-MM-DD"),
      }
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      let params = JSON.parse(JSON.stringify(this.queryParams))
      calendarList(this.addDateRange({...params}, this.dateRange))
      .then(response => {
          console.log(response)
          this.perFormList = response.data.rows
          this.showCalendar = true
          this.loading = false;
        }
      ).catch(() => {
        this.loading = false;
      });
    },
    getPerFormList(data) {
      let list = []
      this.perFormList.forEach((item,index)=>{
        if(item.performDate == data.day) {
          console.log("dsfsdfdsfdsf")
          list = item.list
        }
      })
      return list
    },
    selectTime(value){
      console.log("value====",value)
      // this.queryParams = {
      //   startDate: moment(value).startOf('month').format("YYYY-MM-DD"),
      //   endDate: moment(value).endOf('month').format("YYYY-MM-DD"),
      // }
      // this.getList();
    },
    
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs["addAndEdit"].openDialog("修改数据", row);
    },

    /** 排期详情  */
    handlePerFormDeatils(row) {
      this.$refs["perFormDeatils"].openDialog("排期详情", row);
    },

    /** 排期列表 */
    handlePerFormList() {
      this.$refs["perFormListBox"].openDialog("排期详情", null);
    },
    // 获取日历显示时间范围
    getRange(date){
      // 日历第一天
      let firstDay = '';
      // 日历最后一天
      let lastDay = '';
      // 今天
      const today = date ? date : new Date()
      // 上月
      const m = today.getMonth()
      // 本月
      const cm = m + 1
      // 下月
      const lm = m + 2 > 12 ? 1 : m + 2
      // 要显示的本月
      const currentMonth = cm < 10 ? '0' + cm : cm
      // 要显示的本本年
      const currentYear = today.getFullYear()
      // 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
      const prevYear = m == 0 ? currentYear - 1 : currentYear
      const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m
      // 上个月天数
      const pmd = new Date(prevYear, m, 0).getDate()
      // 下个月的年份，当前12月，则需要加一年
      const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear
      const lastMonth = lm < 10 ? '0' + lm : lm
      // 1号是周几
      const firstWeek = new Date(today.setDate(1)).getDay()
      // 如果是周日，则不需要显示上个月
      if (firstWeek == 0) {
        firstDay = `${currentYear}-${currentMonth}-01`
      }
      // 其他周几，对应用上个月的天数往前推算
      else {
        firstDay = `${prevYear}-${prevMonth}-${pmd - (firstWeek - 1)}`
      }
      // 这个月天数
      const currentMonthDate = new Date(currentYear, cm, 0).getDate()
      // 最后一天是周几
      const lastWeek = new Date(today.setDate(currentMonthDate)).getDay()
      // 周六显示当月最后一天
      if (lastWeek == 6) {
        lastDay = `${currentYear}-${currentMonth}-${currentMonthDate}`
      }
      // 其他周几，对应往后推算
      else {
        const day = ['06', '05', '04', '03', '02', '01']
        lastDay = `${lastYear}-${lastMonth}-${day[lastWeek]}`
      }
      console.log('第一天', firstDay)
      console.log('最后一天', lastDay)
      this.queryParams = {
        startDate: firstDay,
        endDate: lastDay,
      }
      this.getList();
    }
  },
  watch:{
    timeValue(newValue,oldValue){
      let time = moment(newValue).format("YYYY-DD-MM")
      if (newValue.getFullYear() !== oldValue.getFullYear() || newValue.getMonth() !== oldValue.getMonth()) {
        this.getRange(newValue)
      }
    }
  }
};
</script>
<style scoped lang="scss">
.is-selected {
  color: #1989FA;
}
.app-calendar-container ::v-deep .el-calendar-table .el-calendar-day {
    height: auto;
    min-height: 86px;
}
.app-calendar-container ::v-deep .is-today {
  background-color: rgba(255, 240, 24, 0.5);
}
.app-calendar-container ::v-deep .prev {
  background-color: rgba(223, 230, 236,0.5) !important;
}
.app-calendar-container ::v-deep .next {
  background-color: rgba(223, 230, 236,0.5) !important;
}
.today_yes {

}
.today_no {

}
</style>