diantou/src_product/iam/audit/auditsource/km/components/km-year.vue

<template>
  <div class="year-picker">
    <input
      v-model="value"
      placeholder="请选择年份"
      :class="[
        'year-picker__input',
        'year-picker__input--real',
        showYearContent ? 'year-picker__input--focus' : '',
      ]"
      type="text"
      @focus="inputFocus"
    />
    <!--<a-icon type="calendar" class="year-picker__icon"/>-->
    <div v-if="showYearContent" class="year-picker__year-box">
      <div class="year-picker__input">{{ value }}</div>
      <div class="year-picker__year-title">
        <span class="to-left" @click="toLeft"> -- </span>
        <strong>{{ yearStart }}--{{ yearEnd - 1 }}</strong>
        <span class="to-right" @click="toRight">>></span>
      </div>
      <div class="year-picker__year-content">
        <span
          v-for="(item, index) in yearList"
          :key="index"
          :class="{ 'year-text': 1, 'year-disable': yearDis(item) }"
          @click="chooseYear(item)"
          >{{ item }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import components from './_import-components/km-year-import'

export default {
  name: 'KmYear',
  components,
  props: {
    yearDisable: {
      type: String,
      default: 'no',
    },
    value: {
      type: Number,
      default: null,
    },
  },
  metaInfo: {
    title: 'OaYear',
  },
  data() {
    return {
      yearLists: [],
      year: '',
      showYearContent: false,
      yearStart: 2010,
      yearEnd: 2030,
    }
  },
  computed: {
    yearDis() {
      return function(y) {
        switch (this.yearDisable) {
          case 'before':
            return y < new Date().getFullYear()
          case 'no':
            return false
          case 'after': {
            return y > new Date().getFullYear()
          }
        }
      }
    },
    yearList() {
      const arr = []
      for (let i = this.yearStart; i < this.yearEnd; i++) {
        arr.push(i)
      }
      return arr
    },
  },
  methods: {
    inputFocus() {
      this.showYearContent = true
    },
    inputBlur() {
      this.showYearContent = false
    },
    chooseYear(year) {
      if (year > this.yearDis) return
      this.showYearContent = false
      this.year = year + '年'
      this.$emit('input', year)
    },
    toLeft() {
      this.yearStart -= 20
      this.yearEnd -= 20
    },
    toRight() {
      this.yearStart += 20
      this.yearEnd += 20
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>