391 lines
13 KiB
Vue
391 lines
13 KiB
Vue
<template>
|
||
<div class="api-test-container">
|
||
<div class="top">
|
||
<h5>{{ props.selectApi.summary }}</h5>
|
||
<div class="input">
|
||
<InputCard :value="props.selectApi.method" />
|
||
<j-input :value="props.selectApi?.url" disabled />
|
||
<span class="send" @click="send">发送</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="api-card">
|
||
<h5>请求参数</h5>
|
||
<div class="content">
|
||
<div class="table" v-if="paramsTable.length">
|
||
<j-form :model="requestBody.params" ref="formRef">
|
||
<j-table
|
||
:columns="requestBody.tableColumns"
|
||
:dataSource="paramsTable"
|
||
:pagination="false"
|
||
size="small"
|
||
>
|
||
<template #bodyCell="{ column, record, index }">
|
||
<template v-if="column.key === 'name'">
|
||
<j-form-item
|
||
:name="[
|
||
'paramsTable',
|
||
index +
|
||
(requestBody.pageNum - 1) *
|
||
requestBody.pageSize,
|
||
'name',
|
||
]"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: '该字段是必填字段',
|
||
},
|
||
]"
|
||
>
|
||
<j-input
|
||
v-model:value="record.name"
|
||
></j-input>
|
||
</j-form-item>
|
||
</template>
|
||
<template v-else-if="column.key === 'value'">
|
||
<j-form-item
|
||
:name="[
|
||
'paramsTable',
|
||
index +
|
||
(requestBody.pageNum - 1) *
|
||
requestBody.pageSize,
|
||
'value',
|
||
]"
|
||
:rules="[
|
||
{
|
||
required: true,
|
||
message: '该字段是必填字段',
|
||
},
|
||
]"
|
||
>
|
||
<j-input
|
||
v-model:value="record.value"
|
||
></j-input>
|
||
</j-form-item>
|
||
</template>
|
||
<template v-else-if="column.key === 'action'">
|
||
<PermissionButton
|
||
type="link"
|
||
:hasPermission="`{permission}:delete`"
|
||
:popConfirm="{
|
||
title: `确定删除`,
|
||
onConfirm: () =>
|
||
requestBody.clickDel(index),
|
||
}"
|
||
>
|
||
<AIcon type="DeleteOutlined" />
|
||
</PermissionButton>
|
||
</template>
|
||
</template>
|
||
</j-table>
|
||
</j-form>
|
||
|
||
<j-pagination
|
||
:pageSize="requestBody.pageSize"
|
||
v-model:current="requestBody.pageNum"
|
||
:total="requestBody.params.paramsTable.length"
|
||
hideOnSinglePage
|
||
style="text-align: center"
|
||
/>
|
||
<j-button
|
||
@click="requestBody.addRow"
|
||
style="width: 100%; text-align: center"
|
||
>
|
||
<AIcon type="PlusOutlined" />新增
|
||
</j-button>
|
||
</div>
|
||
<j-monaco-editor
|
||
v-if="refStr"
|
||
ref="editorRef"
|
||
language="json"
|
||
style="height: 100%"
|
||
theme="vs"
|
||
v-model:modelValue="requestBody.code"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="api-card">
|
||
<h5>响应参数</h5>
|
||
<div class="content">
|
||
<JsonViewer :value="responsesContent" copyable />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { JsonViewer } from 'vue3-json-viewer';
|
||
import 'vue3-json-viewer/dist/index.css';
|
||
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;
|
||
schemas: any;
|
||
}>();
|
||
const responsesContent = ref({});
|
||
const editorRef = ref();
|
||
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[],
|
||
},
|
||
|
||
code: '',
|
||
|
||
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);
|
||
});
|
||
|
||
let schema: any = {};
|
||
const refStr = ref('');
|
||
|
||
const init = () => {
|
||
if (!props.selectApi.requestBody) return;
|
||
schema = props.selectApi.requestBody.content['application/json'].schema;
|
||
refStr.value = schema.$ref || schema?.items?.$ref;
|
||
};
|
||
init();
|
||
|
||
const send = () => {
|
||
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) => {
|
||
// 如果用户没填写参数且有body的情况下，给用户展示请求示例
|
||
if (Object.keys(params).length === 0 && refStr.value) {
|
||
requestBody.code = JSON.stringify(getDefaultParams());
|
||
editorRef.value?.editorFormat();
|
||
}
|
||
responsesContent.value = resp;
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 获取默认参数
|
||
*/
|
||
function getDefaultParams() {
|
||
if (!props.selectApi.requestBody) return {};
|
||
if (!refStr.value) return ''; // schema不是Java中的类的话则不进行解析，直接结束
|
||
const schemaName = refStr.value?.split('/').pop() as string;
|
||
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>
|
||
.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>
|