web/apps/bigmember_pc/src/components/selector/TimeSelectorContent.vue

<template>
  <div class="selector-content" v-if="selectorType === 'card'" key="s-content">
    暂不提供时间选择的card组件
  </div>
  <div
    class="selector-content"
    v-else-if="selectorType === 'line'"
    key="s-content"
  >
    <div class="select-group-container">
      <div
        v-for="(item, index) in timeSelectList"
        :key="index"
        class="j-button-item bgc"
        :class="{
          active: item.selected
        }"
        @click="clickTimeButton(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div
      v-if="showExactConf"
      class="date-time-container"
      :class="{ active: showActive }"
    >
      <div v-if="isDateRange">
        <el-date-picker
          v-model="dateTimeRangeState"
          class="date-picker-range"
          type="daterange"
          prefix-icon="none"
          :editable="false"
          align="left"
          range-separator="—"
          :start-placeholder="dateTimePickerState.startPlaceHolder"
          :end-placeholder="dateTimePickerState.endPlaceHolder"
          :append-to-body="false"
          :placement="placement"
          :unlink-panels="unlinkPanels"
          @change="onDateRangeChange"
        >
        </el-date-picker>
      </div>
      <div v-else>
        <el-date-picker
          v-model="dateTimePickerState.start"
          class="date-time-item left"
          :type="dateTimePickerConf.type"
          :editable="dateTimePickerConf.editable"
          :align="dateTimePickerConf.align"
          :prefix-icon="dateTimePickerConf.prefixIcon"
          :format="dateTimePickerConf.format"
          :placeholder="dateTimePickerState.startPlaceHolder"
          :picker-options="startPickerOptions"
          :append-to-body="false"
          :placement="placement"
          @change="startDatePickerChange"
          @focus="showConfirmHandle"
        >
        </el-date-picker>
        <el-date-picker
          v-model="dateTimePickerState.end"
          class="date-time-item right"
          :type="dateTimePickerConf.type"
          :editable="dateTimePickerConf.editable"
          :align="dateTimePickerConf.align"
          :prefix-icon="dateTimePickerConf.prefixIcon"
          :format="dateTimePickerConf.format"
          :placeholder="dateTimePickerState.endPlaceHolder"
          :picker-options="endPickerOptions"
          :append-to-body="false"
          :placement="placement"
          @change="endDatePickerChange"
          @focus="showConfirmHandle"
        >
        </el-date-picker>
      </div>
      <el-button
        class="confirm-btn"
        v-if="showConfirmButton && showConBtn"
        @click="confirmHandle"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { DatePicker } from 'element-ui'
import { dateFormatter } from '@/utils/'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { uniqWith } from 'lodash'

moment.locale('zh-cn')
const timeSelectMap = {
  default: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    },
    {
      name: '去年',
      value: 'lastYear',
      selected: false
    }
  ],
  sub: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '今天',
      value: 'today',
      selected: false
    },
    {
      name: '昨天',
      value: 'yesterday',
      selected: false
    },
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    }
  ],
  more: [
    {
      name: '近3个月',
      value: 'lately90',
      selected: true
    },
    {
      name: '近半年',
      value: 'lately180',
      selected: false
    },
    {
      name: '今年全年',
      value: 'thisYear',
      selected: false
    },
    {
      name: '去年至今',
      value: 'sinceLastYear',
      selected: false
    },
    {
      name: '前年至今',
      value: 'sinceYearBeforeLast',
      selected: false
    }
  ],
  allAndlately90: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '最近3个月',
      value: 'lately90',
      selected: false
    }
  ],
  bidSearch: [
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    },
    {
      name: '最近1年',
      value: 'sinceLastYear',
      selected: true
    },
    {
      name: '最近3年',
      value: 'sinceLastThreeYear',
      selected: false
    },
    {
      name: '最近5年',
      value: 'sinceLastFiveYear',
      selected: false
    }
  ],
  // 最近3天最近7天最近30天近3个月
  supplySearch: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '今天',
      value: 'today',
      selected: false
    },
    {
      name: '最近3天',
      value: 'lately3',
      selected: false
    },
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    },
    {
      name: '最近3个月',
      value: 'lately90',
      selected: false
    }
  ],
  expire: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '本月到期',
      value: '1',
      selected: false
    },
    {
      name: '1-3个月到期',
      value: '1-3',
      selected: false
    },
    {
      name: '3-6个月到期',
      value: '3-6',
      selected: false
    },
    {
      name: '6-12个月到期',
      value: '6-12',
      selected: false
    },
    {
      name: '12个月后到期',
      value: '12',
      selected: false
    }
  ],
  bidPushTime: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    },
    {
      name: '最近1年',
      value: 'sinceLastYear',
      selected: false
    },
    {
      name: '最近3年',
      value: 'sinceLastThreeYear',
      selected: false
    },
    {
      name: '最近5年',
      value: 'sinceLastFiveYear',
      selected: false
    }
  ],
  collectTime: [
    {
      name: '全部',
      value: 'all',
      selected: true
    },
    {
      name: '今天',
      value: 'today',
      selected: false
    },
    {
      name: '昨天',
      value: 'yesterday',
      selected: false
    },
    {
      name: '最近7天',
      value: 'lately7',
      selected: false
    },
    {
      name: '最近30天',
      value: 'lately30',
      selected: false
    }
  ]
}

