springboot+vue2+elementui實(shí)現(xiàn)時(shí)間段查詢方法
更新時(shí)間：2024年05月24日 15:20:43 作者：m87里的光
這篇文章主要介紹了springboot+vue2+elementui實(shí)現(xiàn)時(shí)間段查詢方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
1.前端代碼
使用elementui的時(shí)間段選擇器：
<el-date-picker v-model="queryPage.itemTime" type="daterange"
value-format="yyyy-MM-dd" class="filter-item"
range-separator="至" start-placeholder="創(chuàng)建日期"
end-placeholder="創(chuàng)建日期">
</el-date-picker>設(shè)置查詢字段，為數(shù)組形式：
queryPage: {
page: 1,
limit: 20,
itemTime:[],
},編寫方法，調(diào)用后端接口：
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文件夾對(duì)應(yīng)的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>查詢條件實(shí)體類
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]; // 假設(shè)第一個(gè)元素是開始時(shí)間
this.endTime = itemTime[1]; // 假設(shè)第二個(gè)元素是結(jié)束時(shí)間
} else {
// 處理錯(cuò)誤情況，比如數(shù)組為null或長度不為2
// 可以拋出異常，或者設(shè)置默認(rèn)值等
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]; // 假設(shè)第一個(gè)元素是開始時(shí)間
this.createTimeTwo = createTime[1]; // 假設(shè)第二個(gè)元素是結(jié)束時(shí)間
} else {
// 處理錯(cuò)誤情況，比如數(shù)組為null或長度不為2
// 可以拋出異常，或者設(shè)置默認(rèn)值等
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; // 每頁條數(shù)
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;
}
}這是關(guān)鍵：
將前端傳來的時(shí)間數(shù)組，賦值給對(duì)應(yīng)的屬性；
vue可以使用插值表達(dá)式將后端傳來的兩個(gè)時(shí)間拼接在一起：
<el-table-column align="left" header-align="center" label="運(yùn)維開始-至-結(jié)束日期" min-width="200">
<template slot-scope="scope">
<span>{{ scope.row.startTime }} 至 {{ scope.row.endTime }}</span>
</template>
</el-table-column>到此這篇關(guān)于springboot+vue2+elementui實(shí)現(xiàn)時(shí)間段查詢的文章就介紹到這了,更多相關(guān)springboot+vue2+elementui時(shí)間段查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Maven項(xiàng)目中讀取src/main/resources目錄下的配置文件的方法
本篇文章主要介紹了Maven項(xiàng)目中讀取src/main/resources目錄下的配置文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Spring?IOC?xml方式進(jìn)行工廠Bean操作詳解
這篇文章主要介紹了Spring?IOC?xml方式進(jìn)行工廠Bean操作，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
Java中的switch語句是一種多分支選擇結(jié)構(gòu),它允許一個(gè)變量的值等于多個(gè)不同的常量時(shí)執(zhí)行不同的代碼塊,這篇文章主要介紹了Java?switch語句支持哪些類型以及原理的相關(guān)資料,需要的朋友可以參考下2025-08-08
Java數(shù)據(jù)導(dǎo)入功能之讀取Excel文件實(shí)例
這篇文章主要介紹了Java數(shù)據(jù)導(dǎo)入功能之讀取Excel文件實(shí)例,本文給出了jar包的下載地址以及讀取Excel文件的代碼實(shí)例,需要的朋友可以參考下2015-06-06
java使用Swagger文檔報(bào)錯(cuò)“java.lang.NullPointerException:null”
文章描述了一個(gè)Java項(xiàng)目中使用Swagger文檔時(shí)遇到的問題,每次啟動(dòng)都報(bào)錯(cuò),但不影響項(xiàng)目運(yùn)行,問題原因可能是實(shí)體類中@ApiModelProperty有相同的name值或修飾符誤寫,最終通過重寫源碼代碼進(jìn)行判空處理解決了問題,此經(jīng)驗(yàn)僅供參考2026-05-05
Rxjava+Retrofit+MVP實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了Rxjava+Retrofit+MVP實(shí)現(xiàn)購物車功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
SpringBoot集成itext導(dǎo)出PDF的過程
本文介紹了如何在Spring Boot中集成iText庫導(dǎo)出PDF文件,并解決中文亂碼問題,步驟包括添加依賴、準(zhǔn)備字體、打開系統(tǒng)字體目錄選擇字體、在控制器中新增方法、創(chuàng)建并測試UserPdfExportService類,以及添加請(qǐng)求頭,感興趣的朋友一起看看吧2024-11-11
詳解mybatis如何實(shí)現(xiàn)進(jìn)行分表
在數(shù)據(jù)庫設(shè)計(jì)中,分表是一種常見的優(yōu)化策略,它可以將一個(gè)大表拆分成多個(gè)小表,以提高查詢性能和存儲(chǔ)效率,下面我們就來學(xué)習(xí)一下mybatis如何實(shí)現(xiàn)進(jìn)行分表吧2023-11-11
SpringBoot ThreadLocal實(shí)現(xiàn)公共字段自動(dòng)填充案例講解
每一次在Controller層中封裝改動(dòng)數(shù)據(jù)的方法時(shí)都要重新設(shè)置一些共性字段，顯得十分冗余。為了解決此問題也是在項(xiàng)目中第一次利用到線程，總的來說還是讓我眼前一亮，也開闊了視野，對(duì)以后的開發(fā)具有深遠(yuǎn)的意義2022-10-10
Java IO流對(duì)象的序列化和反序列化實(shí)例詳解
這篇文章主要介紹了Java IO流對(duì)象的序列化和反序列化實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05