1 后端写好查询接口。
在service实现类里实现查询功能,利用mybatis-plus的queryWrapper查出数据,并用list接收。示例:
@Override
public List<ImageRunLog> getLogListByRecordId(Long recordId) {
IImageRunLogService runLogService = SpringUtil.getBean(IImageRunLogService.class);
LambdaQueryWrapper<ImageRunLog> queryWrapper = new LambdaQueryWrapper<>();
LambdaQueryWrapper<ImageRunLog> eq = queryWrapper.eq(ImageRunLog::getId, recordId);
List<ImageRunLog> list = runLogService.list(eq);
return list;
}
然后在controller里调用该接口,用list接收结果,注意方法名与注解路径对应好,然后return R.data(list)传至前端。示例:
@GetMapping("/getLogListByRecordId")
@ApiOperationSupport(order = 8)
@ApiOperation(value = "根据id获一条", notes = "传入recordId")
public R<List<ImageRunLog>> getLogListByRecordId(Long recordId) {
List<ImageRunLog> list = imageRunLogService.getLogListByRecordId(recordId);
return R.data(list);
}
2 前端接收处理数据
在js文件中写出同名方法,将对应参数对应好,注意url的路径。示例:
export const getLogListByRecordId = (recordId) => {
return request({
url: '/api/plugin-run-log/imagerunlog/getLogListByRecordId',
method: 'get',
params: {recordId}
})
}
在vue文件中给参数赋值并输出。在openwin()或onLoad()里赋值给data:
console.log(row)
getLogListByRecordId(row.id).then(res => {
console.log(res)
this.logData = res.data.data;
});
之后在对应的logOption { column: [ ] }里将prop字段与entity里的属性一一对应,作为列名展示数据即可:
logOption: {
height:'auto', //表格高度
calcHeight: 30, //表格高度差(主要用于减去其他部分让表格高度自适应)
tip: false,
border: true, //表格边框是否显示
dialogClickModal: true,
showHeader:true,
excelBtn:true, //表格导出按钮是否显示
addBtn:false, //是否显示添加按钮
editBtn:false, //是否显示编辑按钮
delBtn:false, //是否显示删除按钮
// excelBtn:false, //表格导出按钮是否显示
labelWidth:120, //表单前面的标题长度
refreshBtn: false, //表格上面小的 刷新按钮
columnBtn: false, //表格上面小的 列表按钮
searchBtn: false, //表格上面小的 搜索按钮
menu: false, //是否显示操作栏
column: [
{
label: "日志id", //表格的列名
prop: "id",
hide:true //是否隐藏
},
{
label: "任务类型",
prop: "taskType",
},
{
label: "任务唯一码",
prop: "taskCode",
},
{
label: "一行日志",
prop: "message",
},
]
},
/*从log表中获取数据*/
logData:[{}]