130 lines
3.5 KiB
Vue
130 lines
3.5 KiB
Vue
<template>
|
||
<Modal v-model="show" :mask-closable="false" width="700" title="查看日志详情" @on-visible-change="onVisibleChange">
|
||
<Form :label-width="120" class="oplog-detail-form">
|
||
<FormItem label="id：">
|
||
<span>{{ row?.id ?? '-' }}</span>
|
||
</FormItem>
|
||
<FormItem label="接口名称：">
|
||
<span>{{ row?.requestUri ?? '-' }}</span>
|
||
</FormItem>
|
||
<FormItem label="用户名称：">
|
||
<span>{{ row?.username ?? '-' }}</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="数据：">
|
||
<a v-if="row?.id" href="javascript:;" class="download-link" @click.prevent="handleDownload">下载</a>
|
||
<span v-else>-</span>
|
||
</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 useCurrentInstance from '@/utils/hook/useCurrentInstance';
|
||
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 { $conf } = useCurrentInstance();
|
||
|
||
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');
|
||
}
|
||
|
||
function handleDownload() {
|
||
if (!props.row?.id) return;
|
||
window.open(`${$conf.serviceHost}/api/oplog/Download/${props.row.id}`);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.oplog-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;
|
||
}
|
||
|
||
.download-link {
|
||
color: #577afb;
|
||
|
||
&:hover {
|
||
color: #3d5afe;
|
||
}
|
||
}
|
||
}
|
||
</style>
|