web/apps/mobile/src/components/selector/date-time-list/index.vue

<template>
  <div class="date-time-selector-content bg-white">
    <CheckboxGroup
      v-model="state"
      :config="checkboxConfig"
      :options="checkboxOptions"
      @change="onCheckboxChange"
      @item-select="onCheckboxSelect"
      :beforeChangeAction="beforeChangeAction"
      ref="checkboxGroup"
    />
    <DateTimeGroup
      v-show="dateTimeGroupActive"
      :highlight="dateTimeGroupActive"
      :startPlaceholder="startPlaceholder"
      :endPlaceholder="endPlaceholder"
      :endTimeFeature="endTimeFeature"
      @change="onChange"
      ref="dateTimeGroup"
    />
  </div>
</template>
<script>
import DateTimeGroup from '@/components/selector/date-time-group'
import { CheckboxGroup } from '@/ui'
import { dateTimeKeys } from '@/data'
import { dateFormatter, calcNotExactTime } from '@/utils'

export default {
  name: 'DateTimeListSelector',
  components: {
    CheckboxGroup,
    DateTimeGroup
  },
  props: {
    /**
     * 显示哪些元素，传入key
     *
     * 'all','exact','yesterday','today','lately3','lately7','lately30','lately90','lately180','lastYear','thisYear','sinceLastYear','sinceYearBeforeLast'.....
     */
    useKeys: {
      type: Array,
      default() {
        return []
      }
    },
    endTimeFeature: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default() {
        return [
          {
            label: '全部',
            key: 'all'
          },
          ...dateTimeKeys,
          {
            label: '自定义',
            key: 'exact'
          }
        ]
      }
    },
    startPlaceholder: {
      type: String,
      default: '开始时间'
    },
    endPlaceholder: {
      type: String,
      default: '结束时间'
    },
    beforeChangeAction: Function,
    defaultSelectedKey: {
      type: String,
      default: 'all' // all/lately30/lately90...
    }
  },
  data() {
    return {
      debug: import.meta.env.DEV,
      state: ['all'],
      checkboxConfig: {
        icon: false,
        multiple: false
      },
      checkboxOptions: []
    }
  },
  computed: {
    dateTimeGroupActive() {
      return this.state.includes('exact')
    }
  },
  created() {
    this.initUseOptions()
  },
  methods: {
    dateFormatter,
    initUseOptions() {
      if (Array.isArray(this.useKeys) && this.useKeys.length === 0) {
        this.checkboxOptions = this.options
      } else {
        this.checkboxOptions = this.options.filter((o) => {
          return this.useKeys.includes(o.key)
        })
      }
      console.log(this.checkboxOptions, 'checkboxOptions')
      this.calcLastTime()
      this.setDefaultSelected()
    },
    calcLastTime() {
      const renameList = [
        'thisYear', // 今年全年
        'sinceLastYear', // 去年至今
        'sinceYearBeforeLast' // 前年至今
      ]
      const thisYear = new Date().getFullYear()
      this.checkboxOptions.forEach((item) => {
        const { key } = item
        if (renameList.includes(key)) {
          if (key === renameList[0]) {
            item.label = `${thisYear}年全年`
          } else if (key === renameList[1]) {
            item.label = `${thisYear - 1}年至今`
          } else if (key === renameList[2]) {
            item.label = `${thisYear - 2}年至今`
          }
        }
      })
    },
    setDefaultSelected() {
      // 初始化选中状态
      if (this.defaultSelectedKey) {
        // defaultSelectedKey选中，没有找到defaultSelectedKey则第一个选中
        const exist = this.useKeys.includes(this.defaultSelectedKey)
        if (exist) {
          this.setTimeListState(this.defaultSelectedKey)
        } else {
          this.setTimeListState(this.options[0].key)
        }
      }
    },
    onCheckboxChange(data) {
      const exact = data.includes('exact')
      if (exact) {
        this.$refs.dateTimeGroup.popupState('start', true)
      } else {
        this.onChange()
      }
    },
    setTimeListState(value) {
      this.state = [value]
      console.log(value, 'value')
    },
    clearDateTimePicker() {
      const { dateTimeGroup } = this.$refs
      dateTimeGroup.resetAll()
    },
    // 计算lately7/lately30/lastYear等的开始和结束时间
    // endTime传入一个时间戳
    calcNotExactTime,
    onChange() {
      const value = this.getState()

      if (this.debug) {
        console.table({
          start: this.dateFormatter(value.start),
          end: this.dateFormatter(value.end)
        })
      }

      const payload = {
        value
      }
      this.$emit('change', payload)
    },
    onCheckboxSelect(item) {
      this.$emit('checkboxClick', item)
    },
    setState(data) {
      // {
      //   start: 1620230400000, // 2021-5-6
      //   end: 1620489600000, // 2021-5-9
      //   exact: 'all'
      // }
      if (!data || Object.keys(data).length === 0) {
        this.setTimeListState(this.defaultSelectedKey)
      } else {
        const { dateTimeGroup } = this.$refs
        this.setTimeListState(data.exact)
        if (data.exact === 'exact') {
          dateTimeGroup.setState({
            start: data.start ? data.start : '',
            end: data.end ? data.end : ''
          })
        } else {
          this.clearDateTimePicker()
        }
      }
    },
    getState() {
      const { dateTimeGroup } = this.$refs
      // timeState.exact: all/lately7/lately30/lastYear/exact等状态
      const timeState = {
        start: 0,
        end: 0,
        exact: this.state.join(',')
      }

      if (timeState.exact === 'exact') {
        const state = dateTimeGroup.getState()
        Object.assign(timeState, state)
      } else {
        Object.assign(timeState, this.calcNotExactTime(timeState.exact))
      }
      return timeState
    }
  }
}
</script>

<style lang="scss" scoped>
.date-time-button-group {
  margin: 8px 0;
}
</style>