|
|
<template>
|
|
|
<div class="mod-log">
|
|
|
<!-- 搜索表单部分 -->
|
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
|
<!-- 输入框，绑定到 dataForm.key，用于搜索用户操作或者用户名 -->
|
|
|
<el-form-item>
|
|
|
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<!-- 查询按钮，点击时触发 getDataList 方法 -->
|
|
|
<el-button @click="getDataList()">查询</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<!-- 表格显示数据 -->
|
|
|
<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
|
|
|
<!-- 表格的列定义 -->
|
|
|
<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
|
|
|
<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
|
|
|
<el-table-column prop="operation" header-align="center" align="center" label="用户操作"></el-table-column>
|
|
|
<el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法"></el-table-column>
|
|
|
<el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数"></el-table-column>
|
|
|
<el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)"></el-table-column>
|
|
|
<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
|
|
|
<el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间"></el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 表单数据，包含一个搜索条件 'key'
|
|
|
dataForm: {
|
|
|
key: ''
|
|
|
},
|
|
|
// 数据列表，存储表格数据
|
|
|
dataList: [],
|
|
|
// 当前页
|
|
|
pageIndex: 1,
|
|
|
// 每页显示的数据条数
|
|
|
pageSize: 10,
|
|
|
// 总数据条数
|
|
|
totalCount: 0,
|
|
|
// 数据加载状态
|
|
|
dataListLoading: false,
|
|
|
// 选中的数据（当前表格中未使用）
|
|
|
selectionDataList: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
// 组件创建时，获取数据列表
|
|
|
this.getDataList()
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取数据列表
|
|
|
getDataList() {
|
|
|
// 启动加载状态
|
|
|
this.dataListLoading = true
|
|
|
this.$http({
|
|
|
url: this.$http.adornUrl('/sys/log/list'), // 请求日志列表接口
|
|
|
method: 'get',
|
|
|
params: this.$http.adornParams({
|
|
|
// 请求参数，包含分页、搜索关键字、排序字段、排序方式等
|
|
|
'page': this.pageIndex,
|
|
|
'limit': this.pageSize,
|
|
|
'key': this.dataForm.key, // 搜索条件
|
|
|
'sidx': 'id', // 排序字段，按照 id 排序
|
|
|
'order': 'desc' // 排序方式，降序
|
|
|
})
|
|
|
}).then(({ data }) => {
|
|
|
// 处理返回的数据
|
|
|
if (data && data.code === 200) {
|
|
|
this.dataList = data.page.list // 数据列表
|
|
|
this.totalCount = data.page.totalCount // 总条数
|
|
|
} else {
|
|
|
// 如果返回数据无效，清空数据和总数
|
|
|
this.dataList = []
|
|
|
this.totalCount = 0
|
|
|
}
|
|
|
// 完成加载
|
|
|
this.dataListLoading = false
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 每页显示条数变化时触发的函数
|
|
|
sizeChangeHandle(val) {
|
|
|
this.pageSize = val // 更新每页显示条数
|
|
|
this.pageIndex = 1 // 重置为第一页
|
|
|
this.getDataList() // 重新获取数据
|
|
|
},
|
|
|
|
|
|
// 当前页变化时触发的函数
|
|
|
currentChangeHandle(val) {
|
|
|
this.pageIndex = val // 更新当前页
|
|
|
this.getDataList() // 重新获取数据
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
