---wiki正式切换到vue3版本---
This commit is contained in:
暮光：城中城
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="share-mobile-layout">
|
||||
<van-popup v-model="popupShow" closeable position="left" class="popup-module" :style="{ height: '100%', width: '80%' }">
|
||||
<van-popup v-model:show="popupShow" closeable position="left" class="popup-module" :style="{ height: '100%', width: '80%' }">
|
||||
<div class="header">
|
||||
<van-nav-bar :title="nowSpaceShow.name"></van-nav-bar>
|
||||
</div>
|
||||
@@ -13,107 +13,184 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import pageApi from '../../common/api/page'
|
||||
import PageTree from './PageTree'
|
||||
import Vant from 'vant';
|
||||
import 'vant/lib/icon/index.css';
|
||||
import 'vant/lib/popup/index.css';
|
||||
import 'vant/lib/cell/index.css';
|
||||
import 'vant/lib/nav-bar/index.css';
|
||||
import 'vant/lib/collapse-item/index.css';
|
||||
Vue.use(Vant);
|
||||
<script setup>
|
||||
import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
|
||||
import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
|
||||
import {ElMessageBox, ElMessage} from 'element-plus'
|
||||
import pageApi from '../../assets/api/page'
|
||||
import PageTree from './PageTree'
|
||||
import 'vant/es/icon/style/index';
|
||||
import 'vant/es/popup/style/index';
|
||||
import 'vant/es/cell/style/index';
|
||||
import 'vant/es/nav-bar/style/index';
|
||||
import 'vant/es/image-preview/style/index';
|
||||
import 'vant/es/collapse-item/style/index';
|
||||
import 'vant/es/dialog/style/index';
|
||||
import 'vant/es/checkbox/style/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
// 空间搜索相关
|
||||
spaceUuid: '',
|
||||
nowPageId: '',
|
||||
nowSpaceShow: {},
|
||||
// 搜索的输入内容
|
||||
searchKeywords: "",
|
||||
// 页面展示相关
|
||||
wikiPageList:[],
|
||||
wikiPageExpandedKeys: [],
|
||||
popupShow: false,
|
||||
pageSelect: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
PageTree: PageTree
|
||||
},
|
||||
mounted: function () {
|
||||
this.spaceUuid = this.$route.query.space || '';
|
||||
this.getSpaceInfo();
|
||||
this.doGetPageList(null);
|
||||
},
|
||||
methods: {
|
||||
filterPageNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
pageSelectChange(value) {
|
||||
console.log("页面修改：" + value);
|
||||
this.popupShow = false;
|
||||
this.$router.replace({path: '/page/share/mobile/view', query: {pageId: value, space: this.spaceUuid}});
|
||||
},
|
||||
popupShowChange(value) {
|
||||
this.popupShow = value;
|
||||
console.log(this.pageSelect)
|
||||
},
|
||||
doGetPageList() {
|
||||
pageApi.openPageList({space: this.spaceUuid}).then(json => {
|
||||
this.wikiPageList = json.data || [];
|
||||
this.nowPageId = '';
|
||||
});
|
||||
},
|
||||
getSpaceInfo() {
|
||||
pageApi.openSpaceInfo({space: this.spaceUuid}).then(json => {
|
||||
this.nowSpaceShow = json.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
let defaultProps = ref({children: 'children', label: 'name',});
|
||||
// 空间搜索相关
|
||||
let spaceUuid = ref('');
|
||||
let nowPageId = ref('');
|
||||
let nowSpaceShow = ref({});
|
||||
// 页面展示相关
|
||||
let wikiPageList = ref([]);
|
||||
let popupShow = ref(false);
|
||||
let pageSelect = ref([]);
|
||||
|
||||
let route = useRoute();
|
||||
let router = useRouter();
|
||||
onMounted(() => {
|
||||
spaceUuid.value = route.query.space || ''
|
||||
getSpaceInfo()
|
||||
doGetPageList(null)
|
||||
});
|
||||
const filterPageNode = (value, data) => {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
}
|
||||
const pageSelectChange = (value) => {
|
||||
// console.log('页面修改：' + value)
|
||||
popupShow.value = false
|
||||
router.replace({
|
||||
path: '/page/share/mobile/view',
|
||||
query: {pageId: value, space: spaceUuid.value}
|
||||
})
|
||||
}
|
||||
const popupShowChange = (value) => {
|
||||
popupShow.value = value
|
||||
// console.log(pageSelect.value)
|
||||
}
|
||||
const doGetPageList = () => {
|
||||
pageApi.openPageList({space: spaceUuid.value}).then((json) => {
|
||||
wikiPageList.value = json.data || []
|
||||
nowPageId.value = ''
|
||||
})
|
||||
}
|
||||
const getSpaceInfo = () => {
|
||||
pageApi.openSpaceInfo({space: spaceUuid.value}).then((json) => {
|
||||
nowSpaceShow.value = json.data
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
html,body,#app {margin: 0; padding: 0; height: 100%;}
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.share-mobile-layout{height: 100%;}
|
||||
.popup-module .header{width:100%;height:46px;}
|
||||
.popup-module .main{position:absolute;top:46px;bottom: 0;right:0;left:0;overflow:auto;}
|
||||
.popup-module .footer{width:100%;height:26px;position:fixed;bottom:0}
|
||||
.share-mobile-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
pre{margin: 0;white-space: pre-wrap;font-size: 14px; font-family: auto;}
|
||||
.el-menu {box-sizing: border-box;border-right: 0;margin-right: 3px;}
|
||||
.el-header {background-color: #409EFF; color: #333; line-height: 40px; text-align: right;height: 40px !important;}
|
||||
.doc-body-box{
|
||||
overflow-x: hidden;overflow-y: auto;width: 100%;
|
||||
padding: 10px;border-left: 1px solid #f1f1f1; box-sizing: border-box;
|
||||
}
|
||||
.el-tree{margin-right: 3px;}
|
||||
.logo{
|
||||
/*background: #409EFF; cursor: pointer;*/
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding: 5px 10px;
|
||||
width: 260px; height:40px;line-height:40px;font-size: 25px;color: #666;text-align: center;
|
||||
}
|
||||
.icon-collapse{float: left;font-size: 25px;color: #aaa;cursor: pointer;position: fixed;}
|
||||
.icon-collapse:hover{color: #ccc;}
|
||||
/*评论*/
|
||||
.comment-box .head{
|
||||
float: left;background-color: #ccc;border-radius: 50%;margin-right: 10px;
|
||||
width: 45px; height: 45px; line-height: 45px;text-align: center;color: #fff;
|
||||
}
|
||||
.build-info{
|
||||
text-align: center; padding: 5px 0;color: #aaa;font-size: 12px; margin: 10px 0;
|
||||
}
|
||||
.build-info a{color: #4183c4;cursor: pointer;text-decoration:none;}
|
||||
.popup-module .header {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.popup-module .main {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.popup-module .footer {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 14px;
|
||||
font-family: auto;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
box-sizing: border-box;
|
||||
border-right: 0;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #409eff;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.doc-body-box {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding: 5px 10px;
|
||||
width: 260px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-collapse {
|
||||
float: left;
|
||||
font-size: 25px;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.icon-collapse:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.comment-box .head {
|
||||
float: left;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.build-info {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.build-info a {
|
||||
color: #4183c4;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user