function getTimeSelectList(map) {
  let arr = []
  for (const key in map) {
    const item = map[key]
    if (Array.isArray(item)) {
      arr = arr.concat(item)
    }
  }
  // 数组去重
  const uniqed = uniqWith(arr, function (a, b) {
    return a.value === b.value
  })
  return uniqed
}

// const timeSelectListAll = getTimeSelectList(timeSelectMap)

export default {
  name: 'time-selector-content',
  components: {
    [DatePicker.name]: DatePicker
  },
  props: {
    beforeChange: Function,
    selectorType: {
      type: String,
      default: 'card' // card/line
    },
    selectorTime: {
      type: String,
      default: 'default' // default/sub/more/bidSearch
    },
    options: {
      type: Array,
      default: () => []
    },
    defaultSelectedKey: {
      type: String,
      default: 'all' // all/lately30/lately90...
    },
    showExact: {
      type: Boolean,
      default: true
    },
    // 自定义组件可以搬选返回
    exactCanHalf: {
      type: Boolean,
      default: false
    },
    // 是否展示确认按钮
    showConfirmButton: {
      type: Boolean,
      default: false
    },
    startPlaceholder: {
      type: String,
      default: ''
    },
    endPlaceholder: {
      type: String,
      default: ''
    },
    // 显示类型是否为日期范围（一个弹框内选择开始日期结束日期）
    isDateRange: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: 'bottom-start'
    },
    // 在范围选择器里取消两个日期面板之间的联动
    unlinkPanels: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      debug: false,
      timeSelectList: [],
      dateTimePickerConf: {
        type: 'date',
        editable: false,
        align: 'center',
        prefixIcon: 'clear-icon',
        format: 'yyyy-MM-dd'
      },
      dateTimePickerState: {
        start: '',
        end: '',
        startPlaceHolder: this.startPlaceholder, // 开始日期
        endPlaceHolder: this.endPlaceholder // 结束日期
      },
      startPickerOptions: {
        disabledDate: (time) => {
          const { end } = this.dateTimePickerState
          if (end) {
            return time.getTime() > +new Date(end)
          }
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          const { start } = this.dateTimePickerState
          if (start) {
            return time.getTime() < +new Date(start)
          }
        }
      },
      showConBtn: false,
      dateTimeRangeState: []
    }
  },
  computed: {
    showExactConf() {
      // 如果传了options，则默认不展示exact
      if (this.options.length) {
        return this.options.includes('exact')
      } else {
        return this.showExact
      }
    },
    state() {
      return this.getState()
    },
    showActive() {
      let result = false
      if (this.showConfirmButton) {
        result =
          this.state.exact === 'exact' &&
          (this.dateTimePickerState.start || this.dateTimePickerState.end) &&
          !this.showConBtn
      } else {
        result = this.state.exact === 'exact'
      }
      return result
    }
  },
  created() {
    this.timeSelectList = this.calcTimeSelectList()
    this.calcLastTime()
  },
  methods: {
    dateFormatter,
    onDateRangeChange(value) {
      this.dateTimeRangeState = value
      this.dateTimePickerState.start = value[0]
      this.dateTimePickerState.end = value[1]
      this.setTimeSelectListState()
      this.onChange()
    },
    calcTimeSelectList() {
      let timeSelectList = []
      const propTimeSelectList = timeSelectMap[this.selectorTime]
      if (this.options.length) {
        timeSelectList = this.options
          .map((item) => {
            const conf = propTimeSelectList.find((t) => {
              return t.value === item
            })
            return conf
          })
          .filter((v) => !!v)
      } else {
        timeSelectList = propTimeSelectList
      }
      return timeSelectList
    },
    calcLastTime() {
      if (this.selectorTime === 'more') {
        const renameList = [
          'thisYear', // 今年全年
          'sinceLastYear', // 去年至今
          'sinceYearBeforeLast' // 前年至今
        ]
        const thisYear = new Date().getFullYear()
        this.timeSelectList.forEach((item) => {
          if (renameList.indexOf(item.value) !== -1) {
            if (item.value === renameList[0]) {
              item.name = `${thisYear}年全年`
            } else if (item.value === renameList[1]) {
              item.name = `${thisYear - 1}年至今`
            } else if (item.value === renameList[2]) {
              item.name = `${thisYear - 2}年至今`
            }
          }
        })
      }
    },
    setState(data) {
      // {
      //   start: 1620230400000, // 2021-5-6
      //   end: 1620489600000, // 2021-5-9
      //   exact: 'all'
      // }
      if (!data || Object.keys(data).length === 0) {
        this.setTimeSelectListState(this.defaultSelectedKey)
      } else {
        switch (data.exact) {
          case 'all':
          case 'today':
          case 'yesterday':
          case 'lately3':
          case 'lately7':
          case 'lately30':
          case 'lately90':
          case 'lately180':
          case 'thisYear':
          case 'sinceLastYear':
          case 'sinceLastThreeYear':
          case 'sinceLastFiveYear':
          case 'sinceYearBeforeLast':
          case 'lastYear': {
            this.setTimeSelectListState(data.exact)
            this.clearDateTimePicker()
            break
          }
          case 'exact': {
            if (!this.exactCanHalf && !this.showConfirmButton) {
              if (!data.start || !data.end) break
            }
            this.timeSelectList.forEach((v) => (v.selected = false))
            this.dateTimePickerState.start = data.start
              ? new Date(data.start)
              : null
            this.dateTimePickerState.end = data.end ? new Date(data.end) : null
            this.dateTimeRangeState = [data.start, data.end]
            break
          }
          default: {
            console.warn('exact值为空')
          }
        }
      }
    },
    getState() {
      // timeState.exact: all/lately7/lately30/lastYear/exact5种状态
      // 为true时候表示精确筛选，从时间选择器中获取值(其他为根据当前时间计算出的值)
      const timeState = {
        start: 0,
        end: 0,
        exact: 'exact'
      }
      const durations = {
        hour1: 60 * 60 * 1000,
        day1: 60 * 60 * 1000 * 24 * 1,
        day3: 60 * 60 * 1000 * 24 * 3,
        day7: 60 * 60 * 1000 * 24 * 7,
        day30: 60 * 60 * 1000 * 24 * 30
      }
      const selectButton = this.timeSelectList.find((item) => item.selected)
      if (selectButton) {
        timeState.exact = selectButton.value
        Object.assign(timeState, this.calcNotExactTime(timeState.exact))
      } else {
        timeState.exact = 'exact'
        if (this.dateTimePickerState.start) {
          timeState.start = this.dateTimePickerState.start.getTime()
        }
        if (this.dateTimePickerState.end) {
          // 结束时间为当天23:59:59
          timeState.end =
            this.dateTimePickerState.end.getTime() + (durations.day1 - 1000)
        }
        // 什么都未选择的情况
        if (!timeState.start && !timeState.end) {
          timeState.exact = ''
        }
      }
      return timeState
    },
    onChange() {
      const state = this.getState()
      if (this.debug) {
        state.startFormatted = this.dateFormatter(state.start)
        state.endFormatted = this.dateFormatter(state.end)

        console.table({
          start: state.startFormatted,
          end: state.endFormatted
        })
      }
      this.$emit('onChange', state)
    },
    setTimeSelectListState(value, callback) {
      this.timeSelectList.forEach((item) => {
        item.selected = item.value === value
        callback && callback(item)
      })
    },
    clearDateTimePicker() {
      this.dateTimePickerState.start = ''
      this.dateTimePickerState.end = ''
      this.dateTimeRangeState = []
    },
    // 计算lately7/lately30/lastYear等的开始和结束时间
    // endTime传入一个时间戳
    calcNotExactTime(exact = 'lately7', endTime = Date.now()) {
      const t = {
        start: 0,
        end: +new Date(endTime)
      }
      const durations = {
        hour1: 60 * 60 * 1000,
        day1: 60 * 60 * 1000 * 24 * 1,
        day3: 60 * 60 * 1000 * 24 * 3,
        day7: 60 * 60 * 1000 * 24 * 7,
        day30: 60 * 60 * 1000 * 24 * 30
      }
      switch (exact) {
        case 'today': {
          t.start = moment().startOf('day').format('x')
          t.end = moment().endOf('day').format('x')
          break
        }
        case 'yesterday': {
          t.start = moment().startOf('day').format('x') - durations.day1
          t.end = moment().endOf('day').format('x') - durations.day1
          break
        }
        case 'lately3': {
          t.start = t.end - durations.day3
          break
        }
        case 'lately7': {
          t.start = t.end - durations.day7
          break
        }
        case 'lately30': {
          t.start = t.end - durations.day30
          break
        }
        case 'lately90': {
          // 近90天
          t.start = t.end - durations.day30 * 3
          break
        }
        case 'lately180': {
          // 180天
          t.start = t.end - durations.day30 * 6
          break
        }
        case 'thisYear': {
          // 今年全年
          const year = new Date(t.end).getFullYear()
          t.start = +new Date(`${year}`)
          t.end = +new Date(`${year + 1}`) - durations.hour1 * 8 - 1
          break
        }
        case 'lastYear': {
          // 去年全年
          const year = new Date(t.end).getFullYear()
          const lastYear = year - 1
          t.start = +new Date(`${lastYear}`)
          t.end = +new Date(`${year}`) - durations.hour1 * 8 - 1
          break
        }
        case 'sinceLastYear': {
          // 去年至今
          const year = new Date(t.end).getFullYear()
          const lastYear = year - 1
          t.start = +new Date(`${lastYear}`)
          break
        }
        case 'sinceLastThreeYear': {
          // 去年至今
          const year = new Date(t.end).getFullYear()
          const lastYear = year - 3
          t.start = +new Date(`${lastYear}`)
          break
        }
        case 'sinceLastFiveYear': {
          // 去年至今
          const year = new Date(t.end).getFullYear()
          const lastYear = year - 5
          t.start = +new Date(`${lastYear}`)
          break
        }
        case 'sinceYearBeforeLast': {
          // 前年至今
          const year = new Date(t.end).getFullYear()
          t.start = +new Date(`${year - 2}`)
          break
        }
        default: {
          t.start = 0
          t.end = 0
          break
        }
      }
      return t
    },
    clickTimeButton(item) {
      const beforeChange = this.beforeChange
      if (beforeChange) {
        const pass = beforeChange(item)
        if (pass) {
          this.changeSelectItem(item)
        }
      } else {
        this.changeSelectItem(item)
      }
    },
    changeSelectItem(item) {
      if (item.selected) return
      this.timeSelectList.forEach((v) => (v.selected = false))
      item.selected = true
      this.dateTimeRangeState = []
      this.dateTimePickerState.start = ''
      this.dateTimePickerState.end = ''
      this.onChange()
    },
    startDatePickerChange(start) {
      const { end } = this.dateTimePickerState
      if (!this.exactCanHalf && !this.showConfirmButton) {
        if (start && end) {
          // start和end都有值
          this.setTimeSelectListState()
          this.onChange()
        } else if (!start && !end) {
          // start和end都没值
          this.setTimeSelectListState(this.defaultSelectedKey)
          this.onChange()
        }
      }
      if (this.showConfirmButton) {
        this.showConBtn = true
      }
    },
    endDatePickerChange(end) {
      const { start } = this.dateTimePickerState
      if (!this.exactCanHalf && !this.showConfirmButton) {
        if (start && end) {
          // start和end都有值
          this.setTimeSelectListState()
          this.onChange()
        } else if (!start && !end) {
          // start和end都没值
          this.setTimeSelectListState(this.defaultSelectedKey)
          this.onChange()
        }
      }
      if (this.showConfirmButton) {
        this.showConBtn = true
      }
    },
    // 展示确定按钮
    showConfirmHandle() {
      this.showConBtn = true
    },

    // 确定操作
    confirmHandle() {
      this.setTimeSelectListState()
      this.onChange()
      this.showConBtn = false
    }
  }
}
</script>

