zyplayer-doc/zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue

<template>
	<div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
		<div style="margin-bottom: 5px">
			<el-select :model-value="choiceSpace" filterable placeholder="选择空间" style="width: 100%"
					   @change="spaceChangeEvents">
				<el-option-group label="" v-if="!props.readOnly">
					<el-option :key="0" label="创建空间" :value="0"></el-option>
					<el-option :key="-1" label="空间管理" :value="-1"></el-option>
				</el-option-group>
				<el-option-group label=""></el-option-group>
				<el-option v-for="item in spaceOptions" :key="item.value" :label="item.label"
						   :value="item.value"></el-option>
			</el-select>
		</div>
		<el-autocomplete v-model="searchKeywords" v-if="!props.readOnly" :fetch-suggestions="doSearchByKeywords"
						 placeholder="在当前空间搜索"
						 popper-class="search-autocomplete" style="width: 100%; margin: 10px 0"
						 @select="handleSearchKeywordsSelect">
			<template v-slot="{ item }">
				<div class="search-option-item">
					<div class="title">
						<span v-html="item.pageTitle || '-'"></span>
					</div>
					<span class="content" v-html="item.previewContent || '-'"></span>
				</div>
			</template>
		</el-autocomplete>
		<div class="space-folder-box" v-if="!props.readOnly">
			<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>
			<slot name="addMenuDir"/>
		</div>
		<div class="wiki-page-tree-box">
			<el-tree
					:class="explanClass"
					ref="wikiPageTreeRef"
					:current-node-key="props.nowPageId"
					:data="props.wikiPageList"
					:default-expanded-keys="wikiPageExpandedKeys"
					:expand-on-click-node="true"
					:filter-node-method="filterPageNode"
					:props="defaultProps"
					:draggable="!props.readOnly"
					highlight-current
					node-key="id"
					style="background-color: #fafafa"
					@node-click="handleNodeClick"
					@node-expand="handleNodeExpand"
					@node-drop="handlePageDrop">
				<template v-if="!props.readOnly" v-slot="{ node, data }" >
					<slot name="addMenuNode" :node="node" :data="data"></slot>
				</template>
			</el-tree>
		</div>
	</div>
</template>

<script setup>
	import {ref, defineProps, defineEmits, defineExpose} from 'vue';
	import {useRouter, useRoute} from "vue-router";
	import pageApi from '../../assets/api/page'
	import {useStoreDisplay} from "@/store/wikiDisplay";
	import {useStorePageData} from "@/store/pageData";
	let emit = defineEmits(['doGetPageList', 'spaceChangeEvents', 'setNowPageId'])
	let searchKeywords = ref('');
	let descriptorForTree = ref("点击收起目录");
	let explan = ref(false);
	let explanClass = ref("el-tree");
	let wikiPageExpandedKeys = ref([]);
	let route = useRoute();
	let router = useRouter();
	let defaultProps = ref({children: 'children', label: 'name',});
	let wikiPage = ref({});
	let wikiPageTreeRef = ref();
	let storeDisplay = useStoreDisplay();
	let props = defineProps({
		wikiPageList: Array,
		spaceOptions: Array,
		nowPageId: Number,
		choiceSpace: Number,
		readOnly: Boolean
	})


	const assisSetCurrentKey = () => {
		emit('setNowPageId', route.query.pageId, props.readOnly)
		if (props.nowPageId) {
			wikiPageTreeRef.value.setCurrentKey(nowPageId.value)
		}
	}

	const changeWikiPageExpandedKeys = (pageId) => {
		// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
		// wikiPageExpandedKeys.value= [pageId];
	}

	const spaceChangeEvents = (data) => {
		emit('spaceChangeEvents', data, props.readOnly)
	}

	const doSearchByKeywords = (queryString, callback) => {
		if (!queryString || !queryString.trim()) {
			callback([])
			return
		}
		pageApi
				.pageNews({spaceId: props.choiceSpace, keywords: queryString})
				.then((json) => {
					let spacePageNews = json.data || []
					callback(spacePageNews)
				})
	}
	const handleSearchKeywordsSelect = (item) => {
		searchKeywords.value = ''
		router.push({path: '/page/show', query: {pageId: item.pageId}})
	}

	const changeDropWownStatus = () => {
		if (explan.value) {
			explanClass.value = "el-tree"
			descriptorForTree.value = "点击收起目录"
			explan.value = false
		} else {
			explanClass.value = "hidTree"
			descriptorForTree.value = "点击展开目录"
			explan.value = true
		}
	}

	const filterPageNode = (value, data) => {
		if (!value || !data.name) return true;
		// issues:I2CG72 忽略大小写
		let name = data.name.toLowerCase();
		return name.indexOf(value.toLowerCase()) !== -1;
	}

	const searchByKeywords = () => {
		wikiPageTreeRef.value.filter(searchKeywords.value)
	}

	let storePage = useStorePageData();
	const handleNodeClick = (data) => {
		//console.log('点击节点：', data, props.nowPageId)
		storeDisplay.showHeader = true
		emit('setNowPageId', data.id, props.readOnly)
		if (props.readOnly) {
			return
		}
		if (data.editorType !== 0) {
			router.push({path: '/page/show', query: {pageId: data.id}})
		}
		if (data.editorType === 0) {
			storePage.pageInfo = data
			router.push({path: '/home', query: {spaceId:props.choiceSpace,dirId: data.id}})
		}
		handleNodeExpand(data)
	}
	const handleNodeExpand = (node) => {
		if (props.readOnly) {
			return
		}
		if (
				node.children &&
				node.children.length > 0 &&
				node.children[0].needLoad
		) {
			console.log('加载节点：', node)
			emit('doGetPageList',node.id, node)
		}
	}
	const handlePageDrop = (draggingNode, dropNode, dropType, ev) => {
		console.log('tree drop: ', draggingNode.data, dropNode.data, dropType)
		// 'prev'、'inner'、'next'
		// before、after、inner
		var param = {id: draggingNode.data.id, parentId: dropNode.data.parentId}
		if (dropType == 'inner') {
			param.parentId = dropNode.data.id
		} else if (dropType == 'before') {
			param.beforeSeq = dropNode.data.seqNo
		} else if (dropType == 'after') {
			param.afterSeq = dropNode.data.seqNo
		}
		pageApi.pageChangeParent(param).then((res) => {
			emit('doGetPageList',node.id, node)
		})
	}
	defineExpose({searchByKeywords})
</script>