代码拆分，相关逻辑开发

2023-07-04 20:15:32 +08:00
parent 86af800f13
commit 1dd7dd0975
14 changed files with 379 additions and 346 deletions
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/show/Comment.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/show/Comment.vue
@@ -31,7 +31,7 @@
 	</div>
 	<div class="comment-input-box">
 		<textarea rows="5" placeholder="发表评论" v-model="commentTextInput" :maxlength="500"></textarea>
-		<el-button style="float: right; margin: 2px 5px" type="primary" size="small" v-on:click="submitPageComment">发送</el-button>
+		<el-button style="float: right; margin: 2px 5px" type="primary" size="small" @click="submitPageComment">发送</el-button>
 	</div>
 </template>

--- a/zyplayer-doc-ui/wiki-ui/src/views/page/show/MobileQrScanDialog.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/show/MobileQrScanDialog.vue
@@ -0,0 +1,74 @@
+<template>
+	<!--手机扫码查看弹窗-->
+	<el-dialog title="手机扫码查看" v-model="dataItemEditVisible" width="400px">
+		<div style="text-align: center">
+			<div class="mobile-qr">
+				<canvas ref="qrCodeDivRef"></canvas>
+			</div>
+			<div>使用微信或手机浏览器扫一扫查看</div>
+			<div>或 <a target="_blank" :href="qrCodeUrl">直接访问</a></div>
+		</div>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+import QRCode from 'qrcode'
+
+let storePage = useStorePageData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initMobileQrScan();
+});
+let qrCodeUrl = ref('');
+let qrCodeDivRef = ref();
+const initMobileQrScan = () => {
+	if (!dataItemEditVisible.value) return;
+	let routeUrl = router.resolve({
+		path: '/page/share/mobile/view',
+		query: {pageId: storePage.pageInfo.id, space: storePage.spaceInfo.uuid}
+	});
+	let hostPath = window.location.href.split('#')[0];
+	setTimeout(() => {
+		qrCodeUrl.value = hostPath + routeUrl.href
+		QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
+				scale: 5, height: 250, wight: 250,
+			}, (error) => {
+				if (error) console.error(error);
+			}
+		)
+	}, 0);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>
--- a/zyplayer-doc-ui/wiki-ui/src/views/page/show/PageAction.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/show/PageAction.vue
@@ -20,6 +20,7 @@
 			<el-upload v-if="storePage.pageAuth.canUploadFile === 1"
 			           :on-success="uploadFileSuccess"
 			           :on-error="uploadFileError"
+			           :before-upload="beforeUpload"
 			           :action="uploadFileUrl"
 			           :data="uploadFormData"
 			           :with-credentials="true" class="action-btn upload-page-file" name="files"
@@ -42,6 +43,11 @@
 				</template>
 			</el-dropdown>
 		</el-col>
+		<MobileQrScanDialog v-model:visible="mobileScanDialogVisible"/>
+		<PageAuthDialog v-model:visible="pageAuthDialogVisible"/>
+		<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
+			<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
+		</form>
 	</el-row>
 </template>

