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

<template>
  <el-popover
    trigger="hover"
    placement="right"
    :close-delay="0"
  >
    <div class="c-event-detail">
      <div class="c-event-detail__time">{{ time }}</div>
      <div
        v-if="desc"
        class="c-event-detail__desc"
      >{{ desc }}</div>
    </div>
    <template #reference>
      <div
        class="c-event u-ellipsis u-pointer"
        :class="{ fill, editable }"
        @click="onClick"
      >
        {{ event.origin.target.name }}
        <i
          class="c-event__icon el-icon-close"
          @click.stop="onRemove"
        />
      </div>
    </template>
  </el-popover>
</template>

<script>
import { EventFreq } from '@/constant'

export default {
  name: 'EventItem',
  props: {
    event: {
      type: Object,
      default: null
    },
    fill: {
      type: [Boolean, String],
      default: false
    },
    editable: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    time () {
      const { start, until } = this.event.origin
      return until ? `${start} - ${until}` : `自${start}开始`
    },
    desc () {
      const { freq, byDay, startTime, endTime } = this.event.origin
      switch (freq) {
        case EventFreq.WEEKLY:
          return `每周${byDay.split(',').map(val => ['日', '一', '二', '三', '四', '五', '六'][val]).join('、')}，${startTime} - ${endTime}`
        default:
          return null
      }
    }
  },
  methods: {
    onClick () {
      this.$emit('edit', this.event)
    },
    onRemove () {
      this.$emit('remove', this.event)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-event-detail {
  display: inline-block;
  color: $black;
  text-align: center;

  &__time {
    font-size: 14px;
    font-weight: bold;
  }

  &__desc {
    margin-top: 6px;
    color: $black;
    font-size: 12px;
  }
}

.c-event {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: 6px 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  border-radius: $radius--mini;
  background-color: $blue;

  &.fill {
    width: 100%;
  }

  &.editable:hover {
    padding-right: 30px;

    i {
      display: inline-flex;
    }
  }

  &__icon {
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 50%;
    right: 0;
    width: 30px;
    height: 100%;
    transform: translateY(-50%);
  }
}
</style>