diantou/src_product/iam/audit/portrait/audit-year-time.vue

<template>
  <div :class="$style.year">
    <a-select
      v-model="yearList"
      mode="multiple"
      :open="false"
      :value="value"
      :max-tag-count="4"
      @focus="showModel"
      @change="yearChange"
    >
      <template slot="maxTagPlaceholder">
        ...
      </template>
      <a-icon slot="suffixIcon" type="unordered-list" />
      <a-select-option v-for="(item, i) in yearOptionList" :key="i" :value="item.value">{{
        item.value
      }}</a-select-option>
    </a-select>
    <div v-if="show" :class="$style.yearBody">
      <!-- 上下两个部分  -->
      <!-- 上部显示当前是多少年到多少年 左右有切换按钮 -->
      <div :class="$style.yearTop">
        <a-icon
          type="double-left"
          :style="{
            cursor: 'pointer',
            color: '#ccc',
          }"
          @click="addYearOptionList('prve')"
        />

        <span>{{ showTitlenYear }}</span>
        <a-icon
          type="double-right"
          :style="{
            cursor: 'pointer',
            color: '#ccc',
          }"
          @click="addYearOptionList('next')"
        />
      </div>
      <!-- 下部显示当前年份所在的十年的年份列表 一行有三个 共四行  其中 第一个和最后一个置灰 -->
      <div :class="$style.yearBottom">
        <a-row>
          <a-col v-for="(item, i) in yearOptionList" :key="i" :span="8" :class="$style.colyear">
            <!-- 'year-item': true,
            'year-item-active': yearList.includes(item.value),
            'year-item-disabled': i === 0 || i === yearOptionList.length - 1, -->
            <div
              :class="[
                $style.yearItem,
                yearList.includes(item.value) ? $style.yearItemActive : '',
                i === 0 || i === yearOptionList.length - 1 ? $style.yearItemDisabled : '',
              ]"
              :disabled="i === 0 || i === yearOptionList.length - 1"
              @click="onAction(item)"
            >
              {{ item.value }}
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuditYearTime',
  metaInfo: {
    title: 'AuditYearTime',
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    // 是否单选
    single: {
      type: Boolean,
      default: false,
    },
    defaultValue: {
      type: Array,
      default: () => [],
    },
    // 选择类型
    selectType: {
      type: String,
      default: 'all',
    },
  },
  data() {
    return {
      yearList: [],
      yearOptionList: [],
      show: false,
      showTitlenYear: '',
      onShowTitle: 0,
    }
  },
  watch: {
    value(val) {
      this.yearList = val
    },
  },
  created() {
    document.addEventListener('click', this.clickBody)
    this.yearList = this.value
  },
  methods: {
    addYearOptionList(type = 'on') {
      // on表示当前 prve表示上一个 next表示下一个
      if (type === 'on') {
        this.onShowTitle = 0
      } else if (type === 'prve') {
        this.onShowTitle -= 10
      } else if (type === 'next') {
        this.onShowTitle += 10
      }
      // showTitlenYear等于当前年份所在的十年
      // yearOptionLis 为年份列表
      const year = new Date().getFullYear() + this.onShowTitle
      // 计算当前年份应该减去的年份 和应该加上的年份
      const subYear = year - (year % 10)
      const addYear = subYear + 9
      this.showTitlenYear = `${subYear}-${addYear}`
      this.yearOptionList = Array.from({ length: 12 }, (v, i) => subYear - 1 + i).map((item) => {
        return {
          value: item,
          label: item,
        }
      })
    },
    showModel() {
      this.show = true
      this.addYearOptionList()
    },
    onAction(item) {
      // 如果点击的是最后一个 或者第一个 则只表示切换页
      if (
        item.value === this.yearOptionList[0].value ||
        item.value === this.yearOptionList[this.yearOptionList.length - 1].value
      ) {
        return this.addYearOptionList(item.value === this.yearOptionList[0].value ? 'prve' : 'next')
      }
      // 是否含有
      const isInclud = this.yearList.includes(item.value)
      if (this.yearList.includes(item.value)) {
        this.yearList = this.yearList.filter((i) => i !== item.value)
      } else {
        if (this.single) {
          this.yearList = [item.value]
        } else {
          this.yearList.push(item.value)
        }
      }
      if (this.selectType === 'mode') {
        // 最大数到最小数之间的所有年份
        // 给数组排序
        this.yearList = this.yearList.map((item) => parseInt(item))
        this.yearList = this.yearList.sort((a, b) => a - b)
        const yearData = []
        let min = this.yearList[0]
        let max = this.yearList[this.yearList.length - 1]
        if (isInclud) {
          // 取消的时候 如果大于最小值
          if (min < parseInt(item.value)) {
            max = parseInt(item.value) - 1
          }
          if (min > parseInt(item.value)) {
            max = min
            min = parseInt(item.value)
          }
        }
        for (let i = min; i <= max; i++) {
          yearData.push(i)
        }
        this.yearList = yearData
      }
      this.$emit('change', this.yearList)
    },
    // 创建监听事件，如果点击的是当前组件之外的地方，关闭下拉框
    clickBody(e) {
      if (this.show) {
        if (!this.$el.contains(e.target)) {
          this.show = false
        }
      }
    },
    yearChange(val) {
      this.$emit('change', val)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.year {
  position: relative;
  .year-body {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 11;
    width: 280px;
    // 禁止用户选择
    user-select: none;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    .year-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    .year-bottom {
      padding: 10px;
    }
  }
  .colyear {
    display: flex;
    align-items: center;
    justify-content: center;
    //  93 66
    width: 86px;
    height: 66px;
  }
  .year-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    line-height: 24px;
    cursor: pointer;
    border-radius: 2px;
    // 鼠标放置
    &:hover {
      color: $blue-6;
      background-color: $blue-1;
    }
  }
  .year-item-active {
    color: $text-color-inverse;
    background-color: $blue-6;
    &:hover {
      color: $text-color-inverse;
      background-color: $blue-6;
    }
  }
  .year-item-disabled {
    color: $normal-color;
  }
}
</style>