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

wiki编辑器升级，api接口文档开发

Browse Source
This commit is contained in:
暮光：城中城
2022-01-30 10:24:03 +08:00
parent 24f7eb10d0
commit c13fb2cae4
45 changed files with 8010 additions and 28058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9172
zyplayer-doc-ui/api-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
zyplayer-doc-ui/api-ui/src/api/zyplayer.js
View File

@@ -24,7 +24,16 @@ export const zyplayerApi = {
docAuthDelete: data => apiClient({url: '/doc-api/doc/auth/delete', method: 'post', data: data}),
apiCustomFolderAdd: data => apiClient({url: '/api-custom-folder/add', method: 'post', data: data}),
apiCustomFolderUpdate: data => apiClient({url: '/api-custom-folder/update', method: 'post', data: data}),
apiCustomFolderDelete: data => apiClient({url: '/api-custom-folder/delete', method: 'post', data: data}),
apiCustomRequestAdd: data => apiClient({url: '/api-custom-request/add', method: 'post', data: data}),
apiCustomRequestDetail: data => apiClient({url: '/api-custom-request/detail', method: 'post', data: data}),
apiCustomRequestDelete: data => apiClient({url: '/api-custom-request/delete', method: 'post', data: data}),
apiCustomNodeAdd: data => apiClient({url: '/api-custom-node/add', method: 'post', data: data}),
apiCustomNodeUpdate: data => apiClient({url: '/api-custom-node/update', method: 'post', data: data}),
apiCustomNodeDelete: data => apiClient({url: '/api-custom-node/delete', method: 'post', data: data}),
apiCustomNodeDetail: data => apiClient({url: '/api-custom-node/detail', method: 'post', data: data}),
apiCustomNodeChangeParent: data => apiClient({url: '/api-custom-node/changeParent', method: 'post', data: data}),
};

75
zyplayer-doc-ui/api-ui/src/assets/core/CustomRequestTreeAnalysis.js
View File

