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

<template>
  <confirm-dialog
    ref="dialog"
    size="lg fixed"
    title="大屏上下线记录"
    confirm-text="下载"
    @confirm="onConfirm"
  >
    <template #default>
      <div class="l-flex__fill l-flex">
        <device-tree
          class="c-sibling-item c-sidebar u-width--xl"
          checkbox
          @change="onChange"
        />
        <div class="c-sibling-item far">
          <div class="c-sibling-item--v u-required">
            日期范围
          </div>
          <el-date-picker
            v-model="dateRange"
            class="c-sibling-item--v"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            :picker-options="pickerOptions"
            :editable="false"
            :clearable="false"
          />
        </div>
      </div>
    </template>
  </confirm-dialog>
</template>

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

export default {
  name: 'ScreenOnlineDialog',
  data () {
    return {
      dateRange: null,
      devices: []
    }
  },
  computed: {
    pickerOptions () {
      return {
        disabledDate: date => date > Date.now()
      }
    }
  },
  methods: {
    show () {
      this.devices = null
      const date = parseTime(new Date(), '{y}-{m}-{d}')
      this.dateRange = [date, date]
      this.$refs.dialog.show()
    },
    onChange (devices) {
      this.devices = devices.map(device => device.id)
    },
    onConfirm (done) {
      if (!this.devices || !this.devices.length) {
        this.$message({
          type: 'warning',
          message: '请选择设备'
        })
        return
      }
      getScreenOnlineExcel({
        deviceIdList: this.devices,
        startDate: this.dateRange[0],
        endDate: this.dateRange[1]
      }).then(done)
    }
  }
}
</script>