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<?> queryP文章来源地址50184.htmlageList(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(finishD文章来源站点https://www.yii666.com/ate)) {
DateTime beginOfDay = Dawww.yii666.comteUtil.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(sywww.yii666.comsUser.getUsername());
if(!roles.contains("admin")){
queryWrapper.eq("user_name",sysUser.getUsername());
}
Page<Order> page = new Page<Order>(pageNo, pageSize);
IPa文章来源地址50184.htmlge<Order> pageList = orderService.page(page, queryWrapper);
return Result.ok(pageList);
}


来源于：Vue实现开始时间和结束时间的范围查询