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修改el-form-item样式的详细示例

    在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 解决vue.js提交数组时出现数组下标的问题

    解决vue.js提交数组时出现数组下标的问题

    今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现微信分享朋友圈,发送朋友的示例讲解

    vue实现微信分享朋友圈,发送朋友的示例讲解

    下面小编就为大家分享一篇vue实现微信分享朋友圈,发送朋友的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    解决VUE框架 导致绑定事件的阻止冒泡失效问题

    下面小编就为大家分享一篇vue监听滚动事件 实现某元素吸顶或者固定位置显示方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 手写Vue内置组件component的实现示例

    手写Vue内置组件component的实现示例

    本文主要介绍了手写Vue内置组件component的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue加载自定义的js文件方法

    vue加载自定义的js文件方法

    下面小编就为大家分享一篇vue加载自定义的js文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue对el-autocomplete二次封装增加下拉分页

    vue对el-autocomplete二次封装增加下拉分页

    项目中的联想输入框现在都是采用的el-autocomplete实现的,但是数据增多就会需要做分页处理,本文主要介绍了vue对el-autocomplete二次封装增加下拉分页,感兴趣的可以了解一下
    2022-03-03
  • vue之Element-Ui输入框显示与隐藏方式

    vue之Element-Ui输入框显示与隐藏方式

    这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 在Vue中使用WebScoket 会怎么样?

    在Vue中使用WebScoket 会怎么样?

    这篇文章主要介绍了在Vue中使用WebScoket,网络的不稳定而断开连接,webscoket不会出现异常,下面就一起进入文章看看吧
    2022-01-01
  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下
    2017-12-12

最新评论