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

组件化、移动模块提交

Browse Source
This commit is contained in:
Sh1yu
2023-08-15 17:02:02 +08:00
parent 0fa8c58c7e
commit 8b3d86b18e
12 changed files with 729 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
zyplayer-doc-ui/wiki-ui/src/assets/api/page.js
View File

@@ -6,6 +6,8 @@ export default {
pageChangeParent: (data) => request({url: '/zyplayer-doc-wiki/page/changeParent', method: 'post', data: Qs.stringify(data)}),
pageList: (data) => request({url: '/zyplayer-doc-wiki/page/list', method: 'post', data: Qs.stringify(data)}),
updatePage: (data) => request({url: '/zyplayer-doc-wiki/page/update', method: 'post', data: Qs.stringify(data)}),
copyPage: (data) => request({url: '/zyplayer-doc-wiki/page/copy', method: 'post', data: Qs.stringify(data)}),
movePage: (data) => request({url: '/zyplayer-doc-wiki/page/move', method: 'post', data: Qs.stringify(data)}),
renamePage: (data) => request({url: '/zyplayer-doc-wiki/page/rename', method: 'post', data: Qs.stringify(data)}),
pageDetail: (data) => request({url: '/zyplayer-doc-wiki/page/detail', method: 'post', data: Qs.stringify(data)}),
pageDelete: (data) => request({url: '/zyplayer-doc-wiki/page/delete', method: 'post', data: Qs.stringify(data)}),

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

@@ -61,17 +61,17 @@
let fileList = ref([]);
let emit = defineEmits(['choosePageIdFunc', 'doGetPageList'])
let props = defineProps({
choiceSpace: String,
choosePageId: String,
nowPageId: String,
funcId: String
choiceSpace: Number,
choosePageId: Number,
nowPageId: Number,
funcId: Number
});
const doAUpload = (data) => {
let formData = new FormData()
formData.append('files', data.file)
formData.append('pageId', props.choosePageId)
if (props.choosePageId === '0') {
if (props.choosePageId === 0) {
formData.append('id', props.choiceSpace)
}
formData.append('importFlag', true)

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

@@ -2,111 +2,114 @@
<div class="global-layout-vue">
<el-container>
<el-aside v-show="leftCollapse" :style="{ width: rightAsideWidth + 'px' }">
<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="">
<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" :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">
<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>
<LeftSidebar
ref="leftSidebarDir"
:readOnly=false
:wikiPageList="wikiPageList"
:spaceOptions="spaceOptions"
:nowPageId="nowPageId"
:choiceSpace="choiceSpace"
@setNowPageId="setNowPageId"
@doGetPageList="doGetPageList"
@spaceChangeEvents="spaceChangeEvents">
<template v-slot:addMenuDir>
<AddMenu
:choiceSpace="choiceSpace+''"
:choosePageId="choosePageId+''"
:nowPageId = "nowPageId+''"
:funcId = "'0'"
:choiceSpace="choiceSpace"
:choosePageId="choosePageId"
:nowPageId = "nowPageId"
:funcId = "0"
@choosePageIdFunc="choosePageIdFunc"
@doGetPageList="doGetPageList"
/>
</div>
<div class="wiki-page-tree-box">
<el-tree
:class="explanClass"
ref="wikiPageTreeRef"
:current-node-key="nowPageId"
:data="wikiPageList"
:default-expanded-keys="wikiPageExpandedKeys"
:expand-on-click-node="true"
:filter-node-method="filterPageNode"
:props="defaultProps"
draggable
highlight-current
node-key="id"
style="background-color: #fafafa"
@node-click="handleNodeClick"
@node-expand="handleNodeExpand"
@node-drop="handlePageDrop">
<template v-slot="{ node, data }">
<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;">
<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>
<el-icon v-else-if="data.editorType === 1" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
<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>
<el-icon v-else-if="data.editorType === 2" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
<el-icon-document/>
</el-icon>
<!--标题-->
<a-input v-if="data.renaming" v-model:value="data.name" class="rename-input" placeholder="请输入文档名称" @blur="doRename(node,data)" @click.stop/>
<span v-else style="vertical-align: middle;">
</template>
<template v-slot:addMenuNode="{node,data}">
<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;">
<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>
<el-icon v-else-if="data.editorType === 1" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
<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>
<el-icon v-else-if="data.editorType === 2" class="clickAddIcon" style="margin-right: 5px;vertical-align: middle;">
<el-icon-document/>
</el-icon>
<!--标题-->
<a-input v-if="data.renaming" v-model:value="data.name" class="rename-input" placeholder="请输入文档名称" @blur="doRename(node,data)" @click.stop/>
<span v-else style="vertical-align: middle;">
<el-tooltip :content="node.label" placement="top-start" :show-after="1000">{{ node.label }}</el-tooltip>
</span>
<!--操作-->
<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
<AddMenu
:choiceSpace="choiceSpace+''"
:choosePageId="choosePageId+''"
:nowPageId = "nowPageId+''"
:funcId = "data.id+''"
@choosePageIdFunc="choosePageIdFunc"
@doGetPageList="doGetPageList"
/>
<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
<el-button :icon="MoreFilled" text class="page-action-dropdown-btn"></el-button>
<template #overlay>
<a-menu>
<a-menu-item key="0" @click="rename(node,data)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M42 26V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8C6 6.89543 6.89543 6 8 6L22 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 26.7199V34H21.3172L42 13.3081L34.6951 6L14 26.7199Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
重命名
</a-menu-item>
<a-menu-item key="1" @click="deleteWikiPage">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M9 10V44H39V10H9Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M20 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 10H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
<!--操作-->
<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
<AddMenu
:choiceSpace="choiceSpace"
:choosePageId="choosePageId"
:nowPageId = "nowPageId"
:funcId = "data.id"
@choosePageIdFunc="choosePageIdFunc"
@doGetPageList="doGetPageList"
/>
<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
<el-button :icon="MoreFilled" text class="page-action-dropdown-btn"></el-button>
<template #overlay>
<a-menu>
<a-menu-item key="0" @click="rename(node,data)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M42 26V40C42 41.1046 41.1046 42 40 42H8C6.89543 42 6 41.1046 6 40V8C6 6.89543 6.89543 6 8 6L22 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14 26.7199V34H21.3172L42 13.3081L34.6951 6L14 26.7199Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
重命名
</a-menu-item>
<a-menu-item key="1" @click="deleteWikiPage">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M9 10V44H39V10H9Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M20 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 10H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
删除
</a-menu-item>
<a-sub-menu key="2" title="移动文档">
<a-menu-item key="3" @click="openMoveMenu(false)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M9 10V44H39V10H9Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M20 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 10H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
复制文档
</a-menu-item>
<a-menu-item key="4" @click="openMoveMenu(true)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none"><path d="M9 10V44H39V10H9Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path><path d="M20 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 20V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 10H44" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"></path></svg>
</el-icon>
迁移文档
</a-menu-item>
<a-modal
v-model:open="visibleMoveMenu"
title="选择"
@ok="handleOk"
@cancel="handleCancel"
ok-text="确认"
cancel-text="取消"
:confirm-loading="aModalWaiting"
:destroyOnClose=true
:closable=false>
<LeftSidebar
:readOnly=true
:wikiPageList="moveToWikiPageList"
:spaceOptions="spaceOptions"
:nowPageId="moveToPageId"
:choiceSpace="moveToSpaceId"
@setNowPageId="setNowPageId"
@doGetPageList="doGetPageList"
@spaceChangeEvents="spaceChangeEvents"/>
</a-modal>
</a-sub-menu>
</a-menu>
</template>
</a-dropdown>
</div>
</template>
</el-tree>
</div>
</div>
</div>
</div>
</template>
</LeftSidebar>
</el-aside>
<RightResize v-show="leftCollapse" v-model:value="rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
<el-container>
@@ -200,6 +203,7 @@
Check as ElIconCheck,
MoreFilled,
} from '@element-plus/icons-vue'
import {onBeforeUnmount, toRefs, ref, reactive, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
import {ElMessageBox, ElMessage} from 'element-plus'
@@ -208,13 +212,13 @@
import CreateSpace from '../space/CreateSpace'
import RightResize from './RightResize.vue'
import AddMenu from './AddMenu.vue'
import LeftSidebar from './LeftSidebar.vue'
import AboutDialog from '../../views/common/AboutDialog'
import {useStoreDisplay} from '@/store/wikiDisplay.js'
import {useStoreUserData} from "@/store/userData";
import {useStorePageData} from "@/store/pageData";
import { defineComponent } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import axios from "axios";
let route = useRoute();
let router = useRouter();
@@ -226,17 +230,18 @@
let pathIndex = ref([]);
let defaultProps = ref({children: 'children', label: 'name',});
// 空间搜索相关
let spaceOptions = ref([]);
let spaceOptions = ref();
let spaceList = ref([]);
let choiceSpace = ref('');
let choiceSpace = ref(undefined);
let nowSpaceShow = ref({});
let nowPageId = ref('');
// 依据目录树存储的map全局对象
let treePathDataMap = ref(new Map());
// 搜索的输入内容
let searchKeywords = ref('');
let nowPageId = ref(0);
let moveToPageId = ref(0);
let moveToSpaceId = ref(0);
let moveToWikiPageList = ref([]);
let leftSideBarDir = ref(null);
// 页面展示相关
let wikiPageList = ref([]);
let wikiPageList = ref();
let wikiPage = ref({});
let wikiPageExpandedKeys = ref([]);
let userSelfInfo = ref({});
@@ -247,10 +252,33 @@
let userMsgParam = ref({sysType: 2, pageNum: 1, pageSize: 20,});
let rightAsideWidth = ref(300);
let optionPageId = ref('');
let descriptorForTree = ref("点击收起目录");
let explan = ref(false);
let explanClass = ref("el-tree");
let choosePageId = ref('');
let choosePageId = ref(0);
let visibleMoveMenu = ref(false);
let onlyMoveMode = ref(false);
let aModalWaiting = ref(false);
watch(()=>nowPageId ,()=>{
leftSideBarDir.value.assisSetCurrentKey();
})
//useless function
/*
// 依据目录树存储的map全局对象
let treePathDataMap = ref(new Map());
let wikiPageTreeRef = ref();
const searchByKeywords = () => {
wikiPageTreeRef.value.filter(searchKeywords.value)
}
const searchByKeywordsNewPage = () => {
var routeUrl = router.resolve({
path: '/page/search',
query: {keywords: searchKeywords.value}
})
window.open(routeUrl.href, '_blank')
}
*/
onMounted(() => {
loadSpaceList()
@@ -258,6 +286,45 @@
getSelfUserInfo()
});
const openMoveMenu = (onlyMove) =>{
onlyMoveMode.value = onlyMove
visibleMoveMenu.value =true
moveToPageId.value = nowPageId.value
moveToSpaceId.value = choiceSpace.value
moveToWikiPageList.value = wikiPageList.value
}
const handleOk = (onlyMove) =>{
aModalWaiting.value = true
if (onlyMoveMode.value){
pageApi.movePage({"id": choosePageId.value,"spaceId": choiceSpace.value,"moveToPageId":moveToPageId.value,"moveToSpaceId":moveToSpaceId.value})
.then((json) => {
doGetPageList(null)
ElMessage.success('迁移成功')
handleCancel()
aModalWaiting.value = false
}).catch((e) => {
aModalWaiting.value = false
})
return
}
pageApi.copyPage({"id": choosePageId.value,"spaceId": choiceSpace.value,"moveToPageId":moveToPageId.value,"moveToSpaceId":moveToSpaceId.value})
.then((json) => {
doGetPageList(null)
ElMessage.success('复制成功')
handleCancel()
aModalWaiting.value = false
}).catch((e) => {
aModalWaiting.value = false
})
return
}
const handleCancel = () =>{
visibleMoveMenu.value =false
moveToPageId.value = 0
moveToSpaceId.value = 0
moveToWikiPageList.value = []
}
const deleteWikiPage = () => {
ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
confirmButtonText: '确定',
@@ -275,6 +342,18 @@
const choosePageIdFunc = (id) => {
choosePageId.value = id
}
const setNowPageId = (id,readOnly)=>{
console.log(readOnly)
if (readOnly){
moveToPageId.value = id
console.log("moveToPageId修改")
return
}
nowPageId.value = id
console.log("nowPageId修改")
}
const rename = (node,data) => {
data.renaming = true
}
@@ -287,26 +366,16 @@
})
}
const changeDropWownStatus = () => {
if(explan.value){
explanClass.value = "el-tree"
descriptorForTree.value ="点击收起目录"
explan.value = false
}else {
explanClass.value = "hidTree"
descriptorForTree.value ="点击展开目录"
explan.value = true
}
}
const loadPageList = (param) => {
param = param || {}
doGetPageList(param.parentId, param.node)
}
const changeNodeOptionStatus = (param) => {
optionPageId.value = param.id
}
const turnLeftCollapse = () => {
leftCollapse.value = !leftCollapse.value
setTimeout(() => {
@@ -322,70 +391,7 @@
// 展开没有触发子节点的加载，如果去加载子节点有还找不到当前的node，暂不展开
// wikiPageExpandedKeys.value= [pageId];
}
const doSearchByKeywords = (queryString, callback) => {
if (!queryString || !queryString.trim()) {
callback([])
return
}
pageApi
.pageNews({spaceId: choiceSpace.value, keywords: queryString})
.then((json) => {
let spacePageNews = json.data || []
callback(spacePageNews)
})
}
const handleSearchKeywordsSelect = (item) => {
searchKeywords.value = ''
router.push({path: '/page/show', query: {pageId: item.pageId}})
}
let wikiPageTreeRef = ref();
const searchByKeywords = () => {
wikiPageTreeRef.value.filter(searchKeywords.value)
}
const searchByKeywordsNewPage = () => {
var routeUrl = router.resolve({
path: '/page/search',
query: {keywords: searchKeywords.value}
})
window.open(routeUrl.href, '_blank')
}
const handleNodeClick = (data) => {
//console.log('点击节点：', data, nowPageId.value)
nowPageId.value = data.id
if (data.editorType !== 0) {
router.push({path: '/page/show', query: {pageId: data.id}})
}
handleNodeExpand(data)
}
const handleNodeExpand = (node) => {
if (
node.children &&
node.children.length > 0 &&
node.children[0].needLoad
) {
console.log('加载节点：', node)
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) => {
doGetPageList(null)
})
}
const loadUserMessageIfPopVisible = () => {
if (!userMessagePopVisible.value) {
loadUserMessageList()
@@ -399,17 +405,19 @@
userMessageList.value.filter((item) => item.msgStatus == 0).length > 0
})
}
const showUserMessage = (row) => {
if (row.msgStatus == 0) {
userApi.readUserMessage({ids: row.id}).then(() => {
loadUserMessageList()
})
}
if (row.msgType >= 2 && row.msgType <= 12) {
if (row.msgType >= 2 && row.msgType <= 14) {
router.push({path: '/page/show', query: {pageId: row.dataId}})
userMessagePopVisible.value = false
}
}
const readAllUserMessage = () => {
let msgIds = []
userMessageList.value
@@ -423,18 +431,23 @@
loadUserMessageList()
})
}
const handleCurrentChange = (val) => {
userMsgParam.value.pageNum = val
loadUserMessageList()
}
const filterPageNode = (value, data) => {
if (!value || !data.name) return true;
// issues:I2CG72 忽略大小写
let name = data.name.toLowerCase();
return name.indexOf(value.toLowerCase()) !== -1;
}
let createSpaceRef = ref();
const spaceChangeEvents = (data) => {
const spaceChangeEvents = (data,readonly) => {
if (readonly){
moveToSpaceId.value = data
setNowPageId(0,readonly)
let param = {spaceId:moveToSpaceId.value}
pageApi.pageList(param).then((json)=>{
moveToWikiPageList.value = json.data||[]
})
return
}
if (data === 0) {
// 新建空间
createSpaceRef.value.show();
@@ -442,8 +455,8 @@
// 管理空间
router.push({path: '/space/manage'});
} else {
nowPageId.value = '';
choiceSpace.value = data;
nowPageId.value = 0;
choiceSpace.value = Number(data);
nowSpaceShow.value = spaceList.value.find((item) => item.id === data);
storePage.spaceInfo = nowSpaceShow.value;
doGetPageList(null);
@@ -466,7 +479,7 @@
nowSpaceShow.value = nowSpaceShowTemp;
storePage.spaceInfo = nowSpaceShowTemp;
choiceSpace.value = nowSpaceId;
nowPageId.value = '';
nowPageId.value = 0;
doGetPageList(null);
// TODO 在首页时跳转
try {
@@ -479,17 +492,11 @@
}
})
}
const doGetPageList = (parentId, node) => {
let param = {spaceId: choiceSpace.value}
pageApi.pageList(param).then((json) => {
wikiPageList.value = json.data || []
// 设置默认选中效果
nextTick(() => {
nowPageId.value = route.query.pageId
if (nowPageId.value) {
wikiPageTreeRef.value.setCurrentKey(nowPageId.value)
}
})
})
}
let aboutDialogRef = ref();
@@ -628,81 +635,81 @@
</style>
<style lang="scss">
.space-folder-box {
margin-left: 10px;
margin-bottom: 10px;
position: relative;
.space-folder-box {
margin-left: 10px;
margin-bottom: 10px;
position: relative;
.folder-action-dropdown-btn {
padding: 0 8px;
height: 25px;
position: absolute;
right: 0;
}
}
.wiki-page-tree-box {
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 30px;
.el-tree-node__content {
height: 35px;
position: relative;
.page-tree-node {
width: 100%;
.label {
.el-icon {
vertical-align: middle;
.folder-action-dropdown-btn {
padding: 0 8px;
height: 25px;
position: absolute;
right: 0;
}
.text {
margin-left: 5px;
vertical-align: middle;
max-width: calc(100% - 40px);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.rename-input {
width: 90%;
}
.page-action-box {
position: absolute;
right: 0;
top: 0;
height: 35px;
line-height: 35px;
background: #fff;
border-radius: 4px;
display: none;
.page-action-dropdown-btn {
padding: 0 8px;
height: 35px;
margin-top: -1px;
}
.el-button+.el-button {
margin-left: 0;
}
}
.page-action-box.renaming {
display: none !important;
}
}
&:hover .page-action-box {
display: block;
.wiki-page-tree-box {
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 30px;
.el-tree-node__content {
height: 35px;
position: relative;
.page-tree-node {
width: 100%;
.label {
.el-icon {
vertical-align: middle;
}
.text {
margin-left: 5px;
vertical-align: middle;
max-width: calc(100% - 40px);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.rename-input {
width: 90%;
}
.page-action-box {
position: absolute;
right: 0;
top: 0;
height: 35px;
line-height: 35px;
background: #fff;
border-radius: 4px;
display: none;
.page-action-dropdown-btn {
padding: 0 8px;
height: 35px;
margin-top: -1px;
}
.el-button+.el-button {
margin-left: 0;
}
}
.page-action-box.renaming {
display: none !important;
}
}
&:hover .page-action-box {
display: block;
}
}
}
}
}
</style>

182
zyplayer-doc-ui/wiki-ui/src/components/layouts/LeftSidebar.vue Normal file
View File

@@ -0,0 +1,182 @@
<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'
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 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)
}
const handleNodeClick = (data) => {
console.log('点击节点：', data, props.nowPageId)
emit('setNowPageId', data.id, props.readOnly)
if (props.readOnly) {
return
}
if (data.editorType !== 0) {
router.push({path: '/page/show', query: {pageId: 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>