|
|
@@ -1,235 +0,0 @@
|
|
|
-<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>
|