
若依框架多个时间范围选择器的执行
- 结束时间检索 -->value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>end-placeholder=
在刚使用若依框架的时候需要使用时间范围选择器,原本想老老实实使用两个字段进行数据传输,无意观看了下若依框架后台参数传输是以map形式进行的,由此产生感想,并最终实现,记录一番。
我是在用户管理里面进行编辑
后台:因为后台需要加一个参数用来接收,而原来的框架的实体类SysUser继承了BaseEntity这个实体类这个类里面有专门的params,我们需要模仿写一个类似的,BaseEntity类:
@JsonInclude(JsonInclude.Include.NON_EMPTY) @TableField(exist = false) private Map<String, Object> params;public Map<String, Object> getParams() { if (params == null) { params = new HashMap<>(); } return params; } public void setParams(Map<String, Object> params) { this.params = params; }
我的SysUser编辑如下:
/** 请求参数 */ @JsonInclude(JsonInclude.Include.NON_EMPTY) @TableField(exist = false) private Map<String, Object> birthdayDateRange;public Map<String, Object> getBirthdayDateRange() { return birthdayDateRange; } public void setBirthdayDateRange(Map<String, Object> birthdayDateRange) { this.birthdayDateRange = birthdayDateRange; }
这样参数接收就写好了,然后看看前台,和后台一样模仿,搜索条件中
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
我们写一个我们自己的
<el-form-item label="生日">
<el-date-picker v-model="birthdayDateRange" style="width: 240px"
value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
</el-form-item>
然后ctrl+f,直接搜索dateRange,发现有四个,照着写
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.birthdayDateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
data中
// 日期范围
dateRange: [],
// 生日范围
birthdayDateRange: [],
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
重点来了,他这里有一个方法对参数进行重构,找到他,发现是在ruoyi.js中
// 添加日期范围
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;
}
我的想法是每次参数名称也不一致,而且用的也不多,倒不如直接在组件内直接定义,重构如下
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
addDateRange(params, dateRange,birthdayDateRange) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
search.birthdayDateRange = typeof (search.birthdayDateRange) === 'object' && search.birthdayDateRange !== null && !Array.isArray(search.birthdayDateRange) ? search.birthdayDateRange : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
birthdayDateRange = Array.isArray(birthdayDateRange) ? birthdayDateRange : [];
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
search.birthdayDateRange['beginTime'] = birthdayDateRange[0];
search.birthdayDateRange['endTime'] = birthdayDateRange[1];
return search;
},
其中每句话都要复制一遍,亲测都有作用不能省。
然后数据映射到后台,进行mapper修改
<if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 --> AND date_format(u.create_time,'%y%m%d') >= date_format(#{params.beginTime},'%y%m%d') </if> <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 --> AND date_format(u.create_time,'%y%m%d') <= date_format(#{params.endTime},'%y%m%d') </if> <if test="birthdayDateRange !=null and birthdayDateRange.beginTime != null and birthdayDateRange.beginTime != ''"><!-- 开始时间检索 --> AND date_format(u.birthday,'%y%m%d') >= date_format(#{birthdayDateRange.beginTime},'%y%m%d') </if> <if test="birthdayDateRange !=null and birthdayDateRange.endTime != null and birthdayDateRange.endTime != ''"><!-- 结束时间检索 --> AND date_format(u.birthday,'%y%m%d') <= date_format(#{birthdayDateRange.endTime},'%y%m%d') </if>
这里笔者也没发现框架为什么不用做对象空判断,猜测和下面的这个数据过滤有关,但没有研究。
<!-- 数据范围过滤 --> ${params.dataScope}
有问题评论区欢迎留言,也欢迎交流最后的数据过滤。
更多推荐
所有评论(0)