<template>
|
<ElDrawer
|
:model-value="visible"
|
: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="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="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="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="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({
|
visible: { type: Boolean, default: false },
|
loading: { type: Boolean, default: false },
|
detailData: { type: Object, default: () => ({}) }
|
})
|
|
const emit = defineEmits(['update:visible'])
|
const { t } = useI18n()
|
|
const displayData = computed(() => mergeOperationRecordDetail(props.detailData))
|
|
function handleVisibleChange(visible) {
|
emit('update:visible', visible)
|
}
|
</script>
|
