问题如下：
- 根据创建时间，表格只显示最近两天内的日志数据
- 创建时间为8小时之内的日志，将行背景色改为黄色
- 每5s刷新一次数据
前端代码如下：
<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-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-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-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>
</span>
</a-row>
</a-form>
</div>
<a-table
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
@change="handleTableChange">
<template v-if="queryParam.logType==='2'" #expandedRowRender="record">
<div 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>
</template>
<span slot="logContent" slot-scope="text, record">
<j-ellipsis :value="text" :length="40"/>
</span>
</a-table>
</a-card>
</template>
<script>
import { filterObj } from '@/utils/util';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
export default {
name: "LogList",
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: '操作人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: '日志类型',
dataIndex: 'logType_dictText',
/*customRender:function (text) {
if(text==1){
return "登录日志";
}else if(text==2){
return "操作日志";
}else{
return text;
}
},*/
align:"center",
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true
}
],
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
}
//登录日志没有操作类型
if (this.tabKey === '1') {
param.operateType = ''
}
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(1);
},
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>
