timeMap设置默认时间

127 阅读2分钟

import moment from 'moment'
function dateFormat(value, format = 'YYYY-MM-DD') {
  if (!value) {
    return '--'
  }
  // 处理时间戳
  if (value.length === 13 || value.length === 12) {
    value = new Date(parseInt(value, 10))
  }
  return moment(value).format(format)
}

const dayTime = 24 * 60 * 60 * 1000
const processDate = (start, end, bool) => {
  if (bool) {
    const startDate = dateFormat(start) + ' 00:00:00'
    const endDate = dateFormat(end) + ' 23:59:59'
    return [startDate, endDate]
  }
  const startDate = dateFormat(start)
  const endDate = dateFormat(end)
  return [startDate, endDate]
}
export const timeMap = {
  1: {
    label: '今天',
    value: '1',
    getTime: (bool) => {
      const start = new Date()
      const end = new Date()
      return processDate(start, end, bool)
    }
  },
  '-1': {
    label: '昨天',
    value: '-1',
    getTime: (bool) => {
      const start = new Date(new Date().getTime() - dayTime)
      const end = new Date(new Date().getTime() - dayTime)
      return processDate(start, end, bool)
    }
  },
  3: {
    label: '近3天',
    value: '3',
    getTime: (bool) => {
      const end = new Date(new Date().getTime() - dayTime)
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 3)
      return processDate(start, end, bool)
    }
  },
  // 近3天包含今天
  '3withToday': {
    label: '近3天',
    value: '3',
    getTime: (bool) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 2)
      return processDate(start, end, bool)
    }
  },
  7: {
    label: '近7天',
    value: '7',
    getTime: (bool) => {
      const end = new Date(new Date().getTime() - dayTime)
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 7)
      return processDate(start, end, bool)
    }
  },
  // 近7天包含今天
  '7withToday': {
    label: '近7天',
    value: '7',
    getTime: (bool) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 6)
      return processDate(start, end, bool)
    }
  },
  15: {
    label: '近15天',
    value: '15',
    getTime: (bool) => {
      const end = new Date(new Date().getTime() - dayTime)
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 15)
      return processDate(start, end, bool)
    }
  },
  30: {
    label: '近30天',
    value: '30',
    getTime: (bool) => {
      const end = new Date(new Date().getTime() - dayTime)
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 30)
      return processDate(start, end, bool)
    }
  },
  // 近30天包含今天
  '30withToday': {
    label: '近30天',
    value: '30',
    getTime: (bool) => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 29)
      return processDate(start, end, bool)
    }
  },
  90: {
    label: '近90天',
    value: '90',
    getTime: (bool) => {
      const end = new Date(new Date().getTime() - dayTime)
      const start = new Date()
      start.setTime(start.getTime() - dayTime * 90)
      return processDate(start, end, bool)
    }
  },
  week: {
    label: '本周',
    value: 'week',
    getTime: (bool) => {
      const end = new Date()
      let start = new Date()
      const day = start.getDay() || 7
      start = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day)
      return processDate(start, end, bool)
    }
  },
  month: {
    label: '本月',
    value: 'month',
    getTime: (bool) => {
      const end = new Date()
      const start = new Date()
      start.setDate(1)
      return processDate(start, end, bool)
    }
  },
  quarter: {
    label: '本季度',
    value: 'quarter',
    getTime: (bool) => {
      const end = new Date()
      const start = new Date()
      const month = start.getMonth()
      if (month < 3) {
        start.setMonth(0)
      } else if (month > 2 && month < 6) {
        start.setMonth(3)
      } else if (month > 5 && month < 9) {
        start.setMonth(6)
      } else if (month > 8 && month < 11) {
        start.setMonth(9)
      }
      start.setDate(1)
      return processDate(start, end, bool)
    }
  },
  8: {
    label: '自定义',
    value: '8',
    getTime: (bool) => {
      return []
    }
  },
  lastMonth: {
    label: '上个月',
    value: 'lastMonth',
    getTime: (bool) => {
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      start.setDate(1)
      const end = new Date()
      end.setDate(0)
      return processDate(start, end, bool)
    }
  }
}
<el-date-picker v-model="filters.time" 
    type="datetimerange" 
    format="MM-dd HH:mm" 
    value-format="yyyy-MM-dd HH:mm:ss" 
    range-separator="~" start-placeholder="开始日期"
    end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" >
</el-date-picker>
 //  引入timeMap.js文件,页面加载时给time赋值,就能展示默认值了
 import { timeMap } from './timeMap.js'
   export default {
      data() {
        return {
          timeMap,
          filters: {
            time: []
           }
        }
      },
      created() {
        this.filters.time = this.timeMap['30withToday'].getTime(true)
      }
  }