添加菜单代码组件化

zyplayer-doc-ui/wiki-ui/src/components/layouts/AddMenu.vue

@@ -0,0 +1,136 @@
+<template>
+	<a-dropdown :trigger="['click']" @click="choosePageIdFunc(props.funcId)">
+		<el-button :icon="ElIconPlus" text class="folder-action-dropdown-btn"></el-button>
+		<template #overlay>
+			<a-menu>
+				<a-menu-item key="1" @click="createWiki(1,props.funcId)">
+					<el-icon  class="clickAddIcon" style="margin-right: 5px">
+						<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="4"></rect><path d="M14 16L18 32L24 19L30 32L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+					</el-icon>
+					创建富文本
+				</a-menu-item>
+				<a-menu-item key="2" @click="createWiki(2,props.funcId)">
+					<el-icon class="clickAddIcon" style="margin-right: 5px">
+						<el-icon-document/>
+					</el-icon>
+					创建Markdown
+				</a-menu-item>
+				<a-menu-item key="0" @click="createWiki(0,props.funcId)">
+					<el-icon  class="clickAddIcon" style="margin-right: 5px">
+						<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M43 22H5" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M5 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M43 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+					</el-icon>
+					创建文件夹
+				</a-menu-item>
+				<a-menu-item key="3">
+					<el-tooltip content="支持MD，ZIP格式（图片和MD文件请放到同级目录并配置同级相对路径）" placement="right-start" :show-after="300">
+						<a-upload
+								v-model:file-list="fileList"
+								name="file"
+								:multiple="false"
+								:customRequest="doAUpload">
+							<el-icon class="clickAddIcon" style="margin-right: 5px" type="primary">
+								<ElIconUpload/>
+							</el-icon>
+							导入
+						</a-upload>
+					</el-tooltip>
+				</a-menu-item>
+			</a-menu>
+		</template>
+	</a-dropdown>
+</template>
+
+<script setup>
+	import {
+		Document as ElIconDocument,
+		Upload as ElIconUpload,
+		Plus as ElIconPlus,
+	} from '@element-plus/icons-vue'
+	import {
+		ref,
+		defineProps,
+		defineEmits,
+	} from 'vue';
+	import {useRouter} from "vue-router";
+	import {ElMessage} from 'element-plus'
+	import pageApi from '../../assets/api/page'
+	import axios from "axios";
+
+	let router = useRouter();
+	let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
+	let fileList = ref([]);
+	let emit = defineEmits(['choosePageIdFunc', 'doGetPageList'])
+	let props = defineProps({
+		choiceSpace: String,
+		choosePageId: String,
+		nowPageId: String,
+		funcId: String
+	});
+
+	const doAUpload = (data) => {
+		let formData = new FormData()
+		formData.append('files', data.file)
+		formData.append('pageId', props.choosePageId)
+		if (props.choosePageId === '0') {
+			formData.append('id', props.choiceSpace)
+		}
+		formData.append('importFlag', true)
+		axios({
+			url: uploadFileUrl.value,
+			method: 'post',
+			data: formData,
+			headers: {'Content-Type': 'multipart/form-data'},
+			timeout: 10000,
+			withCredentials: true,
+		}).then((res) => {
+			fileList.value = []
+			if (res.data.errCode === 200) {
+				ElMessage.success('导入成功')
+			}
+			if (res.data.errCode === 300) {
+				ElMessage.warning(res.data.errMsg)
+				ElMessage.warning('文件太多可能超时，如果是超时，请稍等后刷新查看列表~')
+			}
+			emit('doGetPageList', null)
+
+		}).catch((e) => {
+			fileList.value = []
+			emit('doGetPageList', null)
+			ElMessage.error('导入失败：' + e.message)
+		})
+	}
+
+
+	const choosePageIdFunc = (id) => {
+		emit('choosePageIdFunc', id)
+	}
+
+	const createWiki = (editorType, parentId) => {
+		if (props.choiceSpace > 0) {
+			let name = "新建文档"
+			if (editorType === 0) {
+				name = "新建文件夹"
+			}
+			pageApi.updatePage({
+				spaceId: props.choiceSpace,
+				parentId: parentId,
+				editorType: editorType,
+				name: name,
+				content: '',
+				preview: ''
+			}).then((json) => {
+						emit('doGetPageList', null)
+						ElMessage.success('创建成功')
+						if (editorType !== 0) {
+							router.push({
+								path: '/page/edit',
+								query: {parentId: props.nowPageId.value, pageId: json.data.id}
+							})
+						}
+					})
+
+		} else {
+			ElMessage.warning('请先选择或创建空间')
+		}
+	}
+</script>

zyplayer-doc-ui/wiki-ui/src/components/layouts/GlobalLayout.vue

@@ -27,40 +27,14 @@
 						<el-tooltip style="margin: 4px" effect="dark" :content="descriptorForTree" placement="top">
 							<span  style="color:#888;font-size: 12px;cursor: pointer" @click="changeDropWownStatus">空间目录</span>
 						</el-tooltip>
-						<a-dropdown :trigger="['click']"  @click="choosePageIdFunc(0)">
+						<AddMenu
-							<el-button :icon="ElIconPlus" text class="folder-action-dropdown-btn"></el-button>
+								:choiceSpace="choiceSpace+''"
-							<template #overlay>
+								:choosePageId="choosePageId+''"
-								<a-menu>
+								:nowPageId = "nowPageId+''"
-									<a-menu-item key="1" @click="createWiki(1,0)">
+								:funcId = "'0'"
-										<el-icon  class="clickAddIcon" style="margin-right: 5px">
+								@choosePageIdFunc="choosePageIdFunc"
-											<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="4"></rect><path d="M14 16L18 32L24 19L30 32L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+								@doGetPageList="doGetPageList"
-										</el-icon>
+						/>
-										创建富文本
-									</a-menu-item>
-									<a-menu-item key="2" @click="createWiki(2,0)">
-										<el-icon  class="clickAddIcon" style="margin-right: 5px"><el-icon-document/></el-icon>
-										创建Markdown
-									</a-menu-item>
-									<a-menu-item key="0" @click="createWiki(0,0)">
-										<el-icon  class="clickAddIcon" style="margin-right: 5px">
-											<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M43 22H5" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M5 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M43 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-										</el-icon>
-										创建文件夹
-									</a-menu-item>
-									<a-menu-item key="3" >
-										<el-tooltip content="支持MD，ZIP格式（图片和MD文件请放到同级目录并配置同级相对路径）" placement="right-start" :show-after="300">
-											<a-upload
-													v-model:file-list="fileList"
-													name="file"
-													:multiple="false"
-													:customRequest="doAUpload">
-												<el-icon  class="clickAddIcon" style="margin-right: 5px" type="primary"><ElIconUpload/></el-icon>导入
-											</a-upload>
-										</el-tooltip>
-									</a-menu-item>
-								</a-menu>
-							</template>
-						</a-dropdown>
 					</div>
 					<div class="wiki-page-tree-box">
 						<el-tree
@@ -80,7 +54,7 @@
 								@node-expand="handleNodeExpand"
 								@node-drop="handlePageDrop">
 							<template v-slot="{ node, data }">
-								<div class="page-tree-node" @mouseover="changeNodeOptionStatus(data,1,false)" @mouseleave="changeNodeOptionStatus(data,-1,false) ">
+								<div class="page-tree-node" @mouseover="changeNodeOptionStatus(data) ">
 									<div style="width: calc(100% - 30px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
 										<!--图标-->
 										<el-icon  v-if="data.editorType === 0" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
@@ -99,42 +73,14 @@
 										</span>
 										<!--操作-->
 										<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
-											<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
+											<AddMenu
-												<el-button :icon="ElIconPlus" text class="page-action-dropdown-btn"></el-button>
+													:choiceSpace="choiceSpace+''"
-												<template #overlay>
+													:choosePageId="choosePageId+''"
-													<a-menu>
+													:nowPageId = "nowPageId+''"
-														<a-menu-item key="1" @click="createWiki(1,data.id)">
+													:funcId = "data.id+''"
-															<el-icon  class="clickAddIcon" style="margin-right: 5px">
+													@choosePageIdFunc="choosePageIdFunc"
-																<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="4"></rect><path d="M14 16L18 32L24 19L30 32L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+													@doGetPageList="doGetPageList"
-															</el-icon>
+											/>
-															创建富文本
-														</a-menu-item>
-														<a-menu-item key="2" @click="createWiki(2,data.id)">
-															<el-icon  class="clickAddIcon" style="margin-right: 5px">
-																<el-icon-document/>
-															</el-icon>
-															创建Markdown
-														</a-menu-item>
-														<a-menu-item key="0" @click="createWiki(0,data.id)">
-															<el-icon  class="clickAddIcon" style="margin-right: 5px">
-																<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M43 22H5" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M5 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M43 16V28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-															</el-icon>
-															创建文件夹
-														</a-menu-item>
-														<a-menu-item key="3" >
-															<el-tooltip content="支持MD，ZIP格式（图片和MD文件请放到同级目录并配置同级相对路径）" placement="right-start" :show-after="300">
-																<a-upload
-																		v-model:file-list="fileList"
-																		name="file"
-																		:multiple="false"
-																		:customRequest="doAUpload">
-																	<el-icon  class="clickAddIcon" style="margin-right: 5px" type="primary"><ElIconUpload/></el-icon>导入
-																</a-upload>
-															</el-tooltip>
-														</a-menu-item>
-													</a-menu>
-												</template>
-											</a-dropdown>
 											<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
 												<el-button :icon="MoreFilled" text class="page-action-dropdown-btn"></el-button>
 												<template #overlay>
@@ -261,6 +207,7 @@
 	import pageApi from '../../assets/api/page'
 	import CreateSpace from '../space/CreateSpace'
 	import RightResize from './RightResize.vue'
