zz-admin/src/view/jobSearchManagement/interviewCalendar/index.vue

<template>
  <!-- 面试日历 -->
  <div id="interviewCalendar" class="box">
   <div  class="interviewCalendar">
     <el-calendar v-model="dayValue">
     </el-calendar>
   </div>
    <div style="min-width: 1050px">
      <div style="display: flex;justify-content: center;font-weight: bold;padding: 25px;font-size: 18px;letter-spacing: 5px">
        <div><i class="el-icon-arrow-left" style="cursor: pointer"  @click="changeWeek(-1)"></i>{{weekDay1.getFullYear()}}年{{weekDay1.getMonth()+1}}月{{weekDay1.getDate()}}日-{{weekDay2.getMonth()+1}}月{{weekDay2.getDate()}}日
          <i class="el-icon-arrow-right" style="cursor: pointer" @click="changeWeek(1)"></i></div>
      </div>
      <div class="week_box" >
        <div v-if="weekDayList.length>0" v-for="(item, index) in weekDay" :key="index" :class="dayValue.getDate()==weekDayList[index].num?'selColor card_date':'card_date'">
          <div>{{ item }}</div>
          <div  :class="dayValue.getDate()==weekDayList[index].num?'selCircle':'selNone'">{{ weekDayList[index].num }}</div>
        </div>
      </div>
      <div class="week_box week_container" id="weekContainer">
        <div v-if="dayInterviewVos.length>0" v-for="(item, index) in dayInterviewVos" :key="index" class="day_row">
          <div  v-for="(item_c, index_c) in item.quantumList" :key="index_c" :class="index==0?'day_col day_row0':'day_col'">
            <div v-if="index==0" class="timeLine">
              {{timeline[index_c]}}
            </div>
            <div  v-for="(item_cc, index_cc) in item_c.recruitInterviewList" :key="index_cc" class="day_col_item">
              <div> {{item_cc.realName}} - {{item_cc.job}}</div>
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dayValue: new Date(),
      loading: false, //当前表单加载是否加载动画
      weekDay:['周一','周二','周三','周四','周五','周六','周日'],
      weekDayList:[],
      date_num: [],
      currIndex:0,
      dayInterviewVos:[],
      timeline:['凌晨0点','凌晨1点','凌晨2点','凌晨3点','凌晨4点','凌晨5点','上午6点','上午7点','上午8点','上午9点','上午10点','上午11点','中午12点','下午1点',
        '下午2点','下午3点','下午4点','下午5点','下午6点','晚上7点','晚上8点','晚上9点','晚上10点','晚上11点'],
      weekDay1:new Date(),
      weekDay2:new Date(),
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    changeWeek(index){
      if(index==-1){
        this.dayValue.setTime(this.dayValue.getTime()-7*24*60*60*1000)
      }
      if(index==1){
        this.dayValue.setTime(this.dayValue.getTime()+7*24*60*60*1000)
      }
      let d = new Date()
      d.setTime(this.dayValue.getTime())
      this.dayValue = d
      this.search()

    },
    search() {
      let that = this
      this.loading = true;
      var data = {
        year: this.dayValue.getFullYear(),
        month: this.dayValue.getMonth()+1,
        day: this.dayValue.getDate()
      };
      this.$api.recruitinterviewlist(data).then((res) => {
        if(res.code==200){
          that.dayInterviewVos = res.data.dayInterviewVos
          that.weekDayList = []
          for(let i = 0; i < that.dayInterviewVos.length; i++) {
            if(res.data.dayInterviewVos[i].date==that.dayValue.getDate()){
              that.currIndex = i
            }
            let weekDay = {
              num:that.dayInterviewVos[i].date
            }
            that.weekDayList.push(weekDay)
          }
          for(let i = 0; i < that.weekDayList.length; i++) {
            var d=new Date();
            d.setTime(that.dayValue.getTime()+(i-that.currIndex)*24*60*60*1000)
            that.weekDayList[i].day = d
            if(i==0){
              that.weekDay1 = d
            }
            if(i==6){
              that.weekDay2 = d
            }
          }
          that.$nextTick(function(){
            console.log(document.getElementById('weekContainer'),333)
            document.getElementById('weekContainer').scrollTop = 479
          });

        }
      });
      this.loading = false;
    },
  },
  watch:{
    dayValue(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
      console.log("a: "+this.dayValue.getDate());
      this.search()
    }
  }
};
</script>
<style >

.interviewCalendar .el-calendar-table .el-calendar-day{
  height: auto;
}
.interviewCalendar .el-calendar-table tr:first-child td{
  border-top: none;
}
.interviewCalendar .el-calendar-table td{
  border-bottom: none;
  border-right: none;
}
.interviewCalendar .el-calendar-table tr td:first-child{
  border-left: none;
}
.interviewCalendar .el-button--mini, .el-button--mini.is-round{
  padding: 7px;
}
</style>
<style lang="less" scoped>
.day_col_item{
  color: #666666;
  font-size: 14px;
}
.timeLine{
  position: absolute;
  left: -55px;
  top: 20px;
  color: #666666;
  font-size: 12px;
}
.day_row0{
  border-left: 1px solid #EBEEF5;
}


.day_col:first-child{
  border-top: 1px solid #EBEEF5;
}
.day_col{
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #EBEEF5;
  border-right: 1px solid #EBEEF5;
  position: relative;
}
.day_row{
  width: 14%;
  text-align: center;
}
.selNone {
  margin-top: 20px
}
.selCircle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #ffffff !important;
  background-color: #3494F7;
  text-align: center;
  line-height: 50px;
  margin: 0 auto;
}
.selColor{
  color: #3494F7 !important;
}
.week_container{
  height: 600px;
  overflow-y: auto;
  margin-bottom: 50px;
}
.week_container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.week_box{
  min-width: 1050px;
  display: flex;
  justify-content:center;
  margin-top: 20px;
  padding-left: 50px;

}
.card_date {
  width: 14%;
  text-align: center;
  color: #000;

}
.box{
  display: flex;
  width: 100%;
  min-width: 1350px;

}
.interviewCalendar{
  width: 300px;
  height: 350px;
}
</style>