操作日志详细页面优化
This commit is contained in:
RuoYi
@@ -240,6 +240,52 @@
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/** 详细卡片样式 */
|
||||
.detail-wrap { padding: 0 4px; }
|
||||
|
||||
.detail-card {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-card-title {
|
||||
background: #f7f9fb;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.detail-card-title i { margin-right: 5px; color: #409EFF; }
|
||||
|
||||
.detail-row { padding: 0 8px; }
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
}
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
|
||||
.detail-label {
|
||||
flex-shrink: 0;
|
||||
width: 72px;
|
||||
color: #909399;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.detail-value { color: #303133; flex: 1; word-break: break-all; }
|
||||
.detail-location { color: #999; font-size: 12px; }
|
||||
|
||||
/* http method */
|
||||
.method-GET { background: #e8f5e9; color: #27ae60; }
|
||||
.method-POST { background: #e3f2fd; color: #1565c0; }
|
||||
.method-PUT { background: #fff3e0; color: #e65100; }
|
||||
.method-DELETE { background: #ffebee; color: #c62828; }
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
|
||||
220
src/views/monitor/operlog/detail.vue
Normal file
220
src/views/monitor/operlog/detail.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<el-dialog title="操作日志详细" v-model="dialogVisible" width="780px" append-to-body @close="$emit('update:visible', false)">
|
||||
<div class="detail-wrap">
|
||||
<!-- 基本信息 -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-title"><el-icon><InfoFilled /></el-icon> 基本信息</div>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="12">
|
||||
<div class="detail-item"><span class="detail-label">操作模块</span><span class="detail-value">{{ form.title }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="detail-item"><span class="detail-label">业务类型</span><span class="detail-value">{{ typeLabel }}</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="12">
|
||||
<div class="detail-item"><span class="detail-label">操作时间</span><span class="detail-value">{{ form.operTime }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">执行状态</span>
|
||||
<el-tag v-if="form.status === 0" type="success" size="small">正常</el-tag>
|
||||
<el-tag v-else type="danger" size="small">异常</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 操作人员 -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-title"><el-icon><User /></el-icon> 操作人员</div>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="12">
|
||||
<div class="detail-item"><span class="detail-label">操作人员</span><span class="detail-value">{{ form.operName }}</span></div>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.deptName">
|
||||
<div class="detail-item"><span class="detail-label">所属部门</span><span class="detail-value">{{ form.deptName }}</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="24">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">操作地址</span>
|
||||
<span class="detail-value">{{ form.operIp }} <span class="detail-location">{{ form.operLocation }}</span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 请求信息 -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-title"><el-icon><Sort /></el-icon> 请求信息</div>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="24">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">请求地址</span>
|
||||
<span class="detail-value">
|
||||
<span :class="'method-tag method-' + form.requestMethod">{{ form.requestMethod }}</span>
|
||||
{{ form.operUrl }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="24">
|
||||
<div class="detail-item"><span class="detail-label">操作方法</span><span class="detail-value mono">{{ form.method }}</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="detail-row">
|
||||
<el-col :span="12">
|
||||
<div class="detail-item"><span class="detail-label">消耗时间</span><span class="detail-value">{{ form.costTime }} 毫秒</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 请求参数 -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-title"><el-icon><Upload /></el-icon> 请求参数</div>
|
||||
<div class="code-body">
|
||||
<div class="code-wrap">
|
||||
<div class="code-action">
|
||||
<el-button size="small" :icon="CopyDocument" @click="copyText(form.operParam)">复制</el-button>
|
||||
</div>
|
||||
<pre class="code-pre">{{ formatJson(form.operParam) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 返回参数 -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-card-title"><el-icon><Download /></el-icon> 返回参数</div>
|
||||
<div class="code-body">
|
||||
<div class="code-wrap">
|
||||
<div class="code-action">
|
||||
<el-button size="small" :icon="CopyDocument" @click="copyText(form.jsonResult)">复制</el-button>
|
||||
</div>
|
||||
<pre class="code-pre">{{ formatJson(form.jsonResult) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 异常信息 -->
|
||||
<div class="detail-card" v-if="form.status !== 0">
|
||||
<div class="detail-card-title error-title"><el-icon><Warning /></el-icon> 异常信息</div>
|
||||
<div class="error-body">
|
||||
<div class="error-msg">{{ form.errorMsg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
row: { type: Object, default: () => ({}) }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => emit('update:visible', val)
|
||||
})
|
||||
|
||||
|
||||
const { sys_oper_type } = proxy.useDict('sys_oper_type')
|
||||
|
||||
const form = computed(() => props.row || {})
|
||||
const typeLabel = computed(() => proxy.selectDictLabel(sys_oper_type.value, form.value.businessType) || '-')
|
||||
|
||||
function formatJson(str) {
|
||||
if (!str) return '（无数据）'
|
||||
try { return JSON.stringify(JSON.parse(str), null, 2) } catch { return str }
|
||||
}
|
||||
|
||||
function copyText(str) {
|
||||
const text = formatJson(str)
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(() => ElMessage({ message: '已复制', type: 'success', duration: 1500 }))
|
||||
} else {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(ta)
|
||||
ElMessage({ message: '已复制', type: 'success', duration: 1500 })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.method-tag {
|
||||
display: inline-block;
|
||||
padding: 1px 7px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
|
||||
.code-body { padding: 14px; }
|
||||
.code-wrap {
|
||||
background: #f7f9fb;
|
||||
border: 1px solid #e8ecf0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
max-height: 260px;
|
||||
position: relative;
|
||||
}
|
||||
.code-action {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.code-action .el-button {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
.code-action .el-button:hover {
|
||||
background: #ffffff;
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.code-pre {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
font-family: Consolas, 'SFMono-Regular', monospace;
|
||||
color: #444;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
overflow: auto;
|
||||
max-height: 240px;
|
||||
display: block;
|
||||
}
|
||||
.error-title { color: #c0392b !important; }
|
||||
.error-title .el-icon { color: #c0392b !important; }
|
||||
.error-body { padding: 12px 16px; }
|
||||
.error-msg {
|
||||
background: #fff8f8;
|
||||
border-left: 3px solid #e74c3c;
|
||||
border-radius: 3px;
|
||||
padding: 8px 12px;
|
||||
color: #c0392b;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -135,7 +135,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
|
||||
<el-button link type="primary" icon="View" @click="handleDetail(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -148,64 +148,21 @@
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
|
||||
<el-form-item
|
||||
label="登录信息："
|
||||
>{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
|
||||
<el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作方法：">{{ form.method }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="请求参数：" style="word-break: break-all; white-space: pre-wrap;">{{ form.operParam }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="操作状态：">
|
||||
<div v-if="form.status === 0">正常</div>
|
||||
<div v-else-if="form.status === 1">失败</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<operlog-detail v-model:visible="detailVisible" :row="detailRow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Operlog">
|
||||
import OperlogDetail from './detail'
|
||||
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status")
|
||||
|
||||
const operlogList = ref([])
|
||||
const open = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const loading = ref(true)
|
||||
const detailRow = ref({})
|
||||
const showSearch = ref(true)
|
||||
const ids = ref([])
|
||||
const single = ref(true)
|
||||
@@ -240,11 +197,6 @@ function getList() {
|
||||
})
|
||||
}
|
||||
|
||||
/** 操作日志类型字典翻译 */
|
||||
function typeFormat(row, column) {
|
||||
return proxy.selectDictLabel(sys_oper_type.value, row.businessType)
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1
|
||||
@@ -273,9 +225,9 @@ function handleSortChange(column, prop, order) {
|
||||
}
|
||||
|
||||
/** 详细按钮操作 */
|
||||
function handleView(row) {
|
||||
open.value = true
|
||||
form.value = row
|
||||
function handleDetail(row) {
|
||||
detailRow.value = row
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
|
||||
Reference in New Issue
Block a user