修复:日志显示条目

This commit is contained in:
jmal 2021-02-24 15:35:30 +08:00
parent c5361be4ca
commit 6df591caae
6 changed files with 92 additions and 48 deletions

View File

@ -66,10 +66,12 @@
<el-pagination
hide-on-single-page
background
layout="total, prev, pager, next"
layout="total,sizes, prev, pager, next, jumper"
:current-page="pagination.pageIndex"
:page-sizes="[20, 30, 50, 100]"
:page-size="pagination.pageSize"
:total="pagination.pageTotal"
@size-change="handleSizeChange"
@current-change="handlePageChange"
></el-pagination>
</div>
@ -124,30 +126,35 @@ export default {
data() {
return {
tableMaxHeight: document.documentElement.clientHeight,
multipleSelection: [],
newPagination: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
},
multipleSelection: []
};
},
mounted() {
this.setMaxHeight()
this.setMaxHeight(true)
let that = this
window.onresize = function (){
that.setMaxHeight()
}
},
methods: {
setMaxHeight(){
setMaxHeight(init) {
this.tableMaxHeight = document.documentElement.clientHeight - this.lessClientHeight
if (init) {
this.$set(this.pagination, 'pageSize', 10 + Math.round((this.tableMaxHeight - 500) / 45));
}
},
// 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selectFun', { backData: this.multipleSelection });
},
initPageIndex() {
this.$set(this.pagination, 'pageIndex', 1);
},
handleSizeChange(val) {
this.$set(this.pagination, 'pageSize', val);
this.$emit('sizeChange', { backData: this.pagination});
},
// 分页导航
handlePageChange(val) {
this.$set(this.pagination, 'pageIndex', val);

View File

@ -72,6 +72,7 @@
:tableHeader="tableHeader"
:pagination="pagination"
@pageChange="pageChange"
@sizeChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
></table-list>

View File

@ -25,8 +25,8 @@
</el-form-item>
</el-col>
<el-col v-if="!isLoginType" :sm="12" :md="isLoginType ? 8 : 5">
<el-form-item label="操作模块:">
<el-input clearable placeholder="请输入" v-model="queryCondition.operationModule"/>
<el-form-item label="ip:">
<el-input clearable placeholder="请输入" v-model="queryCondition.ip"/>
</el-form-item>
</el-col>
<el-col :sm="12" :md="isLoginType ? 8 : 5">
@ -45,8 +45,12 @@
</el-col>
<el-col :sm="12" :md="isLoginType ? 8 : 5">
<div class="el-form-actions">
<el-radio-group v-model="queryCondition.excludeUsername" size="medium" @change="queryLogList">
<el-radio-button :label="undefined">所有人</el-radio-button>
<el-radio-button label="other">其他人</el-radio-button>
</el-radio-group>
<el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary"
@click="getLogList()">查询
@click="queryLogList">查询
</el-button>
</div>
</el-col>
@ -55,13 +59,16 @@
</div>
</div>
<table-list
:less-client-height="280"
ref="tableList"
:less-client-height="245"
:tableData="dataList"
:loading="loading"
:hasSelection="false"
:tableHeader="tableHeader"
:page-index="pageIndex"
:pagination="pagination"
@pageChange="pageChange"
@sizeChange="pageChange"
@sortChange="sortChange"
></table-list>
</el-card>
@ -93,9 +100,10 @@ export default {
dataList: [],
loading: false,
// 分页信息
pageIndex: 1,
pagination: {
pageIndex: 1,
pageSize: 12,
pageSize: 10,
pageTotal: 0
},
options: [{
@ -118,8 +126,9 @@ export default {
isLoginType: this.type === 'LOGIN',
// 查询条件
queryCondition: {
excludeUsername: 'other',
username: undefined,
operationModule: undefined,
ip: undefined,
type: this.type,
startTime: undefined,
endTime: undefined
@ -163,7 +172,7 @@ export default {
let column = data.backData;
this.queryCondition.sortProp = column.prop
this.queryCondition.sortOrder = column.order
this.getLogList()
this.queryLogList()
},
//分页导航
pageChange(data) {
@ -183,6 +192,10 @@ export default {
this.tableHeader[3].disabled = false
this.tableHeader[5].minWidth = 105
}
this.queryLogList()
},
queryLogList() {
this.$refs.tableList.initPageIndex()
this.getLogList()
},
getLogList() {

View File

@ -1,52 +1,60 @@
<template>
<div>
<el-dialog class="dialog-form" width="600px" title="详情" :visible.sync="dialogVisible">
<el-form size="medium" ref="managerForm" label-width="90px" :model="detailsData">
<el-form size="medium" ref="managerForm" label-width="90px" :model="detailsData">
<el-row :gutter="10">
<el-col :sm="12">
<el-form-item label="操作人:">
<div>{{detailsData.showName}}({{detailsData.username}})</div>
<div>{{ detailsData.showName }}({{ detailsData.username }})</div>
</el-form-item>
<el-form-item label="操作模块:">
<div>{{detailsData.operationModule}}</div>
<div>{{ detailsData.operationModule }}</div>
</el-form-item>
<el-form-item label="操作时间:">
<div>{{detailsData.createTime}}</div>
<el-form-item label="设备型号:">
<div>{{ detailsData.deviceModel }}</div>
</el-form-item>
<el-form-item label="请求方式:">
<div>{{detailsData.method}}</div>
<el-form-item label="浏览器:">
<div>{{ detailsData.browser }}</div>
</el-form-item>
<el-form-item label="方式:">
<div>{{ detailsData.method }}</div>
</el-form-item>
</el-col>
<el-col :sm="12">
<el-form-item label="IP地址:">
<div>{{detailsData.ip}}</div>
<el-form-item label="操作时间:">
<div>{{ detailsData.createTime }}</div>
</el-form-item>
<el-form-item label="操作功能:">
<div>{{detailsData.operationFun}}</div>
<div>{{ detailsData.operationFun }}</div>
</el-form-item>
<el-form-item label="操作系统:">
<div>{{ detailsData.operatingSystem }}</div>
</el-form-item>
<el-form-item label="请求耗时:">
<div>{{detailsData.time}}ms</div>
<div>{{ detailsData.time }}ms</div>
</el-form-item>
<el-form-item label="请求状态:">
<el-tag size="mini" :type="detailsData.status === 0 ? 'success': 'danger'">{{detailsData.status === 0 ? '正常':'异常'}}</el-tag>
<el-tag size="mini" :type="detailsData.status === 0 ? 'success': 'danger'">
{{ detailsData.status === 0 ? '正常' : '异常' }}
</el-tag>
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col>
<el-form-item label="请求地址:">
<div>{{detailsData.url}}</div>
<el-form-item label="IP地址:">
<div>{{ detailsData.ip + " " + ipInfo }}</div>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="请求参数:">
<div>{{detailsData.params}}</div>
<el-form-item label="请求地址:">
<div>{{ detailsData.url }}</div>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="备注:">
<div>{{detailsData.remarks}}</div>
<div>{{ detailsData.remarks }}</div>
</el-form-item>
</el-col>
</el-row>
@ -69,40 +77,49 @@ export default {
data() {
return {
tableHeader: [
{prop: 'username',label: '账号', minWidth: 105, sortable: 'custom'},
{prop: 'showName',label: '用户名', minWidth: 105, sortable: 'custom'},
{prop: 'ip',label: 'IP地址', minWidth: 105, sortable: 'custom'},
{prop: 'operationModule',label: '操作模块', minWidth: 105, sortable: 'custom'},
{prop: 'operationFun',label: '操作功能', minWidth: 105, sortable: 'custom'},
{prop: 'url',label: '请求地址', minWidth: 105, sortable: 'custom'},
{prop: 'method',label: '方式', minWidth: 75, sortable: 'custom'},
{prop: 'status', minWidth: 75, label: '状态', tag: true, sortable: 'custom',
formatData: (status)=> {
if(status === 0) {
{prop: 'username', label: '账号', minWidth: 105, sortable: 'custom'},
{prop: 'showName', label: '用户名', minWidth: 105, sortable: 'custom'},
{prop: 'ip', label: 'IP地址', minWidth: 105, sortable: 'custom'},
{prop: 'operationModule', label: '操作模块', minWidth: 105, sortable: 'custom'},
{prop: 'operationFun', label: '操作功能', minWidth: 105, sortable: 'custom'},
{prop: 'url', label: '请求地址', minWidth: 105, sortable: 'custom'},
{prop: 'method', label: '方式', minWidth: 75, sortable: 'custom'},
{
prop: 'status', minWidth: 75, label: '状态', tag: true, sortable: 'custom',
formatData: (status) => {
if (status === 0) {
return [{name: '正常', type: 'success'}]
} else {
return [{name: '异常', type: 'danger'}]
}
}
},
{prop: 'time', label: '耗时', minWidth: 75, sortable: 'custom',
formatData: (time)=> {
{
prop: 'time', label: '耗时', minWidth: 75, sortable: 'custom',
formatData: (time) => {
return time + 'ms'
}
},
{prop: 'createTime',label: '创建时间', minWidth: 150, sortable: 'custom'},
{label: '操作', minWidth: 75, active: [
{prop: 'createTime', label: '创建时间', minWidth: 150, sortable: 'custom'},
{
label: '操作', minWidth: 75, active: [
{name: '详情', icon: 'el-icon-view', handle: (row) => this.details(row)},
],
},
],
dialogVisible: false,
detailsData: {},
ipInfo: {}
}
},
methods: {
details(row) {
this.detailsData = row
const ip = row.ipInfo
this.ipInfo = ""
if (ip) {
this.ipInfo = `${ip.country ? ip.country + '|' : ''}${ip.area ? ip.area + '|' : ''}${ip.province ? ip.province + '|' : ''}${ip.city ? ip.city + '|' : ''}${ip.operators ? ip.operators : ''}`
}
this.dialogVisible = true
}
}
@ -110,16 +127,20 @@ export default {
</script>
<style lang="scss" scoped>
@import "src/styles/setting";
/deep/ .box-card {
max-width: 1440px;
/deep/ .el-form-item {
margin-bottom: 20px;
}
}
/deep/ .el-form-item {
margin-bottom: 0px;
}
/deep/.el-divider--horizontal {
/deep/ .el-divider--horizontal {
margin: 10px 0;
}
</style>

View File

@ -106,6 +106,7 @@
:pagination="pagination"
:is-expand.sync="isExpand"
@pageChange="pageChange"
@sizeChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
></table-list>

View File

@ -74,6 +74,7 @@
:tableHeader="tableHeader"
:pagination="pagination"
@pageChange="pageChange"
@sizeChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
></table-list>