swagger已实现文档的参数和返回值查看

zyplayer-doc-ui/swagger-ui/src/views/doc/DocManage.vue

@@ -28,7 +28,7 @@
             </a-form-item>
         </a-form>
         <a-table :dataSource="docList" :columns="docListColumns" size="middle"
-                 :loading="docListLoading"
+                 :loading="docListLoading" :pagination="false"
                  :scroll="{ x: 1400, y: 'calc(100vh - 340px)' }">
             <template #bodyCell="{ column, text, record }">
                 <template v-if="column.dataIndex === 'operation'">
@@ -158,39 +158,14 @@
                     docStatus: [{type: 'number', required: true, message: '请选择文档状态', trigger: 'change'}],
                 },
                 docListColumns: [
-                    {
-                        title: 'ID',
-                        dataIndex: 'id',
-                        width: 70,
-                    }, {
-                        title: '文档名称',
-                        dataIndex: 'name',
-                        width: 150,
-                    }, {
-                        title: '文档类型',
-                        dataIndex: 'docType',
-                        width: 90,
-                    }, {
-                        title: '开放访问',
-                        dataIndex: 'openVisit',
-                        width: 90,
-                    }, {
-                        title: '状态',
-                        dataIndex: 'docStatus',
-                        width: 90,
-                    }, {
-                        title: '文档地址',
-                        dataIndex: 'docUrl',
-                    }, {
-                        title: '目标域名',
-                        dataIndex: 'rewriteDomain',
-                        width: 250,
-                    }, {
-                        title: '操作',
-                        dataIndex: 'operation',
-                        fixed: 'right',
-                        width: 170,
-                    },
+                    {title: 'ID', dataIndex: 'id', width: 70},
+                    {title: '文档名称', dataIndex: 'name', width: 150},
+                    {title: '文档类型', dataIndex: 'docType', width: 90},
+                    {title: '开放访问', dataIndex: 'openVisit', width: 90},
+                    {title: '状态', dataIndex: 'docStatus', width: 90},
+                    {title: '文档地址', dataIndex: 'docUrl'},
+                    {title: '目标域名', dataIndex: 'rewriteDomain', width: 250},
+                    {title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
                 ],
             };
         },

zyplayer-doc-ui/swagger-ui/src/views/doc/DocView.vue

@@ -1,7 +1,38 @@
 <template>
     <a-tabs v-model:activeKey="activePage" closable @tab-click="changePage" style="padding: 5px 10px 0;">
         <a-tab-pane tab="接口说明" key="doc">
-            {{activePage}}
+            <a-form :label-col="{span: 4}" :wrapper-col="{span: 20}">
+                <a-form-item label="接口地址">{{docInfoShow.url}}</a-form-item>
+                <a-form-item label="说明">{{docInfoShow.description}}</a-form-item>
+                <a-form-item label="请求方式">{{docInfoShow.method}}</a-form-item>
+                <a-form-item label="请求数据类型">{{docInfoShow.consumes}}</a-form-item>
+                <a-form-item label="响应数据类型">{{docInfoShow.produces}}</a-form-item>
+                <a-form-item label="请求参数">
+                    <a-table :dataSource="requestParamList" :columns="requestParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
+                        <template #bodyCell="{ column, text, record }">
+                            <template v-if="column.dataIndex === 'htmlStr'">
+                                <div v-html="text"></div>
+                            </template>
+                        </template>
+                    </a-table>
+                </a-form-item>
+                <a-form-item label="返回结果">
+                    <a-table :dataSource="responseParamList" :columns="responseCodeListColumns" size="small" :pagination="false" defaultExpandAllRows>
+                        <template #bodyCell="{ column, text, record }">
+                            <template v-if="column.dataIndex === 'desc'">
+                                <div v-html="text"></div>
+                            </template>
+                        </template>
+                        <template #expandedRowRender="{ record }">
+                            <template v-if="record.schemas">
+                                <a-table :dataSource="record.schemas" :columns="responseParamListColumns" size="small" :pagination="false" defaultExpandAllRows>
+                                </a-table>
+                            </template>
+                            <div v-else style="text-align: center;padding: 10px 0;">无参数说明</div>
+                        </template>
+                    </a-table>
+                </a-form-item>
+            </a-form>
         </a-tab-pane>
         <a-tab-pane tab="在线调试" key="debug">
             {{activePage}}
@@ -10,35 +41,122 @@
 </template>
 
 <script>
