Element UI 实现日期范围查询，多个日期范围查询。
文章目录
前言
若依代码生成自带的日期查询通常只可以查询精确的日期，但往往实际应用开发中我们会用到一个日期的范围查询，所以我们来看看如何实现基于 Element UI + Mybatis-Plus + JavaScript 的日期范围查询，实现多个日期范围查询。
提示：以下是本篇文章正文内容，下面案例可供参考
一、前端Element - UI（DatePicker 日期选择器） 组件
我们在使用 DatePicker 日期选择器的时候一定要注意加上 value-format=“yyyy-MM-dd HH:mm:ss 属性，否则会出现日期格式不匹配的情况出现。”
加上 value-format 属性以后，日期格式变为如下图所示。
前端实现了日期选择器的显示，接下来我们进行功能实现！
扫描二维码关注公众号，回复：
15194644 查看本文章
添加 main.js 方法
vue 的 main.js 文件
import {
parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 全局方法挂载
Vue.prototype.addDateRange = addDateRange
<template>
<el-form-item label="上传时间" prop="updateTime">
<div class="block">
<el-date-picker
v-model="UpdateRange"
type="daterange"
align="right"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="操作时间" prop="checkTime">
<div class="block">
<el-date-picker
v-model="CheckRange"
type="daterange"
align="right"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
</template>
<script>
export default {
name: "DatePicker "
data() {
return{
CheckRange: [],
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
updateTime: undefined,
checkTime: undefined
},
};
},
methods: {
/** 查询数据警告列表 */
getList() {
this.loading = true;
//UpdateRange CheckRange 别名这里暂时不遵循驼峰命名法，看到后面就知道什么情况了
let range = this.addDateRange(this.queryParams,this.updateTime, 'UpdateRange');
range = this.addDateRange(this.queryParams,this.checkTime, 'CheckRange');
listData(range ).then(response => {
this.minerList = response.rows;
this.total = response.total;
this.loading = false;
});
},
},
}
</script>
调用 ruoyi.js 的 addDateRange 方法 传到后端的名称就会变成 beginUpdateRange \ endUpdateRange
// src/utils/ruoyi.js
// 添加日期范围
params: 传递参数
dateRange:日期范围 是数组
propName: 别名 用于多个时间筛选场景
--------------------------------
export function addDateRange(params, dateRange, propName) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {
};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
}
二、后端 Mybatis-Plus
1.后端 service 业务
/**
* 查询数据列表
*/
@Override
public TableDataInfo<DataVo> queryPageList(DataBo bo, PageQuery pageQuery) {
LambdaQueryWrapper<Data> lqw = buildQueryWrapper(bo);
Page<DataVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);
return TableDataInfo.build(result);
}
/**
* 查询数据列表
*/
@Override
public List<DataVo> queryList(DataBo bo) {
LambdaQueryWrapper<Data> lqw = buildQueryWrapper(bo);
return baseMapper.selectVoList(lqw);
}
private LambdaQueryWrapper<Data> buildQueryWrapper(DataBo bo) {
Map<String, Object> params = bo.getParams();
LambdaQueryWrapper<Data> lqw = Wrappers.lambdaQuery();
// mybatis-plus between方法 between(boolean condition, R column, Object val1, Object val2)
lqw.between(params.get("beginUpdateRange ") != null && params.get("endWarnRange") != null,Data::getUpdateTime, params.get("beginUpdateRange "), params.get("endoptionRange"));
lqw.between(params.get("beginCheckRange") != null && params.get("endCheckRange") != null, Data::getCheckTime, params.get("beginCheckRange"), params.get("endCheckRange"));
return lqw;
}
完成后端的操作后就可以看到结果，这样就实现了两个日期范围的筛选了！
总结
这里对文章进行总结：
若依框架实现查询日期范围
业精于勤，荒于嬉；行成于思，毁于随