From 402fea403bbd4b4d3f6a1d568a34a7f05b3bb5ff Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期四, 25 九月 2025 13:55:47 +0800
Subject: [PATCH] fix: 日志管理
---
src/views/TraceIdLogManage/components/ExceptionLogsView.vue | 57 ++++++-
src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue | 96 ++++++++++++-
src/views/TraceIdLogManage/components/ResourceLogsView.vue | 112 ++++++++++++++-
src/views/TraceIdLogManage/components/JsonViewerDialog.vue | 48 ++++++
src/views/TraceIdLogManage/TraceIdLogManageList.vue | 12 -
src/views/TraceIdLogManage/components/DbAuditLogsView.vue | 72 +++++++++-
6 files changed, 347 insertions(+), 50 deletions(-)
diff --git a/src/views/TraceIdLogManage/TraceIdLogManageList.vue b/src/views/TraceIdLogManage/TraceIdLogManageList.vue
index e70f0f8..2d58d6d 100644
--- a/src/views/TraceIdLogManage/TraceIdLogManageList.vue
+++ b/src/views/TraceIdLogManage/TraceIdLogManageList.vue
@@ -4,22 +4,14 @@
<ProTableQueryFilterBar :show-reset-btn="false">
<template #query>
<QueryFilterItem>
- <SearchInput
- v-model="state.traceId"
- style="width: 260px"
- placeholder="traceID"
- @on-click-search="refetch"
- >
+ <SearchInput v-model="state.traceId" style="width: 260px" placeholder="traceID">
</SearchInput>
</QueryFilterItem>
</template>
</ProTableQueryFilterBar>
<ProTabs v-model="state.tabType" hasBorder>
<ProTabPane lazy label="璧勬簮鏃ュ織" name="resourceLogs">
- <ResourceLogsView
- :resourceLogs="detail.resourceLogs"
- @resend="refetch"
- ></ResourceLogsView>
+ <ResourceLogsView :resourceLogs="detail.resourceLogs"></ResourceLogsView>
</ProTabPane>
<ProTabPane lazy label="绗笁鏂硅祫婧愭棩蹇�" name="threeResourceLogs">
<ThreeResourceLogsView
diff --git a/src/views/TraceIdLogManage/components/DbAuditLogsView.vue b/src/views/TraceIdLogManage/components/DbAuditLogsView.vue
index af3d68d..5d6f420 100644
--- a/src/views/TraceIdLogManage/components/DbAuditLogsView.vue
+++ b/src/views/TraceIdLogManage/components/DbAuditLogsView.vue
@@ -1,5 +1,5 @@
<template>
- <el-collapse v-model="activeName" accordion>
+ <!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in dbAuditLogs"
:key="item.createdTime"
@@ -38,15 +38,46 @@
>
</ProForm>
</el-collapse-item>
- </el-collapse>
+ </el-collapse> -->
+ <AppContainer>
+ <ProTableV2
+ :columns="columns"
+ :show-pagination="false"
+ :table-data="dbAuditLogs"
+ :column-render-map="columnsRenderProps"
+ >
+ <template #oldValues="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.stringify(row.oldValues) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #newValues="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.stringify(row.newValues) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #createdUser="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: JSON.parse(JSON.stringify(row.createdUser)) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ </ProTableV2>
+ <JsonViewerDialog v-bind="dialogProps" />
+ </AppContainer>
</template>
<script setup lang="ts">
-import { ProForm, ProFormItemV2 } from '@bole-core/components';
-import { EnumDbAuditOperateText } from '@/constants';
-import JsonViewer from 'vue-json-viewer';
-
-import { format } from '@/utils';
+import {
+ AppContainer,
+ ProTableV2,
+ defineColumns,
+ ProTableV2Props,
+ useFormDialog,
+} from '@bole-core/components';
+import JsonViewerDialog from './JsonViewerDialog.vue';
defineOptions({
name: 'DbAuditLogsView',
@@ -59,6 +90,33 @@
const props = withDefaults(defineProps<Props>(), {
dbAuditLogs: () => [] as API.GetDbAuditLogsQueryResultItem[],
});
+
+const columns = defineColumns(
+ [
+ 'tableName',
+ 'primaryKey',
+ 'operate',
+ 'oldValues',
+ 'newValues',
+ 'createdUser',
+ 'createdTime',
+ ].map((x, index) => ({
+ id: index + '',
+ enCode: x,
+ name: x,
+ }))
+);
+
+const columnsRenderProps: ProTableV2Props['columnRenderMap'] = {
+ operate: { type: 'enum', valueEnum: EnumDbAuditOperateText },
+ createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+};
+
+const { dialogProps, handleAdd } = useFormDialog({
+ defaultFormParams: {
+ json: null,
+ },
+});
</script>
<style lang="scss" scoped>
diff --git a/src/views/TraceIdLogManage/components/ExceptionLogsView.vue b/src/views/TraceIdLogManage/components/ExceptionLogsView.vue
index fe1d91d..1181afd 100644
--- a/src/views/TraceIdLogManage/components/ExceptionLogsView.vue
+++ b/src/views/TraceIdLogManage/components/ExceptionLogsView.vue
@@ -1,5 +1,5 @@
<template>
- <el-collapse v-model="activeName" accordion>
+ <!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in exceptionLogs"
:key="item.createdTime"
@@ -25,14 +25,36 @@
>
</ProForm>
</el-collapse-item>
- </el-collapse>
+ </el-collapse> -->
+ <AppContainer>
+ <ProTableV2
+ :columns="columns"
+ :show-pagination="false"
+ :table-data="exceptionLogs"
+ :column-render-map="columnsRenderProps"
+ >
+ <template #createdUser="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: JSON.parse(JSON.stringify(row.createdUser)) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ </ProTableV2>
+ <JsonViewerDialog v-bind="dialogProps" />
+ </AppContainer>
</template>
<script setup lang="ts">
-import { ProForm, ProFormItemV2 } from '@bole-core/components';
-import JsonViewer from 'vue-json-viewer';
-
-import { format } from '@/utils';
+import {
+ AppContainer,
+ ProTableV2,
+ defineColumns,
+ ProTableV2Props,
+ useFormDialog,
+} from '@bole-core/components';
+import JsonViewerDialog from './JsonViewerDialog.vue';
defineOptions({
name: 'ExceptionLogsView',
@@ -41,12 +63,25 @@
type Props = {
exceptionLogs: API.GetExceptionLogsQueryResultItem[];
};
-const activeName = ref('1');
const props = withDefaults(defineProps<Props>(), {
exceptionLogs: () => [] as API.GetExceptionLogsQueryResultItem[],
});
-</script>
-<style lang="scss" scoped>
-@use '@/style/common.scss' as *;
-</style>
+const columns = defineColumns(
+ ['type', 'code', 'message', 'stackTrace', 'createdUser', 'createdTime'].map((x, index) => ({
+ id: index + '',
+ enCode: x,
+ name: x,
+ }))
+);
+
+const columnsRenderProps: ProTableV2Props['columnRenderMap'] = {
+ createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+};
+
+const { dialogProps, handleAdd } = useFormDialog({
+ defaultFormParams: {
+ json: null,
+ },
+});
+</script>
diff --git a/src/views/TraceIdLogManage/components/JsonViewerDialog.vue b/src/views/TraceIdLogManage/components/JsonViewerDialog.vue
new file mode 100644
index 0000000..013001b
--- /dev/null
+++ b/src/views/TraceIdLogManage/components/JsonViewerDialog.vue
@@ -0,0 +1,48 @@
+<template>
+ <ProDialog title="鏌ョ湅" v-model="visible" destroy-on-close draggable>
+ <json-viewer
+ :copyable="true"
+ :boxed="true"
+ :preview-mode="true"
+ :value="form.json"
+ expanded
+ ></json-viewer>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="emit('onCancel')">鍙� 娑�</el-button>
+ <el-button type="primary" @click="handleConfirm">纭� 瀹�</el-button>
+ </span>
+ </template>
+ </ProDialog>
+</template>
+
+<script setup lang="ts">
+import { ProDialog } from '@bole-core/components';
+import JsonViewer from 'vue-json-viewer';
+
+defineOptions({
+ name: 'JsonViewerDialog',
+});
+
+// type Props = {};
+
+// const props = withDefaults(defineProps<Props>(), {});
+
+const visible = defineModel({ type: Boolean });
+
+type Form = {
+ title?: string;
+ json: object;
+};
+
+const form = defineModel<Form>('form');
+
+const emit = defineEmits<{
+ (e: 'onConfirm'): void;
+ (e: 'onCancel'): void;
+}>();
+
+function handleConfirm() {
+ emit('onConfirm');
+}
+</script>
diff --git a/src/views/TraceIdLogManage/components/ResourceLogsView.vue b/src/views/TraceIdLogManage/components/ResourceLogsView.vue
index e5f4f6d..b2e24ff 100644
--- a/src/views/TraceIdLogManage/components/ResourceLogsView.vue
+++ b/src/views/TraceIdLogManage/components/ResourceLogsView.vue
@@ -1,5 +1,5 @@
<template>
- <el-collapse v-model="activeName" accordion>
+ <!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in resourceLogs"
:key="item.id"
@@ -60,17 +60,61 @@
>
</ProForm>
</el-collapse-item>
- </el-collapse>
+ </el-collapse> -->
+ <AppContainer>
+ <ProTableV2
+ :columns="columns"
+ :operationBtns="operationBtns"
+ :show-pagination="false"
+ :table-data="resourceLogs"
+ :column-render-map="columnsRenderProps"
+ >
+ <template #requestHeaders="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.requestHeaders) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #request="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.request) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #responseHeaders="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.responseHeaders) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #response="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.response) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #createdUser="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: JSON.parse(JSON.stringify(row.createdUser)) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ </ProTableV2>
+ <JsonViewerDialog v-bind="dialogProps" />
+ </AppContainer>
</template>
<script setup lang="ts">
-import { ProForm, ProFormItemV2 } from '@bole-core/components';
+import {
+ AppContainer,
+ ProTableV2,
+ defineColumns,
+ defineOperationBtns,
+ ProTableV2Props,
+ useFormDialog,
+} from '@bole-core/components';
import { EnumResourceMethodText } from '@/constants';
-import JsonViewer from 'vue-json-viewer';
import * as logRecordsServices from '@/services/api/logRecords';
-
-import { format } from '@/utils';
import { Message } from '@bole-core/core';
+import JsonViewerDialog from './JsonViewerDialog.vue';
defineOptions({
name: 'ResourceLogsView',
@@ -80,15 +124,61 @@
resourceLogs: API.GetResourceLogsQueryResultItem[];
};
-const activeName = ref('1');
-
const props = withDefaults(defineProps<Props>(), {
resourceLogs: () => [] as API.GetResourceLogsQueryResultItem[],
});
-const emit = defineEmits<{
- (e: 'resend'): void;
-}>();
+const columns = defineColumns(
+ [
+ 'method',
+ 'domain',
+ 'path',
+ 'requestHeaders',
+ 'request',
+ 'responseHeaders',
+ 'response',
+ 'isSuccess',
+ 'clientIpAddress',
+ 'refererUrl',
+ 'consoleLogs',
+ 'elapsedMilliseconds',
+ 'createdUser',
+ 'createdTime',
+ ].map((x, index) => ({
+ id: index + '',
+ enCode: x,
+ name: x,
+ width: 160,
+ }))
+);
+
+const operationBtns = defineOperationBtns([
+ {
+ data: {
+ enCode: 'reSendBtn',
+ name: '閲嶆柊鍙戦��',
+ },
+ emits: {
+ onClick: (row) => resend(row.id),
+ },
+ },
+]);
+
+const columnsRenderProps: ProTableV2Props['columnRenderMap'] = {
+ method: { type: 'enum', valueEnum: EnumResourceMethodText },
+ isSuccess: {
+ formatter: (row: API.GetResourceLogsQueryResultItem) => {
+ return row.isSuccess ? '鏄�' : '鍚�';
+ },
+ },
+ createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+};
+
+const { dialogProps, handleAdd } = useFormDialog({
+ defaultFormParams: {
+ json: null,
+ },
+});
async function resend(id: string) {
try {
diff --git a/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue b/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
index 1d9dd8a..e650493 100644
--- a/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
+++ b/src/views/TraceIdLogManage/components/ThreeResourceLogsView.vue
@@ -1,5 +1,5 @@
<template>
- <el-collapse v-model="activeName" accordion>
+ <!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in threeResourceLogs"
:key="item.id"
@@ -54,15 +54,57 @@
>
</ProForm>
</el-collapse-item>
- </el-collapse>
+ </el-collapse> -->
+ <AppContainer>
+ <ProTableV2
+ :columns="columns"
+ :show-pagination="false"
+ :table-data="threeResourceLogs"
+ :column-render-map="columnsRenderProps"
+ >
+ <template #requestHeaders="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.requestHeaders) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #request="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.request) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #responseHeaders="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.responseHeaders) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #response="{ row }">
+ <el-button type="primary" link @click="handleAdd({ json: JSON.parse(row.response) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ <template #createdUser="{ row }">
+ <el-button
+ type="primary"
+ link
+ @click="handleAdd({ json: JSON.parse(JSON.stringify(row.createdUser)) })"
+ >鏌ョ湅</el-button
+ >
+ </template>
+ </ProTableV2>
+ <JsonViewerDialog v-bind="dialogProps" />
+ </AppContainer>
</template>
<script setup lang="ts">
-import { ProForm, ProFormItemV2 } from '@bole-core/components';
+import {
+ AppContainer,
+ ProTableV2,
+ defineColumns,
+ ProTableV2Props,
+ useFormDialog,
+} from '@bole-core/components';
import { EnumResourceMethodText } from '@/constants';
-import JsonViewer from 'vue-json-viewer';
-
-import { format } from '@/utils';
+import JsonViewerDialog from './JsonViewerDialog.vue';
defineOptions({
name: 'ThreeResourceLogsView',
@@ -71,12 +113,44 @@
type Props = {
threeResourceLogs: API.GetThreeResourceLogsQueryResultItem[];
};
-const activeName = ref('1');
const props = withDefaults(defineProps<Props>(), {
threeResourceLogs: () => [] as API.GetThreeResourceLogsQueryResultItem[],
});
-</script>
-<style lang="scss" scoped>
-@use '@/style/common.scss' as *;
-</style>
+const columns = defineColumns(
+ [
+ 'method',
+ 'domain',
+ 'path',
+ 'requestHeaders',
+ 'request',
+ 'responseHeaders',
+ 'response',
+ 'isSuccess',
+ 'elapsedMilliseconds',
+ 'createdUser',
+ 'createdTime',
+ ].map((x, index) => ({
+ id: index + '',
+ enCode: x,
+ name: x,
+ width: 160,
+ }))
+);
+
+const columnsRenderProps: ProTableV2Props['columnRenderMap'] = {
+ method: { type: 'enum', valueEnum: EnumResourceMethodText },
+ isSuccess: {
+ formatter: (row: API.GetResourceLogsQueryResultItem) => {
+ return row.isSuccess ? '鏄�' : '鍚�';
+ },
+ },
+ createdTime: { type: 'date', format: 'YYYY-MM-DD HH:mm:ss' },
+};
+
+const { dialogProps, handleAdd } = useFormDialog({
+ defaultFormParams: {
+ json: null,
+ },
+});
+</script>
--
Gitblit v1.9.1