diantou/src_product/iam/kpi/components/kpi-quarter-picker.vue

<template>
  <div>
    <mark
      v-show="showSeason"
      style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;background:rgba(0,0,0,0);"
      @click.stop="showSeason = false"
    ></mark>
    <a-input
      v-model="showValue"
      placeholder="请选择季度"
      style="width:138px;"
      @focus="showSeason = true"
    >
    </a-input>
    <a-card
      v-show="showSeason"
      class="box-card"
      style="position:fixed;z-index:9999;width:322px;padding: 0 3px 20px;margin-top:10px"
    >
      <div class="ant-calendar-month-panel-header">
        <a
          role="button"
          title="上一年 (Control键加左方向键)"
          class="ant-calendar-month-panel-prev-year-btn"
          @click="prev"
        ></a>
        <a role="button" title="选择年份" class="ant-calendar-month-panel-year-select">
          <span class="ant-calendar-month-panel-year-select-content">{{ year }}年</span>
        </a>
        <a
          role="button"
          title="下一年 (Control键加右方向键)"
          class="ant-calendar-month-panel-next-year-btn"
          @click="next"
        ></a>
      </div>
      <div class="text item" style="text-align:center;">
        <a-button
          type="text"
          style="float:left;width:40%;margin-top: 30px;color: #606266"
          @click="selectSeason(0)"
          >第一季度</a-button
        >
        <a-button
          type="text"
          style="float:right;width:40%;margin-top: 30px;color: #606266"
          @click="selectSeason(1)"
          >第二季度</a-button
        >
      </div>
      <div class="text item" style="text-align:center;">
        <a-button
          type="text"
          style="float:left;width:40%;margin-top: 30px;color: #606266"
          @click="selectSeason(2)"
          >第三季度</a-button
        >
        <a-button
          type="text"
          style="float:right;width:40%;margin-top: 30px;color: #606266"
          @click="selectSeason(3)"
          >第四季度</a-button
        >
      </div>
    </a-card>
  </div>
</template>

<script>
import components from './_import-components/kpi-quarter-picker-import'

export default {
  name: 'KpiQuarterPicker',
  components,
  data() {
    return {
      showSeason: false,
      season: '',
      year: new Date().getFullYear(),
      showValue: '',
    }
  },
  methods: {
    one() {
      this.showSeason = false
    },
    prev() {
      this.year = this.year * 1 - 1
    },
    next() {
      this.year = this.year * 1 + 1
    },
    selectSeason(i) {
      const that = this
      that.season = i + 1
      const quarter = ['一季度', '二季度', '三季度', '四季度']
      that.showSeason = false
      this.showValue = `${this.year}年${this.season}季度`
      const value = JSON.stringify({
        year: this.year,
        quarter: `第${this.season}季度`,
        full: this.year + '' + quarter[i],
      })
      this.$emit('setvalue', value)
    },
  },
}
</script>

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