smsb-web-develop/src/components/Schedule/ScheduleCalendar/index.vue

<template>
  <schedule-wrapper
    class="c-schedule-calendar"
    :name="name"
    :hide-header="hideHeader"
    :editable="editable"
    :dirty="dirty"
    @add="onAdd"
    @submit="submit"
    @save="onSave"
  >
    <div class="l-flex__none l-flex--row">
      <button
        class="l-flex__none o-button c-schedule-calendar__toggle"
        :class="{ show: canToToday }"
        @click="onToday"
      >
        今日
      </button>
      <div class="l-flex__fill l-flex--row center">
        <i
          class="c-schedule-calendar__toggle c-schedule-calendar__btn el-icon-arrow-left c-sibling-item u-pointer"
          :class="{ show: canToPrevious }"
          @click="onPrevious"
        />
        <span class="c-schedule-calendar__time u-readonly">{{ date }}</span>
        <i
          class="c-schedule-calendar__toggle c-schedule-calendar__btn el-icon-arrow-right u-pointer"
          :class="{ show: canToNext }"
          @click="onNext"
        />
      </div>
      <div class="l-flex__none l-flex--row c-schedule-calendar__mode u-pointer">
        <div
          class="c-schedule-calendar__type"
          :class="{ active: mode === 0 }"
          @click="onChangeToWeek"
        >
          周
        </div>
        <div
          class="c-schedule-calendar__type"
          :class="{ active: mode === 1 }"
          @click="onChangeToMonth"
        >
          月
        </div>
      </div>
    </div>
    <component
      :is="activeComponent"
      class="c-schedule-calendar__main"
      :editable="editable"
      :weeks="weeks"
      :cursor="weekIndex"
      @add="onAdd"
      @edit="onEditProxy"
      @remove="onRemove"
      @switch="toDay"
    />
    <confirm-dialog
      ref="editDialog"
      title="事件设置"
      @confirm="onSaveEvent"
    >
      <event-edit
        v-if="event"
        ref="editor"
        class="u-align-self--center"
        :event="event"
        :ratio="ratio"
      />
    </confirm-dialog>
    <confirm-dialog
      ref="conflictDialog"
      title="冲突提醒"
      append-to-body
      @confirm="onCover"
    >
      <div
        v-for="conflict in conflicts"
        :key="conflict.key"
        class="o-conflict"
      >
        {{ conflict.info }}
        <div class="o-conflict__desc">{{ conflict.desc }}</div>
      </div>
    </confirm-dialog>
    <el-dialog
      :visible.sync="isPreviewing"
      custom-class="c-preview schedule"
      :before-close="onClosePreviewDialog"
      append-to-body
    >
      <schedule
        v-if="scheduleId"
        class="l-flex__auto has-padding"
        :schedule="scheduleId"
      />
    </el-dialog>
  </schedule-wrapper>
</template>

<script>
import { ScheduleType } from '@/constant'
import {
  toEvent,
  toDate
} from '@/utils/event'
import calendarMixin from '../mixins/calendar'
import ScheduleWrapper from '../components/ScheduleWrapper'
import ScheduleCalendarWeek from './ScheduleCalendarWeek'
import ScheduleCalendarMonth from './ScheduleCalendarMonth'
import EventEdit from './EventEdit'

export default {
  name: 'ScheduleComplex',
  components: {
    ScheduleWrapper,
    ScheduleCalendarWeek,
    ScheduleCalendarMonth,
    EventEdit
  },
  mixins: [calendarMixin],
  methods: {
    transformEvents (events, type) {
      switch (type) {
        case ScheduleType.CALENDAR:
          return events.map(event => this.createEventProxy(toEvent(event))).sort((a, b) => toDate(a.origin.start) - toDate(b.origin.start))
        default:
          return events.sort((a, b) => toDate(a.start) - toDate(b.start)).map(this.createEventProxy)
      }
    },
    getEvents () {
      switch (this.scheduleOptions.type) {
        case ScheduleType.CALENDAR:
          return this.events.map(({ origin: event }) => {
            const { start, until, target: { id, name } } = event
            return {
              programId: id,
              programName: name,
              startDateTime: start,
              endDateTime: until
            }
          })
        default:
          return this.events.map(({ origin }) => origin)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-schedule-calendar {
  min-height: 200px;

  &__time {
    box-sizing: content-box;
    min-width: 100px;
    padding: $spacing;
    color: $black;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
  }

  &__toggle {
    visibility: hidden;

    &.show {
      visibility: visible;
    }
  }

  &__btn {
    color: $blue;
    font-size: 18px;
    font-weight: bold;
  }

  &__main {
    flex: 0 1 auto;
    min-height: 0;
  }

  &__mode {
    border-radius: 4px;
    background-color: #f4f7f8;
    overflow: hidden;
  }

  &__type {
    padding: 8px 12px;
    color: $info--dark;

    &.active {
      color: #fff;
      background-color: $blue;
    }
  }
}

.o-conflict {
  &__desc {
    padding: 4px 0;
    color: $info;
    font-size: 12px;
  }
}
</style>