springboot+vue2+elementui實(shí)現(xiàn)時間段查詢方法

更新時間：2024年05月24日 15:20:43 作者：m87里的光

這篇文章主要介紹了springboot+vue2+elementui實(shí)現(xiàn)時間段查詢方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1.前端代碼

使用elementui的時間段選擇器：

<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文件夾對應(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è)第一個元素是開始時間
			this.endTime = itemTime[1]; // 假設(shè)第二個元素是結(jié)束時間
		} else {
			// 處理錯誤情況，比如數(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è)第一個元素是開始時間
			this.createTimeTwo = createTime[1]; // 假設(shè)第二個元素是結(jié)束時間
		} else {
			// 處理錯誤情況，比如數(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ù)組，賦值給對應(yīng)的屬性；

vue可以使用插值表達(dá)式將后端傳來的兩個時間拼接在一起：

<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)時間段查詢的文章就介紹到這了,更多相關(guān)springboot+vue2+elementui時間段查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: