wupengfei
2025-09-25 70d2322d60646c214a975cc3a99483f398d534c0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
  <LoadingLayout :loading="isLoading">
    <AppContainer>
      <ProTableQueryFilterBar :show-reset-btn="false">
        <template #query>
          <QueryFilterItem>
            <SearchInput
              v-model="state.traceId"
              style="width: 260px"
              placeholder="traceID"
              @on-click-search="refetch"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTabs v-model="state.tabType" hasBorder>
        <ProTabPane lazy label="资源日志" name="resourceLogs">
          <ResourceLogsView :resourceLogs="detail.resourceLogs"></ResourceLogsView>
        </ProTabPane>
        <ProTabPane lazy label="第三方资源日志" name="threeResourceLogs">
          <ThreeResourceLogsView
            :threeResourceLogs="detail.threeResourceLogs"
          ></ThreeResourceLogsView>
        </ProTabPane>
        <ProTabPane lazy label="异常日志" name="exceptionLogs">
          <ExceptionLogsView :exceptionLogs="detail.exceptionLogs"></ExceptionLogsView>
        </ProTabPane>
        <ProTabPane lazy label="数据库审计日志" name="dbAuditLogs">
          <DbAuditLogsView :dbAuditLogs="detail.dbAuditLogs"></DbAuditLogsView>
        </ProTabPane>
      </ProTabs>
    </AppContainer>
  </LoadingLayout>
</template>
 
<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  ProTabs,
  ProTabPane,
} from '@bole-core/components';
import * as logRecordsServices from '@/services/api/logRecords';
import { useQuery } from '@tanstack/vue-query';
import ResourceLogsView from './components/ResourceLogsView.vue';
import ThreeResourceLogsView from './components/ThreeResourceLogsView.vue';
import ExceptionLogsView from './components/ExceptionLogsView.vue';
import DbAuditLogsView from './components/DbAuditLogsView.vue';
 
defineOptions({
  name: 'TraceIdLogManageList',
});
 
const BaseState = {
  traceId: '',
  tabType: 'resourceLogs',
};
 
const state = reactive({ ...BaseState });
 
const {
  isLoading,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['logRecordsServices/getTraceIdLog', state.traceId],
  queryFn: async () => {
    return await logRecordsServices.getTraceIdLog({ traceId: state.traceId });
  },
  placeholderData: () => ({} as API.GetTraceIdLogQueryResult),
  enabled: computed(() => !!state.traceId),
});
</script>
 
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
</style>