|
|
|
@ -2,10 +2,10 @@ |
|
|
|
<div class="mod-log"> |
|
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|
|
|
<el-form-item> |
|
|
|
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input> |
|
|
|
<el-input v-model="dataForm.key" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button @click="getDataList()">查询</el-button> |
|
|
|
<el-button type="primary" @click="getDataList()">{{ buttons.search || '查询' }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table |
|
|
|
@ -22,19 +22,19 @@ |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="80" |
|
|
|
label="ID"> |
|
|
|
:label="buttons.id || 'ID'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="username" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
label="用户名"> |
|
|
|
:label="buttons.username || '用户名'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="operation" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
label="用户操作"> |
|
|
|
:label="buttons.operation || '用户操作'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="method" |
|
|
|
@ -42,7 +42,7 @@ |
|
|
|
align="center" |
|
|
|
width="150" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
label="请求方法"> |
|
|
|
:label="buttons.method || '请求方法'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="params" |
|
|
|
@ -50,27 +50,27 @@ |
|
|
|
align="center" |
|
|
|
width="150" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
label="请求参数"> |
|
|
|
:label="buttons.params || '请求参数'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="time" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
label="执行时长(毫秒)"> |
|
|
|
:label="buttons.time || '执行时长(毫秒)'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="ip" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="150" |
|
|
|
label="IP地址"> |
|
|
|
:label="buttons.ip || 'IP地址'"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="createDate" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="180" |
|
|
|
label="创建时间"> |
|
|
|
:label="buttons.createDate || '创建时间'"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
@ -86,102 +86,132 @@ |
|
|
|
</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, |
|
|
|
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 |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
created () { |
|
|
|
this.getDataList() |
|
|
|
this.autoRoll() |
|
|
|
// 鼠标进入 |
|
|
|
mouseEnter(time) { |
|
|
|
// 鼠标进入停止滚动和切换的定时任务 |
|
|
|
// this.autoRoll(true) |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.tableHeight = window.innerHeight - 170; |
|
|
|
//后面的50：根据需求空出的高度，自行调整 |
|
|
|
}) |
|
|
|
// 鼠标离开 |
|
|
|
mouseLeave() { |
|
|
|
// 开启 |
|
|
|
//this.autoRoll() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 鼠标进入 |
|
|
|
mouseEnter(time) { |
|
|
|
// 鼠标进入停止滚动和切换的定时任务 |
|
|
|
// this.autoRoll(true) |
|
|
|
}, |
|
|
|
// 鼠标离开 |
|
|
|
mouseLeave() { |
|
|
|
// 开启 |
|
|
|
//this.autoRoll() |
|
|
|
}, |
|
|
|
// 设置自动滚动 |
|
|
|
autoRoll(stop) { |
|
|
|
if (stop) { |
|
|
|
clearInterval(rolltimer) |
|
|
|
return |
|
|
|
// 设置自动滚动 |
|
|
|
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 |
|
|
|
} |
|
|
|
// 拿到表格挂载后的真实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 |
|
|
|
}, 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 |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 每页数 |
|
|
|
sizeChangeHandle (val) { |
|
|
|
this.pageSize = val |
|
|
|
this.pageIndex = 1 |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
// 当前页 |
|
|
|
currentChangeHandle (val) { |
|
|
|
this.pageIndex = val |
|
|
|
this.getDataList() |
|
|
|
} |
|
|
|
}).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> |
[li_she]
3 years ago