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 22:32:42 +08:00
parent 1d999710bb
commit 395090e958
18 changed files with 424 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,27 @@
<menu-children-layout :menuItem="menuItem" v-for="menuItem in menuData"></menu-children-layout>
</a-menu>
<a-divider style="margin: 6px 0;"/>
<div v-show="!collapsed">
<div v-show="!collapsed" class="doc-tree">
<div style="padding: 10px 5px;">
<a-select placeholder="请选择分组" v-model:value="swaggerDocChoice" style="width: 100%;">
<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 :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked"></a-directory-tree>
<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>
</a-directory-tree>
</div>
</div>
</template>
@@ -18,6 +32,7 @@
<script>
import MenuChildrenLayout from './MenuChildrenLayout.vue'
import {customApi} from '../../api'
import {createTreeViewByTag, getTreeDataForTag} from '../../store/SwaggerDocUtil'
export default {
name: 'MenuLayout',
@@ -42,9 +57,9 @@
title: '用户信息管理',
key: '0-0-0',
children: [
{title: '/getUserInfo', key: '0-0-0-0', isLeaf: true, path: '/doc/view', query: {path: '/getUserInfo'}},
{title: '/deleteUserInfo', key: '0-0-0-1', isLeaf: true, path: '/doc/view', query: {path: '/deleteUserInfo'}},
{title: '/updateUserInfo', key: '0-0-0-2', isLeaf: true, path: '/doc/view', query: {path: '/updateUserInfo'}},
{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'}},
],
},
],
@@ -81,22 +96,59 @@
docChecked(val, node) {
if (node.node.isLeaf) {
let dataRef = node.node.dataRef;
this.$router.push({path: dataRef.path, query: dataRef.query});
this.$router.push({path: '/doc/view', query: dataRef.query});
}
},
getSwaggerResourceList() {
customApi.post('./swagger-resources').then(res => {
customApi.get('./swagger-resources').then(res => {
if (res instanceof Array) {
this.swaggerResourceList = res || [];
if (this.swaggerResourceList.length > 0) {
this.swaggerDocChoice = this.swaggerResourceList[0].url;
this.swaggerDocChoiceChange();
}
} else {
this.$message.error('获取文档列表请求失败');
}
});
},
swaggerDocChoiceChange() {
this.loadV2Doc(this.swaggerDocChoice);
},
loadV2Doc(url) {
customApi.get(url).then(res => {
let v2Doc = this.toJsonObj(res);
if (typeof v2Doc !== 'object') {
this.$message.error('获取文档数据请求失败');
}
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);
});
},
toJsonObj(value) {
if (typeof value !== 'string') {
return value;
}
try {
return JSON.parse(value);
} catch (e) {
try {
return eval('(' + value + ')');// 处理变态的单双引号共存字符串
} catch (e) {
return value || undefined;
}
}
}
}
}
</script>
<style>
.doc-tree{padding: 10px 4px;}
.doc-tree .ant-tree-switcher{width: 15px;}
.doc-tree .ant-tree-switcher-noop{width: 0;}
.doc-tree .ant-tag{margin-right: 0;}
</style>