<template>
|
<div>
|
<a-card :bordered="false" style="margin-top: 24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<!-- @submit="handleSearch" -->
|
<a-form layout="horizontal">
|
<a-row :gutter="{ md: 4, lg: 24, xl: 12 }">
|
<a-col :md="6" :sm="24">
|
<!-- wrapperCol 内容区大小（指input宽度） labelCol 左边留白大小 两者之和不能》24-->
|
<a-form-item label="帐号" :labelCol="{span:8}" :wrapperCol="{span:15}">
|
<a-input placeholder="请输入帐号" v-model="searchInform.account" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="24">
|
<a-form-item label="类型" :labelCol="{span:5}" :wrapperCol="{span:15}">
|
<a-select
|
mode="multiple"
|
placeholder="选择类型"
|
@change="handleChange"
|
v-model="selectTypeIds"
|
>
|
<a-select-option v-for="(item,index) in selectTypes" :key="index">{{item}}</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="3" :sm="24">
|
<a-date-picker
|
style="margin-top:4px;"
|
placeholder="开始日期"
|
@change="onStartTimeChange"
|
v-model="searchInform.startTime"
|
></a-date-picker>
|
</a-col>
|
|
<a-col :md="3" :sm="24">
|
<a-date-picker
|
style="margin-top:4px;"
|
placeholder="结束日期"
|
@change="onEndTimeChange"
|
v-model="searchInform.endTime"
|
></a-date-picker>
|
</a-col>
|
<a-col :md="6" :sm="24">
|
<span style="margin-top:4px;">
|
<a-button type="primary" style="margin-top:4px;" @click="this.handleSearch">查询</a-button>
|
<a-button style="margin-left: 8px;magrin-top:4px" @click="this.handleFormReset">重置</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<a-table
|
:dataSource="dataSource"
|
@change="handlerTableChange"
|
:loading="tableLoading"
|
:pagination="pagination"
|
:columns="columns"
|
>
|
<!-- slot='content1' 必须和 columns中 scopedSlots:{customRender:'content1'} 名字相同， slot-scope="content" content只是一个名字，随意取名，指代一行的信息 dataIndex:'content'一致,-->
|
<span slot="content1" slot-scope="content">
|
<h5 v-for="(item,index) in content" :key="index">{{item}}</h5>
|
</span>
|
</a-table>
|
</div>
|
</a-card>
|
</div>
|
</template>
|
|
<script lang="tsx">
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
import { get, post } from "@/util/request";
|
|
@Component({})
|
export default class logmanage extends Vue {
|
private dataSource: any[] = [];
|
|
// constructor() {
|
// super();
|
// }
|
//拿到数据需要重新赋值
|
private pagination: any = {
|
total: 0,
|
current: 0,
|
pageSize: 5,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
private searchFormLayout: any = {
|
labelCol: {
|
span: 5
|
},
|
wrapperCol: {
|
span: 18,
|
offset: 1
|
}
|
};
|
//监听4个查询内容都为空的话，就应该重新调接口
|
@Watch("searchInform.account")
|
private changeAccount(newValue: any, oldValue: any) {
|
//如果为空，或者为null，就要重新
|
if (!newValue) {
|
this.searchNull()
|
}
|
}
|
@Watch("searchInform.startTime")
|
private changeStartTime(newValue: any, oldValue: any) {
|
//如果为空，或者为null，就要重新
|
if (!newValue) {
|
this.searchNull()
|
}
|
}
|
@Watch("searchInform.endTime")
|
private changeEndTime(newValue: any, oldValue: any) {
|
//如果为空，或者为null，就要重新
|
if (!newValue) {
|
this.searchNull()
|
}
|
}
|
@Watch("selectTypeIds")
|
private changeSelectTypeIds(newValue: any, oldValue: any) {
|
//如果为空，或者为null，就要重新
|
if (!newValue.toString()) {
|
this.searchNull()
|
}
|
}
|
|
private searchNull(){
|
if(!this.searchInform.account&&!this.selectTypeIds.toString()&&!this.searchInform.startTime&&!this.searchInform.endTime){
|
this.loadData(1)
|
}
|
}
|
private searchInform: any = {
|
account: null,
|
startTime: null,
|
endTime: null
|
};
|
private selectedRowKeys: any[] = [];
|
|
private selectedRows: any[] = [];
|
private selectTypes: any[] = [];
|
private selectTypeIds: any[] = [];
|
|
private tableLoading: boolean = false;
|
private columns: any[] = [
|
{
|
title: "帐号",
|
dataIndex: "account"
|
},
|
{
|
title: "用户名",
|
dataIndex: "userName",
|
width: 100 //列宽
|
},
|
{
|
title: "类型",
|
dataIndex: "type",
|
width: 100
|
},
|
{
|
title: "ip地址",
|
dataIndex: "ip"
|
},
|
{
|
title: "创建时间",
|
dataIndex: "createTime",
|
width: 120
|
},
|
{
|
title: "内容",
|
|
dataIndex: "content",
|
scopedSlots: { customRender: "content1" }
|
}
|
];
|
|
//重置，清除查询数据，返回初始
|
private handleFormReset() {
|
this.searchInform.account = null;
|
this.searchInform.startTime = null;
|
this.searchInform.endTime = null;
|
this.handleChange([]);
|
this.loadData(1);
|
}
|
|
//切换页码，分两种，查询出来数据切换。 正常切换
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
if (
|
this.searchInform.account ||
|
(this.searchInform.startTime && this.searchInform.endTime) ||
|
this.selectTypeIds
|
) {
|
this.searchContentHttp(pagination.current);
|
} else {
|
this.loadData(pagination.current);
|
}
|
}
|
|
private handlerSelectChange(arr1: any, arr2: any) {
|
this.selectedRows = arr2;
|
}
|
//初始请求加载数据
|
private created() {
|
this.loadData(1);
|
//请求类型
|
get("dict/data/query?type=operateType", {}).then(res => {
|
this.selectTypes = res.data.data;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
private loadData(page: any) {
|
get("system/log/query", {
|
page: page,
|
size: 10,
|
order: "createTime",
|
orderType: 1
|
}).then(res => {
|
this.dataSource = res.data.data.manageLogs;
|
// console.log(this.dataSource);
|
this.pagination.current = res.data.data.current;
|
this.pagination.total = res.data.data.total;
|
this.pagination.pageSize = res.data.data.size;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
|
//查询条件不为空
|
private searchContentHttp(page: any) {
|
get("system/log/query", {
|
page: page,
|
size: 10,
|
order: "createTime",
|
orderType: 1,
|
account: this.searchInform.account ? this.searchInform.account : null,
|
type: this.selectTypeIds ? this.selectTypeIds.toString() : null, //空字符串也可以string
|
startTime: this.searchInform.startTime
|
? this.searchInform.startTime
|
: null,
|
endTime: this.searchInform.endTime ? this.searchInform.endTime : null
|
}).then(res => {
|
this.dataSource = res.data.data.manageLogs;
|
this.pagination.current = res.data.data.current;
|
this.pagination.total = res.data.data.total;
|
this.pagination.pageSize = res.data.data.size;
|
});
|
}
|
//查询会调用form表单、
|
private handleSearch(): void {
|
if (
|
this.searchInform.account ||
|
(this.searchInform.startTime && this.searchInform.endTime) ||
|
this.selectTypeIds
|
) {
|
this.searchContentHttp(1);
|
}
|
else{
|
return;
|
}
|
}
|
|
private onStartTimeChange(date: any, dateString: any) {
|
this.searchInform.startTime = dateString;
|
}
|
private onEndTimeChange(date: any, dateString: any): void {
|
this.searchInform.endTime = dateString;
|
}
|
|
|
private popupScroll() {}
|
//a-select选择的内容，
|
private handleChange(value: any): void {
|
this.selectTypeIds = value;
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