@@ -67,10 +73,11 @@ import {toRefs, ref, reactive, onMounted, watch, defineProps, defineEmits, defin
 import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
 import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
 import pageApi from '@/assets/api/page'
+import PageAuthDialog from './PageAuthDialog.vue'
+import MobileQrScanDialog from './MobileQrScanDialog.vue'
 import {useStorePageData} from "@/store/pageData";

 let storePage = useStorePageData();
-
 let router = useRouter();
 const editWiki = () => {
 	// 锁定页面并进入编辑页面
@@ -82,93 +89,72 @@ const editWiki = () => {
 const showCommentWiki = () => {
 	storePage.commentShow = true;
 	storePage.commentActiveTab = 'comment';
-	// computeNavigationWidth();
 }
+let pageAuthDialogVisible = ref(false);
 const editWikiAuth = () => {
-	// pageAuthNewUser.value = [];
-	// pageAuthUserList.value = [];
-	// let param = {pageId: wikiPage.value.id};
-	// pageApi.getPageUserAuthList(param).then((json) => {
-	// 	pageAuthUserList.value = json.data || [];
-	// 	pageAuthDialogVisible.value = true;
-	// });
+	pageAuthDialogVisible.value = true;
 }
 const showPageHistory = () => {
-	// actionTabVisible.value = true;
-	// actionTabActiveName.value = 'history';
-	// clearHistory();
-	// computeNavigationWidth();
+	storePage.commentShow = true;
+	storePage.commentActiveTab = 'history';
 }
 const showOpenPage = () => {
-	// if (props.spaceInfo.openDoc !== 1) {
-	// 	ElMessage.warning('该空间未开放，无法查看开放文档地址')
-	// } else {
-	// 	let routeUrl = router.resolve({
-	// 		path: '/page/share/view',
-	// 		query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
-	// 	})
-	// 	window.open(routeUrl.href, '_blank')
-	// }
+	if (storePage.spaceInfo.openDoc !== 1) {
+		ElMessage.warning('该空间未开放，无法查看开放文档地址');
+	} else {
+		let routeUrl = router.resolve({
+			path: '/page/share/view',
+			query: {pageId: storePage.pageInfo.id, space: storePage.spaceInfo.uuid}
+		});
+		window.open(routeUrl.href, '_blank');
+	}
 }
 const deleteWikiPage = () => {
-	// ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
-	// 	confirmButtonText: '确定',
-	// 	cancelButtonText: '取消',
-	// 	type: 'warning',
-	// }).then(() => {
-	// 	let param = {pageId: wikiPage.value.id};
-	// 	pageApi.pageDelete(param).then(() => {
-	// 		// 重新加载左侧列表，跳转到展示页面
-	// 		emit('loadPageList');
-	// 		router.push({
-	// 			path: '/home',
-	// 			query: {spaceId: wikiPage.value.spaceId}
-	// 		});
-	// 	});
-	// }).catch(() => {});
+	ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(() => {
+		let param = {pageId: storePage.pageInfo.id};
+		pageApi.pageDelete(param).then(() => {
+			// 重新加载左侧列表，跳转到展示页面
+			// emit('loadPageList'); TODO
+			router.push({path: '/home', query: {spaceId: storePage.pageInfo.spaceId}});
+		});
+	}).catch(() => {});
 }
+// 下载为Word
 let downloadFormRef = ref();
+let downloadFormParam = ref({url: 'zyplayer-doc-wiki/page/download', param: {}});
 const exportWord = () => {
-	// downloadFormParam.value.param = {
-	// 	pageId: wikiPage.value.id,
-	// }
-	// setTimeout(() => downloadFormRef.value.submit(), 0)
+	downloadFormParam.value.param = {pageId: storePage.pageInfo.id};
+	setTimeout(() => downloadFormRef.value.submit(), 0);
 }
-let qrCodeDivRef = ref();
+// 手机扫码
+let mobileScanDialogVisible = ref(false);
 const showMobileView = () => {
-	// if (props.spaceInfo.openDoc !== 1) {
-	// 	ElMessage.warning('该空间未开放，无法查看开放文档地址')
-	// } else {
-	// 	let routeUrl = router.resolve({
-	// 		path: '/page/share/mobile/view',
-	// 		query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
-	// 	})
-	// 	mobileScanDialogVisible.value = true
-	// 	let hostPath = window.location.href.split('#')[0]
-	// 	setTimeout(() => {
-	// 		qrCodeUrl.value = hostPath + routeUrl.href
-	// 		QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
-	// 				scale: 5, height: 250, wight: 250,
-	// 			}, (error) => {
-	// 				if (error) console.error(error)
-	// 			}
-	// 		)
-	// 	}, 0)
-	// }
+	if (storePage.spaceInfo.openDoc !== 1) {
+		ElMessage.warning('该空间未开放，无法查看开放文档地址');
+	} else {
+		mobileScanDialogVisible.value = true;
+	}
 }
 // 上传相关
 let uploadFormData = ref({pageId: 0});
 let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
+const beforeUpload = () => {
+	uploadFormData.value.pageId = storePage.pageInfo.id;
+}
 const uploadFileError = (err) => {
 	ElMessage.error('上传失败，' + err);
 }
 const uploadFileSuccess = (response) => {
-	// if (response.errCode === 200) {
-	// 	pageFileList.value.push(response.data);
-	// 	ElMessage.success('上传成功！');
-	// } else {
-	// 	ElMessage('上传失败：' + (response.errMsg || '未知错误'));
-	// }
+	if (response.errCode === 200) {
+		storePage.fileList.push(response.data);
+		ElMessage.success('上传成功！');
+	} else {
+		ElMessage('上传失败：' + (response.errMsg || '未知错误'));
+	}
 }
 </script>

--- a/zyplayer-doc-ui/wiki-ui/src/views/page/show/PageAuthDialog.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/views/page/show/PageAuthDialog.vue
@@ -0,0 +1,140 @@
+<template>
+	<!--人员权限弹窗-->
+	<el-dialog title="页面权限" v-model="dataItemEditVisible" width="800px" class="page-auth-dialog">
+		<el-row>
+			<el-select v-model="pageAuthNewUser" filterable remote reserve-keyword autoComplete="new-password" placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList" :loading="pageAuthUserLoading" style="width: 690px; margin-right: 10px">
+				<el-option v-for="item in searchUserList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
+			</el-select>
+			<el-button @click="addPageAuthUser">添加</el-button>
+		</el-row>
+		<el-table :data="pageAuthUserList" border style="width: 100%; margin: 10px 0">
+			<el-table-column prop="userName" label="用户" width="150"></el-table-column>
+			<el-table-column label="权限">
+				<template v-slot="scope">
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.editPage">编辑</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.deletePage">删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileUpload">文件上传</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileDelete">文件删除</el-checkbox>
+					<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageAuthManage">权限管理</el-checkbox>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" width="80">
+				<template v-slot="scope">
+					<el-button size="small" type="danger" plain @click="deleteUserPageAuth(scope.row)">删除</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<template #footer>
+			<el-button @click="cancelAuth">取消</el-button>
+			<el-button type="primary" @click="saveUserPageAuth">保存配置</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import {
+	Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import {markRaw} from 'vue'
+import {toRefs, ref, reactive, onMounted, onBeforeUnmount, defineProps, watch, defineEmits, computed, defineExpose} from 'vue';
+import {useRouter, useRoute} from "vue-router";
+import {ElMessageBox, ElMessage, ElLoading, ElNotification} from 'element-plus'
+import pageApi from "@/assets/api/page";
+import {useStorePageData} from "@/store/pageData";
+import userApi from "@/assets/api/user";
+
+let storePage = useStorePageData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+	visible: Boolean,
+	data: Object,
+});
+
+let dataItemEditVisible = ref(false);
+const emit = defineEmits(['update:visible', 'ok']);
+watch(dataItemEditVisible, () => {
+	emit('update:visible', dataItemEditVisible.value);
+});
+watch(() => props.visible, () => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+onMounted(() => {
+	dataItemEditVisible.value = props.visible;
+	initPageAuth();
+});
+
+// 页面权限
+let pageAuthUserList = ref([]);
+let searchUserList = ref([]);
+let pageAuthNewUser = ref();
+let pageAuthUserLoading = ref(false);
+const initPageAuth = () => {
+	if (!dataItemEditVisible.value) return;
+	pageAuthNewUser.value = '';
+	pageAuthUserList.value = [];
+	let param = {pageId: storePage.pageInfo.id};
+	pageApi.getPageUserAuthList(param).then((json) => {
+		pageAuthUserList.value = json.data || [];
+	});
+}
+const addPageAuthUser = () => {
+	if (!pageAuthNewUser.value) {
+		ElMessage.warning('请先选择用户');
+		return;
+	}
+	// 已添加过的用户不再添加
+	if (pageAuthUserList.value.find((item) => item.userId === pageAuthNewUser.value)) {
+		pageAuthNewUser.value = undefined;
+		return;
+	}
+	// 获取用户
+	let findUser = searchUserList.value.find((item) => item.id === pageAuthNewUser.value);
+	if (findUser) {
+		return;
+	}
+	// 添加用户
+	pageAuthUserList.value.push({
+		userId: findUser.id,
+		userName: findUser.userName,
+		editPage: 0,
+		commentPage: 0,
+		deletePage: 0,
+		pageFileUpload: 0,
+		pageFileDelete: 0,
+		pageAuthManage: 0,
+	})
+	pageAuthNewUser.value = '';
+}
+const getSearchUserList = (query) => {
+	if (!query) return;
+	pageAuthUserLoading.value = true;
+	userApi.getUserBaseInfo({search: query}).then((json) => {
+		searchUserList.value = json.data || [];
+		pageAuthUserLoading.value = false;
+	});
+}
+const saveUserPageAuth = () => {
+	let param = {
+		pageId: storePage.pageInfo.id,
+		authList: JSON.stringify(pageAuthUserList.value),
+	}
+	pageApi.assignPageUserAuth(param).then(() => {
+		ElMessage.success('保存成功！');
+	});
+}
+const cancelAuth = () => {
+	dataItemEditVisible.value = false;
+}
+const deleteUserPageAuth = (row) => {
+	pageAuthUserList.value = pageAuthUserList.value.filter((item) => item.userId !== row.userId);
+}
+</script>
+
+<style lang="scss">
+.page-auth-dialog {
+}
+</style>