基于VUE的考勤日历（带图标）

最新推荐文章于 2024-08-09 07:46:44 发布

zhaoyizhu1990

最新推荐文章于 2024-08-09 07:46:44 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/zhaoyizhu1990/article/details/105712166

版权

本文介绍了如何在Vue项目中创建一个考勤日历组件，包括多个子组件如calendar、dateCell等，以及如何通过后台接口获取数据，根据考勤状态（如请假、出差）展示不同图标。

摘要由CSDN通过智能技术生成

1、在src文件夹下创建文件名为scheduleCalendar的文件夹，与page并列。

2、scheduleCalendar文件里

（1）、calendar.vue

<template>
  <div class="schedule-calendar">
    <header-bar :year="year"
    :month="month"
    @updateValue="updateView"></header-bar>
    <div class="schedule-calendar-body">
      <week :startWeek="startWeek"></week>
      <month :year="year"
      :month="month"
      :startWeek="startWeek"
      :data="events"
      :itemRender="dateItemRender"></month>
    </div>
  </div>
</template>
<script>
  import { EventBus } from './utils'
  import headerBar from './header'
  import week from './week'
  import month from './month'

  export default {
    name: 'schedule-calendar',
    components: {
      headerBar,
      week,
      month,
    },
    props: {
      startMonth: String,
      startWeek: {
        type: Number,
        default: 1
      },
      events: {
        type: Array,
        default: []
      },
      dateItemRender: Function
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
        dragItem: null
      }
    },
    methods: {
      updateView(year, month) {
        this.year = year
        this.month = month
        this.$emit('dateSelect', year, month)
      },
      cellDragenter(e, date, type, index) {
        this.$emit('event-dragenter', e, this.dragItem, date)
      },
      itemDragstart(e, item, date, type) {
        this.dragItem = item
        this.$emit('event-dragstart', e, item, date)
      },
      itemDrop(e, date, type, index) {
        if (!this.dragItem) return
          // console.log('[event-dragend]:', this.dragItem, date)
        this.$emit('event-dragend', e, this.dragItem, date)
      },
      itemClick(e, item) {
        // console.log('[event-click]:', item)
        this.$emit('event-click', e, item)
      },
      dateClick(e, date) {
        // console.log('[date-click]:', date)
        this.$emit('date-click', e, date)
      }
    },
    created() {
      EventBus.$on('cell-dragenter', this.cellDragenter)
      EventBus.$on('item-dragstart', this.itemDragstart)
      EventBus.$on('item-drop', this.itemDrop)
      EventBus.$on('item-click', this.itemClick)
      EventBus.$on('date-click', this.dateClick)
      EventBus.$on('dateSelect', this.updateView)
    },
    destoryed() {
      EventBus.$off()
    }
  }
</script>
<style lang="less">
@import "./variables.less";

.schedule- {
  &calendar {
    height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /*height: 100%;*/
    border: 1px solid #e8e8e8;
    min-width: @sc-cell-min-width * 7;
    color: @sc-base-color;
    font-size: @sc-base-font-size;
    box-shadow: @sc-box-shadow;

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    button {
      border: 0;
      outline: none;
      cursor: pointer;
      background: transparent;
    }

    &-body {
      position: relative;
      flex: 1;
      width: 100%;
      overflow: hidden;
      background: @sc-body-color;
    }
  }
}

</style>

（2）、dateCell.vue

<template>
  <div class="schedule-calendar-date"
  :class="[type, { today: isToday, dragged: draggedIndex === index }]"
  @dragover.prevent=""
  @dragenter.prevent="dragenter"
  @drop="onDrop"
  @click="cellClick">
  <div class="schedule-calendar-date-hd">
    <div class="schedule-calendar-date-label">{
  {date.getDate()}}</div>
    <!-- <button type="button"
    class="schedule-calendar-counter"
    v-if="details.length > volume"
    @click.stop.prevent="expandAll">共 {
  {details.length}} 项</button> -->
  </div>
  <div class="schedule-calendar-details"
  :class="{ expanded }"
  :style="detailsPost"
  ref="details">
  <div v-show="expanded"
  class="schedule-calendar-details-hd">{
  { dateString }}</div>
  <div class="schedule-calendar-details-bd">
    <event-item v-if="details.length"
    v-for="item in displayDetails"
    :item="item"
    :date="date"
    :type="type"
    :itemRender="itemRender"
    @item-dragstart="dragItem"
    :key="item.id"></event-item>
  </div>
</div>
</div>
</template>
<script>
  import { EventBus, isSameDay, format, Store } from './utils'
  import eventItem from './eventItem'

  export default {
    components: {
      eventItem
    },
    props: {
      date: Date,
      type: String,
      data: Array,
      index: Number,
      draggedIndex: Number,
      itemRender: Function
    },
    data() {
      return {
        volume: 0,
        expanded: false
      }
    },
    computed: {
      isToday() {
        return isSameDay(new Date(), this.date)
      },
      details() {
        return this.data.length ? this.data.filter(item => isSameDay(item.date, this.date)) : []
      },
      displayDetails() {
        return this.expanded ? this.details : this.details.sl