houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
3     <el-descriptions :column="1" border>
4       <el-descriptions-item label="日志主键" min-width="120">
5         {{ detailData.id }}
6       </el-descriptions-item>
7       <el-descriptions-item label="链路追踪">
8         {{ detailData.traceId }}
9       </el-descriptions-item>
10       <el-descriptions-item label="应用名">
11         {{ detailData.applicationName }}
12       </el-descriptions-item>
13       <el-descriptions-item label="用户信息">
14         {{ detailData.userId }}
15         <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
16       </el-descriptions-item>
17       <el-descriptions-item label="用户 IP">
18         {{ detailData.userIp }}
19       </el-descriptions-item>
20       <el-descriptions-item label="用户 UA">
21         {{ detailData.userAgent }}
22       </el-descriptions-item>
23       <el-descriptions-item label="请求信息">
24         {{ detailData.requestMethod }} {{ detailData.requestUrl }}
25       </el-descriptions-item>
26       <el-descriptions-item label="请求参数">
27         {{ detailData.requestParams }}
28       </el-descriptions-item>
29       <el-descriptions-item label="请求结果">
30         {{ detailData.responseBody }}
31       </el-descriptions-item>
32       <el-descriptions-item label="请求时间">
33         {{ formatDate(detailData.beginTime) }} ~ {{ formatDate(detailData.endTime) }}
34       </el-descriptions-item>
35       <el-descriptions-item label="请求耗时">{{ detailData.duration }} ms</el-descriptions-item>
36       <el-descriptions-item label="操作结果">
37         <div v-if="detailData.resultCode === 0">正常</div>
38         <div v-else-if="detailData.resultCode > 0">
39           失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}
40         </div>
41       </el-descriptions-item>
42       <el-descriptions-item label="操作模块">
43         {{ detailData.operateModule }}
44       </el-descriptions-item>
45       <el-descriptions-item label="操作名">
46         {{ detailData.operateName }}
47       </el-descriptions-item>
48       <el-descriptions-item label="操作名">
49         <dict-tag :type="DICT_TYPE.INFRA_OPERATE_TYPE" :value="detailData.operateType" />
50       </el-descriptions-item>
51     </el-descriptions>
52   </Dialog>
53 </template>
54
55 <script lang="ts" setup>
56 import { DICT_TYPE } from '@/utils/dict'
57 import { formatDate } from '@/utils/formatTime'
58 import * as ApiAccessLog from '@/api/infra/apiAccessLog'
59
60 defineOptions({ name: 'ApiAccessLogDetail' })
61
62 const dialogVisible = ref(false) // 弹窗的是否展示
63 const detailLoading = ref(false) // 表单地加载中
64 const detailData = ref({} as ApiAccessLog.ApiAccessLogVO) // 详情数据
65
66 /** 打开弹窗 */
67 const open = async (data: ApiAccessLog.ApiAccessLogVO) => {
68   dialogVisible.value = true
69   // 设置数据
70   detailLoading.value = true
71   try {
72     detailData.value = data
73   } finally {
74     detailLoading.value = false
75   }
76 }
77
78 defineExpose({ open }) // 提供 open 方法,用于打开弹窗
79 </script>