重构：重构系统日志前端代码
This commit is contained in:
Charles7c
parent
ea32b1fad6
commit
d035d5a362
@ -43,7 +43,7 @@ public interface LogService {
|
||||
* 分页查询条件
|
||||
* @return 操作日志分页信息
|
||||
*/
|
||||
PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery);
|
||||
PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery);
|
||||
|
||||
/**
|
||||
* 分页查询登录日志列表
|
||||
@ -54,7 +54,7 @@ public interface LogService {
|
||||
* 分页查询条件
|
||||
* @return 登录日志分页信息
|
||||
*/
|
||||
PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery);
|
||||
PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery);
|
||||
|
||||
/**
|
||||
* 分页查询系统日志列表
|
||||
@ -65,7 +65,7 @@ public interface LogService {
|
||||
* 分页查询条件
|
||||
* @return 系统日志分页信息
|
||||
*/
|
||||
PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery);
|
||||
PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery);
|
||||
|
||||
/**
|
||||
* 查看系统日志详情
|
||||
@ -74,5 +74,5 @@ public interface LogService {
|
||||
* 日志 ID
|
||||
* @return 系统日志详情
|
||||
*/
|
||||
SystemLogDetailVO detail(Long logId);
|
||||
SystemLogDetailVO get(Long logId);
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ public class LogServiceImpl implements LogService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public PageDataVO<OperationLogVO> list(OperationLogQuery query, PageQuery pageQuery) {
|
||||
public PageDataVO<OperationLogVO> page(OperationLogQuery query, PageQuery pageQuery) {
|
||||
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
|
||||
|
||||
// 限定查询信息
|
||||
@ -93,7 +93,7 @@ public class LogServiceImpl implements LogService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public PageDataVO<LoginLogVO> list(LoginLogQuery query, PageQuery pageQuery) {
|
||||
public PageDataVO<LoginLogVO> page(LoginLogQuery query, PageQuery pageQuery) {
|
||||
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
|
||||
queryWrapper.lambda()
|
||||
.and(qw -> qw.like(LogDO::getRequestUrl, "/auth/login").or().like(LogDO::getRequestUrl, "/auth/logout"));
|
||||
@ -114,7 +114,7 @@ public class LogServiceImpl implements LogService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public PageDataVO<SystemLogVO> list(SystemLogQuery query, PageQuery pageQuery) {
|
||||
public PageDataVO<SystemLogVO> page(SystemLogQuery query, PageQuery pageQuery) {
|
||||
QueryWrapper<LogDO> queryWrapper = QueryHelper.build(query);
|
||||
|
||||
// 限定查询信息
|
||||
@ -133,7 +133,7 @@ public class LogServiceImpl implements LogService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public SystemLogDetailVO detail(Long logId) {
|
||||
public SystemLogDetailVO get(Long logId) {
|
||||
LogDO logDO = logMapper.selectById(logId);
|
||||
CheckUtils.throwIfNull(logDO, String.format("ID为 [%s] 的日志已不存在", logId));
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import qs from 'query-string';
|
||||
const BASE_URL = '/monitor/log';
|
||||
|
||||
export interface LogRecord {
|
||||
logId: string;
|
||||
logId?: number;
|
||||
clientIp: string;
|
||||
location: string;
|
||||
browser: string;
|
||||
@ -52,7 +52,7 @@ export interface LoginLogListRes {
|
||||
total: number;
|
||||
}
|
||||
|
||||
export function listLoginLogList(params: LoginLogParam) {
|
||||
export function listLoginLog(params: LoginLogParam) {
|
||||
return axios.get<LoginLogListRes>(`${BASE_URL}/login`, {
|
||||
params,
|
||||
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;
|
||||
size: number;
|
||||
sort: Array<string>;
|
||||
@ -93,7 +93,7 @@ export interface SystemLogListRes {
|
||||
total: number;
|
||||
}
|
||||
|
||||
export function getSystemLogList(params: SystemLogParams) {
|
||||
export function listSystemLog(params: SystemLogParam) {
|
||||
return axios.get<SystemLogListRes>(`${BASE_URL}/system`, {
|
||||
params,
|
||||
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}`);
|
||||
}
|
||||
@ -83,9 +83,9 @@
|
||||
import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
|
||||
import { SelectOptionData } from '@arco-design/web-vue';
|
||||
import {
|
||||
LoginLogRecord,
|
||||
LoginLogParam,
|
||||
listLoginLogList,
|
||||
LoginLogRecord,
|
||||
listLoginLog,
|
||||
} from '@/api/monitor/log';
|
||||
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
@ -117,7 +117,7 @@
|
||||
*/
|
||||
const getList = (params: LoginLogParam = { ...queryParams.value }) => {
|
||||
loading.value = true;
|
||||
listLoginLogList(params).then((res) => {
|
||||
listLoginLog(params).then((res) => {
|
||||
loginLogList.value = res.data.list;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
|
||||
@ -2,202 +2,210 @@
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
|
||||
<a-card class="general-card" :title="$t('menu.log.system.list')">
|
||||
<!-- 查询 -->
|
||||
<a-row style="margin-bottom: 15px">
|
||||
<a-col :span="24">
|
||||
<a-form ref="queryFormRef" :model="queryFormData" layout="inline">
|
||||
<!-- 头部区域 -->
|
||||
<div class="head-container">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="query-container">
|
||||
<a-form ref="queryRef" :model="queryParams" layout="inline">
|
||||
<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-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-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<!-- 列表区域 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="renderData"
|
||||
:pagination="paginationProps"
|
||||
ref="tableRef"
|
||||
row-key="logId"
|
||||
:loading="loading"
|
||||
:pagination="{
|
||||
showTotal: true,
|
||||
showPageSize: true,
|
||||
total: total,
|
||||
current: queryParams.page,
|
||||
}"
|
||||
:data="systemLogList"
|
||||
:bordered="false"
|
||||
:stripe="true"
|
||||
:loading="loading"
|
||||
size="large"
|
||||
@page-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
>
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
||||
</template>
|
||||
<template #statusCode="{ record }">
|
||||
<a-space v-if="record.statusCode >= 400">
|
||||
<a-tag color="red">{{ record.statusCode }}</a-tag>
|
||||
</a-space>
|
||||
<a-space v-else-if="record.statusCode === 200">
|
||||
<a-tag color="green">{{ record.statusCode }}</a-tag>
|
||||
</a-space>
|
||||
<a-space v-else>
|
||||
<a-tag color="orange">{{ record.statusCode }}</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #requestUrl="{ record }">
|
||||
<a-space :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</a-space>
|
||||
</template>
|
||||
<template #elapsedTime="{ record }">
|
||||
<a-space v-if="record.elapsedTime > 500">
|
||||
<a-tag color="red">{{ record.elapsedTime }} ms</a-tag>
|
||||
</a-space>
|
||||
<a-space v-else-if="record.elapsedTime > 200">
|
||||
<a-tag color="orange">{{ record.elapsedTime }} ms</a-tag>
|
||||
</a-space>
|
||||
<a-space v-else>
|
||||
<a-tag color="green">{{ record.elapsedTime }} ms</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<a-button v-permission="['admin']" type="text" size="small" @click="handleClick(record.logId)">详情</a-button>
|
||||
<a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" @click="handleExceptionDetail(record)">异常详情</a-button>
|
||||
<template #columns>
|
||||
<a-table-column title="序号">
|
||||
<template #cell="{ rowIndex }">
|
||||
{{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="状态码" align="center">
|
||||
<template #cell="{ record }">
|
||||
<a-tag v-if="record.statusCode >= 400" color="red">{{ record.statusCode }}</a-tag>
|
||||
<a-tag v-else-if="record.statusCode === 200" color="green">{{ record.statusCode }}</a-tag>
|
||||
<a-tag v-else color="orange">{{ record.statusCode }}</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="请求方式" align="center" data-index="requestMethod" />
|
||||
<a-table-column title="请求 URI">
|
||||
<template #cell="{ record }">
|
||||
<span :title="decodeURIComponent(record.requestUrl)">{{ record.requestUrl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/)[4] }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="客户端 IP" data-index="clientIp" />
|
||||
<a-table-column title="IP 归属地" data-index="location" />
|
||||
<a-table-column title="浏览器" data-index="browser" />
|
||||
<a-table-column title="请求耗时">
|
||||
<template #cell="{ record }">
|
||||
<a-tag v-if="record.elapsedTime > 500" color="red">{{ record.elapsedTime }} ms</a-tag>
|
||||
<a-tag v-else-if="record.elapsedTime > 200" color="orange">{{ record.elapsedTime }} ms</a-tag>
|
||||
<a-tag v-else color="green">{{ record.elapsedTime }} ms</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="创建时间" data-index="createTime" />
|
||||
<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>
|
||||
</a-table>
|
||||
|
||||
<!-- 窗口 -->
|
||||
<!-- 详情区域 -->
|
||||
<a-drawer
|
||||
:width="570"
|
||||
title="日志详情"
|
||||
:visible="visible"
|
||||
:width="570"
|
||||
:footer="false"
|
||||
unmount-on-close
|
||||
@ok="handleOk"
|
||||
render-to-body
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<template #title>日志详情</template>
|
||||
<div style="margin: 10px 0 0 10px">
|
||||
<a-descriptions title="基础信息" :column="2" bordered>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.clientIp }}</span>
|
||||
<span v-else>{{ systemLog.clientIp }}</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.browser }}</span>
|
||||
<span v-else>{{ systemLog.browser }}</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.location }}</span>
|
||||
<span v-else>{{ systemLog.location }}</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>
|
||||
<a-tag v-if="renderDetailData.elapsedTime > 500" color="red">
|
||||
{{ renderDetailData.elapsedTime }} ms
|
||||
<a-tag v-if="systemLog.elapsedTime > 500" color="red">
|
||||
{{ systemLog.elapsedTime }} ms
|
||||
</a-tag>
|
||||
<a-tag v-else-if="renderDetailData.elapsedTime > 200" color="orange">
|
||||
{{ renderDetailData.elapsedTime }} ms
|
||||
<a-tag v-else-if="systemLog.elapsedTime > 200" color="orange">
|
||||
{{ systemLog.elapsedTime }} ms
|
||||
</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>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.createTime }}</span>
|
||||
<span v-else>{{ systemLog.createTime }}</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<a-descriptions
|
||||
title="协议信息"
|
||||
style="margin-top: 25px"
|
||||
:column="2"
|
||||
bordered
|
||||
>
|
||||
<a-descriptions title="协议信息" :column="2" bordered style="margin-top: 25px">
|
||||
<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>
|
||||
<span v-else>
|
||||
<a-tag v-if="renderDetailData.statusCode >= 400" color="red">{{ renderDetailData.statusCode }}</a-tag>
|
||||
<a-tag v-else-if="renderDetailData.statusCode === 200" color="green">{{ renderDetailData.statusCode }}</a-tag>
|
||||
<a-tag v-else color="orange">{{ renderDetailData.statusCode }}</a-tag>
|
||||
<a-tag v-if="systemLog.statusCode >= 400" color="red">{{ systemLog.statusCode }}</a-tag>
|
||||
<a-tag v-else-if="systemLog.statusCode === 200" color="green">{{ systemLog.statusCode }}</a-tag>
|
||||
<a-tag v-else color="orange">{{ systemLog.statusCode }}</a-tag>
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.requestMethod }}</span>
|
||||
<span v-else>{{ systemLog.requestMethod }}</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<span v-else>{{ renderDetailData.requestUrl }}</span>
|
||||
<span v-else>{{ systemLog.requestUrl }}</span>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<a-space v-else>
|
||||
<VueJsonPretty
|
||||
v-if="renderDetailData.responseBody"
|
||||
v-if="systemLog.responseBody"
|
||||
:path="'res'"
|
||||
:data="JSON.parse(renderDetailData.responseBody)"
|
||||
:data="JSON.parse(systemLog.responseBody)"
|
||||
:show-length="true" />
|
||||
<span v-else>无</span>
|
||||
</a-space>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<a-space v-else>
|
||||
<VueJsonPretty
|
||||
v-if="renderDetailData.responseHeaders"
|
||||
v-if="systemLog.responseHeaders"
|
||||
:path="'res'"
|
||||
:data="JSON.parse(renderDetailData.responseHeaders)"
|
||||
:data="JSON.parse(systemLog.responseHeaders)"
|
||||
:show-length="true" />
|
||||
<span v-else>无</span>
|
||||
</a-space>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<a-space v-else>
|
||||
<VueJsonPretty
|
||||
v-if="renderDetailData.requestBody"
|
||||
v-if="systemLog.requestBody"
|
||||
:path="'res'"
|
||||
:data="JSON.parse(renderDetailData.requestBody)"
|
||||
:data="JSON.parse(systemLog.requestBody)"
|
||||
:show-length="true" />
|
||||
<span v-else>无</span>
|
||||
</a-space>
|
||||
</a-descriptions-item>
|
||||
<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>
|
||||
<a-space v-else>
|
||||
<VueJsonPretty
|
||||
v-if="renderDetailData.requestHeaders"
|
||||
:data="JSON.parse(renderDetailData.requestHeaders)"
|
||||
v-if="systemLog.requestHeaders"
|
||||
:data="JSON.parse(systemLog.requestHeaders)"
|
||||
:show-length="true" />
|
||||
<span v-else>无</span>
|
||||
</a-space>
|
||||
@ -206,15 +214,16 @@
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 异常详情区域 -->
|
||||
<a-modal
|
||||
title="异常详情"
|
||||
render-to-body
|
||||
top="30px"
|
||||
width="83%"
|
||||
:visible="exceptionDetailVisible"
|
||||
width="83%"
|
||||
:footer="false"
|
||||
:mask-closable="false"
|
||||
top="30px"
|
||||
unmount-on-close
|
||||
@ok="handleExceptionDetailOk"
|
||||
render-to-body
|
||||
@cancel="handleExceptionDetailCancel"
|
||||
>
|
||||
<pre>{{ exceptionDetail }}</pre>
|
||||
@ -224,49 +233,21 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { getCurrentInstance, ref, toRefs, reactive, } from 'vue';
|
||||
import {
|
||||
getSystemLogDetail,
|
||||
SystemLogDetailRecord,
|
||||
getSystemLogList,
|
||||
SystemLogParam,
|
||||
SystemLogRecord,
|
||||
SystemLogParams,
|
||||
SystemLogDetailRecord,
|
||||
listSystemLog,
|
||||
getSystemLog,
|
||||
} 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 'vue-json-pretty/lib/styles.css';
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const visible = ref(false);
|
||||
const exceptionDetailVisible = ref(false);
|
||||
const detailLoading = ref(false);
|
||||
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: '',
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
const systemLogList = ref<SystemLogRecord[]>([]);
|
||||
const systemLog = ref<SystemLogDetailRecord>({
|
||||
requestUrl: '',
|
||||
requestMethod: '',
|
||||
requestHeaders: '',
|
||||
@ -280,125 +261,111 @@
|
||||
browser: '',
|
||||
createTime: '',
|
||||
});
|
||||
const basePagination: Pagination = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
const pagination = reactive({
|
||||
...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 total = ref(0);
|
||||
const exceptionDetail = ref('');
|
||||
const loading = ref(false);
|
||||
const visible = ref(false);
|
||||
const exceptionDetailVisible = ref(false);
|
||||
|
||||
// 分页查询列表
|
||||
const fetchData = async (
|
||||
params: SystemLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await getSystemLogList(params);
|
||||
renderData.value = data.list;
|
||||
pagination.current = params.page;
|
||||
pagination.total = data.total;
|
||||
} 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 data = reactive({
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
createTime: undefined,
|
||||
page: 1,
|
||||
size: 10,
|
||||
sort: ['createTime,desc'],
|
||||
},
|
||||
});
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
// 查看详情
|
||||
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;
|
||||
detailLoading.value = true;
|
||||
try {
|
||||
const { data } = await getSystemLogDetail(logId);
|
||||
renderDetailData.value = data;
|
||||
} finally {
|
||||
detailLoading.value = false;
|
||||
}
|
||||
};
|
||||
const handleOk = () => {
|
||||
visible.value = false;
|
||||
loading.value = true;
|
||||
getSystemLog(id).then((res) => {
|
||||
systemLog.value = res.data;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭详情
|
||||
*/
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
// 查看异常详情
|
||||
const handleExceptionDetail = async (record: SystemLogRecord) => {
|
||||
/**
|
||||
* 查看异常详情
|
||||
*
|
||||
* @param record 记录信息
|
||||
*/
|
||||
const toExceptionDetail = async (record: SystemLogRecord) => {
|
||||
exceptionDetail.value = record.exceptionDetail || '';
|
||||
exceptionDetailVisible.value = true;
|
||||
exceptionDetail.value = record.exceptionDetail;
|
||||
};
|
||||
const handleExceptionDetailOk = () => {
|
||||
exceptionDetailVisible.value = false;
|
||||
exceptionDetail.value = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭异常详情
|
||||
*/
|
||||
const handleExceptionDetailCancel = () => {
|
||||
exceptionDetail.value = '';
|
||||
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 lang="ts">
|
||||
@ -410,6 +377,9 @@
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 0 20px 20px 20px;
|
||||
.head-container {
|
||||
margin-bottom: 16px
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-th) {
|
||||
&:last-child {
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
type="text"
|
||||
size="small"
|
||||
:disabled="currentToken === record.token"
|
||||
:title="currentToken === record.token ? '不能强退当前登录用户' : ''"
|
||||
:title="currentToken === record.token ? '不能强退当前登录用户' : '强退'"
|
||||
>
|
||||
<template #icon><icon-delete /></template>强退
|
||||
</a-button>
|
||||
|
||||
@ -58,7 +58,7 @@ public class LogController {
|
||||
@Operation(summary = "分页查询登录日志列表")
|
||||
@GetMapping("/login")
|
||||
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);
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ public class LogController {
|
||||
@Operation(summary = "分页查询操作日志列表")
|
||||
@GetMapping("/operation")
|
||||
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);
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@ public class LogController {
|
||||
@Operation(summary = "分页查询系统日志列表")
|
||||
@GetMapping("/system")
|
||||
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);
|
||||
}
|
||||
|
||||
@ -82,7 +82,7 @@ public class LogController {
|
||||
@Operation(summary = "查看系统日志详情")
|
||||
@GetMapping("/system/{logId}")
|
||||
public R<SystemLogDetailVO> get(@PathVariable Long logId) {
|
||||
SystemLogDetailVO detailVO = logService.detail(logId);
|
||||
SystemLogDetailVO detailVO = logService.get(logId);
|
||||
return R.ok(detailVO);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user