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 style="padding-left: 20px">
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
       <el-checkbox-group v-model="checkList" @change="statusChange">
       <div  v-for="(item, index) in statusIndexList" :key="index" >
         <div style="padding: 5px 20px;font-size: 14px"><el-checkbox :key="index" :label="item">{{ statusList[index] }}</el-checkbox></div>
       </div>
       </el-checkbox-group>
     </div>
     <div style="padding: 20px">
       <el-button size="medium" type="primary">导出报表</el-button>
     </div>
   </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>

            <el-popover
              width="450"
              v-if="item_c.recruitInterviewList.length>0"
              trigger="hover">
                <div>
                  <div  v-for="(val, key,i) in item_c.mergeObj" :key="i" >
                    <div>
                      {{key}}：
                      <div  v-for="(item_val, index_val) in val" :key="index_val" style="padding-left: 60px;display:flex ;justify-content: space-between;padding-bottom: 5px;align-items: center;">
                        <div> {{item_val.recruitResumeVo.realname}} - {{item_val.recruitResumeVo.telphone}} - {{statusList[item_val.status]}}</div>
                        <div>
                          <el-button size="mini" type="primary" @click="updateStatue(item_val)">标注</el-button>
                          <el-button size="mini" type="primary" @click="updateDate(item_val)">改期</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div slot="reference" style="cursor: pointer;">
                  <div style="font-size: 12px;text-align: left;">待面试：</div>
                  <div  v-for="(val, key,i) in item_c.mergeObj" :key="i" class="day_col_item">
                    <div> <span class="color1">{{key}}*{{val.length}}</span></div>
                  </div>
                </div>
            </el-popover>
          </div>
        </div>
      </div>


    </div>
    <el-dialog
      :visible.sync="dateDialogVisible"
      width="30%"
      center>
      <div style="margin-top: 30px">
        <div style="text-align: center"> {{dateForm.recruitResumeVo.realname}} - {{dateForm.job}}</div>
        <div style="text-align: center;margin-top: 20px">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="dateForm.resumeTime" value-format="timestamp"></el-date-picker>
        </div>
      </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="dateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(1)">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="statusDialogVisible"
      width="30%"
      center>
      <div style="margin-top: 30px">
        <div style="text-align: center"> {{statusForm.recruitResumeVo.realname}} - {{statusForm.job}}</div>
        <div style="text-align: center;margin-top: 20px">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(0)">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: 0,
        label: '已投递'
      }, {
        value: 1,
        label: '已发邀请'
      }, {
        value: 2,
        label: '已确定'
      }, {
        value: 3,
        label: '已谢绝'
      }, {
        value: 4,
        label: '初试通过'
      }, {
        value: 5,
        label: '初试不通过'
      }, {
        value: 6,
        label: '复试通过'
      }, {
        value: 7,
        label: '复试不通过'
      }, {
        value: 8,
        label: '已发offer'
      }, {
        value: 9,
        label: '爽约'
      }, {
        value: 10,
        label: '淘汰'
      }, {
        value: 11,
        label: '放弃'
      }, {
        value: 12,
        label: '转正'
      }],
      statusForm:{
        recruitResumeVo:''
      },
      value:'',
      statusDialogVisible:false,
      dateForm:{
        recruitResumeVo:''
      },
      dateDialogVisible:false,
      isIndeterminate: false,
      checkAll: true,
      checkList:[0,1,2,3,4,5,6,7,8,9,10,11,12],
      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(),
      statusList:['已投递','已发邀请','已确认','已谢绝','初试通过','初试不通过','复试通过','复试不通过','已发Offer','爽约','淘汰（试用公司辞退）','放弃（试用期个人离职）','转正'],
      statusIndexList:[0,1,2,3,4,5,6,7,8,9,10,11,12],
      statusRadio: 0
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    editrecruitinterviewStatus(){
      let data = {}
      data.status = this.value
      data.interviewId = this.statusForm.interviewId
      let that = this
      this.$api.editrecruitinterview(data).then((res) => {
        if(res.code==200){
          that.statusDialogVisible = false
          that.search();
        }
      });
    },
    editrecruitinterview(){
      let data = {}
      data.resumeTime = parseInt(this.dateForm.resumeTime/1000)
      data.interviewId = this.dateForm.interviewId
      let that = this
      this.$api.editrecruitinterview(data).then((res) => {
        if(res.code==200){
          that.dateDialogVisible = false
          that.search();
        }
      });
    },
    submitForm(type){
      if(type==0){
        this.editrecruitinterviewStatus()
      }
      if(type==1){
        this.editrecruitinterview()
      }
    },
    updateStatue(val){
      this.statusDialogVisible = true
      this.statusForm = JSON.parse(JSON.stringify(val));
      this.value = this.statusForm.status
    },
    updateDate(val){
      this.dateDialogVisible = true
      this.dateForm = JSON.parse(JSON.stringify(val));
      this.dateForm.resumeTime = this.dateForm.resumeTime*1000
    },
    handleCheckAllChange(val){

      this.checkList = val ? this.statusIndexList : [];
      this.isIndeterminate = false;
      console.log(this.checkList)
      this.search();
    },
    statusChange(value){
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.statusList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.statusList.length;
      this.search();
      console.log(this.checkList,99)
    },
    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(),
        statusIds:this.checkList.toString()
      };

      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)
            that.dealDayList(that.dayInterviewVos[i].quantumList)
          }
          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(){
            document.getElementById('weekContainer').scrollTop = 479
          });

        }
      });
      this.loading = false;
    },
    dealDayList(quantumList){
      for(let i =0;i<quantumList.length;i++){
        let item = quantumList[i]
        let mergeObj = {}
        for(let j =0;j<item.recruitInterviewList.length;j++){
          let dayItem = item.recruitInterviewList[j]
          if(mergeObj.hasOwnProperty(dayItem.job)){
            let valueList = mergeObj[dayItem.job]
            valueList.push(dayItem)
          }else{
            let valueList = []
            valueList.push(dayItem)
            mergeObj[dayItem.job] = valueList
          }
        }
        item.mergeObj = mergeObj
      }

    },
  },
  watch:{
    dayValue(val, oldVal){//普通的watch监听
      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>
.color1{
  color: #ffffff;
  background-color: #E6A23C;
  padding: 2px 5px;
  border-radius: 4px;
}
.day_col_item{
  color: #666666;
  font-size: 12px;
  padding: 5px;
  overflow: hidden;
}
.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>