+	import AddMenu from './AddMenu.vue'
 	import AboutDialog from '../../views/common/AboutDialog'
 	import {useStoreDisplay} from '@/store/wikiDisplay.js'
 	import {useStoreUserData} from "@/store/userData";
@@ -299,53 +246,17 @@
 	let userMsgTotalCount = ref(0);
 	let userMsgParam = ref({sysType: 2, pageNum: 1, pageSize: 20,});
 	let rightAsideWidth = ref(300);
-	let optionStatus = ref(false);
 	let optionPageId = ref('');
-	let optionLock = ref(false);
 	let descriptorForTree = ref("点击收起目录");
 	let explan = ref(false);
 	let explanClass = ref("el-tree");
-	let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
+	let choosePageId = ref('');
-	let fileList = ref([]);
-	let choosePageId = ref([]);
 
 	onMounted(() => {
 		loadSpaceList()
 		loadUserMessageList()
 		getSelfUserInfo()
 	});
-	const doAUpload = (data) => {
-		let formData = new FormData()
-		formData.append('files', data.file)
-		formData.append('pageId',choosePageId.value)
-		if (choosePageId.value === 0){
-			formData.append('id',choiceSpace.value)
-		}
-		formData.append('importFlag',true)
-		axios({
-			url: uploadFileUrl.value,
-			method: 'post',
-			data: formData,
-			headers: {'Content-Type': 'multipart/form-data'},
-			timeout: 10000,
-			withCredentials: true,
-		}).then((res) => {
-			fileList.value = []
-			if (res.data.errCode === 200) {
-				ElMessage.success('导入成功')
-			}
-			if (res.data.errCode === 300){
-				ElMessage.warning(res.data.errMsg)
-				ElMessage.warning('文件太多可能超时，如果是超时，请稍等后刷新查看列表~')
-			}
-			doGetPageList(null)
-
-		}).catch((e) => {
-			fileList.value = []
-			doGetPageList(null)
-			ElMessage.error('导入失败：' + e.message)
-		})
-	}
 
 	const deleteWikiPage = () => {
 		ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
@@ -362,7 +273,6 @@
 	}
 
 	const choosePageIdFunc = (id) => {
-		optionLock.value= true
 		choosePageId.value = id
 	}
 	const rename = (node,data) => {
@@ -394,21 +304,8 @@
 	}
 
 
-	const changeNodeOptionStatus = (param,type) => {
+	const changeNodeOptionStatus = (param) => {
-		if (optionLock.value && optionPageId.value === param.id){
+		optionPageId.value = param.id
-			return true
-		}
-		if (type > 0){
-			optionStatus.value = true
-			optionPageId.value = param.id
-		}
-		if (type < 0 ){
-			optionStatus.value = false
-			optionPageId.value = param.id
-		}
-		if (type === 0 && optionPageId.value === param.id && optionStatus.value){
-			return true
-		}
 	}
 	const turnLeftCollapse = () => {
 		leftCollapse.value = !leftCollapse.value
@@ -420,28 +317,7 @@
 			}
 		}, 100)
 	}
-	const createWiki = (editorType,parentId) => {
-		if (choiceSpace.value > 0) {
-			let name = "新建文档"
-			if(editorType === 0){
-				name = "新建文件夹"
-			}
-			pageApi.updatePage({spaceId: choiceSpace.value,parentId: parentId,editorType:editorType,name:name,content:'',preview:''})
-					.then((json) => {
-						doGetPageList(null)
-						ElMessage.success('创建成功')
-						if (editorType !== 0){
-							router.push({
-								path: '/page/edit',
-								query: {parentId: nowPageId.value, pageId: json.data.id}
-							})
-						}
-					})
 
-		} else {
-			ElMessage.warning('请先选择或创建空间')
-		}
-	}
 	const changeWikiPageExpandedKeys = (pageId) => {
 		// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
 		// wikiPageExpandedKeys.value= [pageId];

zyplayer-doc-wiki/src/main/resources/dist/doc-wiki.html

@@ -5,13 +5,13 @@
     <link rel="icon" href="./wiki-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WIKI文档管理系统</title>
-    <script type="module" crossorigin src="./assets/main-9c7938ab.js"></script>
+    <script type="module" crossorigin src="./assets/main-d3dcc9fd.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/highlight.js-1b0b64aa.js">
     <link rel="modulepreload" crossorigin href="./assets/vue-650a4d10.js">
-    <link rel="modulepreload" crossorigin href="./assets/vendor-f8f18bc4.js">
+    <link rel="modulepreload" crossorigin href="./assets/vendor-da57f401.js">
-    <link rel="modulepreload" crossorigin href="./assets/vant-cc619247.js">
+    <link rel="modulepreload" crossorigin href="./assets/vant-e9a202b4.js">
     <link rel="modulepreload" crossorigin href="./assets/wangeditor-564d5916.js">
-    <link rel="stylesheet" href="./assets/style.bef1b736.css">
+    <link rel="stylesheet" href="./assets/style.13e54fdd.css">
   </head>
   <body>
     <div id="app"></div>