|
|
@@ -1,30 +1,221 @@
|
|
|
<template>
|
|
|
<!-- 面试日历 -->
|
|
|
- <div id="interviewCalendar">
|
|
|
- <full-calendar :events="fcEvents" locale="en"></full-calendar>
|
|
|
+ <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 {
|
|
|
- components: {
|
|
|
- 'full-calendar': require('vue-fullcalendar')
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- fcEvents: [
|
|
|
- {
|
|
|
- title: "Sunny Out of Office",
|
|
|
- start: "2021-08-11",
|
|
|
- end: "2021-08-13",
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
+ 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(),
|
|
|
};
|
|
|
},
|
|
|
- methods: {},
|
|
|
+ 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>
|