update: api配置组件替换、逻辑优化
This commit is contained in:
easy
parent
ae3f1a96ff
commit
68720f668c
|
|
@ -11,4 +11,5 @@ declare module '*.bmp';
|
|||
declare module '*.js';
|
||||
declare module '*.ts';
|
||||
declare module 'js-cookie';
|
||||
declare module 'jetlinks-ui-components';
|
||||
declare module 'jetlinks-ui-components';
|
||||
declare module 'vue3-json-viewer';
|
||||
|
|
@ -67,10 +67,10 @@ export default [
|
|||
path: '/form',
|
||||
component: () => import('@/views/demo/Form.vue')
|
||||
},
|
||||
{
|
||||
path: '/system/Api',
|
||||
component: () => import('@/views/system/Platforms/index.vue')
|
||||
},
|
||||
// {
|
||||
// path: '/system/Api',
|
||||
// component: () => import('@/views/system/Platforms/index.vue')
|
||||
// },
|
||||
// end: 测试用, 可删除
|
||||
|
||||
// 初始化
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<h5>{{ selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
<j-input :value="selectApi?.url" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -18,6 +18,14 @@
|
|||
<span>{{ `["/"]` }}</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card" v-if="props.selectApi.description">
|
||||
<h5>接口描述</h5>
|
||||
<div>{{ props.selectApi.description }}</div>
|
||||
</div>
|
||||
<div class="api-card" v-if="requestCard.codeText">
|
||||
<h5>请求示例</h5>
|
||||
<JsonViewer :value="requestCard.codeText" copyable />
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
|
|
@ -26,12 +34,13 @@
|
|||
:dataSource="requestCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
size="small"
|
||||
>
|
||||
<template #required="slotProps">
|
||||
<span>{{ Boolean(slotProps.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.schema.type }}</span>
|
||||
<span>{{ slotProps?.schema.type }}</span>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</div>
|
||||
|
|
@ -44,16 +53,17 @@
|
|||
:dataSource="responseStatusCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
size="small"
|
||||
>
|
||||
</j-pro-table>
|
||||
|
||||
<a-tabs v-model:activeKey="responseStatusCard.activeKey">
|
||||
<a-tab-pane
|
||||
<j-tabs v-model:activeKey="responseStatusCard.activeKey">
|
||||
<j-tab-pane
|
||||
:key="key"
|
||||
:tab="key"
|
||||
v-for="key in tabs"
|
||||
></a-tab-pane>
|
||||
</a-tabs>
|
||||
></j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,21 +75,19 @@
|
|||
:dataSource="respParamsCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
size="small"
|
||||
>
|
||||
</j-pro-table>
|
||||
</div>
|
||||
|
||||
<MonacoEditor
|
||||
v-model:modelValue="codeText"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/>
|
||||
<JsonViewer :value="respParamsCard.codeText" copyable />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import { JsonViewer } from 'vue3-json-viewer';
|
||||
import 'vue3-json-viewer/dist/index.css';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
|
@ -98,7 +106,7 @@ const { selectApi } = toRefs(props);
|
|||
|
||||
type tableCardType = {
|
||||
columns: object[];
|
||||
tableData: object[];
|
||||
tableData: any[];
|
||||
codeText?: any;
|
||||
activeKey?: any;
|
||||
getData?: any;
|
||||
|
|
@ -134,8 +142,36 @@ const requestCard = reactive<tableCardType>({
|
|||
},
|
||||
],
|
||||
tableData: [],
|
||||
codeText: undefined,
|
||||
getData: () => {
|
||||
requestCard.tableData = props.selectApi.parameters;
|
||||
if (!props.selectApi.requestBody)
|
||||
return (requestCard.tableData = props.selectApi.parameters);
|
||||
const schema =
|
||||
props.selectApi.requestBody.content['application/json'].schema;
|
||||
const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
|
||||
const type = schema.type || '';
|
||||
const tableData = findData(schemaName);
|
||||
if (type === 'array') {
|
||||
requestCard.codeText = [getCodeText(tableData, 3)];
|
||||
} else requestCard.codeText = getCodeText(tableData, 3);
|
||||
// console.clear();
|
||||
// console.log(schemaName, tableData);
|
||||
|
||||
requestCard.tableData = [
|
||||
{
|
||||
name: schemaName[0].toLowerCase() + schemaName.substring(1),
|
||||
description: schemaName,
|
||||
in: 'body',
|
||||
required: true,
|
||||
schema: { type: type || schemaName },
|
||||
children: tableData.map((item) => ({
|
||||
name: item.paramsName,
|
||||
description: item.desc,
|
||||
required: false,
|
||||
schema: { type: item.paramsType },
|
||||
})),
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
const responseStatusCard = reactive<tableCardType>({
|
||||
|
|
@ -200,102 +236,17 @@ const respParamsCard = reactive<tableCardType>({
|
|||
tableData: [],
|
||||
codeText: '',
|
||||
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);
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
|
||||
const tableData = findData(schemaName);
|
||||
const codeText = getCodeText(tableData, 3);
|
||||
respParamsCard.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];
|
||||
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);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
function getCodeText(arr: schemaObjType[], level: number): object {
|
||||
const result = {};
|
||||
|
||||
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];
|
||||
|
|
@ -317,6 +268,83 @@ watch(
|
|||
watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
|
||||
n[0] && respParamsCard.getData(n[0]);
|
||||
});
|
||||
|
||||
function findData(schemaName: string) {
|
||||
const schemas = toRaw(props.schemas);
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
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);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
function getCodeText(arr: schemaObjType[], level: number): object {
|
||||
const result = {};
|
||||
const schemas = toRaw(props.schemas);
|
||||
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;
|
||||
}
|
||||
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc?: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<h5>{{ props.selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="props.selectApi.method" />
|
||||
<a-input :value="props.selectApi?.url" disabled />
|
||||
<j-input :value="props.selectApi?.url" disabled />
|
||||
<span class="send" @click="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,14 +12,9 @@
|
|||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<!-- <VueJsoneditor
|
||||
height="400"
|
||||
mode="tree"
|
||||
v-model:text="requestBody.paramsText"
|
||||
/> -->
|
||||
<div class="table" v-if="paramsTable.length">
|
||||
<a-form :model="requestBody.params" ref="formRef" >
|
||||
<a-table
|
||||
<j-form :model="requestBody.params" ref="formRef">
|
||||
<j-table
|
||||
:columns="requestBody.tableColumns"
|
||||
:dataSource="paramsTable"
|
||||
:pagination="false"
|
||||
|
|
@ -27,7 +22,7 @@
|
|||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="[
|
||||
'paramsTable',
|
||||
index +
|
||||
|
|
@ -42,13 +37,13 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="record.name"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
></j-input>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'value'">
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
:name="[
|
||||
'paramsTable',
|
||||
index +
|
||||
|
|
@ -63,10 +58,10 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="record.value"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
></j-input>
|
||||
</j-form-item>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<PermissionButton
|
||||
|
|
@ -82,60 +77,53 @@
|
|||
</PermissionButton>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
</j-table>
|
||||
</j-form>
|
||||
|
||||
<a-pagination
|
||||
<j-pagination
|
||||
:pageSize="requestBody.pageSize"
|
||||
v-model:current="requestBody.pageNum"
|
||||
:total="requestBody.params.paramsTable.length"
|
||||
hideOnSinglePage
|
||||
style="text-align: center"
|
||||
/>
|
||||
<a-button
|
||||
<j-button
|
||||
@click="requestBody.addRow"
|
||||
style="width: 100%; text-align: center"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</a-button>
|
||||
</j-button>
|
||||
</div>
|
||||
<MonacoEditor
|
||||
v-model:modelValue="requestBody.paramsText"
|
||||
v-model:modelValue="requestBody.code"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
ref="editorRef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>响应参数</h5>
|
||||
<div class="content">
|
||||
<VueJsoneditor
|
||||
height="400"
|
||||
mode="tree"
|
||||
v-model:text="responsesContent"
|
||||
:disabled="true"
|
||||
/>
|
||||
<!-- <MonacoEditor
|
||||
v-model:modelValue="responsesContent"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/> -->
|
||||
<JsonViewer :value="responsesContent" copyable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VueJsoneditor from 'vue3-ts-jsoneditor';
|
||||
import { JsonViewer } from 'vue3-json-viewer';
|
||||
import 'vue3-json-viewer/dist/index.css';
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { cloneDeep, toLower } from 'lodash';
|
||||
import { FormInstance } from 'ant-design-vue';
|
||||
import server from '@/utils/request'
|
||||
import server from '@/utils/request';
|
||||
|
||||
const props = defineProps<{
|
||||
selectApi: apiDetailsType;
|
||||
schemas: any;
|
||||
}>();
|
||||
const formRef = ref<FormInstance>();
|
||||
const requestBody = reactive({
|
||||
|
|
@ -163,10 +151,12 @@ const requestBody = reactive({
|
|||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
params: {
|
||||
paramsTable: cloneDeep(props.selectApi.parameters || []) as requestObj[],
|
||||
paramsTable: cloneDeep(
|
||||
props.selectApi.parameters || [],
|
||||
) as requestObj[],
|
||||
},
|
||||
|
||||
paramsText: '',
|
||||
code: '',
|
||||
|
||||
addRow: () => {
|
||||
if (paramsTable.value.length === 10)
|
||||
|
|
@ -188,49 +178,142 @@ const paramsTable = computed(() => {
|
|||
return requestBody.params.paramsTable.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
const responsesContent = ref('{"a":123}');
|
||||
|
||||
const responsesContent = ref({});
|
||||
const editorRef = ref()
|
||||
const send = () => {
|
||||
formRef.value &&
|
||||
formRef.value.validate().then(() => {
|
||||
const methodName = toLower(props.selectApi.method)
|
||||
const methodObj = {
|
||||
get: 'get',
|
||||
post: 'post',
|
||||
patch: 'patch',
|
||||
put: 'put',
|
||||
delete: 'remove'
|
||||
}
|
||||
|
||||
let url = props.selectApi?.url;
|
||||
const urlParams = {}
|
||||
requestBody.params.paramsTable.forEach(item=>{
|
||||
if(methodName === 'get')
|
||||
urlParams[item.name] = item.value
|
||||
if(url.includes(`{${item.name}}`))
|
||||
url = url.replace(`{${item.name}}`, item.value)
|
||||
})
|
||||
const params = {
|
||||
...JSON.parse(requestBody.paramsText || '{}'),
|
||||
...urlParams
|
||||
}
|
||||
|
||||
|
||||
|
||||
server[methodObj[methodName]](url,params).then((resp:any)=>{
|
||||
responsesContent.value = JSON.stringify(resp)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
if (paramsTable.value.length)
|
||||
formRef.value &&
|
||||
formRef.value.validate().then(() => {
|
||||
_send();
|
||||
});
|
||||
else _send();
|
||||
};
|
||||
const _send = () => {
|
||||
const methodName = toLower(props.selectApi.method);
|
||||
const methodObj = {
|
||||
get: 'get',
|
||||
post: 'post',
|
||||
patch: 'patch',
|
||||
put: 'put',
|
||||
delete: 'remove',
|
||||
};
|
||||
|
||||
let url = props.selectApi?.url;
|
||||
const urlParams = {};
|
||||
requestBody.params.paramsTable.forEach((item) => {
|
||||
if (methodName === 'get') urlParams[item.name] = item.value;
|
||||
if (url.includes(`{${item.name}}`))
|
||||
url = url.replace(`{${item.name}}`, item.value);
|
||||
});
|
||||
const params = {
|
||||
...JSON.parse(requestBody.code || '{}'),
|
||||
...urlParams,
|
||||
};
|
||||
server[methodObj[methodName]](url, params).then((resp: any) => {
|
||||
if (Object.keys(params).length === 0){
|
||||
|
||||
requestBody.code = JSON.stringify(getDefaultParams());
|
||||
editorRef.value?.editorFormat()
|
||||
}
|
||||
responsesContent.value = resp;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取默认参数
|
||||
*/
|
||||
function getDefaultParams() {
|
||||
if (!props.selectApi.requestBody) return {};
|
||||
const schema =
|
||||
props.selectApi.requestBody.content['application/json'].schema;
|
||||
const schemaName = (schema.$ref || schema.items.$ref)?.split('/').pop();
|
||||
const type = schema.type || '';
|
||||
const tableData = findData(schemaName);
|
||||
if (type === 'array') {
|
||||
return [getCodeText(tableData, 3)];
|
||||
} else return getCodeText(tableData, 3);
|
||||
}
|
||||
|
||||
function findData(schemaName: string) {
|
||||
const schemas = toRaw(props.schemas);
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
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);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
function getCodeText(arr: schemaObjType[], level: number): object {
|
||||
const result = {};
|
||||
const schemas = toRaw(props.schemas);
|
||||
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;
|
||||
}
|
||||
|
||||
type requestObj = {
|
||||
name: string;
|
||||
value: string;
|
||||
};
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc?: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -284,8 +367,6 @@ type requestObj = {
|
|||
.jtable-body-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.table {
|
||||
:deep(.ant-table-cell) {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<template>
|
||||
<div class="choose-api-container">
|
||||
<j-pro-table
|
||||
:columns="columns"
|
||||
:dataSource="props.tableData"
|
||||
:rowSelection="props.mode !== 'home' ? rowSelection : undefined"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #url="slotProps">
|
||||
<span
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="jump(slotProps)"
|
||||
>{{ slotProps.url }}</span
|
||||
>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<div class="table">
|
||||
<j-pro-table
|
||||
:columns="columns"
|
||||
:dataSource="props.tableData"
|
||||
:rowSelection="props.mode !== 'home' ? rowSelection : undefined"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #url="slotProps">
|
||||
<span
|
||||
style="color: #1d39c4; cursor: pointer"
|
||||
@click="jump(slotProps)"
|
||||
>{{ slotProps.url }}</span
|
||||
>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</div>
|
||||
|
||||
<a-button type="primary" @click="save" v-if="props.mode !== 'home'"
|
||||
>保存</a-button
|
||||
<j-button type="primary" @click="save" v-if="props.mode !== 'home'"
|
||||
>保存</j-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -88,8 +90,10 @@ watch(
|
|||
|
||||
<style lang="less" scoped>
|
||||
.choose-api-container {
|
||||
height: 100%;
|
||||
|
||||
.table {
|
||||
max-height: calc(100vh - 260px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
:deep(.jtable-body-header) {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-tree
|
||||
<j-tree
|
||||
:tree-data="treeData"
|
||||
@select="clickSelectItem"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<template #title="{ name }">
|
||||
{{ name }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</j-tree>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -141,9 +141,6 @@ const filterPath = (path: object, filterArr: string[]) => {
|
|||
|
||||
<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 {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,15 @@
|
|||
<div class="top">
|
||||
<slot name="top" />
|
||||
</div>
|
||||
<a-row :gutter="24" style="background-color: #fff; padding: 20px;margin: 0;">
|
||||
<a-col
|
||||
<j-row :gutter="24">
|
||||
<j-col
|
||||
:span="24"
|
||||
v-if="props.showTitle"
|
||||
style="font-size: 16px; margin-bottom: 48px"
|
||||
>API文档</a-col
|
||||
>
|
||||
<a-col :span="5">
|
||||
API文档
|
||||
</j-col>
|
||||
<j-col :span="5" class="tree-content">
|
||||
<LeftTree
|
||||
@select="treeSelect"
|
||||
:mode="props.mode"
|
||||
|
|
@ -18,8 +19,8 @@
|
|||
:filter-array="treeFilter"
|
||||
:code="props.code"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
</j-col>
|
||||
<j-col :span="19">
|
||||
<HomePage v-show="showHome" />
|
||||
<div class="url-page" v-show="!showHome">
|
||||
<ChooseApi
|
||||
|
|
@ -35,26 +36,29 @@
|
|||
class="api-details"
|
||||
v-if="selectedApi.url && tableData.length > 0"
|
||||
>
|
||||
<a-button
|
||||
<j-button
|
||||
@click="selectedApi = initSelectedApi"
|
||||
style="margin-bottom: 24px"
|
||||
>返回</a-button
|
||||
>返回</j-button
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="does" tab="文档">
|
||||
<j-tabs v-model:activeKey="activeKey" type="card">
|
||||
<j-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>
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="test" tab="调试">
|
||||
<ApiTest
|
||||
:select-api="selectedApi"
|
||||
:schemas="schemas"
|
||||
/>
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -76,7 +80,7 @@ const props = defineProps<{
|
|||
mode: modeType;
|
||||
showTitle?: boolean;
|
||||
hasHome?: boolean;
|
||||
code?: string
|
||||
code?: string;
|
||||
}>();
|
||||
const showHome = ref<boolean>(Boolean(props.hasHome));
|
||||
const tableData = ref([]);
|
||||
|
|
@ -127,7 +131,7 @@ function init() {
|
|||
getApiGranted_api(props.code as string).then((resp) => {
|
||||
selectedKeys.value = resp.result as string[];
|
||||
selectSourceKeys.value = [...(resp.result as string[])];
|
||||
})
|
||||
});
|
||||
} else if (props.mode === 'api') {
|
||||
apiOperations_api().then((resp) => {
|
||||
selectedKeys.value = resp.result as string[];
|
||||
|
|
@ -138,12 +142,20 @@ function init() {
|
|||
activeKey.value = 'does';
|
||||
selectedApi.value = initSelectedApi;
|
||||
});
|
||||
watch(
|
||||
() => selectedApi.value.url,
|
||||
() => (activeKey.value = 'does'),
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.api-page-container {
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
.tree-content {
|
||||
padding-bottom: 30px;
|
||||
height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export type apiDetailsType = {
|
|||
parameters: any[];
|
||||
requestBody?: any;
|
||||
responses:object;
|
||||
description?:string;
|
||||
}
|
||||
|
||||
export type modeType = 'api'| 'appManger' | 'home'
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="api-container">
|
||||
<Api mode="api">
|
||||
<template #top>
|
||||
<p>
|
||||
<AIcon
|
||||
type="ExclamationCircleOutlined"
|
||||
style="margin-right: 12px; font-size: 14px"
|
||||
/>配置系统支持API赋权的范围
|
||||
</p>
|
||||
</template>
|
||||
</Api>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Api">
|
||||
import Api from '../Api/index.vue';
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-container {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -16,5 +16,3 @@
|
|||
<script setup lang="ts" name="Platforms">
|
||||
import Api from './Api/index.vue';
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue