前后端实现下拉框带条件查询（Vue+Java）

前言

对于该基本知识熟门熟路，对此总结一套自身的模版如下

总体逻辑如下：通过前端下拉框或者其他组合框（多选勾选查询），将条件返回给后端处理，后端查询数据库，查询得到的结果返回给前端页面显示

如果是下拉框单选，前端传输的是单个数据，后端只需要判断是否相等
如果是下拉框多选，前端传输的是字符串，后端通过split裁剪获取各个字符串数组来判断

总体界面如下：
在这里插入图片描述

（如下模版已默认有自身的一套数据库以及Entity类，主要供前后端接口的基本实现）
对于相关的Java知识推荐阅读：

java框架零基础从入门到精通的学习路线附开源项目面经等（超全）
【Java项目】实战CRUD的功能整理（持续更新）

1. 前端

<template>
  <el-form :inline="true" ref="formInline" :model="formInline" label-width="80px">
    <!-- 选择机种 -->
    <el-form-item label="机种">
      <el-select v-model="formInline.parentModel" multiple placeholder="机种">
        <el-option label="摩托车" value="摩托车"></el-option>
        <el-option label="汽车" value="汽车"></el-option>
        <el-option label="自行车" value="自行车"></el-option>
      </el-select>
    </el-form-item>

    <!-- 选择时间范围 -->
    <el-form-item label="周时间" prop="planTimePicker">
      <el-date-picker
        v-model="formInline.planTimePicker"
        type="daterange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="center">
      </el-date-picker>
    </el-form-item>

    <!-- 查询按钮和重置按钮 -->
    <el-form-item>
      <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
      <el-button size="small" @click="resetForm('formInline')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {getList} from "@/api/equipment/plan/weekplan";
import moment from 'moment'; // 导入日期处理库

export default {
  data() {
    return {
      // 表单数据模型
      formInline: {
        parentModel: [], // 选择的机种
        planTimePicker: null // 选择的时间范围
      },
      // 日期选择器配置
      pickerOptions: {
          shortcuts: [{
            text: '上周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为本周的第一天
              start.setDate(end.getDate() - end.getDay() - 6);
              // 设置结束日期为本周的最后一天
              end.setDate(end.getDate() - end.getDay() );
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '这周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为本周的第一天
              start.setDate(end.getDate() - end.getDay() + 1);
              // 设置结束日期为本周的最后一天
              end.setDate(end.getDate() - end.getDay() + 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '下周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              // 设置起始日期为下周的第一天
              start.setDate(end.getDate() - end.getDay() + 8);
              // 设置结束日期为下周的最后一天
              end.setDate(end.getDate() - end.getDay() + 14);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  methods: {
    // 提交查询
    onSubmit() {
      var js;
      var mTime = this.formInline.planTimePicker;
      
      var newmodel = '';
      if(this.formInline.parentModel){//添加检查
        for(var i=0;i<this.formInline.parentModel.length;i++){
          if(i==0){
            newmodel=this.formInline.parentModel[i]
          }else{
            newmodel=newmodel+'-'+this.formInline.parentModel[i]
          }
        }
      }
      
      if(mTime != null && mTime.length != 1){
        js = {
          "parentModel": newmodel,
          "planStartTime":moment(mTime[0]).format('YYYY-MM-DD'),
          "planEndTime":moment(mTime[1]).format('YYYY-MM-DD')
        };
      }else {
        js = {
          "parentModel": newmodel
        };
      }
      
      this.query = js;
      this.page.currentPage = 1;
      this.onLoad(this.page, js);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formInline.parentModel = [];
      this.formInline.planTimePicker = null;
      this.onSubmit();
    },
    // 发起搜索请求方法
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        console.log(res.data.data);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        }).catch(error => {
        console.log(error);
      }).finally(() => {
        this.loading = false;
        this.selectionClear();
      });
    },
  }
};
</script>

对应请求后端的接口如下：

import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-equipment/weekplan/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

其中涉及的快捷键选项可看如下文章：【ElementUI】详细分析DatePicker 日期选择器

2. 后端

对于后端的接口判断只需要根据前端传输的数据以及数据库的属性进行判断即可：

@GetMapping("/list")
@ApiOperationSupport(order = 2)
@ApiOperation(value = "分页", notes = "传入weekPlan")
public R<IPage<WeekPlanVO>> list(WeekPlanVO weekPlan, Query query) {
	QueryWrapper<WeekPlan> wrapper = new QueryWrapper<>();
	String parentModel =  weekPlan.getParentModel();
	if(!StringHelper.isNullOrEmptyString(parentModel)){
		wrapper.in("parent_model",parentModel.split("-"));
	}
	String planStartTime =  weekPlan.getPlanStartTime();
	String planEndTime =  weekPlan.getPlanEndTime();
	if(planStartTime != null && planEndTime != null){
		wrapper.eq("plan_time",planStartTime + "~" + planEndTime);
	}

	wrapper.orderByDesc("plan_time");
	IPage<WeekPlan> pages = weekPlanService.page(Condition.getPage(query), wrapper);
	return R.data(WeekPlanWrapper.build().pageVO(pages));

}

对应的VO类如下：

@Data
@EqualsAndHashCode(callSuper = true)
@ApiModel(value = "WeekPlanVO对象", description = "WeekPlanVO对象")
public class WeekPlanVO extends WeekPlan {
	private static final long serialVersionUID = 1L;

	/**
	 * 时间搜索开始
	 */
	private String planStartTime;

	/**
	 * 时间搜索结束
	 */
	private String planEndTime;


}

Entity类：

@Data
@TableName("equipment_week_plan")
@EqualsAndHashCode(callSuper = true)
@ApiModel(value = "WeekPlan对象", description = "WeekPlan对象")
public class WeekPlan extends BaseEntity {

	private static final long serialVersionUID = 1L;
	
	/**
	 * 设备物种
	 */
	@ApiModelProperty(value = "设备物种")
	private String parentModel;
}

其Wrapper类：

public class WeekPlanWrapper extends BaseEntityWrapper<WeekPlan, WeekPlanVO>  {

	public static WeekPlanWrapper build() {
		return new WeekPlanWrapper();
 	}

	@Override
	public WeekPlanVO entityVO(WeekPlan weekPlan) {
		WeekPlanVO weekPlanVO = Objects.requireNonNull(BeanUtil.copy(weekPlan, WeekPlanVO.class));

		return weekPlanVO;
	}

}