#前端

zhou zhou

4 天以前 5d31cb5f1fb32a478d5b751ebfe97d47db890778

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
<template>
  <ElDrawer
    :model-value="visible"
    title="操作日志详情"
    size="640px"
    @update:model-value="handleVisibleChange"
  >
    <ElSkeleton :loading="loading" animated :rows="12">
      <ElDescriptions :column="1" border>
        <ElDescriptionsItem label="名称空间">{{ displayData.namespace || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="接口地址">{{ displayData.url || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="平台密钥">{{ displayData.appkey || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="操作用户">{{ displayData.userLabel || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="客户端IP">{{ displayData.clientIp || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="结果">
          <ElTag :type="displayData.resultType" effect="light">{{ displayData.resultText || '--' }}</ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="耗时(ms)">{{ displayData.spendTime ?? '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="操作时间">{{ displayData.timestampText || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="异常信息">{{ displayData.err || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="请求内容">
          <pre class="whitespace-pre-wrap break-all rounded-lg bg-[var(--art-main-bg-color)] p-3 text-xs leading-6 text-g-700">{{
            displayData.request || '--'
          }}</pre>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="响应内容">
          <pre class="whitespace-pre-wrap break-all rounded-lg bg-[var(--art-main-bg-color)] p-3 text-xs leading-6 text-g-700">{{
            displayData.response || '--'
          }}</pre>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="备注">{{ displayData.memo || '--' }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElSkeleton>
  </ElDrawer>
</template>
 
<script setup>
  import { mergeOperationRecordDetail } from '../operationRecordPage.helpers'
 
  const props = defineProps({
    visible: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    detailData: { type: Object, default: () => ({}) }
  })
 
  const emit = defineEmits(['update:visible'])
 
  const displayData = computed(() => mergeOperationRecordDetail(props.detailData))
 
  function handleVisibleChange(visible) {
    emit('update:visible', visible)
  }
</script>