feat(apiList): 新增外部接口清单展示页
展示对外提供/对外调用接口清单,支持导出Excel与Markdown, 数据来自后端 /sys/extApi/*。
This commit is contained in:
@@ -0,0 +1,18 @@
|
|||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
|
||||||
|
enum Api {
|
||||||
|
list = '/sys/extApi/list',
|
||||||
|
exportXls = '/sys/extApi/exportXls',
|
||||||
|
exportMarkdown = '/sys/extApi/exportMarkdown',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 外部接口清单
|
||||||
|
*/
|
||||||
|
export const list = () => defHttp.get({ url: Api.list });
|
||||||
|
|
||||||
|
export const exportXls = (params?: any) =>
|
||||||
|
defHttp.get({ url: Api.exportXls, params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
|
||||||
|
|
||||||
|
export const exportMarkdown = (params?: any) =>
|
||||||
|
defHttp.get({ url: Api.exportMarkdown, params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<PageWrapper title="外部接口清单">
|
||||||
|
<template #headerContent>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="flex-1">
|
||||||
|
应用系统间接口清单:对外提供接口(外部系统调用本系统)与对外调用接口(本系统调用外部系统)。数据由代码注解 @ExternalApi / @ExternalCall 启动时自动采集。
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">导出Excel</a-button>
|
||||||
|
<a-button class="ml-2" preIcon="ant-design:file-markdown-outlined" @click="onExportMarkdown">导出Markdown</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<a-card title="对外提供的接口(外部系统调用本系统)" class="mb-4">
|
||||||
|
<a-table :data-source="exposeList" :columns="columns" size="small" :pagination="false" row-key="source" bordered />
|
||||||
|
</a-card>
|
||||||
|
<a-card title="对外调用的接口(本系统调用外部系统)">
|
||||||
|
<a-table :data-source="callList" :columns="columns" size="small" :pagination="false" row-key="source" bordered />
|
||||||
|
</a-card>
|
||||||
|
</PageWrapper>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { PageWrapper } from '/@/components/Page';
|
||||||
|
import { useMethods } from '/@/hooks/system/useMethods';
|
||||||
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||||||
|
import { list, exportMarkdown as exportMarkdownApi } from './apiList.api';
|
||||||
|
|
||||||
|
const { handleExportXls } = useMethods();
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
|
||||||
|
const exposeList = ref<any[]>([]);
|
||||||
|
const callList = ref<any[]>([]);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: '接口名称', dataIndex: 'name', width: 180 },
|
||||||
|
{ title: '接口地址', dataIndex: 'url', width: 260 },
|
||||||
|
{ title: 'HTTP方法', dataIndex: 'httpMethod', width: 90 },
|
||||||
|
{ title: '调用方系统', dataIndex: 'callerSystem', width: 130 },
|
||||||
|
{ title: '被调系统', dataIndex: 'targetSystem', width: 130 },
|
||||||
|
{ title: '数据流向', dataIndex: 'dataFlow', width: 200 },
|
||||||
|
{ title: '数据范围', dataIndex: 'dataScope', width: 180 },
|
||||||
|
{ title: '认证机制', dataIndex: 'auth', width: 90 },
|
||||||
|
{ title: '代码位置', dataIndex: 'source', width: 240 },
|
||||||
|
{ title: '备注', dataIndex: 'remark' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
list().then((res: any[]) => {
|
||||||
|
const all = res || [];
|
||||||
|
exposeList.value = all.filter((i) => i.type === 'EXPOSE');
|
||||||
|
callList.value = all.filter((i) => i.type === 'CALL');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExportXls() {
|
||||||
|
handleExportXls('外部接口清单', '/sys/extApi/exportXls');
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExportMarkdown() {
|
||||||
|
exportMarkdownApi()
|
||||||
|
.then((data: any) => {
|
||||||
|
const blob = new Blob([data], { type: 'text/markdown' });
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.style.display = 'none';
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', '外部接口清单.md');
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
createMessage.warning('文件下载失败');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(loadData);
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user