有关筛选条件的问题

简介: 有关筛选条件的问题
今天实现一个有关根据时间范围进行筛选的组件
效果如下:

话不多说 直接开摆
<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
}
相关文章
|
5月前
|
SQL 数据库 UED
条件筛选大作战:解析Where与Having的区别与应用
条件筛选大作战:解析Where与Having的区别与应用
43 0
|
6月前
|
缓存 索引
7.过滤查询
7.过滤查询
|
JavaScript
js多条件筛选(可单条件搜索还可以模糊查询)
js多条件筛选(可单条件搜索还可以模糊查询)
274 0
|
存储 SQL 关系型数据库
mysql数据分组 group by 多条件分组但条件不并列的分析
mysql数据分组 group by 多条件分组但条件不并列的分析
623 0
|
数据采集 数据可视化 数据挖掘
如何筛选和过滤ARWU网站上的大学排名数据
ARWU网站(ShanghaiRanking's Academic Ranking of World Universities)是一个公认的全球大学排名的先驱和最值得信赖的大学排名之一。它每年发布世界前1000所研究型大学的排名,基于透明的方法论和客观的第三方数据。ARWU网站上的大学排名数据可以为高考考生、专业选择、就业指导、行业发展等提供有价值的参考信息。
如何筛选和过滤ARWU网站上的大学排名数据
|
数据挖掘
基于R筛选过滤低丰度物种的几种方式
基于R筛选过滤低丰度物种的几种方式
445 0
|
BI 数据库 JavaScript
多值关联过滤
多值关联过滤
667 0