update: api配置
This commit is contained in:
easy
parent
a9bb84ed6e
commit
db7f20e19b
|
|
@ -3,4 +3,24 @@ import server from '@/utils/request';
|
|||
// 获取tree数据-第一层
|
||||
export const getTreeOne_api = () => server.get(`/v3/api-docs/swagger-config`);
|
||||
// 获取tree数据-第二层
|
||||
export const getTreeTwo_api = (name:string) => server.get(`/v3/api-docs/${name}`);
|
||||
export const getTreeTwo_api = (name: string) => server.get(`/v3/api-docs/${name}`);
|
||||
|
||||
|
||||
/**
|
||||
* 获取已授权的接口ID
|
||||
* @param id 第三方平台的ID
|
||||
*/
|
||||
export const getApiGranted_api = (id: string) => server.get(`/application/${id}/granted`);
|
||||
/**
|
||||
* 获取可授权的接口ID
|
||||
*/
|
||||
export const apiOperations_api = () => server.get(`/application/operations`);
|
||||
|
||||
/**
|
||||
* 新增可授权的接口ID
|
||||
*/
|
||||
export const addOperations_api = (data:object) => server.patch(`/application/operations/_batch`,data);
|
||||
/**
|
||||
* 删除可授权的接口ID
|
||||
*/
|
||||
export const delOperations_api = (data:object) => server.remove(`/application/operations/_batch`,{},{data});
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
|
||||
<a-table rowKey="operationId" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- <template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default [
|
|||
},
|
||||
{
|
||||
path: '/system/Api',
|
||||
component: () => import('@/views/system/Apply/Api/index.vue')
|
||||
component: () => import('@/views/system/Platforms/index.vue')
|
||||
},
|
||||
|
||||
// end: 测试用, 可删除
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ import type { apiDetailsType } from '../typing';
|
|||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const emit = defineEmits(['update:paramsTable'])
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
|
|
@ -216,6 +217,7 @@ const respParamsCard = reactive<tableCardType>({
|
|||
const tableData = findData(schemaName);
|
||||
const codeText = getCodeText(tableData, 3);
|
||||
|
||||
emit('update:paramsTable', tableData)
|
||||
respParamsCard.tableData = tableData;
|
||||
respParamsCard.codeText = JSON.stringify(codeText);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@
|
|||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<VueJsoneditor
|
||||
<!-- <VueJsoneditor
|
||||
height="400"
|
||||
mode="tree"
|
||||
v-model:text="requestBody.paramsText"
|
||||
/>
|
||||
<!-- <MonacoEditor
|
||||
/> -->
|
||||
<MonacoEditor
|
||||
v-model:modelValue="requestBody.paramsText"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/> -->
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
|
|
@ -47,21 +47,34 @@ import VueJsoneditor from 'vue3-ts-jsoneditor';
|
|||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectApi: {
|
||||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const props = defineProps<{
|
||||
selectApi: apiDetailsType;
|
||||
paramsTable: any[];
|
||||
}>();
|
||||
|
||||
const requestBody = reactive({
|
||||
paramsTable: [],
|
||||
paramsTable: [] as requestObj[],
|
||||
paramsText: '',
|
||||
});
|
||||
|
||||
const responsesContent = ref('{"a":123}');
|
||||
|
||||
watch(
|
||||
() => props.paramsTable,
|
||||
(n) => {
|
||||
const table = n?.map((item: any) => ({
|
||||
paramsName: item.paramsName,
|
||||
value: '',
|
||||
}));
|
||||
requestBody.paramsTable = table;
|
||||
},
|
||||
);
|
||||
|
||||
type requestObj = {
|
||||
paramsName: string;
|
||||
value: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,11 @@
|
|||
<ApiDoes
|
||||
:select-api="selectedApi"
|
||||
:schemas="schemas"
|
||||
v-model:params-table="paramsTable"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="test" tab="调试">
|
||||
<ApiTest :select-api="selectedApi" />
|
||||
<ApiTest :select-api="selectedApi" :params-table="paramsTable" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
|
@ -66,8 +67,9 @@ const treeSelect = (node: treeNodeTpye, nodeSchemas: object = {}) => {
|
|||
tableData.value = table;
|
||||
};
|
||||
|
||||
const activeKey = ref('does');
|
||||
const activeKey = ref<'does' | 'test'>('does');
|
||||
const schemas = ref({});
|
||||
const paramsTable = ref([])
|
||||
const initSelectedApi: apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
|
|
@ -78,7 +80,10 @@ const initSelectedApi: apiDetailsType = {
|
|||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
watch(tableData, () => (selectedApi.value = initSelectedApi));
|
||||
watch(tableData, () => {
|
||||
activeKey.value = 'does';
|
||||
selectedApi.value = initSelectedApi;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
应用管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
<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.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.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>
|
||||
|
||||
<MonacoEditor
|
||||
v-model:modelValue="codeText"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import type { apiDetailsType } from '../typing';
|
||||
import InputCard from './InputCard.vue';
|
||||
import { PropType } from 'vue';
|
||||
|
||||
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[];
|
||||
codeText?: any;
|
||||
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: [],
|
||||
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.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];
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<div class="api-test-container">
|
||||
<div class="top">
|
||||
<h5>{{ props.selectApi.summary }}</h5>
|
||||
<div class="input">
|
||||
<InputCard :value="props.selectApi.method" />
|
||||
<a-input :value="props.selectApi?.url" disabled />
|
||||
<span class="send" @click="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
:columns="requestBody.tableColumns"
|
||||
:dataSource="paramsTable"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-form-item
|
||||
:name="[
|
||||
'paramsTable',
|
||||
index +
|
||||
(requestBody.pageNum - 1) *
|
||||
requestBody.pageSize,
|
||||
'name',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '该字段是必填字段',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="record.name"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'value'">
|
||||
<a-form-item
|
||||
:name="[
|
||||
'paramsTable',
|
||||
index +
|
||||
(requestBody.pageNum - 1) *
|
||||
requestBody.pageSize,
|
||||
'value',
|
||||
]"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '该字段是必填字段',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="record.value"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:uhasPermission="`{permission}:delete`"
|
||||
:popConfirm="{
|
||||
title: `确定删除`,
|
||||
onConfirm: () =>
|
||||
requestBody.clickDel(index),
|
||||
}"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form>
|
||||
|
||||
<a-pagination
|
||||
:pageSize="requestBody.pageSize"
|
||||
v-model:current="requestBody.pageNum"
|
||||
:total="requestBody.params.paramsTable.length"
|
||||
hideOnSinglePage
|
||||
style="text-align: center"
|
||||
/>
|
||||
<a-button
|
||||
@click="requestBody.addRow"
|
||||
style="width: 100%; text-align: center"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</a-button>
|
||||
</div>
|
||||
<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"
|
||||
:disabled="true"
|
||||
/>
|
||||
<!-- <MonacoEditor
|
||||
v-model:modelValue="responsesContent"
|
||||
style="height: 300px; width: 100%"
|
||||
theme="vs"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VueJsoneditor from 'vue3-ts-jsoneditor';
|
||||
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'
|
||||
|
||||
const props = defineProps<{
|
||||
selectApi: apiDetailsType;
|
||||
}>();
|
||||
const formRef = ref<FormInstance>();
|
||||
const requestBody = reactive({
|
||||
tableColumns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '参数值',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
width: '80px',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
params: {
|
||||
paramsTable: cloneDeep(props.selectApi.parameters || []) as requestObj[],
|
||||
},
|
||||
|
||||
paramsText: '',
|
||||
|
||||
addRow: () => {
|
||||
if (paramsTable.value.length === 10)
|
||||
requestBody.pageNum = requestBody.pageNum + 1;
|
||||
requestBody.params.paramsTable.push({
|
||||
name: '',
|
||||
value: '',
|
||||
});
|
||||
},
|
||||
clickDel: (index: number) => {
|
||||
if (paramsTable.value.length === 1 && requestBody.pageNum > 1)
|
||||
requestBody.pageNum = requestBody.pageNum - 1;
|
||||
requestBody.params.paramsTable.splice(index, 1);
|
||||
},
|
||||
});
|
||||
const paramsTable = computed(() => {
|
||||
const startIndex = (requestBody.pageNum - 1) * requestBody.pageSize;
|
||||
const endIndex = requestBody.pageNum * requestBody.pageSize;
|
||||
return requestBody.params.paramsTable.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
const responsesContent = ref('{"a":123}');
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
type requestObj = {
|
||||
name: string;
|
||||
value: string;
|
||||
};
|
||||
</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;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.table {
|
||||
:deep(.ant-table-cell) {
|
||||
padding: 0 8px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<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)"
|
||||
>{{ slotProps.url }}</span
|
||||
>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<a-button type="primary" @click="save">保存</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { addOperations_api, delOperations_api } from '@/api/system/apiPage';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { modeType } from '../typing';
|
||||
const emits = defineEmits(['update:clickApi', 'update:selectedRowKeys']);
|
||||
const props = defineProps<{
|
||||
tableData: any[];
|
||||
clickApi: any;
|
||||
selectedRowKeys: string[];
|
||||
sourceKeys: string[];
|
||||
mode: modeType;
|
||||
}>();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'API',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'summary',
|
||||
key: 'summary',
|
||||
},
|
||||
];
|
||||
const rowSelection = {
|
||||
onSelect: (record: any) => {
|
||||
let newKeys = [...props.selectedRowKeys];
|
||||
|
||||
if (props.selectedRowKeys.includes(record.id)) {
|
||||
newKeys = newKeys.filter((id) => id !== record.id);
|
||||
} else newKeys.push(record.id);
|
||||
|
||||
emits('update:selectedRowKeys', newKeys);
|
||||
},
|
||||
selectedRowKeys: ref<string[]>([]),
|
||||
};
|
||||
const save = () => {
|
||||
const keys = props.selectedRowKeys;
|
||||
|
||||
const removeKeys = props.sourceKeys.filter((key) => !keys.includes(key));
|
||||
const addKeys = keys.filter((key) => !props.sourceKeys.includes(key));
|
||||
|
||||
if (props.mode === 'api') {
|
||||
// 此时是api配置
|
||||
removeKeys.length &&
|
||||
delOperations_api(removeKeys)
|
||||
.finally(() => addOperations_api(addKeys))
|
||||
.then(() => message.success('操作成功'));
|
||||
}
|
||||
};
|
||||
const jump = (row: any) => {
|
||||
emits('update:clickApi', row);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selectedRowKeys,
|
||||
(n) => {
|
||||
rowSelection.selectedRowKeys.value = n;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.choose-api-container {
|
||||
height: 100%;
|
||||
|
||||
:deep(.jtable-body-header) {
|
||||
display: none !important;
|
||||
}
|
||||
:deep(.ant-alert-info) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<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 type { modeType, treeNodeTpye } from '../typing';
|
||||
|
||||
const emits = defineEmits(['select']);
|
||||
const props = defineProps<{
|
||||
mode:modeType
|
||||
}>()
|
||||
|
||||
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) => {
|
||||
if(!node.node.parent) return
|
||||
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>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<a-card class="api-page-container">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="5">
|
||||
<LeftTree @select="treeSelect" :mode="props.mode" />
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<ChooseApi
|
||||
v-show="!selectedApi.url"
|
||||
v-model:click-api="selectedApi"
|
||||
:table-data="tableData"
|
||||
v-model:selectedRowKeys="selectedKeys"
|
||||
:source-keys="selectSourceKeys" :mode="props.mode"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="api-details"
|
||||
v-if="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 { getApiGranted_api, apiOperations_api } from '@/api/system/apiPage';
|
||||
import type {
|
||||
treeNodeTpye,
|
||||
apiObjType,
|
||||
apiDetailsType,
|
||||
modeType,
|
||||
} 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 route = useRoute();
|
||||
const props = defineProps<{
|
||||
mode: modeType;
|
||||
}>();
|
||||
|
||||
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 as any;
|
||||
for (const key in method) {
|
||||
if (Object.prototype.hasOwnProperty.call(method, key)) {
|
||||
table.push({
|
||||
...method[key],
|
||||
url,
|
||||
method: key,
|
||||
id: method[key].operationId,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
tableData.value = table;
|
||||
};
|
||||
|
||||
const activeKey = ref<'does' | 'test'>('does');
|
||||
const schemas = ref({});
|
||||
const initSelectedApi: apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
summary: '',
|
||||
parameters: [],
|
||||
responses: {},
|
||||
requestBody: {},
|
||||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
const canSelectKeys = ref<string[]>([]); // 左侧可展示的项
|
||||
const selectedKeys = ref<string[]>([]); // 右侧默认勾选的项
|
||||
let selectSourceKeys = ref<string[]>([])
|
||||
init();
|
||||
|
||||
function init() {
|
||||
const code = route.query.code;
|
||||
if (props.mode === 'appManger') {
|
||||
} else if (props.mode === 'home') {
|
||||
} else if (props.mode === 'api') {
|
||||
apiOperations_api().then(resp=>{
|
||||
selectedKeys.value = resp.result as string[]
|
||||
selectSourceKeys.value = [...resp.result as string[]]
|
||||
})
|
||||
}
|
||||
watch(tableData, () => {
|
||||
activeKey.value = 'does';
|
||||
selectedApi.value = initSelectedApi;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.api-page-container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
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;
|
||||
}
|
||||
|
||||
export type modeType = 'api'| 'appManger' | 'home'
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<Api mode="api" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Platforms">
|
||||
import Api from './Api/index.vue';
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue