bi-eleme 2.2.1 → 2.4.1

package/packages/super-date/src/panel/date-range.vue

@@ -0,0 +1,1000 @@
+<template>
+  <transition
+    name="el-zoom-in-top"
+    @after-leave="$emit('dodestroy')"
+  >
+    <div
+      v-show="visible"
+      class="el-super-date-panel el-picker-panel el-super-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts,
+        'has-time': showTime
+      }, popperClass]"
+    >
+      <div class="el-picker-panel__body-wrapper">
+        <slot
+          name="sidebar"
+          class="el-picker-panel__sidebar"
+        ></slot>
+        <div
+          class="el-picker-panel__sidebar"
+          v-if="shortcuts"
+        >
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)"
+          >{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="rang-text">
+            <!-- {{ rangeText }} -->
+            <p>{{  formatRangeText(emitValue)  }}</p>
+          </div>
+          <el-tabs
+            v-model="panelType"
+            @tab-click="handleDateTypeChange"
+          >
+            <!-- 静态时间 -->
+            <el-tab-pane
+              label="静态时间"
+              name="static"
+            >
+              <div>
+                <div class="el-picker-panel__content el-super-date-range-picker__content is-left">
+                  <div class="el-super-date-range-picker__header">
+                    <button
+                      type="button"
+                      @click="leftPrevYear"
+                      class="el-picker-panel__icon-btn el-icon-left1"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="leftPrevMonth"
+                      class="el-picker-panel__icon-btn el-icon-left"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="leftNextYear"
+                      v-if="unlinkPanels"
+                      :disabled="!enableYearArrow"
+                      :class="{ 'is-disabled': !enableYearArrow }"
+                      class="el-picker-panel__icon-btn el-icon-right1-2"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="leftNextMonth"
+                      v-if="unlinkPanels"
+                      :disabled="!enableMonthArrow"
+                      :class="{ 'is-disabled': !enableMonthArrow }"
+                      class="el-picker-panel__icon-btn el-icon-right"
+                    ></button>
+                    <div>{{ leftLabel }}</div>
+                  </div>
+                  <date-table
+                    selection-mode="range"
+                    :date="leftDate"
+                    :default-value="defaultValue"
+                    :min-date="minDate"
+                    :max-date="maxDate"
+                    :range-state="rangeState"
+                    :disabled-date="staticDisabledDate"
+                    :cell-class-name="cellClassName"
+                    @changerange="handleChangeRange"
+                    :first-day-of-week="firstDayOfWeek"
+                    @pick="handleRangePick"
+                  >
+                  </date-table>
+                </div>
+                <div class="el-picker-panel__content el-super-date-range-picker__content is-right">
+                  <div class="el-super-date-range-picker__header">
+                    <button
+                      type="button"
+                      @click="rightPrevYear"
+                      v-if="unlinkPanels"
+                      :disabled="!enableYearArrow"
+                      :class="{ 'is-disabled': !enableYearArrow }"
+                      class="el-picker-panel__icon-btn el-icon-left1"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="rightPrevMonth"
+                      v-if="unlinkPanels"
+                      :disabled="!enableMonthArrow"
+                      :class="{ 'is-disabled': !enableMonthArrow }"
+                      class="el-picker-panel__icon-btn el-icon-left"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="rightNextYear"
+                      class="el-picker-panel__icon-btn el-icon-right1-2"
+                    ></button>
+                    <button
+                      type="button"
+                      @click="rightNextMonth"
+                      class="el-picker-panel__icon-btn el-icon-right"
+                    ></button>
+                    <div>{{ rightLabel }}</div>
+                  </div>
+                  <date-table
+                    selection-mode="range"
+                    :date="rightDate"
+                    :default-value="defaultValue"
+                    :min-date="minDate"
+                    :max-date="maxDate"
+                    :range-state="rangeState"
+                    :disabled-date="staticDisabledDate"
+                    :cell-class-name="cellClassName"
+                    @changerange="handleChangeRange"
+                    :first-day-of-week="firstDayOfWeek"
+                    @pick="handleRangePick"
+                  >
+                  </date-table>
+                </div>
+              </div>
+
+            </el-tab-pane>
+            <el-tab-pane
+              label="动态时间"
+              name="dynamic"
+            >
+              <div>
+                <div class="el-picker-panel__content el-super-date-range-picker__content is-left">
+                  <div class="dynamic-content">
+                    <div class="dynamic-header">
+                      <el-button
+                        :type="dynamicTypeLeft === 'specific'?'primary':''"
+                        @click="handleDynamicType('specific')"
+                      >具体时间</el-button>
+                      <el-button
+                        :type="dynamicTypeLeft === 'past'?'primary':''"
+                        @click="handleDynamicType('past')"
+                      >过去N天</el-button>
+
+                    </div>
+                    <div
+                      v-if="dynamicTypeLeft === 'past'"
+                      style="height:200px"
+                    >
+                      <el-input v-model.number="dynamicRange[0]"></el-input>
+                    </div>
+                    <div v-if="dynamicTypeLeft === 'specific'">
+                      <div class="el-super-date-range-picker__header">
+                        <button
+                          type="button"
+                          @click="dynamicPrevYear"
+                          class="el-picker-panel__icon-btn el-icon-left1"
+                        ></button>
+                        <button
+                          type="button"
+                          @click="dynamicPrevMonth"
+                          class="el-picker-panel__icon-btn el-icon-left"
+                        ></button>
+                        <button
+                          type="button"
+                          @click="dynamicNextYear"
+                          class="el-picker-panel__icon-btn el-icon-right1-2"
+                        ></button>
+                        <button
+                          type="button"
+                          @click="dynamicNextMonth"
+                          class="el-picker-panel__icon-btn el-icon-right"
+                        ></button>
+                        <div>{{ dynamicLabel }}</div>
+                      </div>
+                      <date-table
+                        @pick="handleDatePick"
+                        selection-mode="day"
+                        :first-day-of-week="firstDayOfWeek"
+                        :value="dynamicDate"
+                        :default-value="dynamicDate ? new Date(dynamicDate) : null"
+                        :date="dynamicValue"
+                        :cell-class-name="cellClassName"
+                        :disabled-date="dynamicDisabledDate"
+                        :utc="8"
+                      >
+                      </date-table>
+                    </div>
+                  </div>
+                </div>
+                <div class="el-picker-panel__content el-super-date-range-picker__content is-right">
+                  <div class="dynamic-content">
+                    <div class="dynamic-header">
+                      <el-button
+                        :type="dynamicTypeRight==='today'?'primary':''"
+                        @click="handleDynamicRange(0)"
+                      >今日</el-button>
+                      <el-button
+                        :type="dynamicTypeRight==='yesterday'?'primary':''"
+                        @click="handleDynamicRange(1)"
+                      >昨日</el-button>
+                      <el-button
+                        :type="dynamicTypeRight==='past'?'primary':''"
+                        @click="handleDynamicRange(2)"
+                      >过去N天</el-button>
+                    </div>
+                    <div v-show="dynamicTypeRight==='past'">
+                      <el-input v-model.number="dynamicRange[1]"></el-input>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+
+          <div
+            v-show="needTime"
+            class="el-super-date-range-picker__time-header"
+          >
+            <span class="el-super-date-range-picker__editors-wrap">
+
+              <span
+                class="el-super-date-range-picker__time-picker-wrap"
+                v-clickoutside="handleMinTimeClose"
+              >
+                <el-input
+                  size="small"
+                  class="el-super-date-range-picker__editor"
+                  :disabled="rangeState.selecting"
+                  :placeholder="t('el.datepicker.startTime')"
+                  :value="minVisibleTime"
+                  @focus="minTimePickerVisible = true"
+                  @input="val => handleTimeInput(val, 'min')"
+                  @change="val => handleTimeChange(val, 'min')"
+                />
+                <time-picker
+                  ref="minTimePicker"
+                  @pick="handleMinTimePick"
+                  :time-arrow-control="arrowControl"
+                  :visible="minTimePickerVisible"
+                  @mounted="$refs.minTimePicker.format=timeFormat"
+                >
+                </time-picker>
+              </span>
+            </span>
+            <span class="el-super-date-range-picker__editors-wrap is-right">
+              <span
+                class="el-super-date-range-picker__time-picker-wrap"
+                v-clickoutside="handleMaxTimeClose"
+              >
+                <el-input
+                  size="small"
+                  class="el-super-date-range-picker__editor"
+                  :disabled="rangeState.selecting"
+                  :placeholder="t('el.datepicker.endTime')"
+                  :value="maxVisibleTime"
+                  :readonly="!minDate"
+                  @focus="minDate && (maxTimePickerVisible = true)"
+                  @input="val => handleTimeInput(val, 'max')"
+                  @change="val => handleTimeChange(val, 'max')"
+                />
+                <time-picker
+                  ref="maxTimePicker"
+                  @pick="handleMaxTimePick"
+                  :time-arrow-control="arrowControl"
+                  :visible="maxTimePickerVisible"
+                  @mounted="$refs.maxTimePicker.format=timeFormat"
+                >
+                </time-picker>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="el-picker-panel__footer"
+        v-if="showTime"
+      >
+        <el-button
+          size="mini"
+          type="text"
+          class="el-picker-panel__link-btn"
+          @click="handleClear"
+        >
+          {{ t('el.datepicker.clear') }}
+        </el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          class="el-picker-panel__link-btn"
+          :disabled="btnDisabled"
+          @click="handleConfirm(false)"
+        >
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+import { formatDate, parseDate, isDate, modifyDate, modifyTime, modifyWithTimeString, prevYear, nextYear, prevMonth, nextMonth, nextDate, extractDateFormat, extractTimeFormat, getDaysDiff, setDaysDiff } from 'bi-eleme/src/utils/date-util'
+import Clickoutside from 'bi-eleme/src/utils/clickoutside'
+import Locale from 'bi-eleme/src/mixins/locale'
+import TimePicker from './time'
+import DateTable from '../basic/date-table'
+import ElInput from 'bi-eleme/packages/input'
+import ElButton from 'bi-eleme/packages/button'
+import ElTabs from 'bi-eleme/packages/tabs'
+
+const calcDefaultValue = (defaultValue) => {
+  if (Array.isArray(defaultValue)) {
+    return [new Date(defaultValue[0]), new Date(defaultValue[1])]
+  } else if (defaultValue) {
+    return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)]
+  } else {
+    return [new Date(), nextDate(new Date(), 1)]
+  }
+}
+
+export default {
+  mixins: [Locale],
+
+  directives: { Clickoutside },
+
+  computed: {
+    rangeText() {
+      return `${this.minVisibleDate} ${this.rangeSeparator} ${this.maxVisibleDate}`
+    },
+
+    btnDisabled() {
+      if (this.panelType === 'dynamic') {
+        if (this.dynamicTypeLeft === 'specific') {
+          if (!this.dynamicDate) return true
+          // 将具体时间和动态时间范围进行比较
+          const specificDate = new Date(this.dynamicDate)
+          const endDate = setDaysDiff(new Date(), this.dynamicRange[1])
+          return specificDate > endDate
+        }
+        return typeof this.dynamicRange[0] !== 'number' || typeof this.dynamicRange[1] !== 'number' || this.dynamicRange[0] < 0 || this.dynamicRange[1] < 0 || this.dynamicRange[0] < this.dynamicRange[1]
+      }
+      return !(this.minDate && this.maxDate && !this.selecting && this.minDate <= this.maxDate && this.isValidValue([this.minDate, this.maxDate]))
+    },
+
+    leftLabel() {
+      return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${this.leftDate.getMonth() + 1}`)
+    },
+
+    rightLabel() {
+      return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${this.rightDate.getMonth() + 1}`)
+    },
+
+    dynamicLabel() {
+      return this.dynamicValue.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${this.dynamicValue.getMonth() + 1}`)
+    },
+
+    leftYear() {
+      return this.leftDate.getFullYear()
+    },
+
+    leftMonth() {
+      return this.leftDate.getMonth()
+    },
+
+    leftMonthDate() {
+      return this.leftDate.getDate()
+    },
+
+    rightYear() {
+      return this.rightDate.getFullYear()
+    },
+
+    rightMonth() {
+      return this.rightDate.getMonth()
+    },
+
+    rightMonthDate() {
+      return this.rightDate.getDate()
+    },
+
+    minVisibleDate() {
+      if (this.dateUserInput.min !== null) return this.dateUserInput.min
+      if (this.minDate) return formatDate(this.minDate, this.dateFormat)
+      return ''
+    },
+
+    maxVisibleDate() {
+      if (this.dateUserInput.max !== null) return this.dateUserInput.max
+      if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat)
+      return ''
+    },
+
+    minVisibleTime() {
+      if (this.timeUserInput.min !== null) return this.timeUserInput.min
+      if (this.minDate) return formatDate(this.minDate, this.timeFormat)
+      return ''
+    },
+
+    maxVisibleTime() {
+      if (this.timeUserInput.max !== null) return this.timeUserInput.max
+      if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat)
+      return ''
+    },
+
+    timeFormat() {
+      if (this.format) {
+        return extractTimeFormat(this.format)
+      } else {
+        return 'HH:mm:ss'
+      }
+    },
+
+    dateFormat() {
+      if (this.format) {
+        return extractDateFormat(this.format)
+      } else {
+        return 'yyyy-MM-dd'
+      }
+    },
+
+    enableMonthArrow() {
+      const nextMonth = (this.leftMonth + 1) % 12
+      const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0
+      return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth)
+    },
+
+    enableYearArrow() {
+      return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12
+    },
+    emitValue() {
+      return {
+        date: [this.minDate, this.maxDate].map((date) => (date ? formatDate(date, this.dateFormat) : null)),
+        time: [this.minDate, this.maxDate].map((date) => (date ? formatDate(date, this.timeFormat) : null)),
+        type: this.panelType,
+        dynamicRange: this.dynamicRange
+      }
+    }
+  },
+
+  data() {
+    return {
+      dateUserInput: {
+        min: null,
+        max: null
+      },
+      timeUserInput: {
+        min: null,
+        max: null
+      },
+      popperClass: '',
+      value: {
+        date: [],
+        time: [],
+        type: 'static',
+        dynamicRange: []
+      },
+      dynamicDate: '',
+      dynamicValue: new Date(),
+      defaultValue: null,
+      defaultTime: ['00:00:00', '23:59:59'],
+      panelType: 'static',
+      rangeSeparator: '',
+      minDate: '',
+      maxDate: '',
+      leftDate: new Date(),
+      rightDate: nextMonth(new Date()),
+      rangeState: {
+        endDate: null,
+        selecting: false,
+        row: null,
+        column: null
+      },
+      showTime: !false,
+      shortcuts: '',
+      visible: '',
+      disabledDate: '',
+      cellClassName: '',
+      firstDayOfWeek: 7,
+      minTimePickerVisible: false,
+      maxTimePickerVisible: false,
+      format: '',
+      arrowControl: false,
+      unlinkPanels: false,
+      dateUserInput: {
+        min: null,
+        max: null
+      },
+      timeUserInput: {
+        min: null,
+        max: null
+      },
+      dynamicRange: [0, 0],
+      dynamicTypeLeft: 'past', // specific | past
+      dynamicTypeRight: 'past', // today | yesterday | past
+      selectableDays: [],
+      needTime: false
+    }
+  },
+
+  watch: {
+    // 'dynamicRange.0': {
+    //   handler(val) {
+    //     if (this.panelType === 'dynamic') {
+    //       const newDate = new Date()
+    //       this.dynamicValue = modifyWithTimeString(setDaysDiff(newDate, val), this.defaultTime[0])
+    //       this.dynamicDate = formatDate(this.dynamicValue, 'yyyy-MM-dd')
+    //     }
+    //   },
+    //   immediate: true
+    // },
+    minDate(val) {
+      this.dateUserInput.min = null
+      this.timeUserInput.min = null
+      this.$nextTick(() => {
+        if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
+          const format = 'HH:mm:ss'
+          this.$refs.maxTimePicker.selectableRange = [[parseDate(formatDate(this.minDate, format), format), parseDate('23:59:59', format)]]
+        }
+      })
+      if (val && this.$refs.minTimePicker) {
+        this.$refs.minTimePicker.date = val
+        this.$refs.minTimePicker.value = val
+      }
+    },
+
+    maxDate(val) {
+      this.dateUserInput.max = null
+      this.timeUserInput.max = null
+      if (val && this.$refs.maxTimePicker) {
+        this.$refs.maxTimePicker.date = val
+        this.$refs.maxTimePicker.value = val
+      }
+    },
+
+    minTimePickerVisible(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.minTimePicker.date = this.minDate
+          this.$refs.minTimePicker.value = this.minDate
+          this.$refs.minTimePicker.adjustSpinners()
+        })
+      }
+    },
+
+    maxTimePickerVisible(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.maxTimePicker.date = this.maxDate
+          this.$refs.maxTimePicker.value = this.maxDate
+          this.$refs.maxTimePicker.adjustSpinners()
+        })
+      }
+    },
+
+    value(newVal) {
+      this.initDate(newVal)
+    },
+
+    defaultValue(val) {
+      if (!Array.isArray(this.value)) {
+        const [left, right] = calcDefaultValue(val)
+        this.leftDate = left
+        this.rightDate = val && val[1] && this.unlinkPanels ? right : nextMonth(this.leftDate)
+      }
+    },
+    visible(value) {
+      if (value) {
+        this.initDate()
+      }
+    }
+  },
+
+  methods: {
+    getDaysDiff(time) {
+      return getDaysDiff(time)
+    },
+    setDaysDiff(time, diff) {
+      return setDaysDiff(time, diff)
+    },
+    formatDate(date, format = 'yyyy-MM-dd') {
+      return setDmodifyWithTimeStringaysDiff(date, format)
+    },
+    setDaysDiffAndFormat(time, diff, format = 'yyyy-MM-dd') {
+      const newDate = setDaysDiff(time, diff)
+      return formatDate(newDate, format)
+    },
+    staticDisabledDate(time) {
+      // 检查 selectableDays 是否有效
+      if (!Array.isArray(this.selectableDays) || this.selectableDays.length !== 2 || !this.selectableDays.every((v) => typeof v === 'number')) {
+        return false
+      }
+      const daysDiff = getDaysDiff(time)
+      return daysDiff < this.selectableDays[0] || daysDiff > this.selectableDays[1]
+    },
+    dynamicDisabledDate(time) {
+      return getDaysDiff(time) < 3
+    },
+    initDate(newVal = this.value) {
+      console.log('🚀 ~ newVal:', newVal)
+      try {
+        if (!newVal) {
+          this.minDate = null
+          this.maxDate = null
+          this.panelType = 'static'
+          this.dynamicValue = null
+        } else {
+          const { date, time, type, dynamicRange } = Object.assign({}, newVal)
+          this.panelType = type || 'static'
+
+          if (Array.isArray(date)) {
+            this.minDate = isDate(date[0]) ? new Date(date[0]) : modifyWithTimeString(new Date(), time[0])
+            this.maxDate = isDate(date[1]) ? new Date(date[1]) : modifyWithTimeString(new Date(), time[1])
+
+            if (Array.isArray(time) && time.length === 2) {
+              if (this.minDate) this.minDate = modifyWithTimeString(this.minDate, time[0])
+              if (this.maxDate) this.maxDate = modifyWithTimeString(this.maxDate, time[1])
+            }
+
+            if (this.minDate) {
+              this.leftDate = this.minDate
+              if (this.unlinkPanels && this.maxDate) {
+                const minDateYear = this.minDate.getFullYear()
+                const minDateMonth = this.minDate.getMonth()
+                const maxDateYear = this.maxDate.getFullYear()
+                const maxDateMonth = this.maxDate.getMonth()
+                this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? nextMonth(this.maxDate) : this.maxDate
+              } else {
+                this.rightDate = nextMonth(this.leftDate)
+              }
+            } else {
+              this.leftDate = calcDefaultValue(this.defaultValue)[0]
+              this.rightDate = nextMonth(this.leftDate)
+            }
+          }
+
+          if (this.panelType === 'static') {
+            this.dynamicRange = [getDaysDiff(this.minDate), getDaysDiff(this.maxDate)]
+
+            this.dynamicValue = modifyWithTimeString(setDaysDiff(new Date(), this.dynamicRange[0]), time[0])
+            this.dynamicDate = formatDate(this.dynamicValue, 'yyyy-MM-dd')
+          } else if (this.panelType === 'dynamic' && Array.isArray(dynamicRange) && dynamicRange.length === 2) {
+            this.dynamicRange = Array.from(dynamicRange)
+            if (typeof dynamicRange[0] === 'string') {
+              console.log('用了defaultTime')
+              this.dynamicTypeLeft = 'specific'
+              this.dynamicValue = modifyWithTimeString(new Date(dynamicRange[0]), this.defaultTime[0])
+
+              this.minDate = modifyWithTimeString(new Date(dynamicRange[0]), this.defaultTime[0])
+            } else {
+              console.log('用了defaultTime')
+              this.dynamicTypeLeft = 'past'
+              this.dynamicValue = modifyWithTimeString(setDaysDiff(new Date(), this.dynamicRange[0]), this.defaultTime[0])
+              this.minDate = modifyWithTimeString(setDaysDiff(new Date(), this.dynamicRange[0]), this.defaultTime[0])
+            }
+            console.log('用了defaultTime')
+            this.handleDynamicRange(this.dynamicRange[1])
+            this.dynamicDate = formatDate(this.dynamicValue, 'yyyy-MM-dd')
+            this.maxDate = modifyWithTimeString(setDaysDiff(new Date(), this.dynamicRange[1]), this.defaultTime[1])
+          }
+        }
+        // this.minDate = modifyWithTimeString(this.minDate, this.defaultTime[0])
+        // this.maxDate = modifyWithTimeString(this.maxDate, this.defaultTime[1])
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    handleDateTypeChange(value) {},
+    handleDatePick(value) {
+      let newDate = modifyWithTimeString(value, this.defaultTime[0])
+      this.dynamicValue = newDate
+      this.dynamicRange[0] = formatDate(newDate, 'yyyy-MM-dd')
+      this.dynamicDate = formatDate(newDate, 'yyyy-MM-dd')
+    },
+
+    handleDynamicType(dynamicType) {
+      if (dynamicType === this.dynamicTypeLeft) return
+      this.dynamicTypeLeft = dynamicType
+      // 切换动态时间类型时的处理
+      // 如果切换到"过去N天"模式,需要根据dynamicRange[0]计算日期
+      // 如果切换到"具体时间"模式,需要显示日期选择器
+      // dynamicType past 过去N天
+      // dynamicType specific 具体时间
+      if (dynamicType === 'past') {
+        this.dynamicRange[0] = getDaysDiff(this.dynamicValue)
+      }
+      if (dynamicType === 'specific') {
+        this.dynamicRange[0] = formatDate(setDaysDiff(new Date(), this.dynamicRange[0]), 'yyyy-MM-dd')
+      }
+    },
+    handleDynamicRange(val) {
+      if (val === 0) this.dynamicTypeRight = 'today'
+      if (val === 1) this.dynamicTypeRight = 'yesterday'
+      if (val === 2) this.dynamicTypeRight = 'past'
+      this.$set(this.dynamicRange, 1, val)
+    },
+    handleClear() {
+      this.minDate = null
+      this.maxDate = null
+      this.leftDate = calcDefaultValue(this.defaultValue)[0]
+      this.rightDate = nextMonth(this.leftDate)
+      this.$emit('pick', { date: [], time: [...this.defaultTime], type: 'static', dynamicRange: [] })
+    },
+    handleChangeRange(val) {
+      this.minDate = val.minDate
+      this.maxDate = val.maxDate
+      this.rangeState = val.rangeState
+    },
+
+    handleDateInput(value, type) {
+      this.dateUserInput[type] = value
+      if (value.length !== this.dateFormat.length) return
+      const parsedValue = parseDate(value, this.dateFormat)
+
+      if (parsedValue) {
+        if (typeof this.disabledDate === 'function' && this.disabledDate(new Date(parsedValue))) {
+          return
+        }
+        if (type === 'min') {
+          this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          this.leftDate = new Date(parsedValue)
+          if (!this.unlinkPanels) {
+            this.rightDate = nextMonth(this.leftDate)
+          }
+        } else {
+          this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          this.rightDate = new Date(parsedValue)
+          if (!this.unlinkPanels) {
+            this.leftDate = prevMonth(parsedValue)
+          }
+        }
+      }
+    },
+
+    handleDateChange(value, type) {
+      const parsedValue = parseDate(value, this.dateFormat)
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          if (this.minDate > this.maxDate) {
+            this.maxDate = this.minDate
+          }
+        } else {
+          this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate())
+          if (this.maxDate < this.minDate) {
+            this.minDate = this.maxDate
+          }
+        }
+      }
+    },
+
+    handleTimeInput(value, type) {
+      this.timeUserInput[type] = value
+      if (value.length !== this.timeFormat.length) return
+      const parsedValue = parseDate(value, this.timeFormat)
+
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          this.$nextTick((_) => this.$refs.minTimePicker.adjustSpinners())
+        } else {
+          this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          this.$nextTick((_) => this.$refs.maxTimePicker.adjustSpinners())
+        }
+      }
+    },
+
+    handleTimeChange(value, type) {
+      console.log('🚀 ~ value:', value)
+      const parsedValue = parseDate(value, this.timeFormat)
+      if (parsedValue) {
+        if (type === 'min') {
+          this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          if (this.minDate > this.maxDate) {
+            this.maxDate = this.minDate
+          }
+          this.$refs.minTimePicker.value = this.minDate
+          this.minTimePickerVisible = false
+          this.value.time[0] = value
+        } else {
+          this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds())
+          if (this.maxDate < this.minDate) {
+            this.minDate = this.maxDate
+          }
+          this.$refs.maxTimePicker.value = this.minDate
+          this.maxTimePickerVisible = false
+          this.value.time[1] = value
+        }
+      }
+    },
+
+    handleRangePick(val, close = true) {
+      const defaultTime = this.value.time && this.value.time.length ? this.value.time : this.defaultTime || []
+      const minDate = modifyWithTimeString(val.minDate, defaultTime[0])
+      const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1])
+
+      if (this.maxDate === maxDate && this.minDate === minDate) {
+        return
+      }
+      this.maxDate = maxDate
+      this.minDate = minDate
+
+      // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+      setTimeout(() => {
+        this.maxDate = maxDate
+        this.minDate = minDate
+      }, 10)
+      if (!close || this.showTime) return
+      this.handleConfirm()
+    },
+
+    handleShortcutClick(shortcut) {
+      if (shortcut.onClick) {
+        shortcut.onClick(this)
+      }
+    },
+
+    handleMinTimePick(value, visible, first) {
+      this.minDate = this.minDate || new Date()
+      if (value) {
+        this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds())
+      }
+
+      if (!first) {
+        this.minTimePickerVisible = visible
+      }
+
+      if (!this.maxDate || (this.maxDate && this.maxDate.getTime() < this.minDate.getTime())) {
+        this.maxDate = new Date(this.minDate)
+      }
+    },
+
+    handleMinTimeClose() {
+      this.minTimePickerVisible = false
+    },
+
+    handleMaxTimePick(value, visible, first) {
+      if (this.maxDate && value) {
+        this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds())
+      }
+
+      if (!first) {
+        this.maxTimePickerVisible = visible
+      }
+
+      if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
+        this.minDate = new Date(this.maxDate)
+      }
+    },
+
+    handleMaxTimeClose() {
+      this.maxTimePickerVisible = false
+    },
+
+    // leftPrev*, rightNext* need to take care of `unlinkPanels`
+    dynamicPrevYear() {
+      this.dynamicValue = prevYear(this.dynamicValue)
+    },
+
+    dynamicPrevMonth() {
+      this.dynamicValue = prevMonth(this.dynamicValue)
+    },
+    leftPrevYear() {
+      this.leftDate = prevYear(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = nextMonth(this.leftDate)
+      }
+    },
+
+    leftPrevMonth() {
+      this.leftDate = prevMonth(this.leftDate)
+      if (!this.unlinkPanels) {
+        this.rightDate = nextMonth(this.leftDate)
+      }
+    },
+
+    rightNextYear() {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextYear(this.leftDate)
+        this.rightDate = nextMonth(this.leftDate)
+      } else {
+        this.rightDate = nextYear(this.rightDate)
+      }
+    },
+
+    rightNextMonth() {
+      if (!this.unlinkPanels) {
+        this.leftDate = nextMonth(this.leftDate)
+        this.rightDate = nextMonth(this.leftDate)
+      } else {
+        this.rightDate = nextMonth(this.rightDate)
+      }
+    },
+
+    // leftNext*, rightPrev* are called when `unlinkPanels` is true
+    dynamicNextYear() {
+      this.dynamicValue = nextYear(this.dynamicValue)
+    },
+
+    dynamicNextMonth() {
+      this.dynamicValue = nextMonth(this.dynamicValue)
+    },
+    leftNextYear() {
+      this.leftDate = nextYear(this.leftDate)
+    },
+
+    leftNextMonth() {
+      this.leftDate = nextMonth(this.leftDate)
+    },
+
+    rightPrevYear() {
+      this.rightDate = prevYear(this.rightDate)
+    },
+
+    rightPrevMonth() {
+      this.rightDate = prevMonth(this.rightDate)
+    },
+    formatRangeText(value) {
+      const { date, type, dynamicRange } = value
+      if (type === 'dynamic') {
+        // const dynamicDate=
+        const dynamicRangeText = []
+        const dynamicDate = dynamicRange
+          .map((diff) => {
+            if (typeof diff === 'string') {
+              dynamicRangeText.push(diff)
+              return diff
+            } else {
+              if (diff === 0) {
+                dynamicRangeText.push('今天')
+              } else if (diff === 1) {
+                dynamicRangeText.push('昨天')
+              } else {
+                dynamicRangeText.push(`过去 ${diff} 天`)
+              }
+              return formatDate(setDaysDiff(new Date(), diff), 'yyyy-MM-dd')
+            }
+          })
+          .join(' - ')
+        return `${dynamicRangeText.join(' - ')} | ${dynamicDate}`
+      }
+      if (type === 'static') {
+        return `${date.join(' - ')}`
+      }
+    },
+    handleConfirm(visible = false) {
+      const emitValue = {
+        date: [this.minDate, this.maxDate].map((date) => (date ? formatDate(date, this.dateFormat) : null)),
+        time: [this.minDate, this.maxDate].map((date) => (date ? formatDate(date, this.timeFormat) : null)),
+        type: this.panelType,
+        dynamicRange: this.dynamicRange
+      }
+      // 如果是动态时间类型,则需要将dynamicDate赋值给dynamicRange[0]
+      if (this.panelType === 'dynamic') {
+        emitValue.date = this.dynamicRange.map((diff) => {
+          if (typeof diff === 'string') {
+            return diff
+          } else {
+            return formatDate(setDaysDiff(new Date(), diff), 'yyyy-MM-dd')
+          }
+        })
+      }
+      if (this.panelType === 'static') {
+        emitValue.dynamicRange = [getDaysDiff(this.minDate), getDaysDiff(this.maxDate)]
+      }
+      // 如果是动态时间类型,则需要将dynamicDate赋值给dynamicRange[0]
+
+      if (this.dynamicTypeLeft === 'specific') {
+        emitValue.dynamicRange[0] = this.dynamicDate
+      }
+      this.$emit('pick', emitValue, false)
+    },
+
+    isValidValue(value) {
+      return Array.isArray(value) && value && value[0] && value[1] && isDate(value[0]) && isDate(value[1]) && value[0].getTime() <= value[1].getTime() && (typeof this.disabledDate === 'function' ? !this.disabledDate(value[0]) && !this.disabledDate(value[1]) : true)
+    },
+
+    resetView() {
+      // NOTE: this is a hack to reset {min, max}Date on picker open.
+      // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+      //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+      if (this.minDate && this.maxDate == null) this.rangeState.selecting = false
+      this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null
+      this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null
+    }
+  },
+
+  components: { TimePicker, DateTable, ElInput, ElButton, ElTabs }
+}
+</script>