1 vue实战 时间查询处理

1.效果

 列表查询中，经常涉及到时间范围的查询，参数传到后端，需要处理一下。

2.vue 页面实现

<el-form-item label="时间" prop="startEnd">
   <el-date-picker v-model="startEnd" @change="selectDate" type="daterange" size="small" style="width: 202px" align="right"
                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
   </el-date-picker>
</el-form-item>

3.vue method处理

return里要加上startEnd

// 时间处理
selectDate() {
   if(this.startEnd === null){
             this.startEnd = [];
             this.queryParams.beginTime = undefined;
             this.queryParams.endTime = undefined;
   }else{
             this.queryParams.beginTime = this.startEnd[0];
             this.queryParams.endTime = this.startEnd[1];
  }
},

3.java后端mybatis时间处理

后端查询也需要处理一下

<if test="beginTime != null "> <![CDATA[  AND hp.project_date >= to_date(#{beginTime}, 'yyyy-mm-dd') ]]></if>
<if test="endTime != null "> <![CDATA[  AND hp.project_date <= to_date(#{endTime}, 'yyyy-mm-dd') ]]></if>

时间查询完结。