You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

101 lines
3.1 KiB

2 years ago
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="filter-wrapper">
<el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="input" placeholder="关键词" class="input-with-select" clearable>
<el-select slot="prepend" v-model="select" placeholder="请选择">
<el-option label="用户名" value="username" />
<el-option label="用户姓名" value="realName" />
<el-option label="用户操作" value="action" />
<el-option label="IP地址" value="ip" />
</el-select>
<el-button slot="append" icon="el-icon-search" @click="getDataList()">{{ $t('query') }}</el-button>
</el-input>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
style="width: 100%;"
@sort-change="dataListSortChangeHandle"
>
<el-table-column prop="creatorName" :label="'账号'" header-align="center" align="center" width="120" />
<el-table-column prop="realName" :label="'用户姓名'" header-align="center" align="center" width="120" />
<el-table-column prop="operation" :label="'用户操作'" />
<!-- <el-table-column prop="projectName" :label="'课题'" header-align="center" align="center" show-overflow-tooltip /> -->
<el-table-column prop="ip" :label="'操作IP'" width="125" header-align="center" />
<el-table-column prop="createDate" :label="'操作时间'" header-align="center" sortable="custom" width="160" />
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
/>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
export default {
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/sys/log/operation/page4User',
getDataListIsPage: true
},
select: 'action',
input: '',
dataForm: {
username: '',
realName: '',
action: '',
ip: ''
}
}
},
watch: {
select(val) { this.dataFormHandle() },
input(val) { this.dataFormHandle() }
},
methods: {
dataFormHandle() {
const inputValue = !(this.input) ? null : this.input
switch (this.select) {
case 'realName':
this.dataForm.realName = inputValue
break
case 'action':
this.dataForm.action = inputValue
break
case 'ip':
this.dataForm.ip = inputValue
break
}
}
}
}
</script>
<style lang="scss" scoped>
.input-with-select {
width: 500px;
::v-deep .el-select .el-input {
width: 120px;
}
::v-deep .el-input-group__prepend {
background-color: #fff;
}
}
</style>