antd vue组件库日期时间范围查询

前端框架使用vue，组件库使用ant design of vue，后台框架使用springboot + mybatis plus

遇到一个时间范围查询的需求，但是查看之前的方式实现比较复杂，这里列一种实现简单的方式。

先看日期范围

前端

日期范围查询的标签如下

<a-form-item label="时间范围">
  <a-range-picker @change="onRangeChange" />
</a-form-item>

• 思路
  change函数有两个参数

change 日期范围发生变化的回调 function(dates: [moment, moment] | [string, string], dateStrings: [string, string])

输出如下可知，在dateString中基本就是我们需要的格式

• 因此查询框只需要最简单的标签调用，根据change中传出的参数进行参数处理即可。
  处理方法

onRangeChange (date, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    }

后台

后台接收

@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate startTime,
    		@DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate endTime,

mybatis plus 的Wrapper查询方式

if (startTime != null && endTime != null) {        	
        	qw.between("create_time", startTime, endTime);
        }

mybatis的xml文件查询方式

<if test="startTime != null and endTime != null">
			and create_time between #{startTime} and #{endTime}
		</if>

进一步，日期时间范围

只需要在标签上加上showTime属性，然后后台接收的时间格式调整一下即可

• 前端实例

<a-form-item label="时间范围">
	<a-range-picker showTime @change="onRangeChange" />
</a-form-item>

• 后台格式调整

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime startTime,
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime endTime,