更改登录日志，操作日志界面
This commit is contained in:
wangchengming
parent
a6e15e0b04
commit
3fa8b2b1f1
|
|
@ -1,75 +1,68 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!--导航区域-->
|
||||
<div>
|
||||
<a-tabs defaultActiveKey="1" @change="callback">
|
||||
<a-tab-pane tab="登录日志" key="1"></a-tab-pane>
|
||||
<a-tab-pane tab="操作日志" key="2"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="搜索日志">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.keyWord"></a-input>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="登录地址">
|
||||
<a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="10">
|
||||
<a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-range-picker
|
||||
style="width: 210px"
|
||||
v-model="queryParam.createTimeRange"
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
@change="onDateChange"
|
||||
@ok="onDateOk"
|
||||
/>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="登录名称">
|
||||
<a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<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-col :md="4" :sm="8">
|
||||
<a-form-item label="登录状态">
|
||||
<a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="开始日期">
|
||||
<a-date-picker v-model="queryParam.startTime" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="结束日期">
|
||||
<a-date-picker v-model="queryParam.endTime" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<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 :md="4" :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>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:620px;;overflow-y:auto;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||
<a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
|
||||
:pagination="ipagination" :loading="loading" @change="handleTableChange">
|
||||
|
||||
<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>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="logContent" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="40"/>
|
||||
<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>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="logContent" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="40" />
|
||||
</span>
|
||||
</a-table>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">详情</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -81,90 +74,88 @@ import JEllipsis from '@/components/jeecg/JEllipsis'
|
|||
|
||||
export default {
|
||||
name: "LogList",
|
||||
mixins:[JeecgListMixin],
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JEllipsis
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
description: '这是日志管理页面',
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
ipInfo:'',
|
||||
createTimeRange:[],
|
||||
logType:'1',
|
||||
keyWord:'',
|
||||
ipInfo: '',
|
||||
createTimeRange: [],
|
||||
logType: '1',
|
||||
keyWord: '',
|
||||
},
|
||||
tabKey: "1",
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
title: '访问编号',
|
||||
dataIndex: '',
|
||||
key:'rowIndex',
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
key: 'rowIndex',
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日志内容',
|
||||
align:"left",
|
||||
title: '登录名称',
|
||||
align: "left",
|
||||
dataIndex: 'logContent',
|
||||
scopedSlots: { customRender: 'logContent' },
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人ID',
|
||||
title: '登录地址',
|
||||
dataIndex: 'userid',
|
||||
align:"center",
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人名称',
|
||||
title: '浏览器',
|
||||
dataIndex: 'username',
|
||||
align:"center",
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'IP',
|
||||
title: '操作系统',
|
||||
dataIndex: 'ip',
|
||||
align:"center",
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '耗时(毫秒)',
|
||||
dataIndex: 'costTime',
|
||||
align:"center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
title: '登录状态',
|
||||
dataIndex: 'logType_dictText',
|
||||
/*customRender:function (text) {
|
||||
if(text==1){
|
||||
return "登录日志";
|
||||
}else if(text==2){
|
||||
return "操作日志";
|
||||
}else{
|
||||
return text;
|
||||
}
|
||||
},*/
|
||||
align:"center",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
align:"center",
|
||||
title: '操作信息',
|
||||
dataIndex: 'costTime',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '登录时间',
|
||||
dataIndex: 'createTime',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
operateColumn:
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operateType_dictText',
|
||||
align:"center",
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operateType_dictText',
|
||||
align: "center",
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 1 },
|
||||
sm: { span: 2 },
|
||||
|
|
@ -179,8 +170,8 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams(){
|
||||
var param = Object.assign({}, this.queryParam,this.isorter);
|
||||
getQueryParams() {
|
||||
var param = Object.assign({}, this.queryParam, this.isorter);
|
||||
param.field = this.getQueryField();
|
||||
param.pageNo = this.ipagination.current;
|
||||
param.pageSize = this.ipagination.pageSize;
|
||||
|
|
@ -193,7 +184,7 @@ export default {
|
|||
},
|
||||
|
||||
// 重置
|
||||
searchReset(){
|
||||
searchReset() {
|
||||
var that = this;
|
||||
var logType = that.queryParam.logType;
|
||||
that.queryParam = {}; //清空查询区域参数
|
||||
|
|
@ -201,26 +192,25 @@ export default {
|
|||
that.loadData(this.ipagination.current);
|
||||
},
|
||||
// 日志类型
|
||||
callback(key){
|
||||
callback(key) {
|
||||
|
||||
// 动态添加操作类型列
|
||||
if (key == 2) {
|
||||
this.tabKey = '2';
|
||||
this.columns.splice(7, 0, this.operateColumn);
|
||||
}else if(this.columns.length == 9)
|
||||
{
|
||||
} else if (this.columns.length == 9) {
|
||||
this.tabKey = '1';
|
||||
this.columns.splice(7,1);
|
||||
this.columns.splice(7, 1);
|
||||
}
|
||||
|
||||
let that=this;
|
||||
that.queryParam.logType=key;
|
||||
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];
|
||||
console.log(dateString[0], dateString[1]);
|
||||
this.queryParam.createTime_begin = dateString[0];
|
||||
this.queryParam.createTime_end = dateString[1];
|
||||
},
|
||||
onDateOk(value) {
|
||||
console.log(value);
|
||||
|
|
|
|||
207
src/views/system/OptionLog.vue
Normal file
207
src/views/system/OptionLog.vue
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="操作人员">
|
||||
<a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="开始日期">
|
||||
<a-date-picker v-model="queryParam.startTime" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="8">
|
||||
<a-form-item label="结束日期">
|
||||
<a-date-picker v-model="queryParam.endTime" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="4" :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>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||
<a-table ref="table" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
|
||||
:pagination="ipagination" :loading="loading" @change="handleTableChange">
|
||||
|
||||
<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>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="logContent" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="40" />
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">详情</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-end -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filterObj } from '@/utils/util';
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import JEllipsis from '@/components/jeecg/JEllipsis'
|
||||
|
||||
export default {
|
||||
name: "OptionLog",
|
||||
mixins: [JeecgListMixin],
|
||||
components: {
|
||||
JEllipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '这是日志管理页面',
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
ipInfo: '',
|
||||
createTimeRange: [],
|
||||
logType: '1',
|
||||
keyWord: '',
|
||||
},
|
||||
tabKey: "1",
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '日志编号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '系统模块',
|
||||
align: "left",
|
||||
dataIndex: 'logContent',
|
||||
scopedSlots: { customRender: 'logContent' },
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'username',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作地址',
|
||||
dataIndex: 'ip',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作状态',
|
||||
dataIndex: 'logType_dictText',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'createTime',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '消耗时间',
|
||||
dataIndex: 'costTime',
|
||||
align: "center",
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
operateColumn:
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operateType_dictText',
|
||||
align: "center",
|
||||
},
|
||||
labelCol: {
|
||||
xs: { span: 1 },
|
||||
sm: { span: 2 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 10 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
url: {
|
||||
list: "/sys/log/list",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getQueryParams() {
|
||||
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; // 时间参数不传递后台
|
||||
if (this.superQueryParams) {
|
||||
param['superQueryParams'] = encodeURI(this.superQueryParams)
|
||||
param['superQueryMatchType'] = this.superQueryMatchType
|
||||
}
|
||||
return filterObj(param);
|
||||
},
|
||||
|
||||
// 重置
|
||||
searchReset() {
|
||||
var that = this;
|
||||
var logType = that.queryParam.logType;
|
||||
that.queryParam = {}; //清空查询区域参数
|
||||
that.queryParam.logType = logType;
|
||||
that.loadData(this.ipagination.current);
|
||||
},
|
||||
// 日志类型
|
||||
callback(key) {
|
||||
|
||||
// 动态添加操作类型列
|
||||
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);
|
||||
}
|
||||
|
||||
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>
|
||||
@import '~@assets/less/common.less'
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user