修复:日志显示条目
This commit is contained in:
parent
c5361be4ca
commit
6df591caae
@ -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);
|
||||
|
||||
@ -72,6 +72,7 @@
|
||||
:tableHeader="tableHeader"
|
||||
:pagination="pagination"
|
||||
@pageChange="pageChange"
|
||||
@sizeChange="pageChange"
|
||||
@selectFun="selectFun"
|
||||
@sortChange="sortChange"
|
||||
></table-list>
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -106,6 +106,7 @@
|
||||
:pagination="pagination"
|
||||
:is-expand.sync="isExpand"
|
||||
@pageChange="pageChange"
|
||||
@sizeChange="pageChange"
|
||||
@selectFun="selectFun"
|
||||
@sortChange="sortChange"
|
||||
></table-list>
|
||||
|
||||
@ -74,6 +74,7 @@
|
||||
:tableHeader="tableHeader"
|
||||
:pagination="pagination"
|
||||
@pageChange="pageChange"
|
||||
@sizeChange="pageChange"
|
||||
@selectFun="selectFun"
|
||||
@sortChange="sortChange"
|
||||
></table-list>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user