smsb-web-develop/src/views/realm/report/components/SelfPlayDialog.vue

<template>
  <confirm-dialog
    ref="dialog"
    title="平台内容播放"
    confirm-text="下载"
    @confirm="onConfirm"
  >
    <template #default>
      <div class="c-grid-form auto u-align-self--center">
        <div class="c-grid-form__label u-required">
          日期范围
        </div>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          :editable="false"
          :clearable="false"
        />
      </div>
    </template>
  </confirm-dialog>
</template>

<script>
import { parseTime } from '@/utils'
import { getSelfPlay } from '../api.js'

export default {
  name: 'ContentDialog',
  data () {
    return {
      dateRange: null
    }
  },
  computed: {
    pickerOptions () {
      return {
        disabledDate: date => date > Date.now()
      }
    }
  },
  methods: {
    show () {
      const date = parseTime(new Date(), '{y}-{m}-{d}')
      this.dateRange = [date, date]
      this.$refs.dialog.show()
    },
    onConfirm (done) {
      const time = this.dateRange[0] === this.dateRange[1] ? this.dateRange[0] : `${this.dateRange[0]}~${this.dateRange[1]}`
      const endDate = new Date(this.dateRange[1].replace(/-/g, '/'))
      endDate.setDate(endDate.getDate() + 1)
      getSelfPlay({
        startDate: this.dateRange[0],
        endDate: parseTime(endDate, '{y}-{m}-{d}')
      }, time).then(({ data: { type } }) => {
        this.$emit('added', type)
        done()
      })
    }
  }
}
</script>