<template>
|
<div class="log-page">
|
<div class="page-head">
|
<div class="page-title">操作日志</div>
|
<div class="page-subtitle">展示小程序员工端写操作记录</div>
|
</div>
|
|
<div class="table-wrap">
|
<el-table :data="rows" v-loading="loading" stripe height="100%">
|
<el-table-column label="操作时间" min-width="180">
|
<template #default="{ row }">{{ formatTime(row.opTime) }}</template>
|
</el-table-column>
|
<el-table-column prop="operatorName" label="操作人" min-width="120" />
|
<el-table-column prop="module" label="模块" min-width="120" />
|
<el-table-column prop="action" label="动作" min-width="140" />
|
<el-table-column label="IP" min-width="150" show-overflow-tooltip>
|
<template #default="{ row }">{{ extractDetailField(row.detailJson, "clientIp") || "—" }}</template>
|
</el-table-column>
|
<el-table-column label="浏览器头" min-width="260" show-overflow-tooltip>
|
<template #default="{ row }">{{ extractDetailField(row.detailJson, "userAgent") || "—" }}</template>
|
</el-table-column>
|
<el-table-column prop="resourceType" label="资源类型" min-width="140" show-overflow-tooltip />
|
<el-table-column prop="resourceId" label="资源标识" min-width="220" show-overflow-tooltip />
|
<el-table-column prop="traceId" label="TraceId" min-width="220" show-overflow-tooltip />
|
<el-table-column label="详情" min-width="280">
|
<template #default="{ row }">
|
<span class="detail-text">{{ row.detailJson || "—" }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pager">
|
<el-pagination
|
background
|
layout="total, prev, pager, next"
|
:current-page="page"
|
:page-size="size"
|
:total="total"
|
@current-change="handlePageChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import http from "../api/http";
|
|
type OpLogRow = {
|
id: number;
|
opTime?: string;
|
operatorName?: string;
|
module?: string;
|
action?: string;
|
resourceType?: string;
|
resourceId?: string;
|
traceId?: string;
|
detailJson?: string;
|
};
|
|
const loading = ref(false);
|
const rows = ref<OpLogRow[]>([]);
|
const page = ref(1);
|
const size = ref(20);
|
const total = ref(0);
|
|
function formatTime(v: unknown) {
|
if (v == null || v === "") return "—";
|
const s = String(v);
|
return s.length >= 19 ? s.slice(0, 19).replace("T", " ") : s;
|
}
|
|
function extractDetailField(detailJson: string | undefined, field: string) {
|
if (!detailJson) return "";
|
try {
|
const parsed = JSON.parse(detailJson) as Record<string, unknown>;
|
const value = parsed[field];
|
return value == null ? "" : String(value);
|
} catch {
|
return "";
|
}
|
}
|
|
async function load() {
|
loading.value = true;
|
try {
|
const { data } = await http.get("/op-logs", {
|
params: {
|
page: page.value,
|
size: size.value,
|
sourceType: "MINI_EMPLOYEE",
|
},
|
});
|
rows.value = data.result || [];
|
total.value = data.total || 0;
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "加载失败");
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handlePageChange(nextPage: number) {
|
page.value = nextPage;
|
load();
|
}
|
|
onMounted(load);
|
</script>
|
|
<style scoped>
|
.page-head {
|
margin-bottom: 16px;
|
}
|
|
.page-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #1f2937;
|
}
|
|
.page-subtitle {
|
margin-top: 4px;
|
font-size: 13px;
|
color: #6b7280;
|
}
|
|
.pager {
|
display: flex;
|
justify-content: flex-end;
|
padding-top: 12px;
|
padding-bottom: 4px;
|
flex: none;
|
background: #fff;
|
}
|
|
.detail-text {
|
display: inline-block;
|
max-width: 100%;
|
color: #4b5563;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.log-page {
|
display: flex;
|
flex-direction: column;
|
height: calc(100vh - 210px);
|
min-height: 420px;
|
}
|
|
.table-wrap {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
</style>
|
