Vue implements start time and end time range query

Vue implements start time and end time range query

This article shares with you how to query the start time and end time range in Vue for your reference. The specific content is as follows

Effect picture:

Code implementation:

OrderList.Vue

<a-col :xl="6" :lg="7" :md="8" :sm="24">
 <a-form-item label="Order Date">
  <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

 /**
     * Paginated list query *
     * @param order
     * @param pageNo
     * @param pageSize
     * @param req
     * @return
     */
    @AutoLog(value = "Order-page list query")
    @ApiOperation(value = "Order-paged list query", notes = "Order-paged list query")
    @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);
    }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue filter perfect time and date format code
  • Common time format conversion in Vue
  • Several ways of vue time conversion
  • Vue el-date-picker dynamic limit time range case detailed explanation
  • Vue prevents multiple triggering requests after continuous clicks in a short period of time
  • Vue timeline vue-light-timeline usage instructions
  • ant-design-vue time selector assigns default time operation
  • Instructions for using the date selection box mixed with the time selector in ant design vue
  • Vue formats the time in the element table to the specified format

<<:  MySQL case when usage example analysis

>>:  MySQL scheduled database backup operation example

Recommend

How to display a small icon in front of the browser URL

When you browse many websites, you will find that ...

JS implements simple calendar effect

This article shares the specific code of JS to ac...

Detailed explanation of the implementation of nginx process lock

Table of contents 1. The role of nginx process lo...

An IE crash bug

Copy code The code is as follows: <style type=...

jQuery achieves full screen scrolling effect

This article example shares the specific code of ...

The difference and execution method of select count() and select count(1)

Count(*) or Count(1) or Count([column]) are perha...

Design theory: people-oriented green design

Reflections on the two viewpoints of “people-orie...

HTML head tag detailed introduction

There are many tags and elements in the HTML head ...

Reasons and solutions for MySQL failing to create foreign keys

When associating two tables, a foreign key could ...

MySQL 5.7 JSON type usage details

JSON is a lightweight data exchange format that u...

Cleverly use CSS3's webkit-box-reflect to achieve various dynamic effects

In an article a long time ago, I talked about the...

Nginx rtmp module compilation arm version problem

Table of contents 1. Preparation: 2. Source code ...