@@ -8,19 +8,20 @@ const methodArray = ["get", "head", "post", "put", "patch", "delete", "options",
* @param keywords 过滤关键字
* @param metaInfo 接口元信息，点击时放入URL的参数
*/
export function getTreeDataForTag(customRequest, keywords, metaInfo) {
export function getTreeDataForTag(customRequest, keywords, metaInfo, requestInfoMap) {
let firstChild = customRequest[0];
let treeData = getTreeDataChildren(firstChild, keywords, metaInfo, 1);
let treeData = getTreeDataChildren(firstChild, keywords, metaInfo, requestInfoMap, 1);
return [
{
key: 'main',
isLeaf: false,
title: firstChild.name || '自建API接口文档',
children: treeData
}
];
}
function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
function getTreeDataChildren(customRequest, keywords, metaInfo, requestInfoMap, treeIndex) {
let treeData = [];
if (!customRequest) {
return treeData;
@@ -29,27 +30,37 @@ function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
let indexApi = 1;
if (customRequest.children && customRequest.children.length > 0) {
customRequest.children.forEach(item => {
requestInfoMap.originNodeMap[item.nodeId] = item;
let tempTreeId = treeIndex + "_" + indexFolder + "_" + indexApi;
let treeChildren = getTreeDataChildren(item, keywords, metaInfo, tempTreeId);
treeData.push({title: item.name, key: tempTreeId, folderId: item.folderId, isLeaf: false, children: treeChildren});
indexApi++;
});
}
if (customRequest.apis && customRequest.apis.length > 0) {
customRequest.apis.forEach(item => {
let tempTreeId = treeIndex + "_" + indexFolder + "_" + indexApi;
treeData.push({
title: item.apiName,
key: tempTreeId,
isLeaf: true,
method: item.method,
folderId: item.folderId,
query: {
...metaInfo,
requestId: item.requestId,
if (item.nodeType === 1) {
treeData.push({
title: item.nodeName,
key: tempTreeId,
isLeaf: true,
method: item.method,
nodeId: item.nodeId,
query: {
...metaInfo,
nodeId: item.nodeId,
}
});
indexApi++;
} else {
let treeChildren = getTreeDataChildren(item, keywords, metaInfo, requestInfoMap, tempTreeId);
let eureka = searchInCustomRequestFolder(item, keywords);
if (treeChildren.length > 0 || eureka) {
treeData.push({
title: item.nodeName,
key: tempTreeId,
nodeId: item.nodeId,
isLeaf: false,
editing: false,
titleEditing: item.nodeName,
children: treeChildren
});
indexApi++;
}
});
indexApi++;
}
});
}
indexFolder++;
@@ -63,16 +74,20 @@ function getTreeDataChildren(customRequest, keywords, metaInfo, treeIndex) {
* @param keywords 关键字
* @returns {*|boolean} 是否包含
*/
function searchInPathMethods(url, methodNode, keywords) {
if (!keywords || !url) {
function searchInCustomRequest(request, keywords) {
if (!keywords || !request) {
return true;
}
url = url.toLowerCase();
keywords = keywords.toLowerCase();
// 路径中有就不用再去找了
if (url.indexOf(keywords) >= 0) {
return true;
}
let searchData = methodNode.path + methodNode.method + methodNode.summary + methodNode.description + methodNode.tags;
let searchData = request.apiUrl + request.method + request.nodeName;
return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
}
function searchInCustomRequestFolder(folder, keywords) {
if (!keywords || !folder) {
return true;
}
keywords = keywords.toLowerCase();
let searchData = folder.name;
return (searchData && searchData.toLowerCase().indexOf(keywords) >= 0);
}

10
zyplayer-doc-ui/api-ui/src/components/layouts/PageLayout.vue
View File

@@ -42,8 +42,9 @@
}
},
created() {
let {name, path, fullPath} = this.$route;
this.pageList.push({name, path, fullPath});
let {name, path, fullPath, query} = this.$route;
let checkedTab = {name, path, fullPath, query};
this.pageList.push(checkedTab);
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
@@ -55,11 +56,12 @@
this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage);
let {name, path, fullPath} = newRoute;
this.pageList.push({name, path, fullPath});
let {name, path, fullPath, query} = newRoute;
this.pageList.push({name, path, fullPath, query});
}
let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
pageRoute.fullPath = newRoute.fullPath;
this.$store.commit('setActivePage', pageRoute);
},
},
methods: {

339
zyplayer-doc-ui/api-ui/src/components/layouts/doc-tree/CustomRequest.vue
View File

@@ -1,53 +1,93 @@
<template>
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys" @select="docChecked">
<template #title="record">
<template v-if="record.key === 'info'">
<file-text-outlined style="margin-right: 3px;"/>
</template>
<template v-if="record.isLeaf">
<a-tag color="pink" v-if="record.method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="record.method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="record.method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="record.method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="record.method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="record.method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="record.method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="record.method === 'trace'">trace</a-tag>
</template>
<span style="margin: 0 6px 0 3px;">{{record.title}}</span>
<template v-if="record.children">
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleMenuClick($event, record)">
<a-menu-item key="newRequest">
<plus-outlined /> 新建接口
</a-menu-item>
<a-menu-item key="newFolder">
<folder-add-outlined /> 新建文件夹
</a-menu-item>
<a-menu-divider />
<a-menu-item key="edit">
<edit-outlined /> 编辑
</a-menu-item>
<a-menu-item key="delete">
<delete-outlined /> 删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</template>
</a-directory-tree>
<div class="doc-tree-box">
<a-directory-tree :showIcon="false" :tree-data="treeData" v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
draggable @drop="treeDataDragEnd"
@select="docChecked">
<template #title="record">
<!--说明-->
<div v-if="record.key === 'info'" class="api-title-line">
<file-text-outlined style="margin-right: 3px;"/>
<span class="tree-title-text">{{record.title}}</span>
</div>
<div v-if="record.key === 'main'" class="api-title-line">
<span class="tree-title-text">{{record.title}}</span>
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleFolderDropdownClick($event, record)">
<a-menu-item key="newRequest"><plus-outlined /> 新建接口</a-menu-item>
<a-menu-item key="newFolder"><folder-add-outlined /> 新建文件夹</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<!--接口-->
<div v-if="record.isLeaf" class="api-title-line">
<a-tag color="pink" v-if="record.method === 'get'">get</a-tag>
<a-tag color="red" v-else-if="record.method === 'post'">post</a-tag>
<a-tag color="orange" v-else-if="record.method === 'put'">put</a-tag>
<a-tag color="green" v-else-if="record.method === 'head'">head</a-tag>
<a-tag color="cyan" v-else-if="record.method === 'patch'">patch</a-tag>
<a-tag color="blue" v-else-if="record.method === 'delete'">delete</a-tag>
<a-tag color="purple" v-else-if="record.method === 'options'">options</a-tag>
<a-tag color="purple" v-else-if="record.method === 'trace'">trace</a-tag>
<span class="tree-title-text">
{{record.title}}
<a-dropdown :trigger="['click']" class="api-title-dropdown">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleApiTitleDropdownClick($event, record)">
<a-menu-item key="delete"><delete-outlined /> 删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
</div>
<!--文件夹-->
<div v-else-if="record.nodeId" class="api-title-line">
<a-popover v-model:visible="record.data.editing" placement="rightTop" title="编辑名称" trigger="click" @visibleChange="editFolderVisibleChange($event, record)">
<template #content>
<a-input v-model:value="record.data.titleEditing" v-autofocus></a-input>
</template>
<span class="tree-title-text">{{record.title}}</span>
</a-popover>
<a-badge :count="record.children.length" showZero :number-style="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"/>
<a-dropdown :trigger="['click']">
<span @click.stop="" style="padding: 3px 10px;"><ellipsis-outlined /></span>
<template #overlay>
<a-menu @click="handleFolderDropdownClick($event, record)">
<a-menu-item key="newRequest"><plus-outlined /> 新建接口</a-menu-item>
<a-menu-item key="newFolder"><folder-add-outlined /> 新建文件夹</a-menu-item>
<a-menu-divider />
<a-menu-item key="edit"><edit-outlined /> 编辑</a-menu-item>
<a-menu-item key="delete"><delete-outlined /> 删除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</template>
</a-directory-tree>
</div>
</template>
<script>
import {toRefs, ref, reactive, onMounted, watch, nextTick} from 'vue';
import {toRefs, ref, reactive, onMounted, createVNode, watch, nextTick} from 'vue';
import { useRouter, useRoute } from "vue-router";
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {InfoCircleOutlined, FileTextOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FolderAddOutlined, ApiOutlined, PlusOutlined} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import {
InfoCircleOutlined,
FileTextOutlined,
EllipsisOutlined,
EditOutlined,
DeleteOutlined,
FolderAddOutlined,
ApiOutlined,
PlusOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import {zyplayerApi} from '../../../api'
import {getTreeDataForTag} from '../../../assets/core/CustomRequestTreeAnalysis.js'
@@ -58,10 +98,10 @@
const route = useRoute();
const router = useRouter();
let tagPathMap = ref({});
let customRequestDoc = {};
let treeData = ref([]);
let expandedKeys = ref(['main']);
let selectedKeys = ref([]);
let choiceDocId = '';
let searchKeyword = '';
@@ -71,9 +111,9 @@
router.push({path: '/custom/request', query: dataRef.query});
}
};
const loadDoc = (docId, keyword, callback) => {
choiceDocId = docId;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
const loadDoc = (docId, keyword, callback = () => {}) => {
choiceDocId = docId;
zyplayerApi.apiDocApisDetail({id: docId}).then(res => {
let v2Doc = res.data;
if (!v2Doc && v2Doc.length != 1) {
callback(false);
@@ -88,81 +128,196 @@
callback(false);
});
};
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId};
searchKeyword = keyword;
treeData.value = getTreeDataForTag(customRequestDoc, keyword, metaInfo);
treeData.value.unshift({key: 'info', title: '文档说明信息', isLeaf: true});
};
const handleMenuClick = (event, record) => {
let requestInfoMap = {
// 渲染到界面的数据
treeRequestMap: {},
// 原始map，用于搜索后的重新渲染
originNodeMap: {},
};
const getNodeIdMap = (tree) => {
tree.forEach(item => {
if (item.isLeaf && item.nodeId) {
requestInfoMap.treeRequestMap[item.nodeId] = item;
} else if (item.children) {
getNodeIdMap(item.children);
}
});
};
const loadTreeData = async (keyword) => {
let metaInfo = {id: choiceDocId};
searchKeyword = keyword;
treeData.value = getTreeDataForTag(customRequestDoc, keyword, metaInfo, requestInfoMap);
getNodeIdMap(treeData.value);
};
// 监听自定义请求被修改了的事件
watch(store.getters.getCustomRequestChange, () => {
let requestChange = store.state.customRequestChange;
if (requestChange && requestChange.nodeId && requestChange.nodeName) {
// 展示的tree
let requestItem = requestInfoMap.treeRequestMap[requestChange.nodeId];
if (requestItem) {
requestItem.method = requestChange.method;
requestItem.title = requestChange.nodeName;
}
// 原始对象
let requestOriginItem = requestInfoMap.originNodeMap[requestChange.nodeId];
if (requestOriginItem) {
requestOriginItem.method = requestChange.method;
requestOriginItem.nodeName = requestChange.nodeName;
}
}
});
// 监听Tab页面切换
watch(store.getters.getActivePage, () => {
let activePage = store.state.activePage;
changeSelectedRequestKeys(activePage.query.nodeId);
});
const editFolderVisibleChange = (visible, record) => {
// 点击触发弹出事件不处理
if (visible) {
record.data.editing = false;
return;
}
let title = record.data.titleEditing;
// 没做修改不处理
if (title === record.data.title) {
return;
}
zyplayerApi.apiCustomNodeUpdate({id: record.data.nodeId, nodeName: title}).then(res => {
record.data.title = title;
// 修改原始的文件夹名称
let folderItem = requestInfoMap.originNodeMap[record.data.nodeId];
if (folderItem) {
folderItem.name = title;
}
});
};
const handleApiTitleDropdownClick = (event, record) => {
if (event.key === 'delete') {
Modal.confirm({
title: '删除确认',
maskClosable: true,
icon: createVNode(ExclamationCircleOutlined),
content: '你确定要删除此接口吗？',
okText: '删除',
cancelText: '取消',
onOk() {
zyplayerApi.apiCustomNodeDelete({id: record.data.nodeId}).then(res => {
message.success('删除成功');
loadDoc(choiceDocId, searchKeyword);
});
},
});
}
};
const handleFolderDropdownClick = (event, record) => {
if (event.key === 'newFolder') {
let params = {
// id: '',
nodeType: 0,
docId: choiceDocId,
parentFolderId: record.folderId,
folderName: '新建文件夹',
folderDesc: '',
parentId: record.nodeId,
nodeName: '新建文件夹',
nodeDesc: '',
};
zyplayerApi.apiCustomFolderAdd(params).then(res => {
zyplayerApi.apiCustomNodeAdd(params).then(res => {
loadDoc(choiceDocId, searchKeyword);
});
} else if (event.key === 'newRequest') {
let params = {
// id: '',
nodeType: 1,
docId: choiceDocId,
folderId: record.folderId,
apiName: '新建接口',
parentId: record.nodeId,
nodeName: '新建接口',
method: 'get',
apiUrl: '',
// formData: '测试xxx',
// bodyData: '测试xxx',
// headerData: '测试xxx',
// cookieData: '测试xxx',
};
zyplayerApi.apiCustomRequestAdd(params).then(res => {
loadDoc(choiceDocId, searchKeyword);
zyplayerApi.apiCustomNodeAdd(params).then(res => {
let requestSaved = res.data;
let queryInfo = {
id: choiceDocId,
requestId: requestSaved.id,
nodeId: requestSaved.id,
};
router.push({path: '/custom/request', query: queryInfo});
loadDoc(choiceDocId, searchKeyword, () => {
changeSelectedRequestKeys(requestSaved.id);
});
});
} else if (event.key === 'edit') {
record.data.editing = true;
} else if (event.key === 'delete') {
Modal.confirm({
title: '删除确认',
maskClosable: true,
icon: createVNode(ExclamationCircleOutlined),
content: '你确定要删除此文件夹及目录下所有二级目录和接口吗？',
okText: '删除',
cancelText: '取消',
onOk() {
zyplayerApi.apiCustomNodeDelete({id: record.data.nodeId}).then(res => {
message.success('删除成功');
loadDoc(choiceDocId, searchKeyword);
});
},
});
}
};
const toJsonObj = (value) => {
if (typeof value !== 'string') {
return value;
}
try {
return JSON.parse(value);
} catch (e) {
try {
// 处理变态的单双引号共存字符串
return eval('(' + value + ')');
} catch (e) {
return value || undefined;
}
}
};
const changeSelectedRequestKeys = (nodeId) => {
let treeData = requestInfoMap.treeRequestMap[nodeId];
if (treeData) {
selectedKeys.value = [treeData.key];
}
};
const treeDataDragEnd = (event) => {
let param = {
id: event.dragNode.nodeId,
parentId: event.node.nodeId,
targetType: 0,
};
if (event.dropToGap) {
// 放入event.node的后面
console.log(`放入${event.node.key}的后面`);
param.targetType = 1;
} else {
// 放入event.node文件夹的第一个位置
console.log(`放入${event.node.key}文件夹内`);
}
zyplayerApi.apiCustomNodeChangeParent(param).then(res => {
message.success('修改排序成功');
loadDoc(choiceDocId, searchKeyword);
});
console.log(event);
};
return {
expandedKeys,
selectedKeys,
editFolderVisibleChange,
docChecked,
treeDataDragEnd,
loadDoc,
loadTreeData,
treeData,
handleMenuClick,
handleFolderDropdownClick,
handleApiTitleDropdownClick,
};
},
};
</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;}
.ant-badge-not-a-wrapper:not(.ant-badge-status) {
vertical-align: text-top;
/*.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;}*/
/*.ant-badge-not-a-wrapper:not(.ant-badge-status) {*/
/* vertical-align: text-top;*/
/*}*/
.api-title-line .tree-title-text{
margin: 0 6px 0 3px;
}
.api-title-line .api-title-dropdown{
display: none;
}
.api-title-line:hover .api-title-dropdown{
display: unset;
}
</style>

1
zyplayer-doc-ui/api-ui/src/components/params/ParamTable.vue
View File

@@ -94,7 +94,6 @@
});
const propsParamInit = () => {
paramListRef.value = props.paramList;
console.log('paramListRef.value', paramListRef.value);
// Query参数处理
if (paramListRef.value.length <= 0 || !paramListRef.value[paramListRef.value.length - 1].isLastRow) {
props.paramList.push({name: '', value: undefined, type: 'integer', key: ++nextIndex, isLastRow: true});

8
zyplayer-doc-ui/api-ui/src/main.js
View File

@@ -31,3 +31,11 @@ app.directive('highlight', {
}
});
// 聚焦元素
app.directive('autofocus', {
updated(el) {
// 延迟等待弹窗初始完成
setTimeout(() => el.focus(), 0);
}
});

93
zyplayer-doc-ui/api-ui/src/routes.js
View File

@@ -47,62 +47,45 @@ let routers = [
},
// 以下是隐藏的菜单路由
{
path: '/swagger',
name: 'swagger文档',
path: '/swagger/info',
name: 'Swagger文档信息',
meta: {
hidden: true,
icon: 'SettingOutlined'
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/swagger/info',
name: 'Swagger文档信息',
component: () => import('./views/swagger/DocInfo.vue')
},
{
path: '/swagger/view',
name: 'Swagger文档展示',
component: () => import('./views/swagger/DocView.vue')
},
]
component: () => import('./views/swagger/DocInfo.vue')
},
{
path: '/swagger/view',
name: 'Swagger文档展示',
meta: {
hidden: true,
},
component: () => import('./views/swagger/DocView.vue')
},
// 以下是OpenApi的菜单路由
{
path: '/openapi',
name: 'openApi文档',
path: '/openapi/info',
name: 'OpenApi文档信息',
meta: {
hidden: true,
icon: 'SettingOutlined'
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/openapi/info',
name: 'OpenApi文档信息',
component: () => import('./views/openapi/DocInfo.vue')
},
{
path: '/openapi/view',
name: 'OpenApi文档展示',
component: () => import('./views/openapi/DocView.vue')
},
]
component: () => import('./views/openapi/DocInfo.vue')
},
{
path: '/custom',
name: 'API请求',
path: '/openapi/view',
name: 'OpenApi文档展示',
meta: {
hidden: true,
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/custom/request',
name: '接口请求',
component: () => import('./views/customRequest/ApiRequest.vue')
},
]
component: () => import('./views/openapi/DocView.vue')
},
{
path: '/custom/request',
name: '接口请求',
meta: {
hidden: true,
},
component: () => import('./views/customRequest/ApiRequest.vue')
},
]
},
@@ -127,24 +110,20 @@ let routers = [
component: () => import('./views/share/ShareHome.vue')
},
{
path: '/doc',
name: '开放文档查看',
path: '/share/swagger/view',
name: 'Swagger开放文档展示',
meta: {
hidden: true,
},
component: EmptyKeepAliveLayout,
children: [
{
path: '/share/swagger/view',
name: 'Swagger开放文档展示',
component: () => import('./views/swagger/share/DocView.vue')
},
{
path: '/share/openapi/view',
name: 'OpenApi开放文档展示',
component: () => import('./views/openapi/share/DocView.vue')
},
]
component: () => import('./views/swagger/share/DocView.vue')
},
{
path: '/share/openapi/view',
name: 'OpenApi开放文档展示',
meta: {
hidden: true,
},
component: () => import('./views/openapi/share/DocView.vue')
},
]
}

