emsfront/src/components/Ems/DateRangeSelect/index.vue

<template>
  <div class="time-range">
    <el-date-picker
        v-model="dateRange"
        :class="miniTimePicker ? 'mini-date-picker' : ''"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :picker-options="pickerOptions"
        end-placeholder="结束时间">
    </el-date-picker>
    <template v-if="!showIcon">
      <el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
      <el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
      <el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
      <el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">
        下一时段
      </el-button>
    </template>
    <template v-else>
      <el-button class="btn-icon" icon="el-icon-refresh-right" circle size="mini" style="margin-left: 8px;"
                 :loading="loading"
                 @click="reset"></el-button>
      <el-button class="btn-icon" type="primary" size="mini" icon="el-icon-search" circle :loading="loading"
                 @click="search"></el-button>
      <el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-left" circle :loading="loading"
                 @click="timeLine('before')"></el-button>
      <el-button class="btn-icon" type="primary" size="mini" icon="el-icon-d-arrow-right" circle :loading="loading"
                 @click="timeLine('next')"
                 :disabled="disabledNextBtn"></el-button>
    </template>


  </div>
</template>

<script>
import {formatDate} from '@/filters/ems'

export default {
  props: {
    showIcon: {
      type: Boolean,
      required: false,
      default: false
    },
    miniTimePicker: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    disabledNextBtn() {
      return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
    }
  },
  data() {
    return {
      loading: false,
      dateRange: [],
      defaultDateRange: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    }
  },
  methods: {
    init(today = false) {
      const now = new Date(), formatNow = formatDate(now);
      const weekAgo = formatDate(today ? new Date(now.getTime()) : new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000))
      this.dateRange = [weekAgo, formatNow];
      this.defaultDateRange = [weekAgo, formatNow];
      this.$emit('updateDate', this.dateRange)
    },
    showBtnLoading(status) {
      this.loading = status
    },
    resetDate() {
      this.dateRange = this.defaultDateRange
    },
    //重置 设置时间范围为初始化时间段
    reset() {
      this.resetDate()
      this.$emit('reset')
      this.$emit('updateDate', this.dateRange)
    },
    // 搜索
    search() {
      this.$emit('updateDate', this.dateRange)
    },
    timeLine(type) {
      if (!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) return
      const nowStartTimes = new Date(this.dateRange[0]).getTime(), nowEndTimes = new Date(this.dateRange[1]).getTime(),
          maxTime = new Date(this.defaultDateRange[1]).getTime()
      const nowDis = nowEndTimes - nowStartTimes//用户当前选择时间差 可能=0
      //baseTime,maxTime 毫秒数
      const baseDis = 24 * 60 * 60 * 1000
      const calcDis = nowDis === 0 ? baseDis : nowDis
      let start = type === 'before' ? nowStartTimes - calcDis : nowStartTimes + calcDis
      if (start > maxTime) start = maxTime
      let end = type === 'before' ? nowEndTimes - calcDis : nowEndTimes + calcDis
      if (end > maxTime) end = maxTime
      this.dateRange = [formatDate(start), formatDate(end)]
      this.$emit('updateDate', this.dateRange)
    },
  }
}

</script>
<style lang="scss" scoped>
.time-range {
  display: flex;

  ::v-deep {

    .el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon {
      line-height: 22px;
    }

    .el-range-editor--medium.el-input__inner {
      height: 30px;
    }

    .el-range-editor--medium .el-range-separator {
      line-height: 22px;
    }

    .el-button--mini {
      padding: 3px 10px;
    }

    //  展示icon的小组件
    .btn-icon.el-button--mini {
      padding: 3px 8px;
      margin-left: 6px;
    }

    //小宽度时间选择框
    .mini-date-picker {
      width: 250px !important;
    }
  }

}
</style>