120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
||
<Modal v-model="show" :mask-closable="false" width="700" title="查看开放接口日志详情" @on-visible-change="onVisibleChange">
|
||
<Form :label-width="120" class="oapilog-detail-form">
|
||
<FormItem label="id：">
|
||
<span>{{ row?.id ?? '-' }}</span>
|
||
</FormItem>
|
||
<FormItem label="接口名称：">
|
||
<span>{{ row?.requestUri ?? '-' }}</span>
|
||
</FormItem>
|
||
<FormItem label="调用方应用：">
|
||
<span>{{ appText }}</span>
|
||
</FormItem>
|
||
<FormItem label="调用IP：">
|
||
<span>{{ row?.requestIp ?? '-' }}</span>
|
||
</FormItem>
|
||
<FormItem label="调用结果：">
|
||
<span :class="resultClass">{{ resultText }}</span>
|
||
</FormItem>
|
||
<FormItem label="调用参数：">
|
||
<pre class="json-pre">{{ formatJson(row?.requestParams) }}</pre>
|
||
</FormItem>
|
||
<FormItem label="响应结果：">
|
||
<pre class="json-pre">{{ formatJson(row?.responseData) }}</pre>
|
||
</FormItem>
|
||
<FormItem label="创建时间：">
|
||
<span>{{ formatTime(row?.createTime) }}</span>
|
||
</FormItem>
|
||
</Form>
|
||
<template #footer>
|
||
<Button @click="show = false">取消</Button>
|
||
<Button type="primary" @click="show = false">确定</Button>
|
||
</template>
|
||
</Modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import Utils from '@/utils';
|
||
|
||
interface Props {
|
||
modelValue: boolean;
|
||
row?: Record<string, any> | null;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
row: null,
|
||
});
|
||
|
||
const emit = defineEmits(['update:modelValue']);
|
||
|
||
const show = computed({
|
||
get: () => props.modelValue,
|
||
set: val => emit('update:modelValue', val),
|
||
});
|
||
|
||
const appText = computed(() => {
|
||
if (!props.row?.callerAppName && !props.row?.callerAppKey) return '-';
|
||
const name = props.row.callerAppName || '-';
|
||
const key = props.row.callerAppKey ?? '';
|
||
return `${name}（appKey: ${key}）`;
|
||
});
|
||
|
||
const isSuccess = computed(() => props.row?.statusCode === 200);
|
||
const resultText = computed(() => isSuccess.value ? '执行成功' : '执行失败');
|
||
const resultClass = computed(() => isSuccess.value ? 'text-success' : 'text-error');
|
||
|
||
function onVisibleChange(val: boolean) {
|
||
if (!val) emit('update:modelValue', false);
|
||
}
|
||
|
||
function formatJson(val: any): string {
|
||
if (!val) return '-';
|
||
try {
|
||
return JSON.stringify(JSON.parse(val), null, 2);
|
||
} catch {
|
||
return String(val);
|
||
}
|
||
}
|
||
|
||
function formatTime(val: any): string {
|
||
if (!val) return '-';
|
||
return Utils.dateFormat(val, 'yyyy-MM-dd HH:mm:ss');
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.oapilog-detail-form {
|
||
:deep(.ivu-form-item) {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
:deep(.ivu-form-item-label) {
|
||
color: #515a6e;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.text-success {
|
||
color: #19be6b;
|
||
}
|
||
|
||
.text-error {
|
||
color: #ed4014;
|
||
}
|
||
|
||
.json-pre {
|
||
margin: 0;
|
||
padding: 10px 12px;
|
||
background: #f7f8fa;
|
||
border: 1px solid #e8eaec;
|
||
border-radius: 4px;
|
||
max-height: 200px;
|
||
overflow: auto;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
</style>
|