日期可按照季度年度来筛选

使用

//var code = "db5c64f9-1e05-40e7-9398-89198c3bced4"
     <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-radio-group v-model="radio1" @change="looe">
          <el-radio-button label="0">日期</el-radio-button>
          <el-radio-button label="1">季度</el-radio-button>
          <el-radio-button label="2">年度</el-radio-button>
        </el-radio-group>
        <el-form-item label="开始时间：" v-if="radio1 == 0">
          <el-date-picker
            v-model="listQuery.startTime"
            type="datetime"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间：" v-if="radio1 == 0">
          <el-date-picker
            v-model="listQuery.endTime"
            type="datetime"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="季度：" v-if="radio1 == 1">
        //季度组件————————————————
          <quarter-picker
            v-model="val"
            @inputValue="inputValue"
            readonly="readonly"
          />
        </el-form-item>
        <el-form-item label="年度：" v-if="radio1 == 2">
        //饿了吗的组件，月和日手动写就行，参考下面事例。——————————
          <el-date-picker
            v-model="value3"
            value-format="yyyy"
            type="year"
            placeholder="选择年"
            @change="ce"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goSearch">查询</el-button>
        </el-form-item>
      </el-form>

事件

//选择时间的事件
looe(e) {
      if (e > 0) {
        // 默认是0，就是正常选择时间，换的话，清空一下值，不然直接查询，使用的是上次选择的时间
        this.val = "";
        this.value3 = "";
      }
    },
//季度的事件
    inputValue(e) {
      this.listQuery.endTime = e[1];
      this.listQuery.startTime = e[0];
    },
//年度的事件，就这样，根据需求而定
    ce() {
      this.listQuery.endTime = this.value3 + "-" + "12-31 23:59:59";
      this.listQuery.startTime = this.value3 + "-" + "01-01 00:00:00";
    },

季度组件

//季度组件---------
<template>
  <div style="display: inline-block">
    <mark
      style="
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 999;
      "
      v-show="showSeason"
      @click.stop="showSeason = false"
    ></mark>
    <el-input
      :placeholder="placeholder"
      v-model="showValue"
      v-bind="$attrs"
      @focus="clickInput"
      ref="inputText"
    >
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="
        width: 322px;
        padding: 0 30px 20px;
        margin-top: 10px;
        position: fixed;
        z-index: 9999;
      "
      :style="{ top: divTop + 'px' }"
      v-show="showSeason"
      ref="card"
    >
      <div
        class="clearfix"
        style="text-align: center; padding: 0"
        slot="header"
      >
        <button
          class="
            el-picker-panel__icon-btn
            el-date-picker__prev-btn
            el-icon-d-arrow-left
          "
          type="button"
          aria-label="前一年"
          @click="prev"
        ></button>
        <span class="el-date-picker__header-label">{{ year }}年</span>
        <button
          class="
            el-picker-panel__icon-btn
            el-date-picker__next-btn
            el-icon-d-arrow-right
          "
          type="button"
          aria-label="后一年"
          @click="next"
        ></button>
      </div>
      <div class="text item" style="text-align: center">
        <el-button
          style="width: 40%; color: #606266; float: left"
          type="text"
          size="medium"
          @click="selectSeason(0)"
          >第一季度
        </el-button>
        <el-button
          style="width: 40%; color: #606266; float: right"
          type="text"
          size="medium"
          @click="selectSeason(1)"
          >第二季度
        </el-button>
      </div>
      <div class="text item" style="text-align: center">
        <el-button
          style="width: 40%; color: #606266; float: left"
          type="text"
          size="medium"
          @click="selectSeason(2)"
          >第三季度
        </el-button>
        <el-button
          style="width: 40%; color: #606266; float: right"
          type="text"
          size="medium"
          @click="selectSeason(3)"
          >第四季度
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "quarter-picker",
  // model: {
  //   prop: "inputValue",
  //   event: "inputValue",
  // },
  props: {
    valueArr: {
      type: Array,
      default: () => {
        return ["01-01 00:00:00,03-31 23:59:59", "04-01 00:00:00,06-30 23:59:59", "07-01 00:00:00,09-30 23:59:59", "10-01 00:00:00,12-31 23:59:59"];
      },
    },
    placeholder: {
      type: String,
      default: "请选择季度",
    },
    inputValue: {
      type: Array,
      default: function () {
        return [];
      },
    },
    changeValue: {
      type: Function,
      default: () => {},
    },
    otherData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    if (this.inputValue != null && this.inputValue.length > 0) {
      this.showText(this.inputValue);
    }
    window.addEventListener("scroll", this.handleScroll, true);
  },
  watch: {
    inputValue(newValue) {
      if (newValue.length > 0) {
        this.showText(newValue);
      } else {
        this.showValue = "";
      }
    },
  },
  data() {
    return {
      showSeason: false,
      showValue: "",
      year: new Date().getFullYear(),
      season: "",
      divTop: 0,
    };
  },
  methods: {
    handleScroll() {
      let inputText = this.$refs.inputText.$el;
      if (
        inputText.getBoundingClientRect().top + 220 >
        document.body.offsetHeight
      ) {
        this.divTop = inputText.getBoundingClientRect().top - 215;
      } else {
        this.divTop = inputText.getBoundingClientRect().top + 30;
      }
    },
    clickInput() {
      this.handleScroll();
      this.showSeason = true;
    },
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      this.year = this.year * 1 + 1;
    }, 
    selectSeason(i) {
      console.log(i,"点击");
      let that = this;
      that.season = i + 1; // 得到当前季度
      let arr = that.valueArr[i].split(",");
      let value = [];
      let start = that.year + "-" + arr[0]; // 得到当前季度的开始日期
      let end = that.year + "-" + arr[1]; // 得到当前季度的结束日期
      value.push(start); // 将季度开始日期和季度结束日期存入数组中
      value.push(end);
      // if (this.inputValue != null && this.inputValue[0] != value[0]) {
      //   this.changeValue(value, this.otherData);
      // }
      this.$emit("inputValue", value);
      that.showSeason = false;
      this.showText(value);
    },
    showText(value) {
      // value为数组，数组索引为0的值为季度开始时间
      let arr = value[0].split("-"); // 将季度开始时间用-进行分割
      this.year = arr[0];
      let month = arr[1];
      this.season = Math.ceil(month / 3); // 向上取整
      this.showValue = `${this.year}年${this.season}季度`; // 设置显示格式
    },
  },
};
</script>

<style scoped>
._mark {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}

.yearBtn {
  text-align: center;
  padding: 0;
}

.box-card {
  width: 322px;
  padding: 0 3px 20px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;
}

.text.item {
  text-align: center;
}

.text.item >>> .el-button {
  width: 40%;
  color: #606266;
}

.text.item ._left {
  float: left;
}

.text.item ._right {
  float: right;
}
</style>