feat: 新增企业级操作审计日志闭环模块（包含底层模型、记录装饰器与前端看板）
This commit is contained in:
26
inventory-web/src/api/audit.ts
Normal file
26
inventory-web/src/api/audit.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取审计日志列表
|
||||
export function getAuditLogs(params: any) {
|
||||
return request({
|
||||
url: '/audit/logs',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取审计日志详情
|
||||
export function getAuditLogDetail(logId: number) {
|
||||
return request({
|
||||
url: `/audit/logs/${logId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取可选模块列表
|
||||
export function getAuditModules() {
|
||||
return request({
|
||||
url: '/audit/modules',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
276
inventory-web/src/views/system/AuditLog.vue
Normal file
276
inventory-web/src/views/system/AuditLog.vue
Normal file
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span style="font-weight: bold;">操作审计日志</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 搜索条件 -->
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="操作人">
|
||||
<el-input v-model="queryParams.username" placeholder="请输入操作人账号" clearable @keyup.enter="handleQuery" style="width: 150px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模块">
|
||||
<el-select v-model="queryParams.module" placeholder="请选择模块" clearable style="width: 150px">
|
||||
<el-option v-for="item in moduleOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型">
|
||||
<el-select v-model="queryParams.action" placeholder="请选择操作类型" clearable style="width: 120px">
|
||||
<el-option v-for="item in actionOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery" :loading="tableLoading">
|
||||
<el-icon><Search /></el-icon>搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon><Refresh /></el-icon>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table v-loading="tableLoading" :data="tableData" border stripe>
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="username" label="操作人" width="120" />
|
||||
<el-table-column prop="display_name" label="姓名" width="100" />
|
||||
<el-table-column prop="module" label="模块" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.module }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="action" label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getActionType(scope.row.action)">{{ scope.row.action }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="target_name" label="操作对象" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="ip_address" label="IP地址" width="130" />
|
||||
<el-table-column prop="created_at" label="操作时间" width="170" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button v-if="scope.row.details" link type="primary" size="small" @click="handleViewDetails(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<span v-else class="text-gray">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="getList"
|
||||
@current-change="getList"
|
||||
style="margin-top: 20px"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog v-model="detailDialogVisible" title="操作详情" width="700px">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="ID">{{ currentLog.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作人">{{ currentLog.username }} ({{ currentLog.display_name }})</el-descriptions-item>
|
||||
<el-descriptions-item label="模块">{{ currentLog.module }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作类型">
|
||||
<el-tag :type="getActionType(currentLog.action)">{{ currentLog.action }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="操作对象" :span="2">{{ currentLog.target_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="IP地址">{{ currentLog.ip_address }}</el-descriptions-item>
|
||||
<el-descriptions-item label="请求方式">{{ currentLog.method }}</el-descriptions-item>
|
||||
<el-descriptions-item label="操作时间" :span="2">{{ currentLog.created_at }}</el-descriptions-item>
|
||||
<el-descriptions-item label="请求URL" :span="2">
|
||||
<el-text size="small">{{ currentLog.url }}</el-text>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div v-if="currentLog.details" class="details-box">
|
||||
<div class="details-title">变更内容 (JSON)</div>
|
||||
<pre class="json-content">{{ formatDetails(currentLog.details) }}</pre>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getAuditLogs, getAuditModules } from '@/api/audit'
|
||||
|
||||
// 表格数据
|
||||
const tableLoading = ref(false)
|
||||
const tableData = ref([])
|
||||
const total = ref(0)
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
pageSize: 50,
|
||||
username: '',
|
||||
module: '',
|
||||
action: '',
|
||||
target_id: '',
|
||||
start_date: '',
|
||||
end_date: ''
|
||||
})
|
||||
|
||||
// 日期范围
|
||||
const dateRange = ref<[string, string] | null>(null)
|
||||
|
||||
// 选项数据
|
||||
const moduleOptions = ref<string[]>([])
|
||||
const actionOptions = ref<string[]>(['create', 'update', 'delete', 'export', 'import'])
|
||||
|
||||
// 详情弹窗
|
||||
const detailDialogVisible = ref(false)
|
||||
const currentLog = ref<any>({})
|
||||
|
||||
// 获取操作类型对应的标签样式
|
||||
const getActionType = (action: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'create': 'success',
|
||||
'add': 'success',
|
||||
'update': 'warning',
|
||||
'edit': 'warning',
|
||||
'delete': 'danger',
|
||||
'export': 'info',
|
||||
'import': 'info'
|
||||
}
|
||||
return typeMap[action?.toLowerCase()] || 'info'
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const getList = async () => {
|
||||
tableLoading.value = true
|
||||
try {
|
||||
// 处理日期范围
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
queryParams.start_date = dateRange.value[0]
|
||||
queryParams.end_date = dateRange.value[1]
|
||||
} else {
|
||||
queryParams.start_date = ''
|
||||
queryParams.end_date = ''
|
||||
}
|
||||
|
||||
const res = await getAuditLogs(queryParams)
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list
|
||||
total.value = res.data.total
|
||||
// 更新选项
|
||||
if (res.data.modules) {
|
||||
moduleOptions.value = res.data.modules
|
||||
}
|
||||
if (res.data.actions) {
|
||||
actionOptions.value = res.data.actions
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审计日志失败:', error)
|
||||
} finally {
|
||||
tableLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleQuery = () => {
|
||||
queryParams.page = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
queryParams.page = 1
|
||||
queryParams.username = ''
|
||||
queryParams.module = ''
|
||||
queryParams.action = ''
|
||||
queryParams.target_id = ''
|
||||
queryParams.start_date = ''
|
||||
queryParams.end_date = ''
|
||||
dateRange.value = null
|
||||
getList()
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetails = (row: any) => {
|
||||
currentLog.value = row
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 格式化详情 JSON
|
||||
const formatDetails = (details: any) => {
|
||||
if (!details) return ''
|
||||
if (typeof details === 'string') {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(details), null, 2)
|
||||
} catch {
|
||||
return details
|
||||
}
|
||||
}
|
||||
return JSON.stringify(details, null, 2)
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getList()
|
||||
// 获取可选模块
|
||||
getAuditModules().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
moduleOptions.value = res.data
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-form {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.details-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.json-content {
|
||||
background-color: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user