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

news2024/9/20 14:38:59

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