smsb-web-develop/src/components/Schedule/ScheduleCalendar/ScheduleEdit.bak.vue

<template>
  <div class="c-form">
    <div class="c-form__section">
      <span class="c-form__label">播放模式：</span>
      <el-select
        v-model="repeatType"
        class="c-form__item"
        placeholder="请选择"
      >
        <el-option
          v-for="option in repeatTypeOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </div>
    <div
      v-if="isSingle"
      class="c-form__section"
    >
      <el-date-picker
        v-model="range"
        type="datetimerange"
        start-placeholder="开始时间"
        range-separator="至"
        end-placeholder="结束时间"
        :picker-options="pickerOptions"
        :default-time="['00:00:00', '23:59:59']"
        @change="onChange"
      />
    </div>
    <template v-if="isWeekly">
      <el-checkbox-group
        v-model="week"
        class="c-form__section wrap"
        size="small"
      >
        <el-checkbox
          v-for="option in weekOptions"
          :key="option.value"
          class="c-form__checkbox"
          :label="option.value"
          border
        >
          {{ option.label }}
        </el-checkbox>
      </el-checkbox-group>
      <div class="c-form__section wrap">
        <el-date-picker
          v-model="startTimeDate"
          type="date"
          placeholder="开始日期"
          :picker-options="pickerOptions"
        />
        <span class="has-padding">至</span>
        <el-date-picker
          v-model="endTimeDate"
          type="date"
          placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </div>
      <div class="c-form__section wrap">
        <el-time-picker
          v-model="startTime"
          placeholder="开始时间"
        />
        <span class="has-padding">至</span>
        <el-time-picker
          v-model="endTime"
          placeholder="结束时间"
        />
      </div>
    </template>
    <div class="c-form__section">
      <div
        class="o-program-name u-ellipsis u-pointer"
        @click="toBind"
      >
        {{ programName }}
      </div>
    </div>
    <el-dialog
      :visible.sync="choosing"
      title="选择节目"
      custom-class="c-dialog hidden-footer"
      append-to-body
    >
      <ProgramChoose
        v-if="choosing"
        v-bind="$attrs"
        @choose="toChoose"
      />
    </el-dialog>
  </div>
</template>

<script>
import ProgramChoose from '../components/ProgramChoose'

export default {
  name: 'ScheduleEdit',
  components: {
    ProgramChoose
  },
  props: {
    program: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      choosing: false,
      repeatTypeOptions: [
        { value: 1, label: '单次' }/*,
        { value: 2, label: '每周' }*/
      ],
      repeatType: '',
      range: [],
      weekOptions: [
        { value: 1, label: '周一' },
        { value: 2, label: '周二' },
        { value: 3, label: '周三' },
        { value: 4, label: '周四' },
        { value: 5, label: '周五' },
        { value: 6, label: '周六' },
        { value: 7, label: '周日' }
      ],
      week: [],
      startTimeDate: null,
      endTimeDate: null,
      startTime: null,
      endTime: null,
      bindTo: null
    }
  },
  computed: {
    isSingle () {
      return this.repeatType === 1
    },
    isWeekly () {
      return this.repeatType === 2
    },
    pickerOptions () {
      return {
        disabledDate: this.isDisableDate
      }
    },
    programName () {
      return this.bindTo ? this.bindTo.itemName : '点击选择节目'
    }
  },
  watch: {
    program: {
      handler () {
        const now = new Date()
        this.$min = new Date(now.getFullYear(), now.getMonth(), now.getDate())
        this.$max = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 30)
        this.init()
      },
      immediate: true
    }
  },
  methods: {
    onChange () {
      if (this.range && this.range[0] < Date.now()) {
        this.range[0] = new Date()
      }
    },
    transform (date) {
      return `${date.year}/${date.month + 1}/${date.day}`
    },
    init () {
      const { repeatType, startTimeDate, endTimeDate, week, startTime, endTime, itemId, itemName } = this.program
      this.repeatType = repeatType || 1
      if (this.isSingle) {
        this.range = startTimeDate ? [new Date(`${this.transform(startTimeDate)} ${startTime}`), new Date(`${this.transform(endTimeDate)} ${endTime}`)] : []
        this.week = []
        this.startTimeDate = null
        this.endTimeDate = null
        this.startTime = null
        this.endTime = null
      } else {
        this.range = []
        this.week = week || []
        this.startTimeDate = startTimeDate ? new Date(this.transform(startTimeDate)) : null
        this.endTimeDate = endTimeDate ? new Date(this.transform(endTimeDate)) : null
        this.startTime = startTime ? new Date(startTime) : null
        this.endTime = endTime ? new Date(endTime) : null
      }
      this.bindTo = itemId ? { itemId, itemName } : null
    },
    isDisableDate (date) {
      return date < this.$min || date > this.$max
    },
    toBind () {
      this.choosing = true
    },
    toChoose (program) {
      this.choosing = false
      this.bindTo = {
        itemId: program.id,
        itemName: program.name
      }
    },
    getValue () {
      return {
        repeatType: this.repeatType,
        range: this.range,
        week: this.week,
        startTime: this.startTime,
        endTime: this.endTime,
        ...this.bindTo
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.o-program-name {
  width: 300px;
  padding: $spacing;
  color: $blue;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  border-radius: 4px;
  border: 1px solid $gray;
}
</style>