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

HTML data submission post_PowerNode Java Academy

The HTTP request methods specified by the HTTP/1....

React+axios implements github search user function (sample code)

load Request Success Request failed Click cmd and...

Linux sar command usage and code example analysis

1. CPU utilization sar -p (view all day) sar -u 1...

Vue custom table column implementation process record

Table of contents Preface Rendering setTable comp...

MySQL 5.7.17 winx64 installation and configuration graphic tutorial

I summarized the previous notes on installing MyS...

js learning notes: class, super and extends keywords

Table of contents Preface 1. Create objects befor...

Solution to the problem that Docker container cannot be stopped or killed

Docker version 1.13.1 Problem Process A MySQL con...

Solution to Incorrect string value in MySQL

Many friends will report the following error when...

Implementation of Docker private warehouse registry deployment

As more and more Docker images are used, there ne...

Steps to split and compress CSS with webpack and import it with link

Let's take a look at the code file structure ...

A brief discussion on the use and analysis of nofollow tags

Controversy over nofollow There was a dispute bet...

A very detailed explanation of Linux C++ multi-thread synchronization

Table of contents 1. Mutex 1. Initialization of m...

Vue3 navigation bar component encapsulation implementation method

Encapsulate a navigation bar component in Vue3, a...