-    import {toRefs, ref, reactive, onMounted, onActivated} from 'vue';
+    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 { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+    import swaggerAnalysis from '../../assets/utils/SwaggerAnalysisV2'
 
     export default {
         setup() {
             const route = useRoute();
             const store = useStore();
             let activePage = ref('doc');
-            onMounted(() => {
-                console.log('DocView onMounted', route.query);
+            let requestParamList = ref([]);
+            let responseParamList = ref([]);
+            let docInfoShow = ref({
+                url: '',
+                description: '',
+                method: '',
+                consumes: '',
+                produces: '',
+            });
+            let isLoadSuccess = ref(false);
+            let intervalNum = 0;
+            let intervalTimer = undefined;
+            const initLoadDocument = () => {
                 let path = route.query.path + '.' + route.query.method;
+                if (Object.keys(store.state.swaggerTreePathMap).length <= 0) {
+                    console.log('文档尚未加载，等待加载完成');
+                    if (!intervalTimer) {
+                        intervalTimer = setInterval(() => {
+                            if (isLoadSuccess.value || intervalNum++ > 50) {
+                                clearInterval(intervalTimer);
+                                return;
+                            }
+                            if (Object.keys(store.state.swaggerTreePathMap).length > 0) {
+                                console.log('文档内容改变，重新加载文档');
+                                initLoadDocument();
+                            }
+                        }, 1000);
+                    }
+                    return;
+                }
                 let docInfo = store.state.swaggerTreePathMap[path];
                 if (!docInfo) {
                     message.error('没有找到对应的文档');
                     return;
                 }
+                isLoadSuccess.value = true;
                 store.commit('addTableName', {key: route.fullPath, val: docInfo.summary});
+                // 解析接口说明
+                let consumes = '', produces = '';
+                if (docInfo.consumes && docInfo.consumes.length > 0) {
+                    consumes = docInfo.consumes.join(' ');
+                }
+                if (docInfo.produces && docInfo.produces.length > 0) {
+                    produces = docInfo.produces.join(' ');
+                }
+                docInfoShow.value = {
+                    url: docInfo.url,
+                    description: (docInfo.description || docInfo.summary),
+                    method: docInfo.method || '',
+                    consumes: consumes,
+                    produces: produces,
+                };
+                // 解析请求参数
+                let definitionsDataMap = store.state.swaggerDefinitions;
+                requestParamList.value = swaggerAnalysis.getRequestParamList(docInfo.parameters, definitionsDataMap);
+                responseParamList.value = swaggerAnalysis.getResponseParamList(docInfo.responses, definitionsDataMap);
+            }
+            onMounted(() => {
+                initLoadDocument();
             });
             const changePage = () => {
-
             }
             return {
+                docInfoShow,
                 activePage,
                 changePage,
+                requestParamList,
+                requestParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 200},
+                    {title: '说明', dataIndex: 'description'},
+                    {title: '类型', dataIndex: 'type'},
+                    {title: '参数位置', dataIndex: 'in'},
+                    {title: '是否必填', dataIndex: 'required'},
+                ],
+                responseParamList,
+                responseCodeListColumns: [
+                    {title: '状态码', dataIndex: 'code', width: 100},
+                    {title: '说明', dataIndex: 'desc'},
+                    {title: '类型', dataIndex: 'type'},
+                ],
+                responseParamListColumns: [
+                    {title: '参数名', dataIndex: 'name', width: 200},
+                    {title: '说明', dataIndex: 'description'},
+                    {title: '类型', dataIndex: 'type'},
+                ],
             };
         },
     };
 </script>
 
+<style>
+    /* S-JSON展示的样式 */
+    pre.json{margin-top:0px;margin-bottom:0px;}
+    pre.json .canvas{font:10pt georgia;background-color:#ececec;color:#000000;border:1px solid #cecece;}
+    pre.json .object-brace{color:#00aa00;font-weight:bold;}
+    pre.json .array-brace{color:#0033ff;font-weight:bold;}
+    pre.json .property-name{color:#cc0000;font-weight:bold;}
+    pre.json .string{color:#007777;}
+    pre.json .number{color:#aa00aa;}
+    pre.json .boolean{color:#0000ff;}
+    pre.json .function{color:#aa6633;text-decoration:italic;}
+    pre.json .null{color:#0000ff;}
+    pre.json .comma{color:#000000;font-weight:bold;}
+    pre.json .annotation{color:#aaa;}
+    pre img{cursor: pointer;}
+    /* E-JSON展示的样式 */
+</style>

zyplayer-doc-ui/swagger-ui/src/views/doc/GlobalParam.vue

@@ -0,0 +1,119 @@
+<template>
+    <div style="margin-bottom: 10px;text-align: right;">
+        <a-button @click="searchDocList" type="primary">刷新</a-button>
+        <a-button @click="addDocLine">新建</a-button>
+    </div>
+    <a-table :dataSource="docList" :columns="docListColumns" size="middle"
+             :loading="docListLoading" :pagination="false"
+             :scroll="{ x: 1000, y: 'calc(100vh - 340px)' }">
+        <template #bodyCell="{ column, text, record }">
+            <template v-if="column.dataIndex === 'paramKey'">
+                <a-input v-if="record.isEdit" placeholder="请输入参数名称" v-model:value="docEdit.paramKey"></a-input>
+                <span v-else>{{text}}</span>
+            </template>
+            <template v-if="column.dataIndex === 'paramValue'">
+                <a-textarea v-if="record.isEdit" :rows="1" placeholder="请输入参数值" v-model:value="docEdit.paramValue"></a-textarea>
+                <span v-else>{{text}}</span>
+            </template>
+            <template v-if="column.dataIndex === 'paramType'">
+                <template v-if="record.isEdit">
+                    <a-select placeholder="参数位置" v-model:value="docEdit.paramType" style="width: 110px;">
+                        <a-select-option :value="1">Form</a-select-option>
+                        <a-select-option :value="2">Header</a-select-option>
+                        <a-select-option :value="3">Cookie</a-select-option>
+                    </a-select>
+                </template>
+                <template v-else>
+                    <a-tag color="green" v-if="text === 1">Form</a-tag>
+                    <a-tag color="pink" v-else-if="text === 2">Header</a-tag>
+                    <a-tag color="pink" v-else-if="text === 3">Cookie</a-tag>
+                </template>
+            </template>
+            <template v-if="column.dataIndex === 'operation'">
+                <template v-if="record.isEdit">
+                    <a-button type="link" @click="cancelEditDoc(record)">取消</a-button>
+                    <a-button type="link" @click="saveEditDoc(record)">保存</a-button>
+                </template>
+                <template v-else>
+                    <a-button type="link" @click="editDoc(record)">编辑</a-button>
+                    <a-popconfirm title="确定要删除吗？" @confirm="deleteDoc(record)">
+                        <a-button type="link" danger>删除</a-button>
+                    </a-popconfirm>
+                </template>
+            </template>
+        </template>
+    </a-table>
+</template>
+
+<script>
+    import { toRefs, ref, reactive, onMounted } from 'vue';
+    import {zyplayerApi} from '../../api';
+    import {useStore} from 'vuex';
+    import { message } from 'ant-design-vue';
+
+    export default {
+        setup() {
+            const store = useStore()
+            let docList = ref([]);
+            let docListLoading = ref(false);
+            const searchDocList = async () => {
+                docListLoading.value = true;
+                zyplayerApi.docSwaggerGlobalParamList().then(res => {
+                    setTimeout(() => docListLoading.value = false, 500);
+                    docList.value = res.data || [];
+                });
+            };
+            let docEdit = ref({});
+            const addDocLine = () => {
+                if (docEdit.value.isEdit) {
+                    return;
+                }
+                let newLine = {isEdit: true};
+                docList.value.push(newLine);
+                docEdit.value = newLine;
+            };
+            const editDoc = (record) => {
+                record.isEdit = true;
+                docEdit.value = {...record};
+            };
+            const cancelEditDoc = (record) => {
+                record.isEdit = false;
+                if (!record.id) {
+                    docList.value = docList.value.filter(item => item !== record);
+                }
+                docEdit.value = {};
+            };
+            const saveEditDoc = (record) => {
+                zyplayerApi.docSwaggerGlobalParamUpdate(docEdit.value).then(res => {
+                    record.isEdit = false;
+                    searchDocList();
+                });
+            };
+            const deleteDoc = async (record) => {
+                zyplayerApi.docSwaggerGlobalParamUpdate({id: record.id, yn: 0}).then(res => {
+                    searchDocList();
+                });
+            };
+            onMounted(() => {
+                searchDocList();
+            });
+            return {
+                docList,
+                docListLoading,
+                docEdit,
+                searchDocList,
+                deleteDoc,
+                editDoc,
+                saveEditDoc,
+                cancelEditDoc,
+                addDocLine,
+                docListColumns: [
+                    {title: '参数名称', dataIndex: 'paramKey', width: 250},
+                    {title: '参数值', dataIndex: 'paramValue'},
+                    {title: '参数位置', dataIndex: 'paramType', width: 120},
+                    {title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
+                ],
+            };
+        },
+    };
+</script>