重构:重构系统日志前端代码

This commit is contained in:
Charles7c 2023-02-04 00:38:22 +08:00
parent ea32b1fad6
commit d035d5a362
7 changed files with 237 additions and 267 deletions

View File

@ -43,7 +43,7 @@ public interface LogService {
* 分页查询条件 * 分页查询条件
* @return 操作日志分页信息 * @return 操作日志分页信息
*/ */
PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery); PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery);
/** /**
* 分页查询登录日志列表 * 分页查询登录日志列表
@ -54,7 +54,7 @@ public interface LogService {
* 分页查询条件 * 分页查询条件
* @return 登录日志分页信息 * @return 登录日志分页信息
*/ */
PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery); PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery);
/** /**
* 分页查询系统日志列表 * 分页查询系统日志列表
@ -65,7 +65,7 @@ public interface LogService {
* 分页查询条件 * 分页查询条件
* @return 系统日志分页信息 * @return 系统日志分页信息
*/ */
PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery); PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery);
/** /**
* 查看系统日志详情 * 查看系统日志详情
@ -74,5 +74,5 @@ public interface LogService {
* 日志 ID * 日志 ID
* @return 系统日志详情 * @return 系统日志详情
*/ */
SystemLogDetailVO detail(Long logId); SystemLogDetailVO get(Long logId);
} }

View File

