<template>
|
<div class="page">
|
<div class="page-title">
|
<div><h2>登录日志</h2><p>记录每次登录尝试的用户、来源地址、结果和时间</p></div>
|
</div>
|
<div class="table-panel">
|
<div class="toolbar">
|
<el-input v-model="filters.keyword" clearable placeholder="账户名 / 姓名" style="width:200px" @keyup.enter.native="search"></el-input>
|
<el-select v-model="filters.status" clearable placeholder="登录结果" style="width:140px">
|
<el-option label="成功" value="SUCCESS"></el-option>
|
<el-option label="失败" value="FAIL"></el-option>
|
</el-select>
|
<el-date-picker
|
v-model="filters.dates"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width:260px"
|
></el-date-picker>
|
<el-button type="primary" icon="el-icon-search" v-permission="'system:login-logs:query'" @click="search">查询</el-button>
|
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
|
</div>
|
<el-table v-loading="loading" :data="rows" border stripe height="calc(100vh - 250px)">
|
<el-table-column prop="loginTime" label="登录时间" width="180"></el-table-column>
|
<el-table-column prop="userName" label="账户名" min-width="140"></el-table-column>
|
<el-table-column prop="nickName" label="姓名" min-width="140"></el-table-column>
|
<el-table-column prop="deptName" label="所属部门" min-width="180" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="loginIp" label="登录IP" min-width="150"></el-table-column>
|
<el-table-column label="结果" width="90" align="center">
|
<template slot-scope="{ row }">
|
<el-tag size="mini" :type="row.status === 'SUCCESS' ? 'success' : 'danger'">{{ row.status === 'SUCCESS' ? '成功' : '失败' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="message" label="说明" min-width="180" show-overflow-tooltip></el-table-column>
|
</el-table>
|
<el-pagination
|
class="pager"
|
background
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
:current-page="current"
|
:page-size="size"
|
:page-sizes="[20, 50, 100]"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'LoginLogManage',
|
data() {
|
return {
|
rows: [],
|
total: 0,
|
current: 1,
|
size: 20,
|
loading: false,
|
filters: { keyword: '', status: '', dates: [] }
|
}
|
},
|
created() { this.load() },
|
methods: {
|
load() {
|
this.loading = true
|
const dates = this.filters.dates || []
|
api.get('/system/login-logs', {
|
params: {
|
keyword: this.filters.keyword || undefined,
|
status: this.filters.status || undefined,
|
startDate: dates[0] || undefined,
|
endDate: dates[1] || undefined,
|
current: this.current,
|
size: this.size
|
}
|
}).then(res => {
|
const data = res.data || {}
|
this.rows = data.records || []
|
this.total = data.total || 0
|
}).finally(() => { this.loading = false })
|
},
|
search() { this.current = 1; this.load() },
|
reset() { this.filters = { keyword: '', status: '', dates: [] }; this.search() },
|
handleCurrentChange(page) { this.current = page; this.load() },
|
handleSizeChange(size) { this.size = size; this.current = 1; this.load() }
|
}
|
}
|
</script>
|
<style scoped>
|
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
|
.pager { margin-top: 12px; text-align: right; }
|
</style>
|
