<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { getInfo } from '#/api/system/log';
|
import { $t } from '#/locales';
|
|
interface State {
|
category: string;
|
activeName: string;
|
dataForm: any;
|
}
|
const state = reactive<State>({
|
category: '',
|
activeName: '',
|
dataForm: {},
|
});
|
const { dataForm, activeName, category } = toRefs(state);
|
|
const [registerDrawer] = useDrawerInner(init);
|
|
function init(data) {
|
state.category = data.category;
|
getInfo(data.id).then((res) => {
|
state.dataForm = res.data;
|
});
|
}
|
</script>
|
<template>
|
<BasicDrawer v-bind="$attrs" width="500px" @register="registerDrawer" :title="$t('common.detailText')" class="jnpf-log-detail" destroy-on-close>
|
<a-form class="!mx-[20px] !mt-[20px]" :colon="false" :model="dataForm" :label-col="{ style: { width: '80px' } }">
|
<a-form-item :label="category == '2' ? '请求时间' : '操作时间'">
|
<p>{{ formatToDateTime(dataForm.creatorTime, 'YYYY-MM-DD HH:mm:ss') }}</p>
|
</a-form-item>
|
<a-form-item label="用户">
|
<p>{{ dataForm.userName }}</p>
|
</a-form-item>
|
<a-form-item label="IP地址">
|
<p>{{ dataForm.ipAddress }}</p>
|
</a-form-item>
|
<a-form-item label="地点">
|
<p>{{ dataForm.ipAddressName }}</p>
|
</a-form-item>
|
<a-form-item label="浏览器">
|
<p>{{ dataForm.browser }}</p>
|
</a-form-item>
|
<a-form-item label="操作系统">
|
<p>{{ dataForm.platForm }}</p>
|
</a-form-item>
|
<a-form-item label="操作模块" v-if="category == '3'">
|
<p>{{ dataForm.moduleName }}</p>
|
</a-form-item>
|
<a-form-item label="请求方式">
|
<p>{{ dataForm.requestMethod }}</p>
|
</a-form-item>
|
<a-form-item label="耗时(毫秒)" v-if="category != '4'">
|
<p>{{ dataForm.requestDuration }}</p>
|
</a-form-item>
|
<a-collapse v-model:active-key="activeName" ghost expand-icon-position="end">
|
<a-collapse-panel key="2" header="请求地址">
|
<div class="jnpf-code-box" v-if="dataForm.requestUrl">{{ dataForm.requestUrl }}</div>
|
</a-collapse-panel>
|
<a-collapse-panel key="3" header="请求方法" v-if="category != '4'">
|
<div class="jnpf-code-box" v-if="dataForm.requestTarget">{{ dataForm.requestTarget }}</div>
|
</a-collapse-panel>
|
<a-collapse-panel key="4" header="请求参数" v-if="category != '4'">
|
<div class="jnpf-code-box" v-if="dataForm.requestParam">{{ dataForm.requestParam }}</div>
|
</a-collapse-panel>
|
<a-collapse-panel key="5" :header="category != '4' ? '返回结果' : '异常描述'">
|
<div class="jnpf-code-box" v-if="dataForm.jsons">{{ dataForm.jsons }}</div>
|
</a-collapse-panel>
|
</a-collapse>
|
</a-form>
|
</BasicDrawer>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-log-detail {
|
.ant-collapse {
|
border-top: 1px solid var(--border-color-base1);
|
|
.ant-collapse-item {
|
border-bottom: 1px solid var(--border-color-base1);
|
}
|
}
|
|
.jnpf-code-box {
|
padding: 15px;
|
font-size: 12px;
|
color: #fff;
|
word-break: break-all;
|
background: #848484;
|
border-radius: 4px;
|
}
|
}
|
</style>
|
