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

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

@@ -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>