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",
|
"unplugin-vue-components": "^0.22.12",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
"vue-router": "^4.1.6",
|
"vue-router": "^4.1.6",
|
||||||
"vue3-markdown-it": "^1.0.10"
|
"vue3-markdown-it": "^1.0.10",
|
||||||
|
"vue3-ts-jsoneditor": "^2.7.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.4.1",
|
"@commitlint/cli": "^17.4.1",
|
||||||
"@commitlint/config-conventional": "^17.4.0",
|
"@commitlint/config-conventional": "^17.4.0",
|
||||||
"@types/lodash-es": "^4.17.6",
|
"@types/lodash-es": "^4.17.6",
|
||||||
"@types/moment": "^2.13.0",
|
"@types/moment": "^2.13.0",
|
||||||
"@types/node": "^18.11.17",
|
"@types/node": "^18.14.0",
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"@vuemap/unplugin-resolver": "^1.0.4",
|
"@vuemap/unplugin-resolver": "^1.0.4",
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
|
|
@ -1572,9 +1573,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "18.11.18",
|
"version": "18.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
|
||||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
|
"integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
|
||||||
},
|
},
|
||||||
"node_modules/@types/normalize-package-data": {
|
"node_modules/@types/normalize-package-data": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
|
|
@ -8883,6 +8884,11 @@
|
||||||
"builtins": "^1.0.3"
|
"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": {
|
"node_modules/vite": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
||||||
|
|
@ -9146,6 +9152,27 @@
|
||||||
"markdown-it-toc-done-right": "^4.2.0"
|
"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": {
|
"node_modules/warning": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||||
|
|
@ -10594,9 +10621,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "18.11.18",
|
"version": "18.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
|
||||||
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
|
"integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
|
||||||
},
|
},
|
||||||
"@types/normalize-package-data": {
|
"@types/normalize-package-data": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
|
|
@ -16470,6 +16497,11 @@
|
||||||
"builtins": "^1.0.3"
|
"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": {
|
"vite": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
|
||||||
|
|
@ -16657,6 +16689,15 @@
|
||||||
"markdown-it-toc-done-right": "^4.2.0"
|
"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": {
|
"warning": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,8 @@
|
||||||
"vite-plugin-monaco-editor": "^1.1.0",
|
"vite-plugin-monaco-editor": "^1.1.0",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
"vue-router": "^4.1.6",
|
"vue-router": "^4.1.6",
|
||||||
"vue3-markdown-it": "^1.0.10"
|
"vue3-markdown-it": "^1.0.10",
|
||||||
|
"vue3-ts-jsoneditor": "^2.7.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.4.1",
|
"@commitlint/cli": "^17.4.1",
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,10 @@ export default [
|
||||||
path: '/search',
|
path: '/search',
|
||||||
component: () => import('@/views/demo/Search.vue')
|
component: () => import('@/views/demo/Search.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/system/Api',
|
||||||
|
component: () => import('@/views/system/Apply/Api/index.vue')
|
||||||
|
},
|
||||||
|
|
||||||
// end: 测试用, 可删除
|
// end: 测试用, 可删除
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formData.type"
|
v-model:value="formData.type"
|
||||||
placeholder="请选择通知方式"
|
placeholder="请选择通知方式"
|
||||||
|
:disabled="!!formData.id"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="(item, index) in NOTICE_METHOD"
|
v-for="(item, index) in NOTICE_METHOD"
|
||||||
|
|
@ -437,7 +438,8 @@ getDetail();
|
||||||
*/
|
*/
|
||||||
const btnLoading = ref<boolean>(false);
|
const btnLoading = ref<boolean>(false);
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
validate()
|
const form = useForm(formData.value, formRules.value);
|
||||||
|
form.validate()
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
// console.log('formData.value: ', formData.value);
|
// console.log('formData.value: ', formData.value);
|
||||||
btnLoading.value = true;
|
btnLoading.value = true;
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@ const columns = [
|
||||||
search: {
|
search: {
|
||||||
type: 'date',
|
type: 'date',
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -110,7 +110,7 @@ const columns = [
|
||||||
{ label: '失败', value: 'error' },
|
{ label: '失败', value: 'error' },
|
||||||
],
|
],
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -139,7 +139,16 @@ const handleSearch = (e: any) => {
|
||||||
const handleError = (e: any) => {
|
const handleError = (e: any) => {
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '错误信息',
|
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) => {
|
const handleDetail = (e: any) => {
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '详情信息',
|
title: '详情信息',
|
||||||
content: JSON.stringify(e),
|
content: h(
|
||||||
|
'p',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
maxHeight: '300px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
JSON.stringify(e),
|
||||||
|
),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -209,7 +209,7 @@ const columns = [
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: NOTICE_METHOD,
|
options: NOTICE_METHOD,
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -222,7 +222,7 @@ const columns = [
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: providerList,
|
options: providerList,
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formData.type"
|
v-model:value="formData.type"
|
||||||
placeholder="请选择通知方式"
|
placeholder="请选择通知方式"
|
||||||
|
:disabled="!!formData.id"
|
||||||
>
|
>
|
||||||
<a-select-option
|
<a-select-option
|
||||||
v-for="(item, index) in NOTICE_METHOD"
|
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 === 'markdown') delete formData.value.template.link
|
||||||
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
|
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
|
||||||
// console.log('formData.value: ', formData.value);
|
// console.log('formData.value: ', formData.value);
|
||||||
validate()
|
const form = useForm(formData.value, formRules.value);
|
||||||
|
form.validate()
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
formData.value.template.ttsCode =
|
formData.value.template.ttsCode =
|
||||||
formData.value.template.templateCode;
|
formData.value.template.templateCode;
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@ const columns = [
|
||||||
search: {
|
search: {
|
||||||
type: 'date',
|
type: 'date',
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -110,7 +110,7 @@ const columns = [
|
||||||
{ label: '失败', value: 'error' },
|
{ label: '失败', value: 'error' },
|
||||||
],
|
],
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -139,7 +139,16 @@ const handleSearch = (e: any) => {
|
||||||
const handleError = (e: any) => {
|
const handleError = (e: any) => {
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '错误信息',
|
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) => {
|
const handleDetail = (e: any) => {
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '详情信息',
|
title: '详情信息',
|
||||||
content: JSON.stringify(e),
|
content: h(
|
||||||
|
'p',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
maxHeight: '300px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
JSON.stringify(e),
|
||||||
|
),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -196,7 +196,7 @@ const columns = [
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: NOTICE_METHOD,
|
options: NOTICE_METHOD,
|
||||||
handleValue: (v: any) => {
|
handleValue: (v: any) => {
|
||||||
return '123';
|
return v;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -209,7 +209,7 @@ const columns = [
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: providerList,
|
options: providerList,
|
||||||
handleValue: (v: any) => {
|
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"
|
model="TABLE"
|
||||||
>
|
>
|
||||||
<template #required="slotProps">
|
<template #required="slotProps">
|
||||||
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
|
<span>{{ Boolean(slotProps.required) + '' }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #type="slotProps">
|
<template #type="slotProps">
|
||||||
<span>{{ slotProps.row.schema.type }}</span>
|
<span>{{ slotProps.schema.type }}</span>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -68,11 +68,18 @@
|
||||||
>
|
>
|
||||||
</JTable>
|
</JTable>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<MonacoEditor
|
||||||
|
v-model:modelValue="codeText"
|
||||||
|
style="height: 300px; width: 100%"
|
||||||
|
theme="vs"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||||
import type { apiDetailsType } from '../typing';
|
import type { apiDetailsType } from '../typing';
|
||||||
import InputCard from './InputCard.vue';
|
import InputCard from './InputCard.vue';
|
||||||
import { PropType } from 'vue';
|
import { PropType } from 'vue';
|
||||||
|
|
@ -92,6 +99,7 @@ const { selectApi } = toRefs(props);
|
||||||
type tableCardType = {
|
type tableCardType = {
|
||||||
columns: object[];
|
columns: object[];
|
||||||
tableData: object[];
|
tableData: object[];
|
||||||
|
codeText?: any;
|
||||||
activeKey?: any;
|
activeKey?: any;
|
||||||
getData?: any;
|
getData?: any;
|
||||||
};
|
};
|
||||||
|
|
@ -190,11 +198,12 @@ const respParamsCard = reactive<tableCardType>({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
|
codeText: '',
|
||||||
getData: (code: string) => {
|
getData: (code: string) => {
|
||||||
type schemaObjType = {
|
type schemaObjType = {
|
||||||
paramsName: string;
|
paramsName: string;
|
||||||
paramsType: string;
|
paramsType: string;
|
||||||
desc: string;
|
desc?: string;
|
||||||
children?: schemaObjType[];
|
children?: schemaObjType[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -202,13 +211,20 @@ const respParamsCard = reactive<tableCardType>({
|
||||||
(item: any) => item.code === code,
|
(item: any) => item.code === code,
|
||||||
)?.schema;
|
)?.schema;
|
||||||
const schemas = toRaw(props.schemas);
|
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) {
|
function findData(schemaName: string) {
|
||||||
if (!schemaName || !schemas[schemaName]) {
|
if (!schemaName || !schemas[schemaName]) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
const result: schemaObjType[] = [];
|
const result: schemaObjType[] = [];
|
||||||
const schema = schemas[schemaName];
|
const schema = schemas[schemaName];
|
||||||
const basicType = ['string', 'integer', 'boolean'];
|
|
||||||
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
||||||
const paramsType =
|
const paramsType =
|
||||||
item[1].type ||
|
item[1].type ||
|
||||||
|
|
@ -224,16 +240,62 @@ const respParamsCard = reactive<tableCardType>({
|
||||||
schemaObj.children = findData(paramsType);
|
schemaObj.children = findData(paramsType);
|
||||||
result.push(schemaObj);
|
result.push(schemaObj);
|
||||||
});
|
});
|
||||||
console.log(result);
|
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
function getCodeText(arr: schemaObjType[], level: number): object {
|
||||||
|
const result = {};
|
||||||
|
|
||||||
respParamsCard.tableData = findData(schemaName);
|
arr.forEach((item) => {
|
||||||
// console.log(respParamsCard.tableData);
|
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) => {
|
const getContent = (data: any) => {
|
||||||
if (data && data.content) {
|
if (data && data.content) {
|
||||||
return Object.keys(data.content || {})[0];
|
return Object.keys(data.content || {})[0];
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,51 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="api-test-container">
|
<div class="api-test-container">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<h5>{{ selectApi.summary }}</h5>
|
<h5>{{ props.selectApi.summary }}</h5>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<InputCard :value="selectApi.method" />
|
<InputCard :value="props.selectApi.method" />
|
||||||
<a-input :value="selectApi?.url" disabled />
|
<a-input :value="props.selectApi?.url" disabled />
|
||||||
<span class="send">发送</span>
|
<span class="send">发送</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 InputCard from './InputCard.vue';
|
||||||
import { PropType } from 'vue';
|
import { PropType } from 'vue';
|
||||||
|
|
||||||
|
|
@ -22,7 +55,13 @@ const props = defineProps({
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { selectApi } = toRefs(props);
|
|
||||||
|
const requestBody = reactive({
|
||||||
|
paramsTable: [],
|
||||||
|
paramsText: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const responsesContent = ref('{"a":123}');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
<template #url="slotProps">
|
<template #url="slotProps">
|
||||||
<span
|
<span
|
||||||
style="color: #1d39c4; cursor: pointer"
|
style="color: #1d39c4; cursor: pointer"
|
||||||
@click="jump(slotProps.row)"
|
@click="jump(slotProps)"
|
||||||
>{{ slotProps.row.url }}</span
|
>{{ slotProps.url}}</span
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
|
|
@ -48,8 +48,9 @@ const rowSelection: TableProps['rowSelection'] = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const jump = (row:object) => {
|
const jump = (row:any) => {
|
||||||
emits('update:clickApi',row)
|
emits('update:clickApi',row)
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@ const getTreeData = () => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
||||||
|
if(!node.node.parent) return
|
||||||
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card class="api-page-container">
|
<a-card class="api-page-container">
|
||||||
apply/api
|
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :span="5">
|
<a-col :span="5">
|
||||||
<LeftTree @select="treeSelect" />
|
<LeftTree @select="treeSelect" />
|
||||||
|
|
@ -14,14 +13,19 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="api-details"
|
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-button
|
||||||
>
|
>
|
||||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||||
<a-tab-pane key="does" tab="文档">
|
<a-tab-pane key="does" tab="文档">
|
||||||
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
|
<ApiDoes
|
||||||
|
:select-api="selectedApi"
|
||||||
|
:schemas="schemas"
|
||||||
|
/>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="test" tab="调试">
|
<a-tab-pane key="test" tab="调试">
|
||||||
<ApiTest :select-api="selectedApi" />
|
<ApiTest :select-api="selectedApi" />
|
||||||
|
|
@ -41,8 +45,8 @@ import ApiDoes from './components/ApiDoes.vue';
|
||||||
import ApiTest from './components/ApiTest.vue';
|
import ApiTest from './components/ApiTest.vue';
|
||||||
|
|
||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
|
||||||
schemas.value = nodeSchemas
|
schemas.value = nodeSchemas;
|
||||||
if (!node.apiList) return;
|
if (!node.apiList) return;
|
||||||
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
||||||
const table: any = [];
|
const table: any = [];
|
||||||
|
|
@ -64,13 +68,13 @@ const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
||||||
|
|
||||||
const activeKey = ref('does');
|
const activeKey = ref('does');
|
||||||
const schemas = ref({});
|
const schemas = ref({});
|
||||||
const initSelectedApi:apiDetailsType = {
|
const initSelectedApi: apiDetailsType = {
|
||||||
url: '',
|
url: '',
|
||||||
method: '',
|
method: '',
|
||||||
summary: '',
|
summary: '',
|
||||||
parameters: [],
|
parameters: [],
|
||||||
responses: {},
|
responses: {},
|
||||||
requestBody: {}
|
requestBody: {},
|
||||||
};
|
};
|
||||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||||
|
|
||||||
|
|
@ -79,6 +83,8 @@ watch(tableData, () => (selectedApi.value = initSelectedApi));
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.api-page-container {
|
.api-page-container {
|
||||||
|
padding: 24px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
</style>
|
</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