二次封裝element的日期組件

 

 https://blog.csdn.net/weixin_42565137/article/details/90482500

 

二次封裝elment-ui的時間日期組件

<template>
  <el-date-picker
    v-model = "timeValue"
    @change = "changeTimeValue"
    :value-format = "valueFormat"
    range-separator = "至"
    start-placeholder = "開始日期"
    end-placeholder = "結束日期"
    :type = "tiemType"
    :picker-options="pickerOptions"
    :clearable = "clearable">
  </el-date-picker>
</template>

<script>
import utils from '../utils/utils'

export default {
  data() {
    return {
      timeValue: [],
      tiemType: 'datetimerange',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
      // 快捷選項
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '最近一個月',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '最近三個月',
          onClick(picker) {
            const end = new Date(new Date().setHours(23, 59, 59, 0))
            const start = new Date(new Date().setHours(0, 0, 0, 0))
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          },
        }],
      },
    }
  },
  props: {
    // 是否可清除
    clearable: {
      type: Boolean,
    },
    // 是否顯示默認時間
    showDefaultTime: {
      tyep: Boolean,
    },
    // 默認時間
    defaultTime: {
      type: Array,
    },
    // 時間控件類型
    type: {
      type: String,
    },
  },
  mounted() {
    this.tiemType = this.type || this.tiemType
    if (this.type === 'daterange') {
      // this.valueFormat = 'yyyy-MM-dd'
    }
    console.log(this.$store.state.hour)
    console.log(this.$store.state.minute)
    this.setDefaultTime()
  },
  methods: {
    // 改變時間
    changeTimeValue(val) {
      if (this.type === 'daterange') {
        val[1] = val[1].replace('00:00:00', '23:59:59')
      }
      this.$emit('timeVal', val || [])
    },

    // 設置默認時間
    setDefaultTime() {
      const { hour, minute } = this.$store.state
      if (this.showDefaultTime === false) {
        this.$emit('timeVal', [])
        this.timeValue = []
      } else if (this.type === 'daterange') {
        const startTime = new Date(new Date().setHours(0, 0, 0, 0) - 24 * 3600 * 1000)
        const endTime = new Date(new Date().setHours(23, 59, 59, 0))
        const startTimeStr = utils.formatDateTime(startTime)
        const endTimeStr = utils.formatDateTime(endTime)
        if (this.defaultTime) {
          this.timeValue = this.defaultTime
          this.$emit('timeVal', [
            utils.formatDateTime(this.defaultTime[0]),
            utils.formatDateTime(this.defaultTime[1]),
          ])
        } else {
          this.timeValue = [startTimeStr, endTimeStr]
          this.$emit('timeVal', [startTimeStr, endTimeStr])
        }
      } else {
        const startTime = new Date(new Date().setHours(hour, minute, 0, 0) - 24 * 3600 * 1000)
        const endTime = new Date(new Date().setHours(hour, minute, 0, 0))
        const startTimeStr = utils.formatDateTime(startTime)
        const endTimeStr = utils.formatDateTime(endTime)
        if (this.defaultTime) {
          this.timeValue = this.defaultTime
          this.$emit('timeVal', [
            utils.formatDateTime(this.defaultTime[0]),
            utils.formatDateTime(this.defaultTime[1]),
          ])
        } else {
          this.timeValue = [startTimeStr, endTimeStr]
          this.$emit('timeVal', [startTimeStr, endTimeStr])
        }
      }
    },

  },
}
</script>

<style lang="less">
  .el-picker-panel__footer {
    button:nth-child(1) {
      display: none;
    }
  }
</style>

 

實際在父組件直接調用子組件設置默認時間方法就可以實現數據刷新

    reset() {
      this.$refs.datePicker.setDefaultTime()
      // this.formData2.time = [];
      // this.$set(this.formData2, 'time', [`${this.startTime}`, `${this.endTime}`]);
      // console.log(this.formData2.time);
      // [this.searchParams.beginTimeStr, this.searchParams.endTimeStr] = this.formData2.time
    },
    // 獲取時間
    getTimeVal(e) {
      // console.log(e);
      [this.searchParams.beginTimeStr, this.searchParams.endTimeStr] = e
      // if (this.timeStatus === 'first') {
      //   this.startTime = this.searchParams.beginTimeStr
      //   this.endTime = this.searchParams.endTimeStr
      //   this.timeStatus = 'second'
      // }
    },