调试参数解析展示

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"

zyplayer-doc-ui/swagger-ui/src/components/table/ParamTable.vue

@@ -0,0 +1,84 @@
+<template>
+    <a-table :row-selection="{ selectedRowKeys: queryParamSelectedRowKeys, onChange: queryParamRowSelectionChange }"
+             :dataSource="queryParamList"
+             :columns="queryParamListColumns" size="small"
+             :pagination="false"
+             :scroll="{ y: '300px' }">
+        <template #bodyCell="{ column, text, record }">
+            <template v-if="column.dataIndex === 'name'">
+                <a-input placeholder="请输入参数名" v-model:value="record.name" @change="queryParamChange(record)"></a-input>
+            </template>
+            <template v-if="column.dataIndex === 'value'">
+                <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="queryParamChange(record)"></a-input>
+            </template>
+            <template v-if="column.dataIndex === 'action'">
+                <CloseOutlined v-if="!record.isLastRow" @click="queryParamRemove(record)" style="cursor: pointer;"/>
+            </template>
+        </template>
+    </a-table>
+</template>
+
+<script>
+    import {toRefs, ref, reactive, onMounted, watch} from 'vue';
+    import { useRouter, useRoute } from "vue-router";
+    import {useStore} from 'vuex';
+    import { message } from 'ant-design-vue';
+    import {markdownIt} from 'mavon-editor'
+    import {CloseOutlined} from '@ant-design/icons-vue';
+    import 'mavon-editor/dist/markdown/github-markdown.min.css'
+    import 'mavon-editor/dist/css/index.css'
+
+    export default {
+        props: {
+            paramList: {
+                type: Array,
+                required: true
+            },
+        },
+        components: {
+            CloseOutlined
+        },
+        emits: ['update:selected'],
+        setup(props, { attrs, slots, emit, expose }) {
+            let queryParamList = ref(props.paramList);
+            let nextIndex = 10000;
+            // Query参数处理
+            queryParamList.value.push({name: '', value: '', key: ++nextIndex, isLastRow: true});
+            let queryParamSelectedRowKeys = ref([]);
+            queryParamList.value.forEach(item => {
+                item.value = item.example || '';
+                queryParamSelectedRowKeys.value.push(item.key);
+            });
+            emit('update:selected', queryParamSelectedRowKeys.value);
+            const queryParamRowSelectionChange = (selectedRowKeys, selectedRows) => {
+                queryParamSelectedRowKeys.value = selectedRowKeys;
+                emit('update:selected', selectedRowKeys);
+            };
+            const queryParamChange = (record) => {
+                if (record.isLastRow) {
+                    record.isLastRow = false;
+                    queryParamList.value.push({name: '', value: '', key: ++nextIndex, isLastRow: true});
+                    queryParamSelectedRowKeys.value.push(nextIndex);
+                    emit('update:selected', queryParamSelectedRowKeys.value);
+                }
+            };
+            const queryParamRemove = (record) => {
+                if (!record.isLastRow) {
+                    queryParamList.value = queryParamList.value.filter(item => item !== record);
+                }
+            };
+            return {
+                queryParamList,
+                queryParamSelectedRowKeys,
+                queryParamRowSelectionChange,
+                queryParamChange,
+                queryParamRemove,
+                queryParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 250},
+                    {title: '参数值', dataIndex: 'value'},
+                    {title: '', dataIndex: 'action', width: 40},
+                ],
+            };
+        },
+    };
+</script>

zyplayer-doc-ui/swagger-ui/src/views/doc/docView/DocDebugger.vue

@@ -8,58 +8,31 @@
         />
         <a-tabs v-model:activeKey="activePage" closable @tab-click="" style="padding: 5px 10px 0;">
             <a-tab-pane tab="URL参数" key="urlParam">
-                <a-table :row-selection="{ selectedRowKeys: urlParamSelectedRowKeys, onChange: urlParamRowSelectionChange }" :dataSource="urlParamList" :columns="urlParamListColumns" size="small" :pagination="false">
-                    <template #bodyCell="{ column, text, record }">
-                        <template v-if="column.dataIndex === 'name'">
-                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="urlParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'value'">
-                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="urlParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'action'">
-                            <CloseOutlined v-if="!record.isLastRow" @click="urlParamRemove(record)" style="cursor: pointer;"/>
-                        </template>
-                    </template>
-                </a-table>
+                <ParamTable v-model:selected="urlParamChecked" :paramList="urlParamList"></ParamTable>
             </a-tab-pane>
             <a-tab-pane tab="请求参数" key="bodyParam">
-                <a-radio-group v-model:value="bodyParamType">
+                <a-radio-group v-model:value="bodyParamType" style="margin-bottom: 5px;">
                     <a-radio value="none">none</a-radio>
                     <a-radio value="form">form-data</a-radio>
                     <a-radio value="formUrlEncode">x-www-form-urlencoded</a-radio>
                     <a-radio value="row">row</a-radio>
                     <a-radio value="binary">binary</a-radio>
                 </a-radio-group>
+                <div v-show="bodyParamType === 'form'">
+                    <ParamTable v-model:selected="formParamChecked" :paramList="formParamList"></ParamTable>
+                </div>
+                <div v-show="bodyParamType === 'formUrlEncode'">
+                    <ParamTable v-model:selected="formEncodeParamChecked" :paramList="formEncodeParamList"></ParamTable>
+                </div>
+                <div v-show="bodyParamType === 'row'">
+                    <a-textarea placeholder="" v-model:value="bodyRowParam" :auto-size="{ minRows: 15, maxRows: 15 }"></a-textarea>
+                </div>
             </a-tab-pane>
             <a-tab-pane tab="Header参数" key="headerParam">
-                <a-table :row-selection="{ selectedRowKeys: headerParamSelectedRowKeys, onChange: headerParamRowSelectionChange }" :dataSource="headerParamList" :columns="headerParamListColumns" size="small" :pagination="false">
-                    <template #bodyCell="{ column, text, record }">
-                        <template v-if="column.dataIndex === 'name'">
-                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="headerParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'value'">
-                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="headerParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'action'">
-                            <CloseOutlined v-if="!record.isLastRow" @click="headerParamRemove(record)" style="cursor: pointer;"/>
-                        </template>
-                    </template>
-                </a-table>
+                <ParamTable v-model:selected="headerParamChecked" :paramList="headerParamList"></ParamTable>
             </a-tab-pane>
             <a-tab-pane tab="Cookie参数" key="cookieParam">
-                <a-table :row-selection="{ selectedRowKeys: cookieParamSelectedRowKeys, onChange: cookieParamRowSelectionChange }" :dataSource="cookieParamList" :columns="cookieParamListColumns" size="small" :pagination="false">
-                    <template #bodyCell="{ column, text, record }">
-                        <template v-if="column.dataIndex === 'name'">
-                            <a-input placeholder="请输入参数名" v-model:value="record.name" @change="cookieParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'value'">
-                            <a-input :placeholder="record.description || '请输入参数值'" v-model:value="record.value" @change="cookieParamChange(record)"></a-input>
-                        </template>
-                        <template v-if="column.dataIndex === 'action'">
-                            <CloseOutlined v-if="!record.isLastRow" @click="cookieParamRemove(record)" style="cursor: pointer;"/>
-                        </template>
-                    </template>
-                </a-table>
+                <ParamTable v-model:selected="cookieParamChecked" :paramList="cookieParamList"></ParamTable>
             </a-tab-pane>
         </a-tabs>
     </div>
@@ -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},