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

<template>
  <div class="search-time-scope-selector">
    <TimeSelectorContent
      ref="content"
      :options="options"
      :beforeChange="beforeChange"
      :selectorTime="type"
      selectorType="line"
      :defaultSelectedKey="value"
      :exactCanHalf="exactCanHalf"
      :showConfirmButton="showConfirmButton"
      :startPlaceholder="startPlaceholder"
      :endPlaceholder="endPlaceholder"
      :isDateRange="isDateRange"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import TimeSelectorContent from '@/components/selector/TimeSelectorContent.vue'
export default {
  name: 'search-time-scope-selector',
  components: {
    TimeSelectorContent
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    beforeChange: Function,
    options: {
      type: Array,
      default() {
        return []
      }
    },
    splitter: {
      type: String,
      default: '_'
    },
    value: {
      type: String,
      default: 'thisyear'
    },
    // 时间配置项类型
    type: {
      type: String,
      default: 'bidSearch'
    },
    // 自定义选项是否可以选择一半值
    exactCanHalf: {
      type: Boolean,
      default: false
    },
    // 是否展示自定义自动按钮
    showConfirmButton: {
      type: Boolean,
      default: false
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    // 显示类型是否为日期范围（一个弹框内选择开始日期结束日期）
    isDateRange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectTime: {
        start: 0,
        end: 0,
        exact: ''
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.syncState(val)
      },
      deep: true
    }
  },
  mounted() {
    this.syncState(this.value)
  },
  methods: {
    syncState(val) {
      const splitter = this.splitter // 默认_
      const time = this.transformTimeBefore(val)
      if (time.indexOf(splitter) === -1) {
        this.selectTime = {
          start: 0,
          end: 0,
          exact: time
        }
      } else {
        const times = time.split(splitter)
        this.selectTime = {
          start: times[0] * 1000,
          end: times[1] * 1000,
          exact: 'exact'
        }
      }
      if (this.$refs.content) {
        this.$refs.content.setState(this.selectTime)
      }
    },
    setState(data) {
      return this.$refs.content.setState(data)
    },
    getState() {
      return this.$refs.content.getState()
    },
    transformTimeBefore(time) {
      // 转换成组件需要的数据类型
      const timeMap = {
        'lately-7': 'lately7',
        'lately-30': 'lately30',
        thisyear: 'sinceLastYear',
        threeyear: 'sinceLastThreeYear',
        fiveyear: 'sinceLastFiveYear'
      }
      return timeMap[time] || time
    },
    transformTimeAfter(time) {
      // 转换成接口需要的数据类型
      const timeMap = {
        lately7: 'lately-7',
        lately30: 'lately-30',
        sinceLastYear: 'thisyear',
        sinceLastThreeYear: 'threeyear',
        sinceLastFiveYear: 'fiveyear'
      }
      return timeMap[time] || time
    },
    onChange(state) {
      const split = this.splitter
      if (state.exact === 'exact') {
        this.$emit('input', `${state.start / 1000}${split}${state.end / 1000}`)
      } else {
        this.$emit('input', this.transformTimeAfter(state.exact))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-time-scope-selector {
  &::v-deep {
    .fw-bold {
      font-weight: bold;
    }
    // 子组件按钮公共样式
    .j-button-item {
      display: flex;
      align-items: center;
      margin: 0 5px;
      padding: 2px 6px;
      line-height: 20px;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      background-color: transparent;
      cursor: pointer;
      &:first-child {
        margin-left: 0;
      }
      &.global {
        // s-card中的全部按钮使用
        padding: 6px 8px;
        height: 24px;
        line-height: 24px;
        font-weight: 700;
        color: inherit;
        border-color: rgba(0, 0, 0, 0.05);
      }
      &.all {
        // s-line中的全部按钮使用
        font-weight: 700;
        border-color: transparent;
      }
      &.hover:hover {
        color: #2abed1;
      }
      // 选中状态
      &.active {
        // 默认蓝色边框蓝色字体
        color: #2abed1;
        border-color: #2abed1;
        &.bgc {
          // 默认蓝色背景白色字体
          color: #fff;
          background-color: $color-text--highlight;
        }
        &.bgc-opacity {
          // 默认蓝色边框蓝色字体蓝色半透明背景
          background-color: rgba(44, 183, 202, 0.1);
        }
      }
    }

    [class^='el-icon-'] {
      transition: transform 0.2s ease;
    }
    .rotate180 {
      transform: rotate(180deg);
    }

    .date-time-container .date-time-item {
      width: 130px;
      height: 24px;
      line-height: 24px;
    }
    .date-time-container .date-time-item.left::after {
      background-color: #e0e0e0;
    }
    .select-group-container {
      margin-right: 10px;
    }
    .date-time-container {
      padding: 0;
      background-color: transparent !important;
      &.active {
        background-color: transparent !important;
        input,
        .date-time-item.left::after {
          background-color: $color_main;
          color: #fff;
        }
      }
    }
  }
}
</style>