manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

swagger查看页面路由交互开发

Browse Source
This commit is contained in:
暮光：城中城
2021-10-26 23:49:47 +08:00
parent 395090e958
commit 3a695ebd1a
9 changed files with 67 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
zyplayer-doc-ui/swagger-ui/src/components/layouts/MenuLayout.vue
View File

@@ -5,26 +5,28 @@
</a-menu>
<a-divider style="margin: 6px 0;"/>
<div v-show="!collapsed" class="doc-tree">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" @change="swaggerDocChoiceChange" style="width: 100%;">
<a-select-option :value="item.url" v-for="item in swaggerResourceList">{{item.name}}</a-select-option>
</a-select>
</div>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method }">
<template v-if="isLeaf">
<a-tag color="pink" v-if="method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="method === 'trace'">trace</a-tag>
<a-spin tip="加载中..." :spinning="treeDataLoading">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" @change="swaggerDocChoiceChange" style="width: 100%;">
<a-select-option :value="item.url" v-for="item in swaggerResourceList">{{item.name}}</a-select-option>
</a-select>
</div>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="{ title, isLeaf, method }">
<template v-if="isLeaf">
<a-tag color="pink" v-if="method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="method === 'trace'">trace</a-tag>
</template>
{{title}}
</template>
{{title}}
</template>
</a-directory-tree>
</a-directory-tree>
</a-spin>
</div>
</div>
</template>
@@ -48,34 +50,17 @@
selectedKeys: [],
openKeys: [],
// 文档树
treeData: [
{
title: '用户管理接口文档',
key: '0-0',
children: [
{
title: '用户信息管理',
key: '0-0-0',
children: [
{title: '/getUserInfo', key: '0-0-0-0', isLeaf: true, query: {path: '/getUserInfo'}},
{title: '/deleteUserInfo', key: '0-0-0-1', isLeaf: true, query: {path: '/deleteUserInfo'}},
{title: '/updateUserInfo', key: '0-0-0-2', isLeaf: true, query: {path: '/updateUserInfo'}},
],
},
],
},
],
treeDataLoading: false,
treeData: [],
expandedKeys: [],
swaggerResourceList: [],
swaggerDocChoice: undefined,
}
},
watch:{
'$store.state.userInfo'(userInfo) {
'$store.state.docChangedNum'() {
this.getSwaggerResourceList();
},
collapsed(x) {
console.log(x, this.collapsed)
}
},
components: {MenuChildrenLayout},
mounted() {
@@ -103,7 +88,7 @@
customApi.get('./swagger-resources').then(res => {
if (res instanceof Array) {
this.swaggerResourceList = res || [];
if (this.swaggerResourceList.length > 0) {
if (this.swaggerResourceList.length > 0 && !this.swaggerDocChoice) {
this.swaggerDocChoice = this.swaggerResourceList[0].url;
this.swaggerDocChoiceChange();
}
@@ -116,16 +101,20 @@
this.loadV2Doc(this.swaggerDocChoice);
},
loadV2Doc(url) {
this.treeDataLoading = true;
customApi.get(url).then(res => {
let v2Doc = this.toJsonObj(res);
if (typeof v2Doc !== 'object') {
if (typeof v2Doc !== 'object' || !v2Doc.swagger) {
this.$message.error('获取文档数据请求失败');
this.treeDataLoading = false;
return;
}
this.$store.commit('setSwaggerDoc', v2Doc);
let metaInfo = {url};
let treeData = createTreeViewByTag(v2Doc);
this.treeData = getTreeDataForTag(v2Doc, treeData.pathIndex, metaInfo);
this.$store.commit('setSwaggerTreePathMap', treeData.treePathDataMap);
setTimeout(() => this.treeDataLoading = false, 300);
});
},
toJsonObj(value) {

4
zyplayer-doc-ui/swagger-ui/src/components/layouts/PageLayout.vue
View File

@@ -4,9 +4,9 @@
<a-tab-pane closable :tab="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
</a-tabs>
<div class="page-body">
<router-view v-slot="{ Component }">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" />
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</div>