有关筛选条件的问题

今天实现一个有关根据时间范围进行筛选的组件

效果如下：

话不多说 直接开摆

<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item>
        <el-select @change="changeChooseType" class="selSty" v-model="chooseType" placeholder="请选择"
          style="width: 110px;">
          <el-option v-for="item in dateTypeselect" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker class="selSty1" v-model="createTimes" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
          @change="radioDateInit()">
        </el-date-picker>
        <el-radio-group style="margin-left: 15px;" v-model="radioDate" @change="nowDay(radioDate)">
          <el-radio-button label="0" border>今天</el-radio-button>
          <el-radio-button label="3" border>近三天</el-radio-button>
          <el-radio-button label="30" border>本月</el-radio-button>
          <el-radio-button label="60" border>上月</el-radio-button>
          <el-radio-button label="365" border>本年</el-radio-button>
        </el-radio-group>
      </el-form-item>
      </el-form>

return {
        chooseType: "创建时间",
        //时间下拉菜单
        dateTypeselect: [{
          value: "创建时间",
          label: "创建时间",
        }, ],
        //单选框时间 默认选择3天
        radioDate: 3,
        createTimes:[],
}
methods:{
		//初始化时间
      initCreateDate() {
        this.radioDate = 3;
        let nowDate = new Date().getTime();
        this.createTimes = [
          this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
          this.timestampToTime(nowDate) + " 23:59:59",
        ];
        if (null != this.createTimes && this.createTimes.length > 0) {
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
        }
        this.handleQuery()
      },
      //时间解析
      Time(now) {
        let year = new Date(now).getFullYear();
        let month = new Date(now).getMonth() + 1;
        let date = new Date(now).getDate();
        if (month < 10) month = "0" + month;
        if (date < 10) date = "0" + date;
        return year + "-" + month + "-" + date;
      },
      //获得某月的天数：
      getMonthDays: function(myMonth) {
        let monthStartDate = new Date(new Date().getFullYear(), myMonth, 1);
        let monthEndDate = new Date(new Date().getFullYear(), myMonth + 1, 1);
        let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
      },
      //时间转换
      timestampToTime(time) {
        // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(time);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d;
      },
      nowDay(val) {
        this.isCustomerChooseTime = false;
        let nowDate = new Date().getTime();
        let y = new Date().getFullYear();
        if (val == 0) {
          this.createTimes = [
            this.timestampToTime(nowDate) + " 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 3) {
          this.createTimes = [
            this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 30) {
          let month = new Date().getMonth() + 1;
          month = month < 10 ? "0" + month : month;
          this.createTimes = [
            y + "-" + month + "-01 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 60) {
          let startTime = this.Time(
            new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
          );
          let endTime = this.Time(
            new Date(
              new Date().getFullYear(),
              new Date().getMonth() - 1,
              this.getMonthDays(new Date().getMonth() - 1)
            )
          );
          this.createTimes = [startTime + " 00:00:00", endTime + " 23:59:59"];
        } else if (val == 365) {
          this.createTimes = [
            y + "-01-01 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        }
        this.queryParams.createTimeStart = this.createTimes[0]
        this.queryParams.createTimesEnd = this.createTimes[1]
        this.handleQuery();
      },
      changeChooseType(val) {
        if (val == "创建时间") {
          this.chooseType == "创建时间";
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
          this.queryParams.invoiceTimeStart = "";
          this.queryParams.invoiceTimeEnd = "";
          this.handleQuery();
        }
      },
      //时间选中状态更改
      radioDateInit() {
        this.radioDate = "";
        this.isCustomerChooseTime = true;
        if (null != this.createTimes && this.createTimes.length > 0) {
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
        }
        this.handleQuery();
      },

//在使用的时候，需要在查询列表的方法里赋值对应的参数，或者自己后端接口实体新增createTimeStart、createTimesEnd用于接收参数；
//我这里是使用map进行接收：
this.queryParams.params["createTimeStart"] = this.queryParams.createTimeStart
this.queryParams.params["createTimesEnd"] = this.queryParams.createTimesEnd
}