在前端开发中,封装一个根据不同的时间或者时间段来查询数据的函数

因为我用的是elementui的radio组件,所以我要在change事件里处理功能逻辑,代码如下:

<el-radio-group v-model="maintenanceForm.chooseDate" @change="selectDate" size="mini">
    <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-button label="3">本月</el-radio-button>
    <el-radio-button label="4">本季度</el-radio-button>
    <el-radio-button label="5">全部</el-radio-button>
</el-radio-group>
<script>
  // 转换日期的函数
  function conversionDate(time) {
    let date = new Date(time);
    let countDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    return {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate(),
      timeStamp: date.getTime()
    };
  }
 export default {
    data() {
     return {
         list: {
              search: {
                  time:[],
               },
              query:{
                  current:1,
                  size:20,
                  total:0
               }
            }
         maintenanceForm: {
                 chooseDate:1,
               }
       } 
   }

   method: {
        // 请求查询日期
      selectDate(value) {
        let selectDate = [];
        let currentDate = conversionDate(new Date());
        //昨日
        if (value == 0) {
          let date = conversionDate(new Date(currentDate.timeStamp - 24*60*60*1000));
          let end = new Date(`${date.year}-${date.month}-${date.day} 23:59:59`);
          let start = new Date(`${date.year}-${date.month}-${date.day} 00:00:00`);
          start.setTime(start.getTime());
          start = moment(start).format("YYYY-MM-DD HH:mm:ss");
          end = moment(end).format("YYYY-MM-DD HH:mm:ss");
          selectDate = [start, end];
        }
        // 今天
        else if (value == 1) {
          let end = new Date(
            `${currentDate.year}-${currentDate.month}-${currentDate.day} 23:59:59`
          );
          let start = new Date(
            `${currentDate.year}-${currentDate.month}-${currentDate.day} 00:00:00`
          );
          start.setTime(start.getTime());
          start = moment(start).format("YYYY-MM-DD HH:mm:ss");
          end = moment(end).format("YYYY-MM-DD HH:mm:ss");
          selectDate = [start, end];
        }
        // 本周
        else if (value == 2) {
          var new_Date = new Date();
          var timesStamp = new_Date.getTime();
          var currenDay = new_Date.getDay();
          var dates = [];
          for (var i = 0; i < 7; i++) {
            dates.push(
              new Date(
                timesStamp + 24 * 60 * 60 * 1000 * (i - ((currenDay + 6) % 7))
              )
              .toLocaleDateString()
              .replace(/\//g, "-")
            );
          }
          selectDate = [moment(dates[0]).format("YYYY-MM-DD HH:mm:ss"), moment(dates[6]).format("YYYY-MM-DD") +
            ' 23:59:59'
          ]
        }
        // 本月
        else if (value == 3) {
          let start = moment(new Date())
            .startOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          let end = moment(new Date())
            .endOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          selectDate = [start, end];
        }
        // 本季
        else if (value == 4) {
          let start = moment(new Date())
            .startOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          let end = moment(new Date())
            .startOf("month")
            .add(2, "months")
            .endOf("months")
            .format("YYYY-MM-DD HH:mm:ss");
          selectDate = [start, end];
        }
        // 全部
        else if (value == 5) {
          selectDate = [];
        }
        this.list.search.time = selectDate;
        this.list.query.current = 1;
        // 选完查询条件后,发起请求获取数据
        this.getPageList();
       },
     }
      
}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值