<style lang="scss" scoped>
.selector-content,
.select-group-container {
  display: flex;
  align-items: center;
}
.selector-content {
  flex-wrap: wrap;
}
.select-group-container {
  margin-right: 24px;
}
.date-time-container {
  display: flex;
  padding: 6px;
  background-color: #f4f5f7;
  border-radius: 4px;
  &.active {
    background-color: #2cb7ca;
    .date-time-item {
      &.left::after {
        background-color: #e0e0e0;
      }
    }
  }
  .clear-icon {
    display: none;
  }
  .date-time-item {
    position: relative;
    width: 160px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    &.left {
      margin-right: 30px;
      &::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 2px;
        top: 50%;
        right: -10px;
        transform: translate(100%, -50%);
        background-color: #1d1d1d;
      }
    }
    ::v-deep {
      .el-input__inner {
        padding: 0;
        height: 100%;
        text-align: center;
        cursor: pointer;
      }
      .el-input__suffix {
        display: flex;
        align-items: center;
      }
    }
  }
}
.confirm-btn {
  width: 48px;
  height: 24px;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background: #2abed1;
  padding: 0;
  line-height: 22px;
  margin-left: 8px;
  border: none;
}
::v-deep {
  .date-picker-range {
    width: 268px;
    height: 24px;
    padding: 0;
    line-height: 24px;
    border: 0;
    .el-input__icon {
      display: none;
    }
    .el-range-separator {
      width: 8px;
      height: 1px;
      margin: 0 5px;
      font-size: 0;
      line-height: 24px;
      background: #e0e0e0;
    }
    .el-range-input {
      width: 104px !important;
      height: 24px;
      padding: 0 12px;
      text-align: left;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      box-sizing: border-box;
    }
  }
}
</style>