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

<template>
    <div class="time-range">
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :picker-options="pickerOptions"
            end-placeholder="结束时间">
            </el-date-picker>
            <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>
        </div>
</template>

<script>
import {formatDate} from '@/filters/ems'
export default {
  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(){
        const now = new Date(),formatNow = formatDate(now);
        const weekAgo = formatDate(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('updateDate',this.dateRange)
    },
    // 搜索
    search(){
      this.$emit('updateDate',this.dateRange)
    },
    timeLine(type){
      //baseTime,maxTime 毫秒数
      let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - ( 24 * 60 * 60 * 1000) :new Date(this.dateRange[1]).getTime() + ( 24 * 60 * 60 * 1000)  ,
        maxTime = new Date(this.defaultDateRange[1]).getTime()
      //updateTime 毫秒数
      let updateTime = type === 'before' ? baseTime - 7 * 24 * 60 * 60 * 1000 : baseTime + 7 * 24 * 60 * 60 * 1000
      if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
      const start = formatDate(type === 'before' ? updateTime : baseTime)
      const end = formatDate(type === 'before' ? baseTime : updateTime)
      this.dateRange = [start,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: 24px;
        }
        .el-button--mini{
            padding:3px 10px;
        }
    }

}
</style>