|
|
1
2
3
4
5
|
<template>
<a-card :bordered="false">
<!--导航区域-->
<div>
<a-tabs defaultActiveKey="1" @change="callback">
|
|
|
6
|
<a-tab-pane tab="登录日志" key="1"></a-tab-pane>
|
|
|
7
8
9
10
11
12
|
<a-tab-pane tab="操作日志" key="2"></a-tab-pane>
</a-tabs>
</div>
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
|
|
|
13
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
14
15
|
<a-row :gutter="24">
|
|
|
16
|
<a-col :md="6" :sm="8">
|
|
|
17
18
19
20
21
|
<a-form-item label="搜索日志">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
</a-form-item>
</a-col>
|
|
|
22
|
<a-col :md="6" :sm="10">
|
|
|
23
|
<a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
24
|
<a-range-picker
|
|
|
25
|
style="width: 210px"
|
|
|
26
|
v-model="queryParam.createTimeRange"
|
|
|
27
|
format="YYYY-MM-DD"
|
|
|
28
29
30
31
32
33
|
:placeholder="['开始时间', '结束时间']"
@change="onDateChange"
@ok="onDateOk"
/>
</a-form-item>
</a-col>
|
|
|
34
35
36
37
|
<a-col :md="5" :sm="8" v-if="tabKey === '2'">
<a-form-item label="操作类型" style="left: 10px">
<j-dict-select-tag v-model="queryParam.operateType" placeholder="请选择操作类型" dictCode="operate_type"/>
</a-form-item>
|
|
|
38
39
|
</a-col>
|
|
|
40
41
42
43
44
45
46
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24" >
<a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
</a-col>
</span>
|
|
|
47
48
49
50
51
|
</a-row>
</a-form>
</div>
<!-- table区域-begin -->
|
|
|
52
53
54
55
56
57
58
59
60
|
<a-table
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange">
|
|
|
61
|
|
|
|
62
63
64
65
|
<div v-show="queryParam.logType==2" slot="expandedRowRender" slot-scope="record" style="margin: 0">
<div style="margin-bottom: 5px"><a-badge status="success" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求方法:{{ record.method }}</span></div>
<div><a-badge status="processing" style="vertical-align: middle;"/><span style="vertical-align: middle;">请求参数:{{ record.requestParam }}</span></div>
</div>
|
|
|
66
67
68
69
|
<!-- 字符串超长截取省略号显示-->
<span slot="logContent" slot-scope="text, record">
<j-ellipsis :value="text" :length="40"/>
</span>
|
|
|
70
|
</a-table>
|
|
|
71
72
73
74
75
76
|
<!-- table区域-end -->
</a-card>
</template>
<script>
import { filterObj } from '@/utils/util';
|
|
|
77
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
78
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
79
80
81
|
export default {
name: "LogList",
|
|
|
82
|
mixins:[JeecgListMixin],
|
|
|
83
84
85
|
components: {
JEllipsis
},
|
|
|
86
87
88
89
90
91
92
93
94
95
|
data () {
return {
description: '这是日志管理页面',
// 查询条件
queryParam: {
ipInfo:'',
createTimeRange:[],
logType:'1',
keyWord:'',
},
|
|
|
96
|
tabKey: "1",
|
|
|
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '日志内容',
align:"left",
dataIndex: 'logContent',
|
|
|
112
|
scopedSlots: { customRender: 'logContent' },
|
|
|
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
sorter: true
},
{
title: '操作人ID',
dataIndex: 'userid',
align:"center",
sorter: true
},
{
title: '操作人名称',
dataIndex: 'username',
align:"center",
sorter: true
},
{
title: 'IP',
dataIndex: 'ip',
align:"center",
sorter: true
},
{
title: '耗时(毫秒)',
dataIndex: 'costTime',
align:"center",
sorter: true
},
{
title: '日志类型',
|
|
|
141
142
|
dataIndex: 'logType_dictText',
/*customRender:function (text) {
|
|
|
143
144
145
146
147
148
149
|
if(text==1){
return "登录日志";
}else if(text==2){
return "操作日志";
}else{
return text;
}
|
|
|
150
|
},*/
|
|
|
151
152
153
154
155
156
157
158
159
|
align:"center",
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true
}
],
|
|
|
160
161
162
163
164
165
|
operateColumn:
{
title: '操作类型',
dataIndex: 'operateType_dictText',
align:"center",
},
|
|
|
166
167
168
169
170
171
172
|
labelCol: {
xs: { span: 1 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 10 },
sm: { span: 16 },
|
|
|
173
|
},
|
|
|
174
175
|
url: {
list: "/sys/log/list",
|
|
|
176
177
178
179
180
181
182
183
184
185
186
187
188
|
},
}
},
methods: {
getQueryParams(){
console.log(this.queryParam.createTimeRange)
var param = Object.assign({}, this.queryParam,this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
delete param.createTimeRange; // 时间参数不传递后台
return filterObj(param);
},
|
|
|
189
|
|
|
|
190
191
192
193
194
195
196
197
198
199
|
// 重置
searchReset(){
var that = this;
var logType = that.queryParam.logType;
that.queryParam = {}; //清空查询区域参数
that.queryParam.logType = logType;
that.loadData(this.ipagination.current);
},
// 日志类型
callback(key){
|
|
|
200
201
202
203
204
205
206
207
208
209
210
|
// 动态添加操作类型列
if (key == 2) {
this.tabKey = '2';
this.columns.splice(7, 0, this.operateColumn);
}else if(this.columns.length == 9)
{
this.tabKey = '1';
this.columns.splice(7,1);
}
|
|
|
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
|
let that=this;
that.queryParam.logType=key;
that.loadData();
},
onDateChange: function (value, dateString) {
console.log(dateString[0],dateString[1]);
this.queryParam.createTime_begin=dateString[0];
this.queryParam.createTime_end=dateString[1];
},
onDateOk(value) {
console.log(value);
},
}
}
</script>
<style scoped>
|
|
|
227
|
@import '~@assets/less/common.less'
|
|
|
228
|
</style>
|
