<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { reactive, ref } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { BasicPopup, usePopupInner } from '@jnpf/ui/popup';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
|
import { getLogList } from '#/api/systemData/interfaceOauth';
|
import { $t } from '#/locales';
|
|
const id = ref('');
|
const title = ref('');
|
const globSetting = useGlobSetting();
|
const [registerPopup] = usePopupInner(init);
|
const columns: BasicColumn[] = [
|
{ title: '接口名称', dataIndex: 'fullName', minWidth: 150 },
|
{ title: '接口编码', dataIndex: 'enCode', width: 100 },
|
{ title: '请求地址', dataIndex: 'url', width: 300 },
|
{ title: '请求时间', dataIndex: 'invokTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '请求IP', dataIndex: 'invokIp', width: 120 },
|
{ title: '请求类型', dataIndex: 'invokType', width: 80, slots: { default: 'invokType' } },
|
{ title: '耗时(毫秒)', dataIndex: 'invokWasteTime', width: 90 },
|
{ title: '请求设备', dataIndex: 'invokDevice', width: 200 },
|
];
|
const searchInfo = reactive({
|
id: id.value,
|
});
|
const [registerTable, { reload: reloadTable }] = useVxeTable({
|
api: getLogList,
|
columns,
|
useSearchForm: true,
|
showTableSetting: false,
|
height: '100%',
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'pickerVal',
|
label: '请求时间',
|
component: 'DateRange',
|
componentProps: {
|
format: 'YYYY-MM-DD HH:mm:ss',
|
showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
|
placeholder: ['开始时间', '结束时间'],
|
},
|
},
|
],
|
fieldMapToTime: [['pickerVal', ['startTime', 'endTime']]],
|
},
|
immediate: false,
|
afterFetch: (data) => {
|
for (const item of data) {
|
item.url = `${globSetting.apiURL}/api/system/DataInterface/${item.id}/Actions/Response${item.tenantId ? `?tenantId=${item.tenantId}` : ''}`;
|
}
|
return data;
|
},
|
});
|
|
function init(data) {
|
id.value = data.id;
|
title.value = data.appName || '查看详情';
|
searchInfo.id = id.value;
|
reloadTable({ page: 1 });
|
}
|
</script>
|
<template>
|
<BasicPopup v-bind="$attrs" @register="registerPopup" :title="title">
|
<BasicVxeTable @register="registerTable" :search-info="searchInfo">
|
<template #invokType="{ record }">
|
<a-tag :color="record.invokType == 'GET' ? 'success' : 'blue'">{{ record.invokType == 'GET' ? 'GET' : 'POST' }}</a-tag>
|
</template>
|
</BasicVxeTable>
|
</BasicPopup>
|
</template>
|
<style lang="scss" scoped>
|
:deep(.scrollbar__view) {
|
height: 100%;
|
padding-bottom: 0 !important;
|
|
& > div {
|
height: 100%;
|
}
|
}
|
</style>
|
