Vue实现开始时间和结束时间范围查询

本文实例为大家分享了Vue实现开始时间和结束时间范围的查询方法，供大家参考，具体内容如下

效果图：

代码实现：

OrderList.Vue

<a-col :xl="6" :lg="7" :md="8" :sm="24">
 <a-form-item label="下单日期">
  <a-range-picker size="large" format="YYYY-MM-DD" @change="onDateChange" />
 </a-form-item>
</a-col>

methods: {
 onDateChange(date, dateString) {
        console.log(dateString[0])
        console.log(dateString[1])
        this.beginDate = dateString[0]
        this.finishDate = dateString[1]
     }
}

OrderConntroller.java

 /**
     * 分页列表查询
     *
     * @param order
     * @param pageNo
     * @param pageSize
     * @param req
     * @return
     */
    @AutoLog(value = "订单-分页列表查询")
    @ApiOperation(value = "订单-分页列表查询", notes = "订单-分页列表查询")
    @GetMapping(value = "/list")
    public Result<?> queryPageList(Order order,
                                   @RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
                                   @RequestParam(name = "pageSize", defaultValue = "10") Integer pageSize,
                                   HttpServletRequest req) {
        QueryWrapper<Order> queryWrapper = QueryGenerator.initQueryWrapper(order, req.getParameterMap());
        if(req.getParameterMap().get("beginDate") !=null){
            String beginDate = req.getParameterMap().get("beginDate")[0];
            String finishDate = req.getParameterMap().get("finishDate")[0];
            if (!StringUtils.isEmpty(beginDate) || StringUtils.isEmpty(finishDate)) {
                DateTime beginOfDay = DateUtil.beginOfDay(DateUtil.parse(beginDate));
                DateTime endOfDay = DateUtil.endOfDay(DateUtil.parse(finishDate));
                queryWrapper.ge("create_time", beginOfDay).le("create_time", endOfDay);
            }
        }
        LoginUser sysUser = (LoginUser) SecurityUtils.getSubject().getPrincipal();
        Set<String> roles = sysUserService.getUserRolesSet(sysUser.getUsername());
        if(!roles.contains("admin")){
            queryWrapper.eq("user_name",sysUser.getUsername());
        }
        Page<Order> page = new Page<Order>(pageNo, pageSize);
        IPage<Order> pageList = orderService.page(page, queryWrapper);
        return Result.ok(pageList);
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。