若依框架多个时间范围选择器的执行

在刚使用若依框架的时候需要使用时间范围选择器，原本想老老实实使用两个字段进行数据传输，无意观看了下若依框架后台参数传输是以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') &gt;= 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') &lt;= 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') &gt;= 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') &lt;= date_format(#{birthdayDateRange.endTime},'%y%m%d')
</if>

这里笔者也没发现框架为什么不用做对象空判断，猜测和下面的这个数据过滤有关，但没有研究。

<!-- 数据范围过滤 -->
${params.dataScope}

有问题评论区欢迎留言，也欢迎交流最后的数据过滤。