Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # yarn.lock
This commit is contained in:
xieyonghong
commit
58bbb1ac36
|
|
@ -31,14 +31,15 @@
|
|||
"unplugin-vue-components": "^0.22.12",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-markdown-it": "^1.0.10"
|
||||
"vue3-markdown-it": "^1.0.10",
|
||||
"vue3-ts-jsoneditor": "^2.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.4.1",
|
||||
"@commitlint/config-conventional": "^17.4.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/moment": "^2.13.0",
|
||||
"@types/node": "^18.11.17",
|
||||
"@types/node": "^18.14.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vuemap/unplugin-resolver": "^1.0.4",
|
||||
"autoprefixer": "^10.4.13",
|
||||
|
|
@ -1572,9 +1573,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.11.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
|
||||
"version": "18.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
|
||||
"integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
|
||||
},
|
||||
"node_modules/@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
|
@ -8883,6 +8884,11 @@
|
|||
"builtins": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/vanilla-jsoneditor": {
|
||||
"version": "0.7.11",
|
||||
"resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.7.11.tgz",
|
||||
"integrity": "sha512-DFm6Fg6gzP4FlOaydDCRWpqEsmI5umpb9fOV3hKbbNDO1ZHTUpuMwi1SmMyoEsSgdDGGzRLFNCrW0URQ9Skx4w=="
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
||||
|
|
@ -9146,6 +9152,27 @@
|
|||
"markdown-it-toc-done-right": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-ts-jsoneditor": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.7.1.tgz",
|
||||
"integrity": "sha512-u8dWSG21dK0+iwbY6yhpcyRstQEKbO53+4Ma4Qhf9ED/wbGURjLvX/GTMbVsU7xB4gJKEs1a01AxBIgIab+4uA==",
|
||||
"funding": [
|
||||
"https://uahelp.monobank.ua/",
|
||||
"https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi",
|
||||
"https://www.comebackalive.in.ua/",
|
||||
"https://armysos.com.ua/donate/",
|
||||
"http://wings-phoenix.org.ua/en/about-fund/",
|
||||
"https://novaposhta.ua/eng/",
|
||||
"https://voices.org.ua/en/donat/",
|
||||
"https://www.unicef.org.uk/donate/donate-now-to-protect-children-in-ukraine/",
|
||||
"https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=FYFZPVQN8J7YC&source=url",
|
||||
"https://novaukraine.org/"
|
||||
],
|
||||
"dependencies": {
|
||||
"vanilla-jsoneditor": "^0.7.9",
|
||||
"vue": "^3.2.37"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
|
|
@ -10594,9 +10621,9 @@
|
|||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "18.11.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
|
||||
"version": "18.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
|
||||
"integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
|
@ -16470,6 +16497,11 @@
|
|||
"builtins": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"vanilla-jsoneditor": {
|
||||
"version": "0.7.11",
|
||||
"resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.7.11.tgz",
|
||||
"integrity": "sha512-DFm6Fg6gzP4FlOaydDCRWpqEsmI5umpb9fOV3hKbbNDO1ZHTUpuMwi1SmMyoEsSgdDGGzRLFNCrW0URQ9Skx4w=="
|
||||
},
|
||||
"vite": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
||||
|
|
@ -16657,6 +16689,15 @@
|
|||
"markdown-it-toc-done-right": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"vue3-ts-jsoneditor": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.7.1.tgz",
|
||||
"integrity": "sha512-u8dWSG21dK0+iwbY6yhpcyRstQEKbO53+4Ma4Qhf9ED/wbGURjLvX/GTMbVsU7xB4gJKEs1a01AxBIgIab+4uA==",
|
||||
"requires": {
|
||||
"vanilla-jsoneditor": "^0.7.9",
|
||||
"vue": "^3.2.37"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@
|
|||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-markdown-it": "^1.0.10"
|
||||
"vue3-markdown-it": "^1.0.10",
|
||||
"vue3-ts-jsoneditor": "^2.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.4.1",
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ export default [
|
|||
path: '/search',
|
||||
component: () => import('@/views/demo/Search.vue')
|
||||
},
|
||||
{
|
||||
path: '/system/Api',
|
||||
component: () => import('@/views/system/Apply/Api/index.vue')
|
||||
},
|
||||
|
||||
// end: 测试用, 可删除
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder="请选择通知方式"
|
||||
:disabled="!!formData.id"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in NOTICE_METHOD"
|
||||
|
|
@ -437,7 +438,8 @@ getDetail();
|
|||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
const form = useForm(formData.value, formRules.value);
|
||||
form.validate()
|
||||
.then(async () => {
|
||||
// console.log('formData.value: ', formData.value);
|
||||
btnLoading.value = true;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ const columns = [
|
|||
search: {
|
||||
type: 'date',
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -110,7 +110,7 @@ const columns = [
|
|||
{ label: '失败', value: 'error' },
|
||||
],
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -139,7 +139,16 @@ const handleSearch = (e: any) => {
|
|||
const handleError = (e: any) => {
|
||||
Modal.info({
|
||||
title: '错误信息',
|
||||
content: JSON.stringify(e),
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
};
|
||||
/**
|
||||
|
|
@ -148,7 +157,16 @@ const handleError = (e: any) => {
|
|||
const handleDetail = (e: any) => {
|
||||
Modal.info({
|
||||
title: '详情信息',
|
||||
content: JSON.stringify(e),
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ const columns = [
|
|||
type: 'select',
|
||||
options: NOTICE_METHOD,
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -222,7 +222,7 @@ const columns = [
|
|||
type: 'select',
|
||||
options: providerList,
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder="请选择通知方式"
|
||||
:disabled="!!formData.id"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in NOTICE_METHOD"
|
||||
|
|
@ -700,7 +701,8 @@ const handleSubmit = () => {
|
|||
if (formData.value.template.messageType === 'markdown') delete formData.value.template.link
|
||||
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
|
||||
// console.log('formData.value: ', formData.value);
|
||||
validate()
|
||||
const form = useForm(formData.value, formRules.value);
|
||||
form.validate()
|
||||
.then(async () => {
|
||||
formData.value.template.ttsCode =
|
||||
formData.value.template.templateCode;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ const columns = [
|
|||
search: {
|
||||
type: 'date',
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -110,7 +110,7 @@ const columns = [
|
|||
{ label: '失败', value: 'error' },
|
||||
],
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -139,7 +139,16 @@ const handleSearch = (e: any) => {
|
|||
const handleError = (e: any) => {
|
||||
Modal.info({
|
||||
title: '错误信息',
|
||||
content: JSON.stringify(e),
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
};
|
||||
/**
|
||||
|
|
@ -148,7 +157,16 @@ const handleError = (e: any) => {
|
|||
const handleDetail = (e: any) => {
|
||||
Modal.info({
|
||||
title: '详情信息',
|
||||
content: JSON.stringify(e),
|
||||
content: h(
|
||||
'p',
|
||||
{
|
||||
style: {
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
},
|
||||
JSON.stringify(e),
|
||||
),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ const columns = [
|
|||
type: 'select',
|
||||
options: NOTICE_METHOD,
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -209,7 +209,7 @@ const columns = [
|
|||
type: 'select',
|
||||
options: providerList,
|
||||
handleValue: (v: any) => {
|
||||
return '123';
|
||||
return v;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,316 +0,0 @@
|
|||
<template>
|
||||
<div class="api-does-container">
|
||||
<div class="top">
|
||||
<h5>{{ selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<span class="label">请求数据类型</span>
|
||||
<span>{{
|
||||
getContent(selectApi.requestBody) ||
|
||||
'application/x-www-form-urlencoded'
|
||||
}}</span>
|
||||
<span class="label">响应数据类型</span>
|
||||
<span>{{ `["/"]` }}</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="requestCard.columns"
|
||||
:dataSource="requestCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #required="slotProps">
|
||||
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.row.schema.type }}</span>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>响应状态</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="responseStatusCard.columns"
|
||||
:dataSource="responseStatusCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
|
||||
<a-tabs v-model:activeKey="responseStatusCard.activeKey">
|
||||
<a-tab-pane
|
||||
:key="key"
|
||||
:tab="key"
|
||||
v-for="key in tabs"
|
||||
></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>响应参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="respParamsCard.columns"
|
||||
:dataSource="respParamsCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
schemas: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
|
||||
type tableCardType = {
|
||||
columns: object[];
|
||||
tableData: object[];
|
||||
activeKey?: any;
|
||||
getData?: any;
|
||||
};
|
||||
const requestCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '参数说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
},
|
||||
{
|
||||
title: '请求类型',
|
||||
dataIndex: 'in',
|
||||
key: 'in',
|
||||
},
|
||||
{
|
||||
title: '是否必须',
|
||||
dataIndex: 'required',
|
||||
key: 'required',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '参数类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
requestCard.tableData = props.selectApi.parameters;
|
||||
},
|
||||
});
|
||||
const responseStatusCard = reactive<tableCardType>({
|
||||
activeKey: '',
|
||||
columns: [
|
||||
{
|
||||
title: '状态码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desc',
|
||||
key: 'desc',
|
||||
},
|
||||
{
|
||||
title: 'schema',
|
||||
dataIndex: 'schema',
|
||||
key: 'schema',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
if (!Object.keys(props.selectApi.responses).length)
|
||||
return (responseStatusCard.tableData = []);
|
||||
|
||||
const tableData = <any>[];
|
||||
Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
|
||||
const desc = item[1].description;
|
||||
const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
|
||||
|
||||
tableData.push({
|
||||
code: item[0],
|
||||
desc,
|
||||
schema: schema && schema.pop(),
|
||||
});
|
||||
});
|
||||
responseStatusCard.activeKey = tableData[0]?.code;
|
||||
responseStatusCard.tableData = tableData;
|
||||
},
|
||||
});
|
||||
const tabs = computed(() =>
|
||||
responseStatusCard.tableData
|
||||
.map((item: any) => item.code + '')
|
||||
.filter((code: string) => code !== '400'),
|
||||
);
|
||||
const respParamsCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'paramsName',
|
||||
},
|
||||
{
|
||||
title: '参数说明',
|
||||
dataIndex: 'desc',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'paramsType',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: (code: string) => {
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
|
||||
const schemaName = responseStatusCard.tableData.find(
|
||||
(item: any) => item.code === code,
|
||||
)?.schema;
|
||||
const schemas = toRaw(props.schemas);
|
||||
function findData(schemaName: string) {
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
||||
const paramsType =
|
||||
item[1].type ||
|
||||
(item[1].$ref && item[1].$ref.split('/').pop()) ||
|
||||
(item[1].items && item[1].items.$ref.split('/').pop()) ||
|
||||
'';
|
||||
const schemaObj: schemaObjType = {
|
||||
paramsName: item[0],
|
||||
paramsType,
|
||||
desc: item[1].description || '',
|
||||
};
|
||||
if (!basicType.includes(paramsType))
|
||||
schemaObj.children = findData(paramsType);
|
||||
result.push(schemaObj);
|
||||
});
|
||||
console.log(result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
respParamsCard.tableData = findData(schemaName);
|
||||
// console.log(respParamsCard.tableData);
|
||||
},
|
||||
});
|
||||
|
||||
const getContent = (data: any) => {
|
||||
if (data && data.content) {
|
||||
return Object.keys(data.content || {})[0];
|
||||
}
|
||||
return '';
|
||||
};
|
||||
onMounted(() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
});
|
||||
watch(
|
||||
() => props.selectApi,
|
||||
() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
},
|
||||
);
|
||||
|
||||
watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
|
||||
n[0] && respParamsCard.getData(n[0]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-does-container {
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.api-card {
|
||||
margin-top: 24px;
|
||||
h5 {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #1d39c4;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding-left: 10px;
|
||||
|
||||
:deep(.jtable-body) {
|
||||
padding: 0;
|
||||
|
||||
.jtable-body-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<template>
|
||||
<div class="api-test-container">
|
||||
<div class="top">
|
||||
<h5>{{ selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
<span class="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-test-container {
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
|
||||
.send {
|
||||
width: 65px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="choose-api-container">
|
||||
<JTable
|
||||
:columns="columns"
|
||||
:dataSource="props.tableData"
|
||||
:rowSelection="rowSelection"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #url="slotProps">
|
||||
<span
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="jump(slotProps.row)"
|
||||
>{{ slotProps.row.url }}</span
|
||||
>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<a-button type="primary">保存</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TableProps } from 'ant-design-vue';
|
||||
|
||||
const emits = defineEmits(['update:clickApi'])
|
||||
const props = defineProps({
|
||||
tableData: Array,
|
||||
clickApi: Object
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'API',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'summary',
|
||||
key: 'summary',
|
||||
},
|
||||
];
|
||||
const rowSelection: TableProps['rowSelection'] = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
};
|
||||
|
||||
const jump = (row:object) => {
|
||||
emits('update:clickApi',row)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.choose-api-container {
|
||||
height: 100%;
|
||||
|
||||
:deep(.jtable-body-header) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<span class="input-card-container" :class="props.value">
|
||||
{{ props.value?.toLocaleUpperCase() }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-card-container {
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
&.get {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
&.put {
|
||||
background-color: #fa8c16;
|
||||
}
|
||||
&.post {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
&.delete {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
&.patch {
|
||||
background-color: #a0d911;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<a-tree
|
||||
:tree-data="treeData"
|
||||
@select="clickSelectItem"
|
||||
showLine
|
||||
class="left-tree-container"
|
||||
>
|
||||
<template #title="{ name }">
|
||||
{{ name }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TreeProps } from 'ant-design-vue';
|
||||
|
||||
import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
|
||||
import { treeNodeTpye } from '../typing';
|
||||
|
||||
const emits = defineEmits(['select']);
|
||||
|
||||
const treeData = ref<TreeProps['treeData']>([]);
|
||||
|
||||
const getTreeData = () => {
|
||||
let tree: treeNodeTpye[] = [];
|
||||
getTreeOne_api().then((resp: any) => {
|
||||
tree = resp.urls.map((item: any) => ({
|
||||
...item,
|
||||
key: item.url,
|
||||
}));
|
||||
const allPromise = tree.map((item) => getTreeTwo_api(item.name));
|
||||
Promise.all(allPromise).then((values) => {
|
||||
values.forEach((item: any, i) => {
|
||||
tree[i].children = combData(item?.paths);
|
||||
tree[i].schemas = item.components.schemas
|
||||
});
|
||||
treeData.value = tree;
|
||||
});
|
||||
});
|
||||
};
|
||||
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
||||
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData();
|
||||
});
|
||||
|
||||
const combData = (dataSource: object) => {
|
||||
const apiList: treeNodeTpye[] = [];
|
||||
const keys = Object.keys(dataSource);
|
||||
|
||||
keys.forEach((key) => {
|
||||
const method = Object.keys(dataSource[key] || {})[0];
|
||||
const name = dataSource[key][method].tags[0];
|
||||
let apiObj: treeNodeTpye | undefined = apiList.find(
|
||||
(item) => item.name === name,
|
||||
);
|
||||
if (apiObj) {
|
||||
apiObj.apiList?.push({
|
||||
url: key,
|
||||
method: dataSource[key],
|
||||
});
|
||||
} else {
|
||||
apiObj = {
|
||||
name,
|
||||
key: name,
|
||||
apiList: [
|
||||
{
|
||||
url: key,
|
||||
method: dataSource[key],
|
||||
},
|
||||
],
|
||||
};
|
||||
apiList.push(apiObj);
|
||||
}
|
||||
});
|
||||
|
||||
return apiList;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.left-tree-container {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
.ant-tree-list {
|
||||
.ant-tree-list-holder-inner {
|
||||
.ant-tree-switcher-noop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<a-card class="api-page-container">
|
||||
api
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="5">
|
||||
<LeftTree @select="treeSelect" />
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<ChooseApi
|
||||
v-show="!selectedApi.url"
|
||||
v-model:click-api="selectedApi"
|
||||
:table-data="tableData"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="api-details"
|
||||
v-show="selectedApi.url && tableData.length > 0"
|
||||
>
|
||||
<a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
|
||||
>返回</a-button
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="does" tab="文档">
|
||||
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="test" tab="调试">
|
||||
<ApiTest :select-api="selectedApi" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="apiPage">
|
||||
import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
|
||||
import LeftTree from './components/LeftTree.vue';
|
||||
import ChooseApi from './components/ChooseApi.vue';
|
||||
import ApiDoes from './components/ApiDoes.vue';
|
||||
import ApiTest from './components/ApiTest.vue';
|
||||
|
||||
const tableData = ref([]);
|
||||
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
||||
schemas.value = nodeSchemas
|
||||
if (!node.apiList) return;
|
||||
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
||||
const table: any = [];
|
||||
// 将对象形式的数据转换为表格需要的形式
|
||||
apiList?.forEach((apiItem) => {
|
||||
const { method, url } = apiItem;
|
||||
for (const key in method) {
|
||||
if (Object.prototype.hasOwnProperty.call(method, key)) {
|
||||
table.push({
|
||||
...method[key],
|
||||
url,
|
||||
method: key,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
tableData.value = table;
|
||||
};
|
||||
|
||||
const activeKey = ref('does');
|
||||
const schemas = ref({});
|
||||
const initSelectedApi:apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
summary: '',
|
||||
parameters: [],
|
||||
responses: {},
|
||||
requestBody: {}
|
||||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
watch(tableData, () => (selectedApi.value = initSelectedApi));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.api-page-container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
export type treeNodeTpye = {
|
||||
name: string;
|
||||
key: string;
|
||||
schemas?:object;
|
||||
link?: string;
|
||||
apiList?: object[];
|
||||
children?: treeNodeTpye[];
|
||||
|
||||
};
|
||||
export type methodType = {
|
||||
[key: string]: object
|
||||
}
|
||||
export type apiObjType = {
|
||||
url: string,
|
||||
method: methodType
|
||||
}
|
||||
|
||||
export type apiDetailsType = {
|
||||
url: string;
|
||||
method: string;
|
||||
summary: string;
|
||||
parameters: any[];
|
||||
requestBody?: any;
|
||||
responses:object;
|
||||
}
|
||||
|
|
@ -28,10 +28,10 @@
|
|||
model="TABLE"
|
||||
>
|
||||
<template #required="slotProps">
|
||||
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
|
||||
<span>{{ Boolean(slotProps.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.row.schema.type }}</span>
|
||||
<span>{{ slotProps.schema.type }}</span>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
|
|
@ -68,11 +68,18 @@
|
|||
>
|
||||
</JTable>
|
||||
</div>
|
||||
|
||||
<MonacoEditor
|
||||
v-model:modelValue="codeText"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
|
@ -92,6 +99,7 @@ const { selectApi } = toRefs(props);
|
|||
type tableCardType = {
|
||||
columns: object[];
|
||||
tableData: object[];
|
||||
codeText?: any;
|
||||
activeKey?: any;
|
||||
getData?: any;
|
||||
};
|
||||
|
|
@ -190,11 +198,12 @@ const respParamsCard = reactive<tableCardType>({
|
|||
},
|
||||
],
|
||||
tableData: [],
|
||||
codeText: '',
|
||||
getData: (code: string) => {
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc: string;
|
||||
desc?: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
|
||||
|
|
@ -202,13 +211,20 @@ const respParamsCard = reactive<tableCardType>({
|
|||
(item: any) => item.code === code,
|
||||
)?.schema;
|
||||
const schemas = toRaw(props.schemas);
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
|
||||
const tableData = findData(schemaName);
|
||||
const codeText = getCodeText(tableData, 3);
|
||||
|
||||
respParamsCard.tableData = tableData;
|
||||
respParamsCard.codeText = JSON.stringify(codeText);
|
||||
|
||||
function findData(schemaName: string) {
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
||||
const paramsType =
|
||||
item[1].type ||
|
||||
|
|
@ -224,16 +240,62 @@ const respParamsCard = reactive<tableCardType>({
|
|||
schemaObj.children = findData(paramsType);
|
||||
result.push(schemaObj);
|
||||
});
|
||||
console.log(result);
|
||||
|
||||
return result;
|
||||
}
|
||||
function getCodeText(arr: schemaObjType[], level: number): object {
|
||||
const result = {};
|
||||
|
||||
respParamsCard.tableData = findData(schemaName);
|
||||
// console.log(respParamsCard.tableData);
|
||||
arr.forEach((item) => {
|
||||
switch (item.paramsType) {
|
||||
case 'string':
|
||||
result[item.paramsName] = '';
|
||||
break;
|
||||
case 'integer':
|
||||
result[item.paramsName] = 0;
|
||||
break;
|
||||
case 'boolean':
|
||||
result[item.paramsName] = true;
|
||||
break;
|
||||
case 'array':
|
||||
result[item.paramsName] = [];
|
||||
break;
|
||||
case 'object':
|
||||
result[item.paramsName] = {};
|
||||
break;
|
||||
default: {
|
||||
const properties = schemas[item.paramsType]
|
||||
.properties as object;
|
||||
const newArr = Object.entries(properties).map(
|
||||
(item: [string, any]) => ({
|
||||
paramsName: item[0],
|
||||
paramsType: level
|
||||
? (item[1].$ref &&
|
||||
item[1].$ref.split('/').pop()) ||
|
||||
(item[1].items &&
|
||||
item[1].items.$ref
|
||||
.split('/')
|
||||
.pop()) ||
|
||||
item[1].type ||
|
||||
''
|
||||
: item[1].type,
|
||||
}),
|
||||
);
|
||||
result[item.paramsName] = getCodeText(
|
||||
newArr,
|
||||
level - 1,
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { codeText } = toRefs(requestCard);
|
||||
|
||||
const getContent = (data: any) => {
|
||||
if (data && data.content) {
|
||||
return Object.keys(data.content || {})[0];
|
||||
|
|
|
|||
|
|
@ -1,18 +1,51 @@
|
|||
<template>
|
||||
<div class="api-test-container">
|
||||
<div class="top">
|
||||
<h5>{{ selectApi.summary }}</h5>
|
||||
<h5>{{ props.selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
<InputCard :value="props.selectApi.method" />
|
||||
<a-input :value="props.selectApi?.url" disabled />
|
||||
<span class="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<VueJsoneditor
|
||||
height="400"
|
||||
mode="tree"
|
||||
v-model:text="requestBody.paramsText"
|
||||
/>
|
||||
<!-- <MonacoEditor
|
||||
v-model:modelValue="requestBody.paramsText"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>响应参数</h5>
|
||||
<div class="content">
|
||||
<VueJsoneditor
|
||||
height="400"
|
||||
mode="tree"
|
||||
v-model:text="responsesContent"
|
||||
/>
|
||||
<!-- <MonacoEditor
|
||||
v-model:modelValue="responsesContent"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { apiDetailsType } from '../typing';
|
||||
import VueJsoneditor from 'vue3-ts-jsoneditor';
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
|
|
@ -22,7 +55,13 @@ const props = defineProps({
|
|||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
|
||||
const requestBody = reactive({
|
||||
paramsTable: [],
|
||||
paramsText: '',
|
||||
});
|
||||
|
||||
const responsesContent = ref('{"a":123}');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -47,5 +86,36 @@ const { selectApi } = toRefs(props);
|
|||
}
|
||||
}
|
||||
}
|
||||
.api-card {
|
||||
margin-top: 24px;
|
||||
h5 {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #1d39c4;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding-left: 10px;
|
||||
|
||||
:deep(.jtable-body) {
|
||||
padding: 0;
|
||||
|
||||
.jtable-body-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
<template #url="slotProps">
|
||||
<span
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="jump(slotProps.row)"
|
||||
>{{ slotProps.row.url }}</span
|
||||
@click="jump(slotProps)"
|
||||
>{{ slotProps.url}}</span
|
||||
>
|
||||
</template>
|
||||
</JTable>
|
||||
|
|
@ -48,8 +48,9 @@ const rowSelection: TableProps['rowSelection'] = {
|
|||
},
|
||||
};
|
||||
|
||||
const jump = (row:object) => {
|
||||
const jump = (row:any) => {
|
||||
emits('update:clickApi',row)
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const getTreeData = () => {
|
|||
});
|
||||
};
|
||||
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
||||
if(!node.node.parent) return
|
||||
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<a-card class="api-page-container">
|
||||
apply/api
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="5">
|
||||
<LeftTree @select="treeSelect" />
|
||||
|
|
@ -14,14 +13,19 @@
|
|||
|
||||
<div
|
||||
class="api-details"
|
||||
v-show="selectedApi.url && tableData.length > 0"
|
||||
v-if="selectedApi.url && tableData.length > 0"
|
||||
>
|
||||
<a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
|
||||
<a-button
|
||||
@click="selectedApi = initSelectedApi"
|
||||
style="margin-bottom: 24px"
|
||||
>返回</a-button
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="does" tab="文档">
|
||||
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
|
||||
<ApiDoes
|
||||
:select-api="selectedApi"
|
||||
:schemas="schemas"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="test" tab="调试">
|
||||
<ApiTest :select-api="selectedApi" />
|
||||
|
|
@ -41,8 +45,8 @@ import ApiDoes from './components/ApiDoes.vue';
|
|||
import ApiTest from './components/ApiTest.vue';
|
||||
|
||||
const tableData = ref([]);
|
||||
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
||||
schemas.value = nodeSchemas
|
||||
const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
|
||||
schemas.value = nodeSchemas;
|
||||
if (!node.apiList) return;
|
||||
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
||||
const table: any = [];
|
||||
|
|
@ -64,13 +68,13 @@ const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
|||
|
||||
const activeKey = ref('does');
|
||||
const schemas = ref({});
|
||||
const initSelectedApi:apiDetailsType = {
|
||||
const initSelectedApi: apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
summary: '',
|
||||
parameters: [],
|
||||
responses: {},
|
||||
requestBody: {}
|
||||
requestBody: {},
|
||||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
|
|
@ -79,6 +83,8 @@ watch(tableData, () => (selectedApi.value = initSelectedApi));
|
|||
|
||||
<style scoped>
|
||||
.api-page-container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,316 +0,0 @@
|
|||
<template>
|
||||
<div class="api-does-container">
|
||||
<div class="top">
|
||||
<h5>{{ selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<span class="label">请求数据类型</span>
|
||||
<span>{{
|
||||
getContent(selectApi.requestBody) ||
|
||||
'application/x-www-form-urlencoded'
|
||||
}}</span>
|
||||
<span class="label">响应数据类型</span>
|
||||
<span>{{ `["/"]` }}</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="requestCard.columns"
|
||||
:dataSource="requestCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #required="slotProps">
|
||||
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.row.schema.type }}</span>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>响应状态</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="responseStatusCard.columns"
|
||||
:dataSource="responseStatusCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
|
||||
<a-tabs v-model:activeKey="responseStatusCard.activeKey">
|
||||
<a-tab-pane
|
||||
:key="key"
|
||||
:tab="key"
|
||||
v-for="key in tabs"
|
||||
></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>响应参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="respParamsCard.columns"
|
||||
:dataSource="respParamsCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
schemas: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
|
||||
type tableCardType = {
|
||||
columns: object[];
|
||||
tableData: object[];
|
||||
activeKey?: any;
|
||||
getData?: any;
|
||||
};
|
||||
const requestCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '参数说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
},
|
||||
{
|
||||
title: '请求类型',
|
||||
dataIndex: 'in',
|
||||
key: 'in',
|
||||
},
|
||||
{
|
||||
title: '是否必须',
|
||||
dataIndex: 'required',
|
||||
key: 'required',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '参数类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
requestCard.tableData = props.selectApi.parameters;
|
||||
},
|
||||
});
|
||||
const responseStatusCard = reactive<tableCardType>({
|
||||
activeKey: '',
|
||||
columns: [
|
||||
{
|
||||
title: '状态码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desc',
|
||||
key: 'desc',
|
||||
},
|
||||
{
|
||||
title: 'schema',
|
||||
dataIndex: 'schema',
|
||||
key: 'schema',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
if (!Object.keys(props.selectApi.responses).length)
|
||||
return (responseStatusCard.tableData = []);
|
||||
|
||||
const tableData = <any>[];
|
||||
Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
|
||||
const desc = item[1].description;
|
||||
const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
|
||||
|
||||
tableData.push({
|
||||
code: item[0],
|
||||
desc,
|
||||
schema: schema && schema.pop(),
|
||||
});
|
||||
});
|
||||
responseStatusCard.activeKey = tableData[0]?.code;
|
||||
responseStatusCard.tableData = tableData;
|
||||
},
|
||||
});
|
||||
const tabs = computed(() =>
|
||||
responseStatusCard.tableData
|
||||
.map((item: any) => item.code + '')
|
||||
.filter((code: string) => code !== '400'),
|
||||
);
|
||||
const respParamsCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'paramsName',
|
||||
},
|
||||
{
|
||||
title: '参数说明',
|
||||
dataIndex: 'desc',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'paramsType',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: (code: string) => {
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
|
||||
const schemaName = responseStatusCard.tableData.find(
|
||||
(item: any) => item.code === code,
|
||||
)?.schema;
|
||||
const schemas = toRaw(props.schemas);
|
||||
function findData(schemaName: string) {
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
||||
const paramsType =
|
||||
item[1].type ||
|
||||
(item[1].$ref && item[1].$ref.split('/').pop()) ||
|
||||
(item[1].items && item[1].items.$ref.split('/').pop()) ||
|
||||
'';
|
||||
const schemaObj: schemaObjType = {
|
||||
paramsName: item[0],
|
||||
paramsType,
|
||||
desc: item[1].description || '',
|
||||
};
|
||||
if (!basicType.includes(paramsType))
|
||||
schemaObj.children = findData(paramsType);
|
||||
result.push(schemaObj);
|
||||
});
|
||||
console.log(result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
respParamsCard.tableData = findData(schemaName);
|
||||
// console.log(respParamsCard.tableData);
|
||||
},
|
||||
});
|
||||
|
||||
const getContent = (data: any) => {
|
||||
if (data && data.content) {
|
||||
return Object.keys(data.content || {})[0];
|
||||
}
|
||||
return '';
|
||||
};
|
||||
onMounted(() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
});
|
||||
watch(
|
||||
() => props.selectApi,
|
||||
() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
},
|
||||
);
|
||||
|
||||
watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
|
||||
n[0] && respParamsCard.getData(n[0]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-does-container {
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.api-card {
|
||||
margin-top: 24px;
|
||||
h5 {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #1d39c4;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding-left: 10px;
|
||||
|
||||
:deep(.jtable-body) {
|
||||
padding: 0;
|
||||
|
||||
.jtable-body-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<template>
|
||||
<div class="api-test-container">
|
||||
<div class="top">
|
||||
<h5>{{ selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
<span class="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-test-container {
|
||||
.top {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
|
||||
.send {
|
||||
width: 65px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="choose-api-container">
|
||||
<JTable
|
||||
:columns="columns"
|
||||
:dataSource="props.tableData"
|
||||
:rowSelection="rowSelection"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #url="slotProps">
|
||||
<span
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="jump(slotProps.row)"
|
||||
>{{ slotProps.row.url }}</span
|
||||
>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<a-button type="primary">保存</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TableProps } from 'ant-design-vue';
|
||||
|
||||
const emits = defineEmits(['update:clickApi'])
|
||||
const props = defineProps({
|
||||
tableData: Array,
|
||||
clickApi: Object
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'API',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'summary',
|
||||
key: 'summary',
|
||||
},
|
||||
];
|
||||
const rowSelection: TableProps['rowSelection'] = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
};
|
||||
|
||||
const jump = (row:object) => {
|
||||
emits('update:clickApi',row)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.choose-api-container {
|
||||
height: 100%;
|
||||
|
||||
:deep(.jtable-body-header) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<span class="input-card-container" :class="props.value">
|
||||
{{ props.value?.toLocaleUpperCase() }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-card-container {
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
&.get {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
&.put {
|
||||
background-color: #fa8c16;
|
||||
}
|
||||
&.post {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
&.delete {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
&.patch {
|
||||
background-color: #a0d911;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<a-tree
|
||||
:tree-data="treeData"
|
||||
@select="clickSelectItem"
|
||||
showLine
|
||||
class="left-tree-container"
|
||||
>
|
||||
<template #title="{ name }">
|
||||
{{ name }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TreeProps } from 'ant-design-vue';
|
||||
|
||||
import { getTreeOne_api, getTreeTwo_api } from '@/api/system/apiPage';
|
||||
import { treeNodeTpye } from '../typing';
|
||||
|
||||
const emits = defineEmits(['select']);
|
||||
|
||||
const treeData = ref<TreeProps['treeData']>([]);
|
||||
|
||||
const getTreeData = () => {
|
||||
let tree: treeNodeTpye[] = [];
|
||||
getTreeOne_api().then((resp: any) => {
|
||||
tree = resp.urls.map((item: any) => ({
|
||||
...item,
|
||||
key: item.url,
|
||||
}));
|
||||
const allPromise = tree.map((item) => getTreeTwo_api(item.name));
|
||||
Promise.all(allPromise).then((values) => {
|
||||
values.forEach((item: any, i) => {
|
||||
tree[i].children = combData(item?.paths);
|
||||
tree[i].schemas = item.components.schemas
|
||||
});
|
||||
treeData.value = tree;
|
||||
});
|
||||
});
|
||||
};
|
||||
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
||||
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTreeData();
|
||||
});
|
||||
|
||||
const combData = (dataSource: object) => {
|
||||
const apiList: treeNodeTpye[] = [];
|
||||
const keys = Object.keys(dataSource);
|
||||
|
||||
keys.forEach((key) => {
|
||||
const method = Object.keys(dataSource[key] || {})[0];
|
||||
const name = dataSource[key][method].tags[0];
|
||||
let apiObj: treeNodeTpye | undefined = apiList.find(
|
||||
(item) => item.name === name,
|
||||
);
|
||||
if (apiObj) {
|
||||
apiObj.apiList?.push({
|
||||
url: key,
|
||||
method: dataSource[key],
|
||||
});
|
||||
} else {
|
||||
apiObj = {
|
||||
name,
|
||||
key: name,
|
||||
apiList: [
|
||||
{
|
||||
url: key,
|
||||
method: dataSource[key],
|
||||
},
|
||||
],
|
||||
};
|
||||
apiList.push(apiObj);
|
||||
}
|
||||
});
|
||||
|
||||
return apiList;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.left-tree-container {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
.ant-tree-list {
|
||||
.ant-tree-list-holder-inner {
|
||||
.ant-tree-switcher-noop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<a-card class="api-page-container">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="5">
|
||||
<LeftTree @select="treeSelect" />
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<ChooseApi
|
||||
v-show="!selectedApi.url"
|
||||
v-model:click-api="selectedApi"
|
||||
:table-data="tableData"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="api-details"
|
||||
v-show="selectedApi.url && tableData.length > 0"
|
||||
>
|
||||
<a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
|
||||
>返回</a-button
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="does" tab="文档">
|
||||
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="test" tab="调试">
|
||||
<ApiTest :select-api="selectedApi" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="apiPage">
|
||||
import type { treeNodeTpye, apiObjType, apiDetailsType } from './typing';
|
||||
import LeftTree from './components/LeftTree.vue';
|
||||
import ChooseApi from './components/ChooseApi.vue';
|
||||
import ApiDoes from './components/ApiDoes.vue';
|
||||
import ApiTest from './components/ApiTest.vue';
|
||||
|
||||
const tableData = ref([]);
|
||||
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
||||
schemas.value = nodeSchemas
|
||||
if (!node.apiList) return;
|
||||
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
||||
const table: any = [];
|
||||
// 将对象形式的数据转换为表格需要的形式
|
||||
apiList?.forEach((apiItem) => {
|
||||
const { method, url } = apiItem;
|
||||
for (const key in method) {
|
||||
if (Object.prototype.hasOwnProperty.call(method, key)) {
|
||||
table.push({
|
||||
...method[key],
|
||||
url,
|
||||
method: key,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
tableData.value = table;
|
||||
};
|
||||
|
||||
const activeKey = ref('does');
|
||||
const schemas = ref({});
|
||||
const initSelectedApi:apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
summary: '',
|
||||
parameters: [],
|
||||
responses: {},
|
||||
requestBody: {}
|
||||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
watch(tableData, () => (selectedApi.value = initSelectedApi));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.api-page-container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
export type treeNodeTpye = {
|
||||
name: string;
|
||||
key: string;
|
||||
schemas?:object;
|
||||
link?: string;
|
||||
apiList?: object[];
|
||||
children?: treeNodeTpye[];
|
||||
|
||||
};
|
||||
export type methodType = {
|
||||
[key: string]: object
|
||||
}
|
||||
export type apiObjType = {
|
||||
url: string,
|
||||
method: methodType
|
||||
}
|
||||
|
||||
export type apiDetailsType = {
|
||||
url: string;
|
||||
method: string;
|
||||
summary: string;
|
||||
parameters: any[];
|
||||
requestBody?: any;
|
||||
responses:object;
|
||||
}
|
||||
Loading…
Reference in New Issue