更新内容
This commit is contained in:
parent
045a1a9172
commit
7c5592c1b4
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,6 +1,4 @@
|
|||||||
# Logs
|
# Logs
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|||||||
226
src/views/system/logs/index.vue
Normal file
226
src/views/system/logs/index.vue
Normal file
@ -0,0 +1,226 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useSystemLogStore } from '../../../stores/systemLog';
|
||||||
|
import { markRaw } from 'vue';
|
||||||
|
import { Download, Delete } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
interface LogEntry {
|
||||||
|
id: number;
|
||||||
|
type: string;
|
||||||
|
user: string;
|
||||||
|
action: string;
|
||||||
|
ip: string;
|
||||||
|
status: string;
|
||||||
|
detail: string;
|
||||||
|
createTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const systemLogStore = useSystemLogStore();
|
||||||
|
|
||||||
|
// 日志类型选项
|
||||||
|
const logTypes = [
|
||||||
|
{ label: "用户操作", value: "用户操作" },
|
||||||
|
{ label: "系统配置", value: "系统配置" },
|
||||||
|
{ label: "数据操作", value: "数据操作" },
|
||||||
|
{ label: "异常警告", value: "异常警告" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 状态选项
|
||||||
|
const statusOptions = [
|
||||||
|
{ label: "成功", value: "成功" },
|
||||||
|
{ label: "失败", value: "失败" },
|
||||||
|
{ label: "警告", value: "警告" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 获取状态标签类型
|
||||||
|
const getStatusType = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case "成功":
|
||||||
|
return "success";
|
||||||
|
case "失败":
|
||||||
|
return "danger";
|
||||||
|
case "警告":
|
||||||
|
return "warning";
|
||||||
|
default:
|
||||||
|
return "info";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出日志
|
||||||
|
const handleExport = () => {
|
||||||
|
console.log("导出日志:", searchForm.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清空日志
|
||||||
|
const handleClear = () => {
|
||||||
|
systemLogStore.clearLogs();
|
||||||
|
ElMessage.success('日志已清空');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索条件
|
||||||
|
const searchForm = ref({
|
||||||
|
dateRange: [],
|
||||||
|
type: "",
|
||||||
|
user: "",
|
||||||
|
status: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 分页配置
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = ref(10);
|
||||||
|
|
||||||
|
// 重置搜索
|
||||||
|
const resetSearch = () => {
|
||||||
|
searchForm.value = {
|
||||||
|
dateRange: [],
|
||||||
|
type: "",
|
||||||
|
user: "",
|
||||||
|
status: "",
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
Download: markRaw(Download),
|
||||||
|
Delete: markRaw(Delete)
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="logs-container">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>系统日志</span>
|
||||||
|
<div class="header-btns">
|
||||||
|
<el-button type="primary" @click="handleExport">
|
||||||
|
<el-icon><component :is="icons.Download" /></el-icon>
|
||||||
|
导出日志
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" @click="handleClear">
|
||||||
|
<el-icon><component :is="icons.Delete" /></el-icon>
|
||||||
|
清空日志
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 搜索表单 -->
|
||||||
|
<el-form :model="searchForm" inline class="search-form">
|
||||||
|
<el-form-item label="时间范围">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="searchForm.dateRange"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日志类型">
|
||||||
|
<el-select v-model="searchForm.type" placeholder="请选择" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in logTypes"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="操作人">
|
||||||
|
<el-input v-model="searchForm.user" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="searchForm.status" placeholder="请选择" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in statusOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 日志表格 -->
|
||||||
|
<el-table :data="systemLogStore.getLogs" style="width: 100%">
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="type" label="日志类型" width="120" />
|
||||||
|
<el-table-column prop="user" label="操作人" width="120" />
|
||||||
|
<el-table-column prop="action" label="操作" width="120" />
|
||||||
|
<el-table-column prop="ip" label="IP地址" width="140" />
|
||||||
|
<el-table-column prop="status" label="状态" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getStatusType(row.status)" size="small">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="detail"
|
||||||
|
label="详细信息"
|
||||||
|
min-width="200"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
<el-table-column prop="createTime" label="操作时间" width="180" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页器 -->
|
||||||
|
<div class="pagination-container">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="currentPage"
|
||||||
|
v-model:page-size="pageSize"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="systemLogStore.getLogs.length"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../../../styles/variables.scss";
|
||||||
|
|
||||||
|
.logs-container {
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $text-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-btns {
|
||||||
|
.el-button {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card) {
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user