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

<template>
  <confirm-dialog
    ref="dialog"
    size="lg fixed"
    title="设备广告播放"
    @confirm="onConfirm"
  >
    <template #default>
      <div class="l-flex__fill l-flex">
        <device-tree-single
          class="c-sibling-item c-sidebar u-font-size--sm u-width--xl"
          @change="onDeviceChange"
        />
        <div class="c-sibling-item far">
          <div class="c-sibling-item--v u-required">日期</div>
          <el-date-picker
            v-model="date"
            class="c-sibling-item--v"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :editable="false"
            :clearable="false"
          />
        </div>
      </div>
    </template>
  </confirm-dialog>
</template>

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

export default {
  name: 'DeviceAdDialog',
  data () {
    return {
      date: null
    }
  },
  computed: {
    pickerOptions () {
      return {
        disabledDate: this.isDisableDate
      }
    }
  },
  methods: {
    show () {
      this.$device = null
      this.date = parseTime(new Date(), '{y}-{m}-{d}')
      this.$refs.dialog.show()
    },
    onDeviceChange (device) {
      this.$device = device
    },
    isDisableDate (date) {
      return date > Date.now()
    },
    onConfirm (done) {
      if (!this.$device) {
        this.$message({
          type: 'warning',
          message: '请选择设备'
        })
        return
      }
      getDeviceAdExcel({
        deviceId: this.$device.id,
        date: this.date
      }, `${this.$device.name}_${this.date}`).then(done)
    }
  }
}
</script>