You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
5.8 KiB
217 lines
5.8 KiB
<template>
|
|
<div class="mod-log">
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
<el-form-item>
|
|
<el-input v-model="dataForm.key" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getDataList()">{{ buttons.search || '查询' }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="dataList"
|
|
:height="tableHeight"
|
|
ref="wt_table"
|
|
@mouseenter.native="mouseEnter"
|
|
@mouseleave.native="mouseLeave"
|
|
border
|
|
v-loading="dataListLoading"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="id"
|
|
header-align="center"
|
|
align="center"
|
|
width="80"
|
|
:label="buttons.id || 'ID'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="username"
|
|
header-align="center"
|
|
align="center"
|
|
:label="buttons.username || '用户名'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="operation"
|
|
header-align="center"
|
|
align="center"
|
|
:label="buttons.operation || '用户操作'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="method"
|
|
header-align="center"
|
|
align="center"
|
|
width="150"
|
|
:show-overflow-tooltip="true"
|
|
:label="buttons.method || '请求方法'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="params"
|
|
header-align="center"
|
|
align="center"
|
|
width="150"
|
|
:show-overflow-tooltip="true"
|
|
:label="buttons.params || '请求参数'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="time"
|
|
header-align="center"
|
|
align="center"
|
|
:label="buttons.time || '执行时长(毫秒)'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ip"
|
|
header-align="center"
|
|
align="center"
|
|
width="150"
|
|
:label="buttons.ip || 'IP地址'">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createDate"
|
|
header-align="center"
|
|
align="center"
|
|
width="180"
|
|
:label="buttons.createDate || '创建时间'">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="sizeChangeHandle"
|
|
@current-change="currentChangeHandle"
|
|
:current-page="pageIndex"
|
|
:page-sizes="[20, 50, 100, 200,500]"
|
|
:page-size="pageSize"
|
|
:total="totalPage"
|
|
layout="total, sizes, prev, pager, next, jumper">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
searchFunctionButtonList,
|
|
} from "@/api/sysLanguage.js"
|
|
|
|
let rolltimer = '' // 自动滚动的定时任务
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataForm: {
|
|
key: ''
|
|
},
|
|
dataList: [],
|
|
pageIndex: 1,
|
|
pageSize: 19,
|
|
totalPage: 0,
|
|
dataListLoading: false,
|
|
selectionDataList: [],
|
|
tableHeight: 0,
|
|
// 默认的刷新，滚动时间，滚动间距
|
|
refreshTime: 5,
|
|
rollTime: 5,
|
|
rollPx: 1,
|
|
buttons: {
|
|
search: '查询',
|
|
id: 'ID',
|
|
username: '用户名',
|
|
operation: '用户操作',
|
|
method: '请求方法',
|
|
params: '请求参数',
|
|
time: '执行时长(毫秒)',
|
|
ip: 'IP地址',
|
|
createDate: '创建时间',
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.getDataList()
|
|
this.getFunctionButtonList()
|
|
// this.autoRoll()
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.tableHeight = window.innerHeight - 170;
|
|
//后面的50：根据需求空出的高度，自行调整
|
|
})
|
|
},
|
|
methods: {
|
|
// 获取button的词典
|
|
getFunctionButtonList() {
|
|
let queryButton = {
|
|
functionId: this.$route.meta.menuId,
|
|
tableId: '*',
|
|
languageCode: this.$i18n.locale,
|
|
objectType: 'button'
|
|
}
|
|
searchFunctionButtonList(queryButton).then(({data}) => {
|
|
if (data.code == 0 && data.data) {
|
|
this.buttons = data.data
|
|
}
|
|
})
|
|
},
|
|
// 鼠标进入
|
|
mouseEnter(time) {
|
|
// 鼠标进入停止滚动和切换的定时任务
|
|
// this.autoRoll(true)
|
|
},
|
|
// 鼠标离开
|
|
mouseLeave() {
|
|
// 开启
|
|
//this.autoRoll()
|
|
},
|
|
// 设置自动滚动
|
|
autoRoll(stop) {
|
|
if (stop) {
|
|
clearInterval(rolltimer)
|
|
return
|
|
}
|
|
// 拿到表格挂载后的真实DOM
|
|
const table = this.$refs.wt_table
|
|
// 拿到表格中承载数据的div元素
|
|
const divData = table.bodyWrapper
|
|
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
|
|
rolltimer = setInterval(() => {
|
|
// 元素自增距离顶部像素
|
|
divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
|
|
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
|
|
if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
|
|
// 重置table距离顶部距离
|
|
divData.scrollTop = 0
|
|
}
|
|
}, this.rollTime * 10)
|
|
},
|
|
// 获取数据列表
|
|
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
|
|
})
|
|
}).then(({data}) => {
|
|
if (data && data.code === 0) {
|
|
this.dataList = data.page.list
|
|
this.totalPage = data.page.totalCount
|
|
|
|
} else {
|
|
this.dataList = []
|
|
this.totalPage = 0
|
|
}
|
|
this.dataListLoading = false
|
|
})
|
|
},
|
|
// 每页数
|
|
sizeChangeHandle(val) {
|
|
this.pageSize = val
|
|
this.pageIndex = 1
|
|
this.getDataList()
|
|
},
|
|
// 当前页
|
|
currentChangeHandle(val) {
|
|
this.pageIndex = val
|
|
this.getDataList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|