springboot+vue2+elementui实现时间段查询

1.前端代码

使用elementui的时间段选择器：

<el-date-picker v-model="queryPage.itemTime" type="daterange"value-format="yyyy-MM-dd" class="filter-item"
range-separator="至"  start-placeholder="创建日期"  
end-placeholder="创建日期"></el-date-picker>

设置查询字段，为数组形式：

  queryPage: {page: 1,limit: 20,itemTime:[],},

编写方法，调用后端接口：

search() { // 查询this.loadList()},loadList() { // 加载列表this.tableData = []this.listLoading = truegetPage(this.queryPage).then(response => {const { data } = responsethis.tableData = data.recordsthis.total = parseInt(data.total)this.listLoading = false}).catch(response => {this.listLoading = false})},

在api文件夹对应的js添加

export function getPage(data) {return request({url: '/operationMaintenance/getPage',method: 'post',data})
}

2.后端代码

controller

@PostMapping("/getPage")public ResultData getPage(@RequestBody QueryEntry queryEntry) {IPage<OperationMaintenance> wappers = operationMaintenanceService.getPage(queryEntry);return ResultData.success("OK", wappers);}

serviceimpl

	@Overridepublic IPage<OperationMaintenance> getPage(QueryEntry queryEntry) {Page<OperationMaintenance> page = new Page<>(queryEntry.getPage(), queryEntry.getLimit());IPage<OperationMaintenance> iPage = operationMaintenanceMapper.getPage(page, queryEntry);return iPage;}

mapper

@Mapper
public interface OperationMaintenanceMapper extends BaseMapper<OperationMaintenance> {IPage<OperationMaintenance> getPage(Page<OperationMaintenance> page, @Param("queryEntry") QueryEntry queryEntry);OperationMaintenance getInfo(Long code);List<OperationMaintenance> getSelected2Page(@Param("queryEntry") QueryEntry queryEntry);
}

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todod.mapper.OperationMaintenanceMapper"><select id="getPage" resultType="com.todod.model.OperationMaintenance">SELECT om.om_id id,mc.kh_code khCode,mc.kh_name khName,mpi.xg_pk_id mid, mpi.xg_code xmCode,mpi.xg_name xmName,om.om_title title,su.su_nick_name nickName, om.om_start_time startTime,om.om_end_time endTime,om.om_content content,om.om_message message,om.om_report_id reportId,om.om_file_id fileId,om.om_state state,om.om_create_user_id createUserId,om.om_create_time createTimeFROM operation_maintenance omleft  JOIN data_governance_db_dev.md_project_info mpi ON mpi.xg_pk_id = om.om_dir_idleft JOIN data_governance_db_dev.sys_user su ON su.su_id = om.om_staff_idleft JOIN data_governance_db_dev.md_customer mc ON mc.kh_pk_id = om.om_user_id AND mpi.xg_flag_fl = 'KH'<where> 1 = 1<if test="queryEntry.getKhCode != null and queryEntry.getKhCode != '' and queryEntry.getKhCode != 'null'">and mc.kh_code like '${queryEntry.getKhCode}'</if><if test="queryEntry.getLevel != null and queryEntry.getLevel != '' and queryEntry.getLevel != 'null'">and mpi.xg_pk_id like '${queryEntry.getLevel}'</if><if test="queryEntry.getKhName != null and queryEntry.getKhName != '' and queryEntry.getKhName != 'null'">and mc.kh_name like '%${queryEntry.getKhName}%'</if><if test="queryEntry.getXmCode != null and queryEntry.getXmCode != '' and queryEntry.getXmCode != 'null'" >and mpi.xg_code like '${queryEntry.getXmCode}'</if><if test="queryEntry.getXmName != null and queryEntry.getXmName != '' and queryEntry.getXmName != 'null'" >and mpi.xg_name = '${queryEntry.getXmName}'</if><if test="queryEntry.getTitle != null and queryEntry.getTitle != '' and queryEntry.getTitle != 'null'" >and om.om_title like '%${queryEntry.getTitle}%'</if><if test="queryEntry.get_userid != null and queryEntry.get_userid != '' and queryEntry.get_userid != 'null'" >and om.om_create_user_id like '${queryEntry.get_userid}'</if><if test="queryEntry.startTime != null and queryEntry.startTime != ''"><![CDATA[ AND om.om_start_time >= #{queryEntry.startTime, jdbcType=TIMESTAMP} ]]></if><if test="queryEntry.endTime != null and queryEntry.endTime != ''"><![CDATA[ AND om.om_end_time <= #{queryEntry.endTime, jdbcType=TIMESTAMP} ]]></if><if test="queryEntry.getState != null and queryEntry.getState != '' and queryEntry.getState != 'null'" >and om.om_state = '${queryEntry.getState}'</if></where>ORDER BY om.om_create_time desc</select><select id="getInfo" resultType="com.todod.model.OperationMaintenance">SELECT om.om_id id,om.om_dir_id dirId,om.om_user_id userId,om.om_staff_id staffId,om.om_title title,om.om_start_time startTime,om.om_end_time endTime,om.om_content content,om.om_message message,om.om_report_id reportId,om.om_file_id fileId, om.om_state state,om.om_create_user_id createUserId,om.om_create_time createTimeFROM operation_maintenance om<where> 1 = 1<if test="code != null">and om.om_id = '${code}'</if></where></select><select id="getSelected2Page" resultType="com.todod.model.OperationMaintenance">select om.om_id id,om.om_dir_id dirId,om.om_user_id userId,om.om_staff_id staffId,om.om_title title,om.om_start_time startTime,om.om_end_time endTime,om.om_content content,om.om_message message,om.om_state state,om.om_create_user_id createUserId,om.om_create_time createTimefrom operation_maintenance om</select>
</mapper>

查询条件实体类

package com.todod.entity;/*** 查询条件* * @ClassName: QueryEntry* @Description:* @author gsh* @date 2019年10月11日**/
public class QueryEntry {private Long menuId;//private Long parentId;private String name;private String code;private String loginName;private String nickName;private String beginDate;private String endDate;private String state;private Long _userid;private String khName;private String khCode;private String xmCode;private String xmName;private String title;private String startTime;private String endTime;private String type;private String priority;private String status;private String itTitle;private String itCreatTime;private Long  maintenanceId;private String[] itemTime;public String[] getItemTime() {return itemTime;}public void setItemTime(String[] itemTime) {if (itemTime != null && itemTime.length == 2) {this.startTime = itemTime[0]; // 假设第一个元素是开始时间this.endTime = itemTime[1]; // 假设第二个元素是结束时间} else {// 处理错误情况，比如数组为null或长度不为2// 可以抛出异常，或者设置默认值等this.startTime = null;this.endTime = null;}}private String[] createTime;public String[] getCreateTime() {return createTime;}public void setCreateTime(String[] createTime) {if (createTime != null && createTime.length == 2) {this.createTimeOne = createTime[0]; // 假设第一个元素是开始时间this.createTimeTwo = createTime[1]; // 假设第二个元素是结束时间} else {// 处理错误情况，比如数组为null或长度不为2// 可以抛出异常，或者设置默认值等this.createTimeOne = null;this.createTimeTwo = null;}}private String createTimeOne;public String getCreateTimeOne() {return createTimeOne;}public void setCreateTimeOne(String createTimeOne) {this.createTimeOne = createTimeOne;}private String createTimeTwo;public String getCreateTimeTwo() {return createTimeTwo;}public void setCreateTimeTwo(String createTimeTwo) {this.createTimeTwo = createTimeTwo;}private Long level;public Long getLevel() {return level;}public void setLevel(Long level) {this.level = level;}public Long getMaintenanceId() {return maintenanceId;}public void setMaintenanceId(Long maintenanceId) {this.maintenanceId = maintenanceId;}public String getItTitle() {return itTitle;}public void setItTitle(String itTitle) {this.itTitle = itTitle;}public String getPriority() {return priority;}public void setPriority(String priority) {this.priority = priority;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}public String getItCreatTime() {return itCreatTime;}public void setItCreatTime(String itCreatTime) {this.itCreatTime = itCreatTime;}public String getType() {return type;}public void setType(String type) {this.type = type;}public String getKhCode() {return khCode;}public void setKhCode(String khCode) {this.khCode = khCode;}public String getXmCode() {return xmCode;}public void setXmCode(String xmCode) {this.xmCode = xmCode;}public String getXmName() {return xmName;}public void setXmName(String xmName) {this.xmName = xmName;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getStartTime() {return startTime;}public void setStartTime(String startTime) {this.startTime = startTime;}public String getEndTime() {return endTime;}public void setEndTime(String endTime) {this.endTime = endTime;}public String getKhName() {return khName;}public void setKhName(String khName) {this.khName = khName;}public Long get_userid() {return _userid;}public void set_userid(Long _userid) {this._userid = _userid;}private int page = 1; // 页码private int limit = 10; // 每页条数public int getStart() {int start = (page - 1) * limit; // 起始页码return start;}public int getPage() {return page;}public void setPage(int page) {this.page = page;}public int getLimit() {return limit;}public void setLimit(int limit) {this.limit = limit;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getNickName() {return nickName;}public void setNickName(String nickName) {this.nickName = nickName;}public String getBeginDate() {return beginDate;}public void setBeginDate(String beginDate) {this.beginDate = beginDate;}public String getEndDate() {return endDate;}public void setEndDate(String endDate) {this.endDate = endDate;}public String getState() {return state;}public void setState(String state) {this.state = state;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public Long getMenuId() {return menuId;}public void setMenuId(Long menuId) {this.menuId = menuId;}@Overridepublic String toString() {return "QueryEntry [name=" + name + ", code=" + code + ", loginName=" + loginName + ", nickName=" + nickName+ ", beginDate=" + beginDate + ", endDate=" + endDate + ", state=" + state + ", _userid=" + _userid+ ", page=" + page + ", limit=" + limit + "]";}public Long getParentId() {return _userid;}
}

这是关键：

将前端传来的时间数组，赋值给对应的属性；

vue可以使用插值表达式将后端传来的两个时间拼接在一起：

<el-table-column align="left" header-align="center" label="运维开始-至-结束日期" min-width="200"><template slot-scope="scope"><span>{{ scope.row.startTime }} 至 {{ scope.row.endTime }}</span></template></el-table-column>