diff --git a/zyplayer-doc-ui/swagger-ui/package-lock.json b/zyplayer-doc-ui/swagger-ui/package-lock.json index e7ee70ed..248d098b 100644 --- a/zyplayer-doc-ui/swagger-ui/package-lock.json +++ b/zyplayer-doc-ui/swagger-ui/package-lock.json @@ -1816,7 +1816,7 @@ }, "vue-types": { "version": "3.0.2", - "resolved": "https://registry.npmmirror.com/vue-types/download/vue-types-3.0.2.tgz", + "resolved": "https://registry.nlark.com/vue-types/download/vue-types-3.0.2.tgz", "integrity": "sha1-7BbgXUEsA4Ji/B76TOuWR+f7YB0=", "requires": { "is-plain-object": "3.0.1" diff --git a/zyplayer-doc-ui/swagger-ui/src/components/table/ParamTable.vue b/zyplayer-doc-ui/swagger-ui/src/components/table/ParamTable.vue new file mode 100644 index 00000000..c57a3ffb --- /dev/null +++ b/zyplayer-doc-ui/swagger-ui/src/components/table/ParamTable.vue @@ -0,0 +1,84 @@ + + + diff --git a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue index 6c6fd3c3..14c30f5b 100644 --- a/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue +++ b/zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue @@ -8,58 +8,31 @@ /> - - - + - + none form-data x-www-form-urlencoded row binary +
+ +
+
+ +
+
+ +
- - - + - - - +
@@ -71,6 +44,7 @@ import {useStore} from 'vuex'; import { message } from 'ant-design-vue'; import {markdownIt} from 'mavon-editor' + import ParamTable from '../../../components/table/ParamTable.vue' import {CloseOutlined} from '@ant-design/icons-vue'; import 'mavon-editor/dist/markdown/github-markdown.min.css' import 'mavon-editor/dist/css/index.css' @@ -91,88 +65,45 @@ }, }, components: { - CloseOutlined + CloseOutlined, ParamTable }, setup(props) { let docUrl = ref(props.docInfoShow.url); let activePage = ref('urlParam'); - let paramKeyIndex = 10000; // URL参数处理 + const urlParamChecked = ref([]); let urlParamListProp = props.requestParamList.filter(item => item.in === 'query'); - urlParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - let urlParamSelectedRowKeys = ref([]); - urlParamListProp.forEach(item => { - item.value = item.example || ''; - urlParamSelectedRowKeys.value.push(item.key); - }); let urlParamList = ref(JSON.parse(JSON.stringify(urlParamListProp))); - const urlParamRowSelectionChange = (selectedRowKeys, selectedRows) => { - urlParamSelectedRowKeys.value = selectedRowKeys; - }; - const urlParamChange = (record) => { - if (record.isLastRow) { - record.isLastRow = false; - urlParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - urlParamSelectedRowKeys.value.push(paramKeyIndex); - } - }; - const urlParamRemove = (record) => { - if (!record.isLastRow) { - urlParamList.value = urlParamList.value.filter(item => item != record); - } - }; // Header参数处理 - let headerParamListProp = props.requestParamList.filter(item => item.in === 'query'); - headerParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - let headerParamSelectedRowKeys = ref([]); - headerParamListProp.forEach(item => { - item.value = item.example || ''; - headerParamSelectedRowKeys.value.push(item.key); - }); + const headerParamChecked = ref([]); + let headerParamListProp = props.requestParamList.filter(item => item.in === 'header'); let headerParamList = ref(JSON.parse(JSON.stringify(headerParamListProp))); - const headerParamRowSelectionChange = (selectedRowKeys, selectedRows) => { - headerParamSelectedRowKeys.value = selectedRowKeys; - }; - const headerParamChange = (record) => { - if (record.isLastRow) { - record.isLastRow = false; - headerParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - headerParamSelectedRowKeys.value.push(paramKeyIndex); - } - }; - const headerParamRemove = (record) => { - if (!record.isLastRow) { - headerParamList.value = headerParamList.value.filter(item => item != record); - } - }; // cookie参数处理 - let cookieParamListProp = props.requestParamList.filter(item => item.in === 'query'); - cookieParamListProp.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - let cookieParamSelectedRowKeys = ref([]); - cookieParamListProp.forEach(item => { - item.value = item.example || ''; - cookieParamSelectedRowKeys.value.push(item.key); - }); + const cookieParamChecked = ref([]); + let cookieParamListProp = props.requestParamList.filter(item => item.in === 'cookie'); let cookieParamList = ref(JSON.parse(JSON.stringify(cookieParamListProp))); - const cookieParamRowSelectionChange = (selectedRowKeys, selectedRows) => { - cookieParamSelectedRowKeys.value = selectedRowKeys; - }; - const cookieParamChange = (record) => { - if (record.isLastRow) { - record.isLastRow = false; - cookieParamList.value.push({name: '', value: '', key: ++paramKeyIndex, isLastRow: true}); - cookieParamSelectedRowKeys.value.push(paramKeyIndex); - } - }; - const cookieParamRemove = (record) => { - if (!record.isLastRow) { - cookieParamList.value = cookieParamList.value.filter(item => item != record); - } - }; + // form参数处理 + const formParamChecked = ref([]); + let formParamListProp = props.requestParamList.filter(item => item.in === 'formData'); + let formParamList = ref([]); + // form参数处理 + const formEncodeParamChecked = ref([]); + let formEncodeParamList = ref([]); // body 参数 let bodyParamType = ref('form'); + let bodyRowParam = ref(''); + // x-www-form-urlencoded + if (props.docInfoShow.consumes.indexOf('x-www-form-urlencoded') >= 0) { + bodyParamType.value = 'formUrlEncode'; + formEncodeParamList = ref(JSON.parse(JSON.stringify(formParamListProp))); + } else if (props.docInfoShow.consumes.indexOf('application/json') >= 0) { + bodyParamType.value = 'row'; + } else { + formParamList = ref(JSON.parse(JSON.stringify(formParamListProp))); + } // 发送请求 const sendRequest = () => { + console.log('urlParamChecked', urlParamChecked.value, urlParamList.value); message.info('暂未开放此功能,敬请期待'); }; return { @@ -180,40 +111,23 @@ activePage, sendRequest, // url参数 + urlParamChecked, urlParamList, - urlParamSelectedRowKeys, - urlParamRowSelectionChange, - urlParamChange, - urlParamRemove, - urlParamListColumns: [ - {title: '参数名', dataIndex: 'name', width: 250}, - {title: '参数值', dataIndex: 'value'}, - {title: '', dataIndex: 'action', width: 40}, - ], // header参数 + headerParamChecked, headerParamList, - headerParamSelectedRowKeys, - headerParamRowSelectionChange, - headerParamChange, - headerParamRemove, - headerParamListColumns: [ - {title: '参数名', dataIndex: 'name', width: 250}, - {title: '参数值', dataIndex: 'value'}, - {title: '', dataIndex: 'action', width: 40}, - ], // cookie参数 + cookieParamChecked, cookieParamList, - cookieParamSelectedRowKeys, - cookieParamRowSelectionChange, - cookieParamChange, - cookieParamRemove, - cookieParamListColumns: [ - {title: '参数名', dataIndex: 'name', width: 250}, - {title: '参数值', dataIndex: 'value'}, - {title: '', dataIndex: 'action', width: 40}, - ], + // form参数 + formParamChecked, + formParamList, + // form-encode参数 + formEncodeParamChecked, + formEncodeParamList, // body参数 bodyParamType, + bodyRowParam, responseCodeListColumns: [ {title: '状态码', dataIndex: 'code', width: 100}, {title: '类型', dataIndex: 'type', width: 250},