zhou zhou
15 小时以前 50e95b985a72fcec4a93a2470e9efdfb2620148a
rsf-design/src/views/system/operation-record/modules/operation-record-detail-drawer.vue
@@ -1,40 +1,43 @@
<template>
  <ElDrawer
    :model-value="visible"
    title="操作日志详情"
    :title="t('pages.system.operationRecord.dialog.titleDetail')"
    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 :label="t('pages.system.operationRecord.table.namespace')">{{ displayData.namespace || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.url')">{{ displayData.url || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.detail.appkey')">{{ displayData.appkey || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.user')">{{ displayData.userLabel || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.clientIp')">{{ displayData.clientIp || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.result')">
          <ElTag :type="displayData.resultType" effect="light">
            {{ displayData.resultTextKey ? t(displayData.resultTextKey) : displayData.resultText || '--' }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="耗时(ms)">{{ displayData.spendTime ?? '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="操作时间">{{ displayData.timestampText || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="异常信息">{{ displayData.err || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="请求内容">
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.spendTime')">{{ displayData.spendTime ?? '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.table.timestamp')">{{ displayData.timestampText || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.detail.error')">{{ displayData.err || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem :label="t('pages.system.operationRecord.detail.request')">
          <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="响应内容">
        <ElDescriptionsItem :label="t('pages.system.operationRecord.detail.response')">
          <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>
        <ElDescriptionsItem :label="t('table.remark')">{{ displayData.memo || '--' }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElSkeleton>
  </ElDrawer>
</template>
<script setup>
  import { useI18n } from 'vue-i18n'
  import { mergeOperationRecordDetail } from '../operationRecordPage.helpers'
  const props = defineProps({
@@ -44,6 +47,7 @@
  })
  const emit = defineEmits(['update:visible'])
  const { t } = useI18n()
  const displayData = computed(() => mergeOperationRecordDetail(props.detailData))