@ -69,7 +69,7 @@ public class LogServiceImpl implements LogService {
} }
@Override @Override
public PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery) { public PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery) {
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query); QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
// 限定查询信息 // 限定查询信息
@ -93,7 +93,7 @@ public class LogServiceImpl implements LogService {
} }
@Override @Override
public PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery) { public PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery) {
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query); QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
queryWrapper.lambda() queryWrapper.lambda()
.and(qw -> qw.like(LogDO::getRequestUrl, "/auth/login").or().like(LogDO::getRequestUrl, "/auth/logout")); .and(qw -> qw.like(LogDO::getRequestUrl, "/auth/login").or().like(LogDO::getRequestUrl, "/auth/logout"));
@ -114,7 +114,7 @@ public class LogServiceImpl implements LogService {
} }
@Override @Override
public PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery) { public PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery) {
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query); QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
// 限定查询信息 // 限定查询信息
@ -133,7 +133,7 @@ public class LogServiceImpl implements LogService {
} }
@Override @Override
public SystemLogDetailVO detail(Long logId) { public SystemLogDetailVO get(Long logId) {
LogDO logDO = logMapper.selectById(logId); LogDO logDO = logMapper.selectById(logId);
CheckUtils.throwIfNull(logDO, String.format("ID为 [%s] 的日志已不存在", logId)); CheckUtils.throwIfNull(logDO, String.format("ID为 [%s] 的日志已不存在", logId));

View File

@ -4,7 +4,7 @@ import qs from 'query-string';
const BASE_URL = '/monitor/log'; const BASE_URL = '/monitor/log';
export interface LogRecord { export interface LogRecord {
logId: string; logId?: number;
clientIp: string; clientIp: string;
location: string; location: string;
browser: string; browser: string;
@ -52,7 +52,7 @@ export interface LoginLogListRes {
total: number; total: number;
} }
export function listLoginLogList(params: LoginLogParam) { export function listLoginLog(params: LoginLogParam) {
return axios.get<LoginLogListRes>(`${BASE_URL}/login`, { return axios.get<LoginLogListRes>(`${BASE_URL}/login`, {
params, params,
paramsSerializer: (obj) => { paramsSerializer: (obj) => {
@ -82,7 +82,7 @@ export function listOperationLog(params: OperationLogParam) {
}); });
} }
export interface SystemLogParams extends Partial<SystemLogRecord> { export interface SystemLogParam extends Partial<SystemLogRecord> {
page: number; page: number;
size: number; size: number;
sort: Array<string>; sort: Array<string>;
@ -93,7 +93,7 @@ export interface SystemLogListRes {
total: number; total: number;
} }
export function getSystemLogList(params: SystemLogParams) { export function listSystemLog(params: SystemLogParam) {
return axios.get<SystemLogListRes>(`${BASE_URL}/system`, { return axios.get<SystemLogListRes>(`${BASE_URL}/system`, {
params, params,
paramsSerializer: (obj) => { paramsSerializer: (obj) => {
@ -102,6 +102,6 @@ export function getSystemLogList(params: SystemLogParams) {
}); });
} }
export function getSystemLogDetail(logId: string) { export function getSystemLog(logId: number) {
return axios.get<SystemLogDetailRecord>(`${BASE_URL}/system/${logId}`); return axios.get<SystemLogDetailRecord>(`${BASE_URL}/system/${logId}`);
} }

View File

@ -83,9 +83,9 @@
import { getCurrentInstance, ref, toRefs, reactive } from 'vue'; import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
import { SelectOptionData } from '@arco-design/web-vue'; import { SelectOptionData } from '@arco-design/web-vue';
import { import {
LoginLogRecord,
LoginLogParam, LoginLogParam,
listLoginLogList, LoginLogRecord,
listLoginLog,
} from '@/api/monitor/log'; } from '@/api/monitor/log';
const { proxy } = getCurrentInstance() as any; const { proxy } = getCurrentInstance() as any;
@ -117,7 +117,7 @@
*/ */
const getList = (params: LoginLogParam = { ...queryParams.value }) => { const getList = (params: LoginLogParam = { ...queryParams.value }) => {
loading.value = true; loading.value = true;
listLoginLogList(params).then((res) => { listLoginLog(params).then((res) => {
loginLogList.value = res.data.list; loginLogList.value = res.data.list;
total.value = res.data.total; total.value = res.data.total;
loading.value = false; loading.value = false;

View File

@ -2,202 +2,210 @@
<div class="container"> <div class="container">
<Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" /> <Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
<a-card class="general-card" :title="$t('menu.log.system.list')"> <a-card class="general-card" :title="$t('menu.log.system.list')">
<!-- 查询 --> <!-- 头部区域 -->
<a-row style="margin-bottom: 15px"> <div class="head-container">
<a-col :span="24"> <!-- 搜索栏 -->
<a-form ref="queryFormRef" :model="queryFormData" layout="inline"> <div class="query-container">
<a-form ref="queryRef" :model="queryParams" layout="inline">
<a-form-item field="createTime" hide-label> <a-form-item field="createTime" hide-label>
<date-range-picker v-model="queryFormData.createTime" /> <date-range-picker v-model="queryParams.createTime" />
</a-form-item>
<a-form-item hide-label>
<a-space>
<a-button type="primary" @click="handleQuery">
<template #icon><icon-search /></template>查询
</a-button>
<a-button @click="resetQuery">
<template #icon><icon-refresh /></template>重置
</a-button>
</a-space>
</a-form-item> </a-form-item>
<a-button type="primary" @click="toQuery">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button @click="resetQuery">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-form> </a-form>
</a-col> </div>
</a-row> </div>
<!-- 表格 --> <!-- 列表区域 -->
<a-table <a-table
:columns="columns" ref="tableRef"
:data="renderData"
:pagination="paginationProps"
row-key="logId" row-key="logId"
:loading="loading"
:pagination="{
showTotal: true,
showPageSize: true,
total: total,
current: queryParams.page,
}"
:data="systemLogList"
:bordered="false" :bordered="false"
:stripe="true" :stripe="true"
:loading="loading"
size="large" size="large"
@page-change="handlePageChange" @page-change="handlePageChange"
@page-size-change="handlePageSizeChange" @page-size-change="handlePageSizeChange"
> >
<template #index="{ rowIndex }"> <template #columns>
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }} <a-table-column title="序号">
</template> <template #cell="{ rowIndex }">
<template #statusCode="{ record }"> {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
<a-space v-if="record.statusCode >= 400"> </template>
<a-tag color="red">{{ record.statusCode }}</a-tag> </a-table-column>
</a-space> <a-table-column title="状态码" align="center">
<a-space v-else-if="record.statusCode === 200"> <template #cell="{ record }">
<a-tag color="green">{{ record.statusCode }}</a-tag> <a-tag v-if="record.statusCode >= 400" color="red">{{ record.statusCode }}</a-tag>
</a-space> <a-tag v-else-if="record.statusCode === 200" color="green">{{ record.statusCode }}</a-tag>
<a-space v-else> <a-tag v-else color="orange">{{ record.statusCode }}</a-tag>
<a-tag color="orange">{{ record.statusCode }}</a-tag> </template>
</a-space> </a-table-column>
</template> <a-table-column title="请求方式" align="center" data-index="requestMethod" />
<template #requestUrl="{ record }"> <a-table-column title="请求 URI">
<a-space :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</a-space> <template #cell="{ record }">
</template> <span :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</span>
<template #elapsedTime="{ record }"> </template>
<a-space v-if="record.elapsedTime > 500"> </a-table-column>
<a-tag color="red">{{ record.elapsedTime }} ms</a-tag> <a-table-column title="客户端 IP" data-index="clientIp" />
</a-space> <a-table-column title="IP 归属地" data-index="location" />
<a-space v-else-if="record.elapsedTime > 200"> <a-table-column title="浏览器" data-index="browser" />
<a-tag color="orange">{{ record.elapsedTime }} ms</a-tag> <a-table-column title="请求耗时">
</a-space> <template #cell="{ record }">
<a-space v-else> <a-tag v-if="record.elapsedTime > 500" color="red">{{ record.elapsedTime }} ms</a-tag>
<a-tag color="green">{{ record.elapsedTime }} ms</a-tag> <a-tag v-else-if="record.elapsedTime > 200" color="orange">{{ record.elapsedTime }} ms</a-tag>
</a-space> <a-tag v-else color="green">{{ record.elapsedTime }} ms</a-tag>
</template> </template>
<template #operations="{ record }"> </a-table-column>
<a-button v-permission="['admin']" type="text" size="small" @click="handleClick(record.logId)">详情</a-button> <a-table-column title="创建时间" data-index="createTime" />
<a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" @click="handleExceptionDetail(record)">异常详情</a-button> <a-table-column title="操作" align="center">
<template #cell="{ record }">
<a-button v-permission="['admin']" type="text" size="small" title="查看详情" @click="toDetail(record.logId)">
<template #icon><icon-eye /></template>详情
</a-button>
<a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" title="查看异常详情" @click="toExceptionDetail(record)">
<template #icon><icon-bug /></template>异常
</a-button>
</template>
</a-table-column>
</template> </template>
</a-table> </a-table>
<!-- 窗口 --> <!-- 详情区域 -->
<a-drawer <a-drawer
:width="570" title="日志详情"
:visible="visible" :visible="visible"
:width="570"
:footer="false" :footer="false"
unmount-on-close unmount-on-close
@ok="handleOk" render-to-body
@cancel="handleCancel" @cancel="handleCancel"
> >
<template #title>日志详情</template>
<div style="margin: 10px 0 0 10px"> <div style="margin: 10px 0 0 10px">
<a-descriptions title="基础信息" :column="2" bordered> <a-descriptions title="基础信息" :column="2" bordered>
<a-descriptions-item label="客户端 IP"> <a-descriptions-item label="客户端 IP">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" /> <a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.clientIp }}</span> <span v-else>{{ systemLog.clientIp }}</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="浏览器"> <a-descriptions-item label="浏览器">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" /> <a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.browser }}</span> <span v-else>{{ systemLog.browser }}</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="IP 归属地"> <a-descriptions-item label="IP 归属地">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" /> <a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.location }}</span> <span v-else>{{ systemLog.location }}</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="请求耗时"> <a-descriptions-item label="请求耗时">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" /> <a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else> <span v-else>
<a-tag v-if="renderDetailData.elapsedTime > 500" color="red"> <a-tag v-if="systemLog.elapsedTime > 500" color="red">
{{ renderDetailData.elapsedTime }} ms {{ systemLog.elapsedTime }} ms
</a-tag> </a-tag>
<a-tag v-else-if="renderDetailData.elapsedTime > 200" color="orange"> <a-tag v-else-if="systemLog.elapsedTime > 200" color="orange">
{{ renderDetailData.elapsedTime }} ms {{ systemLog.elapsedTime }} ms
</a-tag> </a-tag>
<a-tag v-else color="green">{{ renderDetailData.elapsedTime }} ms</a-tag> <a-tag v-else color="green">{{ systemLog.elapsedTime }} ms</a-tag>
</span> </span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="创建时间"> <a-descriptions-item label="创建时间">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :widths="['200px']" :rows="1" /> <a-skeleton-line :widths="['200px']" :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.createTime }}</span> <span v-else>{{ systemLog.createTime }}</span>
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
<a-descriptions <a-descriptions title="协议信息" :column="2" bordered style="margin-top: 25px">
title="协议信息"
style="margin-top: 25px"
:column="2"
bordered
>
<a-descriptions-item label="状态码"> <a-descriptions-item label="状态码">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="1" /> <a-skeleton-line :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else> <span v-else>
<a-tag v-if="renderDetailData.statusCode >= 400" color="red">{{ renderDetailData.statusCode }}</a-tag> <a-tag v-if="systemLog.statusCode >= 400" color="red">{{ systemLog.statusCode }}</a-tag>
<a-tag v-else-if="renderDetailData.statusCode === 200" color="green">{{ renderDetailData.statusCode }}</a-tag> <a-tag v-else-if="systemLog.statusCode === 200" color="green">{{ systemLog.statusCode }}</a-tag>
<a-tag v-else color="orange">{{ renderDetailData.statusCode }}</a-tag> <a-tag v-else color="orange">{{ systemLog.statusCode }}</a-tag>
</span> </span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="请求方式"> <a-descriptions-item label="请求方式">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="1" /> <a-skeleton-line :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.requestMethod }}</span> <span v-else>{{ systemLog.requestMethod }}</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="请求 URL" :span="2"> <a-descriptions-item label="请求 URL" :span="2">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="1" /> <a-skeleton-line :rows="1" />
</a-skeleton> </a-skeleton>
<span v-else>{{ renderDetailData.requestUrl }}</span> <span v-else>{{ systemLog.requestUrl }}</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="响应体" :span="2"> <a-descriptions-item label="响应体" :span="2">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="3" /> <a-skeleton-line :rows="3" />
</a-skeleton> </a-skeleton>
<a-space v-else> <a-space v-else>
<VueJsonPretty <VueJsonPretty
v-if="renderDetailData.responseBody" v-if="systemLog.responseBody"
:path="'res'" :path="'res'"
:data="JSON.parse(renderDetailData.responseBody)" :data="JSON.parse(systemLog.responseBody)"
:show-length="true" /> :show-length="true" />
<span v-else></span> <span v-else></span>
</a-space> </a-space>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="响应头" :span="2"> <a-descriptions-item label="响应头" :span="2">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="3" /> <a-skeleton-line :rows="3" />
</a-skeleton> </a-skeleton>
<a-space v-else> <a-space v-else>
<VueJsonPretty <VueJsonPretty
v-if="renderDetailData.responseHeaders" v-if="systemLog.responseHeaders"
:path="'res'" :path="'res'"
:data="JSON.parse(renderDetailData.responseHeaders)" :data="JSON.parse(systemLog.responseHeaders)"
:show-length="true" /> :show-length="true" />
<span v-else></span> <span v-else></span>
</a-space> </a-space>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="请求体" :span="2"> <a-descriptions-item label="请求体" :span="2">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="3" /> <a-skeleton-line :rows="3" />
</a-skeleton> </a-skeleton>
<a-space v-else> <a-space v-else>
<VueJsonPretty <VueJsonPretty
v-if="renderDetailData.requestBody" v-if="systemLog.requestBody"
:path="'res'" :path="'res'"
:data="JSON.parse(renderDetailData.requestBody)" :data="JSON.parse(systemLog.requestBody)"
:show-length="true" /> :show-length="true" />
<span v-else></span> <span v-else></span>
</a-space> </a-space>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="请求头" :span="2"> <a-descriptions-item label="请求头" :span="2">
<a-skeleton v-if="detailLoading" :animation="true"> <a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="3" /> <a-skeleton-line :rows="3" />
</a-skeleton> </a-skeleton>
<a-space v-else> <a-space v-else>
<VueJsonPretty <VueJsonPretty
v-if="renderDetailData.requestHeaders" v-if="systemLog.requestHeaders"
:data="JSON.parse(renderDetailData.requestHeaders)" :data="JSON.parse(systemLog.requestHeaders)"
:show-length="true" /> :show-length="true" />
<span v-else></span> <span v-else></span>
</a-space> </a-space>
@ -206,15 +214,16 @@
</div> </div>
</a-drawer> </a-drawer>
<!-- 异常详情区域 -->
<a-modal <a-modal
title="异常详情" title="异常详情"
render-to-body
top="30px"
width="83%"
:visible="exceptionDetailVisible" :visible="exceptionDetailVisible"
width="83%"
:footer="false" :footer="false"
:mask-closable="false"
top="30px"
unmount-on-close unmount-on-close
@ok="handleExceptionDetailOk" render-to-body
@cancel="handleExceptionDetailCancel" @cancel="handleExceptionDetailCancel"
> >
<pre>{{ exceptionDetail }}</pre> <pre>{{ exceptionDetail }}</pre>
@ -224,49 +233,21 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, reactive } from 'vue'; import { getCurrentInstance, ref, toRefs, reactive, } from 'vue';
import useLoading from '@/hooks/loading';
import { import {
getSystemLogDetail, SystemLogParam,
SystemLogDetailRecord,
getSystemLogList,
SystemLogRecord, SystemLogRecord,
SystemLogParams, SystemLogDetailRecord,
listSystemLog,
getSystemLog,
} from '@/api/monitor/log'; } from '@/api/monitor/log';
import { Pagination } from '@/types/global';
import { PaginationProps } from '@arco-design/web-vue';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { FormInstance } from '@arco-design/web-vue/es/form';
import VueJsonPretty from 'vue-json-pretty'; import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css'; import 'vue-json-pretty/lib/styles.css';
const { loading, setLoading } = useLoading(true); const { proxy } = getCurrentInstance() as any;
const visible = ref(false);
const exceptionDetailVisible = ref(false); const systemLogList = ref<SystemLogRecord[]>([]);
const detailLoading = ref(false); const systemLog = ref<SystemLogDetailRecord>({
const exceptionDetail = ref();
const queryFormRef = ref<FormInstance>();
const queryFormData = ref({
createTime: [],
});
//
const toQuery = () => {
fetchData({
page: pagination.current,
size: pagination.pageSize,
sort: ['createTime,desc'],
...queryFormData.value,
} as unknown as SystemLogParams);
};
//
const resetQuery = async () => {
await queryFormRef.value?.resetFields();
await fetchData();
};
const renderData = ref<SystemLogRecord[]>([]);
const renderDetailData = ref<SystemLogDetailRecord>({
logId: '',
requestUrl: '', requestUrl: '',
requestMethod: '', requestMethod: '',
requestHeaders: '', requestHeaders: '',
@ -280,125 +261,111 @@
browser: '', browser: '',
createTime: '', createTime: '',
}); });
const basePagination: Pagination = { const total = ref(0);
current: 1, const exceptionDetail = ref('');
pageSize: 10, const loading = ref(false);
}; const visible = ref(false);
const pagination = reactive({ const exceptionDetailVisible = ref(false);
...basePagination,
});
const paginationProps = computed((): PaginationProps => {
return {
showTotal: true,
showPageSize: true,
total: pagination.total,
current: pagination.current,
}
});
const columns = computed<TableColumnData[]>(() => [
{
title: '序号',
dataIndex: 'index',
slotName: 'index',
},
{
title: '状态码',
dataIndex: 'statusCode',
slotName: 'statusCode',
align: 'center',
},
{
title: '请求方式',
dataIndex: 'requestMethod',
align: 'center',
},
{
title: '请求 URI',
dataIndex: 'requestUrl',
slotName: 'requestUrl',
},
{
title: '客户端 IP',
dataIndex: 'clientIp',
},
{
title: 'IP 归属地',
dataIndex: 'location',
},
{
title: '浏览器',
dataIndex: 'browser',
},
{
title: '请求耗时',
dataIndex: 'elapsedTime',
slotName: 'elapsedTime',
align: 'center',
},
{
title: '创建时间',
dataIndex: 'createTime',
},
{
title: '操作',
slotName: 'operations',
align: 'center',
},
]);
// const data = reactive({
const fetchData = async ( //
params: SystemLogParams = { page: 1, size: 10, sort: ['createTime,desc'] } queryParams: {
) => { createTime: undefined,
setLoading(true); page: 1,
try { size: 10,
const { data } = await getSystemLogList(params); sort: ['createTime,desc'],
renderData.value = data.list; },
pagination.current = params.page; });
pagination.total = data.total; const { queryParams } = toRefs(data);
} finally {
setLoading(false);
}
};
const handlePageChange = (current: number) => {
fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
};
const handlePageSizeChange = (pageSize: number) => {
fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
};
fetchData();
// /**
const handleClick = async (logId: string) => { * 查询列表
*
* @param params 查询参数
*/
const getList = (params: SystemLogParam = { ...queryParams.value }) => {
loading.value = true;
listSystemLog(params).then((res) => {
systemLogList.value = res.data.list;
total.value = res.data.total;
loading.value = false;
});
};
getList();
/**
* 查看详情
*
* @param id ID
*/
const toDetail = async (id: number) => {
visible.value = true; visible.value = true;
detailLoading.value = true; loading.value = true;
try { getSystemLog(id).then((res) => {
const { data } = await getSystemLogDetail(logId); systemLog.value = res.data;
renderDetailData.value = data; loading.value = false;
} finally { });
detailLoading.value = false;
}
};
const handleOk = () => {
visible.value = false;
}; };
/**
* 关闭详情
*/
const handleCancel = () => { const handleCancel = () => {
visible.value = false; visible.value = false;
} }
// /**
const handleExceptionDetail = async (record: SystemLogRecord) => { * 查看异常详情
*
* @param record 记录信息
*/
const toExceptionDetail = async (record: SystemLogRecord) => {
exceptionDetail.value = record.exceptionDetail || '';
exceptionDetailVisible.value = true; exceptionDetailVisible.value = true;
exceptionDetail.value = record.exceptionDetail;
};
const handleExceptionDetailOk = () => {
exceptionDetailVisible.value = false;
exceptionDetail.value = null;
}; };
/**
* 关闭异常详情
*/
const handleExceptionDetailCancel = () => { const handleExceptionDetailCancel = () => {
exceptionDetail.value = '';
exceptionDetailVisible.value = false; exceptionDetailVisible.value = false;
exceptionDetail.value = null;
} }
/**
* 查询
*/
const handleQuery = () => {
getList();
};
/**
* 重置
*/
const resetQuery = () => {
proxy.$refs.queryRef.resetFields();
handleQuery();
};
/**
* 切换页码
*
* @param current 页码
*/
const handlePageChange = (current: number) => {
queryParams.value.page = current;
getList();
};
/**
* 切换每页条数
*
* @param pageSize 每页条数
*/
const handlePageSizeChange = (pageSize: number) => {
queryParams.value.size = pageSize;
getList();
};
</script> </script>
<script lang="ts"> <script lang="ts">
@ -410,6 +377,9 @@
<style scoped lang="less"> <style scoped lang="less">
.container { .container {
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
.head-container {
margin-bottom: 16px
}
} }
:deep(.arco-table-th) { :deep(.arco-table-th) {
&:last-child { &:last-child {

View File

@ -74,7 +74,7 @@
type="text" type="text"
size="small" size="small"
:disabled="currentToken === record.token" :disabled="currentToken === record.token"
:title="currentToken === record.token ? '不能强退当前登录用户' : ''" :title="currentToken === record.token ? '不能强退当前登录用户' : '强退'"
> >
<template #icon><icon-delete /></template>强退 <template #icon><icon-delete /></template>强退
</a-button> </a-button>

View File

@ -58,7 +58,7 @@ public class LogController {
@Operation(summary = "分页查询登录日志列表") @Operation(summary = "分页查询登录日志列表")
@GetMapping("/login") @GetMapping("/login")
public R<PageDataVO<LoginLogVO>> page(@Validated LoginLogQuery query, @Validated PageQuery pageQuery) { public R<PageDataVO<LoginLogVO>> page(@Validated LoginLogQuery query, @Validated PageQuery pageQuery) {
PageDataVO<LoginLogVO> pageDataVO = logService.list(query, pageQuery); PageDataVO<LoginLogVO> pageDataVO = logService.page(query, pageQuery);
return R.ok(pageDataVO); return R.ok(pageDataVO);
} }
@ -66,7 +66,7 @@ public class LogController {
@Operation(summary = "分页查询操作日志列表") @Operation(summary = "分页查询操作日志列表")
@GetMapping("/operation") @GetMapping("/operation")
public R<PageDataVO<OperationLogVO>> page(@Validated OperationLogQuery query, @Validated PageQuery pageQuery) { public R<PageDataVO<OperationLogVO>> page(@Validated OperationLogQuery query, @Validated PageQuery pageQuery) {
PageDataVO<OperationLogVO> pageDataVO = logService.list(query, pageQuery); PageDataVO<OperationLogVO> pageDataVO = logService.page(query, pageQuery);
return R.ok(pageDataVO); return R.ok(pageDataVO);
} }
@ -74,7 +74,7 @@ public class LogController {
@Operation(summary = "分页查询系统日志列表") @Operation(summary = "分页查询系统日志列表")
@GetMapping("/system") @GetMapping("/system")
public R<PageDataVO<SystemLogVO>> page(@Validated SystemLogQuery query, @Validated PageQuery pageQuery) { public R<PageDataVO<SystemLogVO>> page(@Validated SystemLogQuery query, @Validated PageQuery pageQuery) {
PageDataVO<SystemLogVO> pageDataVO = logService.list(query, pageQuery); PageDataVO<SystemLogVO> pageDataVO = logService.page(query, pageQuery);
return R.ok(pageDataVO); return R.ok(pageDataVO);
} }
@ -82,7 +82,7 @@ public class LogController {
@Operation(summary = "查看系统日志详情") @Operation(summary = "查看系统日志详情")
@GetMapping("/system/{logId}") @GetMapping("/system/{logId}")
public R<SystemLogDetailVO> get(@PathVariable Long logId) { public R<SystemLogDetailVO> get(@PathVariable Long logId) {
SystemLogDetailVO detailVO = logService.detail(logId); SystemLogDetailVO detailVO = logService.get(logId);
return R.ok(detailVO); return R.ok(detailVO);
} }
} }