a-range-picker时间范围查询前后端代码

目录

1.前端form表单

2.触发函数赋值，将选择的时间范围赋值给请求参数中的属性

3.创建对应的属性

4.后端接收实体中添加字段

5.添加MP查询条件

---

场景：根据选择的时间范围查询在此范围内创建的数据

 1.前端form表单

注：千万注意v-model不要写接口请求体的属性，单独写一个，不然会报错，这里绑定一个是为了重置按钮能够清空数据

<a-form-model-item label="创建时间">
  <a-range-picker
      show-time
      picker="month"
      v-model = "createValue"
      @change="onChange"  format="YYYY-MM-DD HH:mm:ss"
  />
</a-form-model-item>

2.触发函数赋值，将选择的时间范围赋值给请求参数中的属性

onChange(date, dateString) {
  this.formSearch.startTime = dateString[0];
  this.formSearch.endTime2 = dateString[1];
}

3.创建对应的属性

formSearch:{
    startTime:'',
    endTime2:'',
},
createValue:[],

4.后端接收实体中添加字段

@TableField(exist = false)
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime startTime;

@TableField(exist = false)
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime endTime2;

5.添加MP查询条件

if (task.getEndTime2()!=null && task.getStartTime()!=null){
	queryWrapper.between("create_time",task.getStartTime(),task.getEndTime2());
}