【RuoYi-Vue-Plus 实现日期范围查询 Mybatis-Plus & Element UI & JavaScript 】

Element UI 实现日期范围查询，多个日期范围查询。

---

---

前言

若依代码生成自带的日期查询通常只可以查询精确的日期，但往往实际应用开发中我们会用到一个日期的范围查询，所以我们来看看如何实现基于 Element UI + Mybatis-Plus + JavaScript 的日期范围查询，实现多个日期范围查询。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端Element - UI（DatePicker 日期选择器） 组件

---

DatePicker 日期组件

---

我们在使用 DatePicker 日期选择器的时候一定要注意加上 value-format=“yyyy-MM-dd HH:mm:ss 属性，否则会出现日期格式不匹配的情况出现。”

加上 value-format 属性以后，日期格式变为如下图所示。

前端实现了日期选择器的显示，接下来我们进行功能实现！

---

添加 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;
    }

完成后端的操作后就可以看到结果，这样就实现了两个日期范围的筛选了！

---

总结

这里对文章进行总结：

若依框架实现查询日期范围

业精于勤，荒于嬉；行成于思，毁于随