vue 代码
<template>
<div class="content">
<div class="table">
<el-table :data="category_data" style="width: 100%">
<el-table-column prop="id" label="编号" width="180"></el-table-column>
<el-table-column prop="name" label="账户" width="180"></el-table-column>
<el-table-column prop="modul" label="模块" width="180"></el-table-column>
<el-table-column prop="type" label="类型" width="180"></el-table-column>
<el-table-column prop="detail" label="详细介绍" width="180"></el-table-column>
<el-table-column prop="date" label="操作时间" width="180" >
<template slot-scope="scope">
{{rTime(scope.row.date)}}
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="delete_data(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
:current-page="1"
:page-size="5"
style="padding:30px 0;text-align:center;"
layout="total, prev, pager, next, jumper"
@current-change="get_allLog_data_all"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import { logfindAll, departmentSelectAll, departmentDelete, logDeleteById, logPage } from '@/api/requests/base'
import { log } from 'util'
import { rTime } from '@/utils/time'
export default {
name: 'department-manage',
data () {
return {
rTime,
category_data: [],//分页总数据
category_page_num: 1,
size: 5
}
},
created () {
this.get_allLog_data_all()
},
methods: {
get_allLog_data_all (num) {
this.category_page_num = num || 1
console.log(this.category_page_num);
logPage(this.category_page_num, 5).then(res => {
this.category_data = res.data
})
},
delete_data (category_data) {
this.$confirm('确定要删除这个部门吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
logDeleteById(category_data).then(res => {
this.$notify({
title: '成功',
message: '操作成功',
type: 'success'
});
this.get_allLog_data_all()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
}
</script>
<style lang="scss" scoped>
.content {
padding: 40px;
.el-table {
height: 50vh;
}
.el-dialog {
overflow: auto;
}
.el-table {
margin-top: 30px;
}
}
</style>
//日志模块分页1
export const logPage = (current: number, size: number) => {
return api.get(/api/log/findAllPage/${current}/${size}
)
}
后端
@GetMapping("/findAllPage/{current}/{size}")
public Result findPage(@PathVariable Integer current, @PathVariable Integer size){
List<Aclog> aclogs = aclogService.selectPage(current, size);
if(aclogs.size()>0){
return Result.success("分页查询成功",aclogs);
}else{
return Result.fail("分页查询失败");
}
}