Element-ui 实现多个日期时间发范围查询

1、前端

<el-form-item label="生产时间">

            <el-date-picker

                v-model="dateProduct"

                style="width: 240px"

                value-format="yyyy-MM-dd"

                type="daterange"

                range-separator="-"

                start-placeholder="生产开始日期"

                end-placeholder="生产结束日期"

                :picker-options="pickerOptions"

            ></el-date-picker>

      </el-form-item>

      <el-form-item label="激活时间">

            <el-date-picker

                v-model="dateActivate"

                style="width: 240px"

                value-format="yyyy-MM-dd"

                type="daterange"

                range-separator="-"

                start-placeholder="激活开始日期"

                end-placeholder="激活结束日期"

                :picker-options="pickerOptions"

            ></el-date-picker>

      </el-form-item>

      // 别名  'CreateTime'  、'ProductTime'、'ActivateTime'

      let range=this.addDateRange(this.queryParams, this.dateRange,'CreateTime');

      range=this.addDateRange(this.queryParams, this.dateProduct,'ProductTime');

      range=this.addDateRange(this.queryParams, this.dateActivate,'ActivateTime');

------------------------------------------------------------------------------------------------------------------------

调用ruoyi.js的addDateRange方法，传递到后端参数名就会变成

beginActivateTime、endActivateTime

2、后端

接收参数：

参数:[{"params[beginActivateTime]":["2023-07-10"],"params[endCreateTime]":["2023-06-30"],"params[beginProductTime]":["2023-07-01"],"pageSize":["10"],"params[beginCreateTime]":["2023-06-01"],"params[endActivateTime]":["2023-07-14"],"params[endProductTime]":["2023-07-05"}]

解析参数：
Date beginTime = bo.getParams().get("beginCreateTime") == null ? null : DateUtils.dateTime("yyyy-MM-dd", String.valueOf(bo.getParams().get("beginCreateTime")));
Date endTime = bo.getParams().get("endCreateTime") == null ? null : DateUtils.dateTime("yyyy-MM-dd", String.valueOf(bo.getParams().get("endCreateTime")));

3、调用addDateRange

// 添加日期范围
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;
}

按照以上步骤，就可以实现多个日期范围查询；