在线调试请求参数展示，发送请求
This commit is contained in:
暮光：城中城
@@ -8,7 +8,7 @@
|
||||
/>
|
||||
<a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
|
||||
<a-tab-pane tab="URL参数" key="urlParam">
|
||||
<ParamTable v-model:selected="urlParamChecked" :paramList="urlParamList"></ParamTable>
|
||||
<ParamTable ref="urlParamRef" v-model:selected="urlParamChecked" :paramList="urlParamList"></ParamTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="请求参数" key="bodyParam" v-if="docInfoShow.method !== 'get'">
|
||||
<a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
|
||||
@@ -19,20 +19,20 @@
|
||||
<a-radio value="binary">binary</a-radio>
|
||||
</a-radio-group>
|
||||
<div v-show="bodyParamType === 'form'">
|
||||
<ParamTable v-model:selected="formParamChecked" :paramList="formParamList" showType></ParamTable>
|
||||
<ParamTable ref="formParamRef" :paramList="formParamList" showType></ParamTable>
|
||||
</div>
|
||||
<div v-show="bodyParamType === 'formUrlEncode'">
|
||||
<ParamTable v-model:selected="formEncodeParamChecked" :paramList="formEncodeParamList"></ParamTable>
|
||||
<ParamTable ref="formEncodeParamRef" :paramList="formEncodeParamList"></ParamTable>
|
||||
</div>
|
||||
<div v-show="bodyParamType === 'row'">
|
||||
<a-textarea placeholder="" v-model:value="bodyRowParam" :auto-size="{ minRows: 15, maxRows: 15 }"></a-textarea>
|
||||
<ParamBody ref="bodyParamRef" :paramList="bodyRowParamList"></ParamBody>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Header参数" key="headerParam">
|
||||
<ParamTable v-model:selected="headerParamChecked" :paramList="headerParamList"></ParamTable>
|
||||
<ParamTable ref="headerParamRef" :paramList="headerParamList"></ParamTable>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="Cookie参数" key="cookieParam">
|
||||
<ParamTable v-model:selected="cookieParamChecked" :paramList="cookieParamList"></ParamTable>
|
||||
<ParamTable ref="cookieParamRef" :paramList="cookieParamList"></ParamTable>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
@@ -44,10 +44,12 @@
|
||||
import {useStore} from 'vuex';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {markdownIt} from 'mavon-editor'
|
||||
import ParamTable from '../../../components/table/ParamTable.vue'
|
||||
import ParamTable from '../../../components/params/ParamTable.vue'
|
||||
import ParamBody from '../../../components/params/ParamBody.vue'
|
||||
import {CloseOutlined} from '@ant-design/icons-vue';
|
||||
import 'mavon-editor/dist/markdown/github-markdown.min.css'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
import {zyplayerApi} from "../../../api";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -65,45 +67,89 @@
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CloseOutlined, ParamTable
|
||||
CloseOutlined, ParamTable, ParamBody
|
||||
},
|
||||
setup(props) {
|
||||
let docUrl = ref(props.docInfoShow.url);
|
||||
const store = useStore();
|
||||
let swaggerResource = store.state.swaggerResource || {};
|
||||
let swaggerDoc = store.state.swaggerDoc || {};
|
||||
let urlDomain = swaggerResource.rewriteDomain || swaggerDoc.host;
|
||||
let docUrl = ref(urlDomain + props.docInfoShow.url);
|
||||
let activePage = ref('urlParam');
|
||||
// URL参数处理
|
||||
const urlParamRef = ref();
|
||||
const urlParamChecked = ref([]);
|
||||
let urlParamListProp = props.requestParamList.filter(item => item.in === 'query');
|
||||
let urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
|
||||
let urlParamList = ref([]);
|
||||
// Header参数处理
|
||||
const headerParamRef = ref();
|
||||
const headerParamChecked = ref([]);
|
||||
let headerParamListProp = props.requestParamList.filter(item => item.in === 'header');
|
||||
let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp)));
|
||||
// cookie参数处理
|
||||
const cookieParamRef = ref();
|
||||
const cookieParamChecked = ref([]);
|
||||
let cookieParamListProp = props.requestParamList.filter(item => item.in === 'cookie');
|
||||
let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp)));
|
||||
// form参数处理
|
||||
const formParamRef= ref();
|
||||
const formParamChecked = ref([]);
|
||||
let formParamListProp = props.requestParamList.filter(item => item.in === 'formData');
|
||||
let formParamList = ref([]);
|
||||
if (props.docInfoShow.method === 'post') {
|
||||
// post的时候参数否放到form里面
|
||||
formParamListProp = formParamListProp.concat(urlParamListProp);
|
||||
} else {
|
||||
// 否则放到URL参数里面
|
||||
urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp)));
|
||||
}
|
||||
// form参数处理
|
||||
const formEncodeParamRef = ref();
|
||||
const formEncodeParamChecked = ref([]);
|
||||
let formEncodeParamList = ref([]);
|
||||
// body 参数
|
||||
let bodyParamRef = ref();
|
||||
let bodyParamType = ref('form');
|
||||
let bodyRowParam = ref('');
|
||||
let bodyRowListProp = props.requestParamList.filter(item => item.in === 'body');
|
||||
let bodyRowParamList = ref(JSON.parse(JSON.stringify(bodyRowListProp)));
|
||||
// x-www-form-urlencoded
|
||||
if (props.docInfoShow.consumes.indexOf('x-www-form-urlencoded') >= 0) {
|
||||
if (props.docInfoShow.consumes.indexOf('application/x-www-form-urlencoded') >= 0) {
|
||||
bodyParamType.value = 'formUrlEncode';
|
||||
formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
|
||||
} else if (props.docInfoShow.consumes.indexOf('multipart/form-data') >= 0) {
|
||||
bodyParamType.value = 'form';
|
||||
formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
|
||||
} else if (props.docInfoShow.consumes.indexOf('application/json') >= 0) {
|
||||
bodyParamType.value = 'row';
|
||||
formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
|
||||
if (formParamListProp.length > 0) {
|
||||
bodyParamType.value = 'formUrlEncode';
|
||||
}
|
||||
} else {
|
||||
formParamList = ref(JSON.parse(JSON.stringify(formParamListProp)));
|
||||
}
|
||||
if (formParamList.value.length > 0) {
|
||||
activePage.value = 'urlParam';
|
||||
} else if (formParamListProp.length > 0 || bodyRowListProp.length > 0) {
|
||||
activePage.value = 'bodyParam';
|
||||
} else if (headerParamListProp.length > 0) {
|
||||
activePage.value = 'headerParam';
|
||||
}
|
||||
// 发送请求
|
||||
const sendRequest = () => {
|
||||
console.log('urlParamChecked', urlParamChecked.value, urlParamList.value);
|
||||
const formData = new FormData();
|
||||
let selectedRowKeys = urlParamRef.value.getSelectedRowKeys();
|
||||
let urlParamStr = urlParamList.value.filter(item => selectedRowKeys.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
|
||||
return item.name + '=' + encodeURIComponent(item.value);
|
||||
}).join('&');
|
||||
console.log('urlParamStr', urlParamStr);
|
||||
// fileList.value.forEach(file => {
|
||||
// formData.append('files[]', file);
|
||||
// });
|
||||
formData.append('url', docUrl.value + '?' + urlParamStr);
|
||||
zyplayerApi.requestUrl(formData).then(res => {
|
||||
debugger
|
||||
});
|
||||
message.info('暂未开放此功能，敬请期待');
|
||||
};
|
||||
return {
|
||||
@@ -111,23 +157,29 @@
|
||||
activePage,
|
||||
sendRequest,
|
||||
// url参数
|
||||
urlParamRef,
|
||||
urlParamChecked,
|
||||
urlParamList,
|
||||
// header参数
|
||||
headerParamRef,
|
||||
headerParamChecked,
|
||||
headerParamList,
|
||||
// cookie参数
|
||||
cookieParamRef,
|
||||
cookieParamChecked,
|
||||
cookieParamList,
|
||||
// form参数
|
||||
formParamRef,
|
||||
formParamChecked,
|
||||
formParamList,
|
||||
// form-encode参数
|
||||
formEncodeParamRef,
|
||||
formEncodeParamChecked,
|
||||
formEncodeParamList,
|
||||
// body参数
|
||||
bodyParamRef,
|
||||
bodyParamType,
|
||||
bodyRowParam,
|
||||
bodyRowParamList,
|
||||
responseCodeListColumns: [
|
||||
{title: '状态码', dataIndex: 'code', width: 100},
|
||||
{title: '类型', dataIndex: 'type', width: 250},
|
||||
|
||||
Reference in New Issue
Block a user