1.前端代码拆分整理

2.合并统一配色方案
3.修改所有功能按钮为右上角图标
4.修改附件到文档相关按钮内
This commit is contained in:
Sh1yu
2023-09-20 09:31:38 +08:00
parent 35b4e2806b
commit eda883a9bf
25 changed files with 1382 additions and 1135 deletions

View File

@@ -1,585 +1,33 @@
<template>
<div class="global-layout-vue">
<el-container>
<el-aside v-show="leftCollapse" :style="{ width: rightAsideWidth + 'px' }">
<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"
@createWikiByTemplate="createWikiByTemplate"
@choosePageIdFunc="choosePageIdFunc"
@doGetPageList="doGetPageList"
/>
</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>
<!--标题-->
<el-tooltip :content="data.tags" placement="top-start" :show-after="500">
<a-tag color="#f50" v-if="data.shareStatus !== undefined">{{filterShareStatus(data.shareStatus)}}</a-tag>
</el-tooltip>
<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;margin-right: 5px">
<el-tooltip :content="node.label" placement="top-start" :show-after="700">{{ 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"
@createWikiByTemplate="createWikiByTemplate"
@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(data.shareStatus)">
<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="移动文档" >
<template #icon>
<BlockOutlined />
</template>
<a-menu-item key="3" @click="openMoveMenu(false)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<DocumentCopy/>
</el-icon>
复制文档
</a-menu-item>
<a-menu-item key="4" @click="openMoveMenu(true)">
<el-icon class="clickAddIcon" style="margin-right: 5px">
<Scissor/>
</el-icon>
迁移文档
</a-menu-item>
</a-sub-menu>
<a-menu-item key="5" @click="openTemplateCreate(data.shareStatus !== undefined)" v-if="data.editorType !== 0">
<BuildOutlined />
设为模板
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
</div>
</template>
</LeftSidebar>
<el-aside v-show="storeDisplay.showMenu" :style="{ width: storeDisplay.rightAsideWidth + 'px' }">
<LeftSideBar ref="leftSideBarRef"/>
</el-aside>
<RightResize v-show="leftCollapse" v-model:value="rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
<RightResize v-show="storeDisplay.showMenu" v-model:value="storeDisplay.rightAsideWidth" @change="rightAsideWidthChange"></RightResize>
<el-container>
<el-header>
<el-row>
<el-col :span="12">
<el-button @click="turnLeftCollapse" v-if="leftCollapse" text :icon="ElIconFold" class="fold-btn"></el-button>
<el-button @click="turnLeftCollapse" v-else text :icon="ElIconExpand" class="fold-btn"></el-button>
</el-col>
<el-col :span="12" style="text-align: right;">
<span class="header-right-user-name">{{userSelfInfo.userName}}</span>
<el-popover v-model:visible="userMessagePopVisible" placement="bottom" trigger="click" width="600">
<template v-slot:reference>
<el-badge :is-dot="haveNotReadUserMessage" style="margin: 0 20px">
<el-icon class="head-icon" style="margin-right: 0">
<el-icon-bell/>
</el-icon>
</el-badge>
</template>
<div style="margin-bottom: 10px">
<span style="font-size: 14px; font-weight: bold">通知</span>
<el-link v-if="haveNotReadUserMessage" :icon="ElIconCheck" style="float: right" type="primary" @click="readAllUserMessage">本页标记已读</el-link>
</div>
<div class="header-user-message">
<el-table :data="userMessageList" border max-height="500" size="small" style="width: 100%; margin-bottom: 5px">
<el-table-column label="操作人" prop="operatorUserName" width="100px"></el-table-column>
<el-table-column label="操作时间" prop="creationTime" width="140px"></el-table-column>
<el-table-column label="内容">
<template v-slot="scope">
{{ scope.row.msgContent }}
<el-badge :is-dot="scope.row.msgStatus == 0" style="line-height: 10px; padding-right: 5px">
<el-link type="primary" @click="showUserMessage(scope.row)">查看</el-link>
</el-badge>
</template>
</el-table-column>
</el-table>
<div class="page-info-box">
<el-pagination
:current-page="userMsgParam.pageNum"
:page-size="userMsgParam.pageSize"
:total="userMsgTotalCount"
layout="prev, pager, next, total"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</el-popover>
<el-dropdown trigger="click" @command="userSettingDropdown" style="vertical-align: middle;">
<el-icon class="head-icon">
<el-icon-setting/>
</el-icon>
<template v-slot:dropdown>
<el-dropdown-menu>
<el-dropdown-item command="console">控制台</el-dropdown-item>
<el-dropdown-item command="aboutDoc">关于</el-dropdown-item>
<el-dropdown-item command="userSignOut" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-header v-if="storeDisplay.showHeader">
<RightHeader ref="rightHeaderRef"/>
</el-header>
<el-main style="padding: 0; border-left: 1px solid #dcdfe6">
<router-view
v-slot="{ Component }"
:spaceId="choiceSpace"
:spaceInfo="getSpaceInfo(choiceSpace)"
@changeExpandedKeys="changeWikiPageExpandedKeys"
@loadPageList="loadPageList"
@loadSpace="loadSpaceList"
@switchSpace="switchSpacePage">
<component :is="Component"></component>
</router-view>
<router-view/>
</el-main>
</el-container>
</el-container>
<templateManage ref="templateManageRef" :pageId="choosePageId" :spaceId="choiceSpace" @doGetPageList="doGetPageList" />
<create-space ref="createSpaceRef" @success="loadSpaceList"></create-space>
<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>
<about-dialog ref="aboutDialogRef"></about-dialog>
</div>
</template>
<script setup>
import {
Document as ElIconDocument,
Fold as ElIconFold,
Expand as ElIconExpand,
Upload as ElIconUpload,
Bell as ElIconBell,
Setting as ElIconSetting,
Plus as ElIconPlus,
Check as ElIconCheck,
Files,
Scissor,
DocumentCopy,
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'
import userApi from '../../assets/api/user'
import pageApi from '../../assets/api/page'
import CreateSpace from '../space/CreateSpace'
import TemplateManage from '../template/TemplateManage'
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,BuildOutlined,BlockOutlined } from '@ant-design/icons-vue';
let route = useRoute();
let router = useRouter();
let storePage = useStorePageData();
import LeftSideBar from './LeftSideBar'
import RightHeader from './RightHeader'
import RightResize from './RightResize'
let storeDisplay = useStoreDisplay();
let leftCollapse = ref(true);
let rightContentLoading = ref(false);
let pathIndex = ref([]);
let defaultProps = ref({children: 'children', label: 'name',});
// 空间搜索相关
let spaceOptions = ref();
let spaceList = ref([]);
let choiceSpace = ref(undefined);
let nowSpaceShow = ref({});
let nowPageId = ref(0);
let moveToPageId = ref(0);
let moveToSpaceId = ref(0);
let moveToWikiPageList = ref([]);
let leftSideBarDir = ref(null);
// 页面展示相关
let wikiPageList = ref();
let wikiPage = ref({});
let wikiPageExpandedKeys = ref([]);
let userSelfInfo = ref({});
let userMessageList = ref([]);
let haveNotReadUserMessage = ref(false);
let userMessagePopVisible = ref(false);
let userMsgTotalCount = ref(0);
let userMsgParam = ref({sysType: 2, pageNum: 1, pageSize: 20,});
let rightAsideWidth = ref(300);
let optionPageId = ref('');
let choosePageId = ref(0);
let visibleMoveMenu = ref(false);
let onlyMoveMode = ref(false);
let aModalWaiting = ref(false);
let templateManageRef=ref(null)
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()
loadUserMessageList()
getSelfUserInfo()
});
const openTemplateCreate = (exsit) =>{
templateManageRef.value.showTemplateCreate(exsit)
const rightAsideWidthChange = (width) =>{
storeDisplay.rightAsideWidth = width
storeDisplay.commentShow =width
}
const createWikiByTemplate = () =>{
templateManageRef.value.showTemplateManage()
}
const filterShareStatus = (data) =>{
if (data === 1){
return '公共模板'
}
return '个人模板'
}
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 = (share) => {
let msg = '确定要删除此页面及其所有子页面吗?'
if (share !== undefined){
msg='选中的页面是:' +filterShareStatus(share)+'删除后无法使用此模板! 确定要删除此页面及其所有子页面吗?'
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
let param = {pageId: optionPageId.value};
pageApi.pageDelete(param).then(() => {
ElMessage.success('已删除')
doGetPageList(null)
});
}).catch(() => {});
}
const choosePageIdFunc = (id) => {
choosePageId.value = id
}
const setNowPageId = (id,readOnly)=>{
if (readOnly){
moveToPageId.value = id
return
}
nowPageId.value = id
}
const rename = (node,data) => {
data.renaming = true
}
const doRename = (node,data) => {
pageApi.renamePage({"id": data.id,"name": data.name})
.then((json) => {
doGetPageList(null)
ElMessage.success('重命名成功')
data.renaming = false
})
}
const loadPageList = (param) => {
param = param || {}
doGetPageList(param.parentId, param.node)
}
const changeNodeOptionStatus = (param) => {
optionPageId.value = param.id
}
const turnLeftCollapse = () => {
leftCollapse.value = !leftCollapse.value
setTimeout(() => {
if (leftCollapse.value) {
rightAsideWidthChange(rightAsideWidth.value + 1)
} else {
rightAsideWidthChange(1)
}
}, 100)
}
const changeWikiPageExpandedKeys = (pageId) => {
// 展开没有触发子节点的加载如果去加载子节点有还找不到当前的node暂不展开
// wikiPageExpandedKeys.value= [pageId];
}
const loadUserMessageIfPopVisible = () => {
if (!userMessagePopVisible.value) {
loadUserMessageList()
}
}
const loadUserMessageList = () => {
userApi.getUserMessageList(userMsgParam.value).then((res) => {
userMessageList.value = res.data || []
userMsgTotalCount.value = res.total || 0
haveNotReadUserMessage.value =
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 <= 14) {
router.push({path: '/page/show', query: {pageId: row.dataId}})
userMessagePopVisible.value = false
}
}
const readAllUserMessage = () => {
let msgIds = []
userMessageList.value
.filter((item) => item.msgStatus == 0)
.forEach((item) => {
msgIds.push(item.id)
})
if (msgIds.length <= 0) return
userApi.readUserMessage({ids: msgIds.join(',')}).then(() => {
ElMessage.success('标记成功')
loadUserMessageList()
})
}
const handleCurrentChange = (val) => {
userMsgParam.value.pageNum = val
loadUserMessageList()
}
let createSpaceRef = ref();
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();
} else if (data === -1) {
// 管理空间
router.push({path: '/space/manage'});
} else {
nowPageId.value = 0;
choiceSpace.value = Number(data);
nowSpaceShow.value = spaceList.value.find((item) => item.id === data);
storePage.spaceInfo = nowSpaceShow.value;
doGetPageList(null);
router.push({path: '/home', query: {spaceId: data}});
}
}
const loadSpaceList = (spaceId) => {
pageApi.spaceList({}).then((json) => {
spaceList.value = json.data || [];
let spaceOptionsNew = [];
spaceList.value.forEach((item) => spaceOptionsNew.push({label: item.name, value: item.id}));
spaceOptions.value = spaceOptionsNew;
if (spaceList.value.length > 0) {
let nowSpaceId = spaceId;
let nowSpaceShowTemp = spaceList.value.find((item) => item.id === spaceId);
if (!nowSpaceShowTemp) {
nowSpaceShowTemp = spaceList.value[0];
nowSpaceId = nowSpaceShowTemp.id;
}
nowSpaceShow.value = nowSpaceShowTemp;
storePage.spaceInfo = nowSpaceShowTemp;
choiceSpace.value = nowSpaceId;
nowPageId.value = 0;
doGetPageList(null);
// TODO 在首页时跳转
try {
if (route.path === '/home') {
router.push({path: '/home', query: {spaceId: nowSpaceId}});
}
} catch (e) {
console.log(e);
}
}
})
}
const doGetPageList = (parentId, node) => {
let param = {spaceId: choiceSpace.value}
pageApi.pageList(param).then((json) => {
wikiPageList.value = json.data || []
})
}
let aboutDialogRef = ref();
const userSettingDropdown = (command) => {
console.log('command:' + command)
if (command == 'userSignOut') {
userSignOut()
} else if (command == 'aboutDoc') {
aboutDialogRef.value.show()
} else if (command == 'myInfo') {
router.push({path: '/user/myInfo'})
} else if (command == 'console') {
window.open(import.meta.env.VITE_APP_BASE_API, '_blank')
} else {
ElMessage.warning('暂未开放')
}
}
const userSignOut = () => {
userApi.userLogout().then(() => {
location.reload()
})
}
let storeUser = useStoreUserData();
const getSelfUserInfo = () => {
userApi.getSelfUserInfo().then((json) => {
userSelfInfo.value = json.data;
storeUser.userInfo = json.data;
})
}
const getSpaceInfo = (spaceId) => {
for (let i = 0; i < spaceList.value.length; i++) {
if (spaceList.value[i].id == spaceId) {
return spaceList.value[i]
}
}
return {}
}
const switchSpacePage = (spaceId) => {
spaceId = parseInt(spaceId)
if (choiceSpace.value == spaceId) {
return
}
choiceSpace.value = spaceId
doGetPageList(null)
}
const rightAsideWidthChange = (width) => {
storeDisplay.viewMenuWidth = width
}
</script>
<style>
@@ -605,19 +53,20 @@
}
.el-header {
background-color: #1d4e89 !important;
background-color: #fff !important;
}
.header-right-user-name {
color: #fff;
color: #000000;
padding-right: 5px;
vertical-align: middle;
}
.el-header {
color: #333;
line-height: 40px;
height: 40px !important;
line-height: 100px;
height: 60px !important;
border-bottom: 0.5px solid #eaeaea;
}
.fold-btn {
@@ -627,9 +76,10 @@
.head-icon {
margin-right: 15px;
margin-top: 15px;
font-size: 16px;
cursor: pointer;
color: #fff;
color: #000000;
vertical-align: middle;
}