更新内容
This commit is contained in:
parent
045a1a9172
commit
7c5592c1b4
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,6 +1,4 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.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