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

m87里的光

已于 2024-07-04 23:42:37 修改

阅读量529

点赞数 8

文章标签： spring boot elementui vue.js

于 2024-05-20 11:40:56 首次发布

本文链接：https://blog.csdn.net/2301_76604664/article/details/139060642

版权

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>