目录
- 前言
- [1. 前端](#1. 前端)
- [2. 后端](#2. 后端)
前言
对于该基本知识熟门熟路，对此总结一套自身的模版如下
总体逻辑如下：通过前端下拉框或者其他组合框（多选勾选查询），将条件返回给后端处理，后端查询数据库，查询得到的结果返回给前端页面显示
- 如果是下拉框单选，前端传输的是单个数据，后端只需要判断是否相等
- 如果是下拉框多选，前端传输的是字符串，后端通过split裁剪获取各个字符串数组来判断
总体界面如下：
（如下模版已默认有自身的一套数据库以及Entity类，主要供前后端接口的基本实现）
对于相关的Java知识推荐阅读：
1. 前端
html
<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>对应请求后端的接口如下：
js
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. 后端
对于后端的接口判断 只需要根据前端传输的数据以及数据库的属性进行判断即可：
java
@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类如下：
java
@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类：
java
@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类：
java
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;
}
}