Vue实现开始时间和结束时间范围查询
更新时间:2021年08月31日 15:27:32 作者:impl柴猿滚滚
这篇文章主要为大家详细介绍了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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
element-ui修改el-form-item样式的详细示例
在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11Vue-Access-Control 前端用户权限控制解决方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下2017-12-12
最新评论