前端页面:
布局代码:template中的
<!-- 搜索选项 -->
<el-col :span="7">
<div class="inputs">
<!-- 联系人 -->
<el-checkbox label="联系人"></el-checkbox>
<el-input v-model="searchKeys.clxr" placeholder="联系人" style="width:200px;"></el-input>
</div>
</el-col>
<!-- 数据展示 -->
<div>
<el-table :data="tableData" border stripe style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" :index="indexMethod" label="排序"></el-table-column>
<el-table-column prop="csqdw" label="申请单位" width="180"></el-table-column>
<el-table-column prop="cdh" label="电话"></el-table-column>
<el-table-column prop="cbzkh" label="备注(客户)"></el-table-column>
<el-table-column prop="clxr" label="联系人"></el-table-column>
<el-table-column prop="dtbsj" label="填表时间"></el-table-column>
<el-table-column prop="cbzyy" label="备注(医院)"></el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.current"
:page-sizes="[1, 2, 3, 4]"
:page-size="page.size"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
></el-pagination>
</div>
前端逻辑代码:script中的
<script>
const cityOptions = ['支付方法名', '支付状态', '支付方式', 'his状态'];
export default {
//页面加载时调用
mounted() {
this.getTeam(this.page);
var tempInfo = localStorage.getItem(this.editFlag);
if (tempInfo != null) {
this.$refs.sureDialog.ok = () => {};
}
},
methods: {
//搜索
searchKey(){
//js对象转化为字符串
this.page.searchKeys = JSON.stringify(this.searchKeys)
this.getTeam(this.page)
},
async getTeam(page) {
try {
let getData = await this.$net.Post({
url: config.getTeam,
data: page
});
if (getData.code == 200) {
this.page = getData.data
this.tableData=getData.data.records
}
} catch (e) {
this.tip = e;
}
},
indexMethod(index) {
return index +1;
},
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
this.page.size = val;
this.getTeam(this.page);
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.page.current = val;
this.getTeam(this.page);
},
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
},
data() {
return {
searchKeys:{},
page:{
size:4
},
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
centerDialogVisible: false,
dialogVisible: false,
// 选择
options: [
{
value: '选项1',
label: '全部'
},
{
value: '选项2',
label: '已支付'
},
{
value: '选项3',
label: '未支付'
}
],
// 展示数据
tableData: []
};
}
};
</script>
java后台实现分页搜索代码
public IPage<ExamTeamAppoint> getList( MyPage p) throws NoSuchFieldException {
Page<ExamTeamAppoint> page = MyUtil.copyPropertiesIgnoreCase(p,Page.class);
QueryWrapper<ExamTeamAppoint> queryWrapper = new QueryWrapper<>();
Map <String,Object> maps = (Map)JSON.parse(p.getSearchKeys());
if(maps!=null){
for(Map.Entry<String,Object> map : maps.entrySet()){
Field declaredField = ExamTeamAppoint.class.getDeclaredField(map.getKey().toUpperCase());
Class<?> type = declaredField.getType();
if(type.equals(Date.class)){
queryWrapper.gt("DTBSJ",map.getValue());
queryWrapper.lt("DTBSJ",map.getValue());
}else if (type.equals(String.class)){
queryWrapper.like((String) ((Map.Entry)map).getKey(),map.getValue());
}
}
}
IPage<ExamTeamAppoint> pageData = page(page, queryWrapper);
return pageData;
}