若依-查询列表日期时间段并附校验规则

一、实现效果

 

二、实现步骤

1.在前端页面的搜索功能控件下：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

增加一个新的搜索控件：

 <el-form-item label="起止时间"  prop="beginTime,endTime">
        <el-date-picker clearable
                        @change="checktime"
                        v-model="queryParams.beginTime"
                        type="date"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd"
                        placeholder="开始日期"
        >
        </el-date-picker>
        -
        <el-date-picker clearable
                        @change="checktime"
                        v-model="queryParams.endTime"
                        :picker-options="pickerOptions"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

然后在前端页面的data()中的queryParams中添加这两个字段

queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: null,
        endTime: null,
      },

其中 @change="checktime" 代表数值改变后验证起始时间是否超过终止时间，如果超过弹出警告，而checktime是一个函数，在

export default {

  methods: {
    /** 查询预算编辑列表 */

    checktime() {
      const time1 = new Date(this.queryParams.beginTime).getTime()
      const time2 = new Date(this.queryParams.endTime).getTime()
      console.log(time1, time2, "时间")
      if (time1 !== 0 && time2 !== 0){
        if (time1 > time2) {
          this.$set(this.queryParams, "endTime", "")
          return this.$message.error('终止日期不能小于起始日期')
        }
      }
    },
  }
}  

而

 :picker-options="pickerOptions"

被用来规定可选择的日期不能超过今天，被定义在

export default {

  data() {
    return {
      // 遮罩层
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
}

2.在后端实体类Domain文件下加入起始时间和终止时间字段，并设置set和get方法还有toString：

    /** 查询开始时间 */
    @Excel(name = "开始日期")
    private String beginTime;
    /** 查询结束时间 */
    @Excel(name = "结束日期")
    private String endTime;

    public void setbeginTime(String beginTime)
    {
        this.beginTime = beginTime;
    }
    public String getbeginTime()
    {
        return beginTime;
    }
    public void setendTime(String endTime)
    {
        this.endTime = endTime;
    }
    public String getendTime()
    {
        return endTime;
    }

toString()函数中也要加入： 

 

 然后来到mapper页面找到对应的select语句，加入

 <if test="beginTime != null">AND Budmoney_year <![CDATA[>=]]> #{beginTime}</if>
 <if test="endTime != null">AND Budmoney_year <![CDATA[<=]]>#{endTime}</if>

    <select id="selectSysBudmoney1List" parameterType="SysBudmoney1" resultMap="SysBudmoney1Result">
        <include refid="selectSysBudmoney1Vo"/>
        <where>
            .
            .
            <if test="beginTime != null">AND Budmoney_year <![CDATA[>=]]> #{beginTime}</if>
            <if test="endTime != null">AND Budmoney_year <![CDATA[<=]]>#{endTime}</if>
            .
            .
        </where>
    </select>

 注：

1、当使用SQL语句查询某个时间段的数据时，我们很自然的会想到使用between…and..来操作，但是如果使用between...and... 这个方法来查询某个时间段的数据时是需要传入两个参数的，一个是起始时间，另一个是结束时间，且两个参数必须要同时存在才能使用between...and...，而我们希望的是只传入一个参数（起始时间或者结束时间）就能进行查询。但是在使用MyBatis时如果只传入一个参数，则相应的SQL语句是不会执行的，所以不能使用between...and... 来进行某个时间段数据的查询。

2、可以使用" >= ... AND ... <=" 来解决。但是若要在MyBatis中使用，有一点需要注意：在MyBatis中使用">"和"<"时会提示"The content of elements must consist of well-formed character data or markup."这个错误，原因是使用的">"和"<"不符合xml的书写规范，所以需要把">"和"<"使用<![CDATA[ ]]>标签括起来才行。