springboot+vue2+elementui实现时间段查询方法
作者：m87里的光
这篇文章主要介绍了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 = true
getPage(this.queryPage).then(response => {
const { data } = response
this.tableData = data.records
this.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
@Override
public 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 createTime
FROM operation_maintenance om
left JOIN data_governance_db_dev.md_project_info mpi ON mpi.xg_pk_id = om.om_dir_id
left JOIN data_governance_db_dev.sys_user su ON su.su_id = om.om_staff_id
left 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 createTime
FROM 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 createTime
from 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;
}
@Override
public 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>到此这篇关于springboot+vue2+elementui实现时间段查询的文章就介绍到这了,更多相关springboot+vue2+elementui时间段查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！