16
zyplayer-doc-ui/api-ui/src/store/index.js
View File

@@ -5,6 +5,8 @@ export default createStore({
return {
// 文档改变事件，供其他页面watch
docChangedNum: 1,
customRequestChange: {},
// 用户信息
userInfo: {},
// tab多标签的标签名map{xxx: 'val'}
@@ -38,9 +40,14 @@ export default createStore({
// 自建API原始文档
customRequestDoc: {},
// 当前选中的Tab页面
activePage: {},
}
},
getters: {
getCustomRequestChange: (state) => () => {
return state.customRequestChange;
},
getDocChangedNum: (state) => () => {
return state.docChangedNum;
},
@@ -50,6 +57,9 @@ export default createStore({
getApiDoc: (state) => () => {
return state.apiDoc;
},
getActivePage: (state) => () => {
return state.activePage;
},
},
mutations: {
setUserInfo(state, userInfo) {
@@ -111,6 +121,12 @@ export default createStore({
sameObj[item.key] = item.val;
state.pageTabNameMap = sameObj;
},
setCustomRequestChange(state, customRequestChange) {
state.customRequestChange = customRequestChange;
},
setActivePage(state, activePage) {
state.activePage = activePage;
},
}
});

38
zyplayer-doc-ui/api-ui/src/views/customRequest/ApiRequest.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="api-name-box">
<a-row type="flex">
<a-col flex="auto"><a-input v-model:value="docInfoShow.apiName" :bordered="false" placeholder="请输入接口名称" /></a-col>
<a-col flex="auto"><a-input v-model:value="docInfoShow.nodeName" :bordered="false" placeholder="请输入接口名称" /></a-col>
<a-col flex="88px">
<a-button @click="saveCustomRequest" type="dashed"><save-outlined /> 保存</a-button>
</a-col>
@@ -92,7 +92,7 @@
let activePage = ref('urlParam');
const route = useRoute();
const store = useStore();
const queryParam = {docId: route.query.id, requestId: route.query.requestId};
const queryParam = {docId: route.query.id, nodeId: route.query.nodeId};
let globalParam = store.state.globalParam || [];
let nextIndex = 1;
// URL参数处理
@@ -125,6 +125,7 @@
message.error('请输入请求的目标URL地址');
return;
}
setCustomRequestDefaultValue();
const formData = new FormData();
let urlParamSelected = urlParamRef.value.getSelectedRowKeys();
let urlParamStr = urlParamList.value.filter(item => urlParamSelected.indexOf(item.key) >= 0 && item.name && item.value).map(item => {
@@ -164,8 +165,8 @@
formData.append('method', docInfoShow.value.method);
formData.append('contentType', '');
formData.append('docId', queryParam.docId);
formData.append('apiName', docInfoShow.value.apiName);
formData.append('customRequestId', queryParam.requestId);
formData.append('nodeName', docInfoShow.value.nodeName);
formData.append('nodeId', queryParam.nodeId);
formData.append('headerParam', JSON.stringify(headerParamArr));
formData.append('cookieParam', JSON.stringify(cookieParamArr));
formData.append('formParam', JSON.stringify(formParamArr));
@@ -173,9 +174,10 @@
formData.append('bodyParam', bodyParamStr);
requestLoading.value = true;
requestResult.value = {};
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
zyplayerApi.requestUrl(formData).then(res => {
requestResult.value = res;
requestLoading.value = false;
changeCustomRequest();
}).catch(e => {
requestLoading.value = false;
});
@@ -190,14 +192,23 @@
const activePageChange = () => {
queryParamVisible.value = true;
}
// 改变侧边栏标题
const changeCustomRequest = () => {
store.commit('setCustomRequestChange', {
method: docInfoShow.value.method,
nodeId: docInfoShow.value.nodeId,
nodeName: docInfoShow.value.nodeName,
});
store.commit('addTableName', {key: route.fullPath, val: docInfoShow.value.nodeName});
}
onMounted(async () => {
let detailRes = await zyplayerApi.apiCustomRequestDetail({id: route.query.requestId});
let detailRes = await zyplayerApi.apiCustomNodeDetail({id: route.query.nodeId});
let requestDetail = detailRes.data;
if (!requestDetail) {
console.log('文档加载失败', detailRes);
}
docInfoShow.value = requestDetail;
store.commit('addTableName', {key: route.fullPath, val: requestDetail.apiName});
store.commit('addTableName', {key: route.fullPath, val: requestDetail.nodeName});
// Header参数处理
let headerParamListProp = [];
let headerParamListGlobal = globalParam.filter(item => item.paramType === 2);
@@ -234,10 +245,17 @@
});
// 保存请求内容
const saveCustomRequest = () => {
zyplayerApi.apiCustomRequestAdd(docInfoShow.value).then(res => {
setCustomRequestDefaultValue();
zyplayerApi.apiCustomNodeAdd(docInfoShow.value).then(res => {
message.success('保存成功');
changeCustomRequest();
});
}
const setCustomRequestDefaultValue = () => {
if (!docInfoShow.value.nodeName) {
docInfoShow.value.nodeName = '新建接口';
}
}
return {
activePage,
activePageChange,