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);
  }

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

需求：利用vue实现二维码扫描；插件：QRCodeReader；插件下载npm install --save vue-qrcode-reader注意：需要在https协议下才可以调用相机，实现扫码。可以通 ...