project/assets/js/main/pages/docs/view.vue

<template>
    <div class="w-main docs-view">

        <v-title>{{$L('文档浏览')}}</v-title>

        <div class="view-box">
            <div class="view-head">
                <div class="header-title">
                    <span v-if="bookDetail.title">{{bookDetail.title}}</span>
                    <em v-if="bookDetail.title && docDetail.title">-</em>
                    {{docDetail.title}}
                </div>
                <Button class="header-button" size="small" type="primary" ghost @click="toggleFullscreen">{{$L(isFullscreen ? '退出全屏' : '全屏')}}</Button>
            </div>
            <div class="view-main" :class="{'view-book':isBook}">
                <div class="view-menu">
                    <div class="view-menu-list">
                        <nested-draggable :lists="sectionLists" :readonly="true" :activeid="sid" @change="handleSection"></nested-draggable>
                    </div>
                </div>
                <div class="view-body">
                    <div class="view-body-content">
                        <template v-if="docDetail.type=='document'">
                            <MarkdownPreview v-if="docContent.type=='md'" :initialValue="docContent.content"></MarkdownPreview>
                            <ReportContent v-else :content="docContent.content"></ReportContent>
                        </template>
                        <minder v-else-if="docDetail.type=='mind'" ref="myMind" class="body-mind" v-model="docContent" :readOnly="true"></minder>
                        <sheet v-else-if="docDetail.type=='sheet'" ref="mySheet" class="body-sheet" v-model="docContent.content" :readOnly="true"></sheet>
                        <flow v-else-if="docDetail.type=='flow'" ref="myFlow" class="body-flow" v-model="docContent" :readOnly="true"></flow>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss">
    .view-body {
        .view-body-content {
            .markdown-preview,
            .report-content {
                margin: 0 !important;
                padding: 0 !important;
            }
            .minder-editor-container {
                transform: translateZ(0);
            }
            .body-sheet {
                box-sizing: content-box;
                * {
                    box-sizing: content-box;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    .docs-view {
        background-color: #ffffff;
        .view-box {
            display: flex;
            flex-direction: column;
            position: absolute;
            width: 100%;
            height: 100%;
            .view-head {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100%;
                height: 38px;
                box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
                position: relative;
                z-index: 99;
                .header-title {
                    flex: 1;
                    color: #333333;
                    padding-left: 12px;
                    padding-right: 12px;
                    font-size: 16px;
                    font-weight: 500;
                    white-space: nowrap;
                    em {
                        padding: 0 3px;
                        font-weight: normal;
                    }
                }
                .header-hint {
                    padding-right: 22px;
                    font-size: 12px;
                    color: #666;
                    white-space: nowrap;
                    .ivu-btn {
                        font-size: 12px;
                        padding: 0 10px;
                    }
                    .ivu-dropdown-item {
                        font-size: 12px !important;
                    }
                }
                .header-button {
                    font-size: 12px;
                    margin-right: 12px;
                }
            }
            .view-main {
                flex: 1;
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
                &.view-book {
                    .view-menu {
                        border-right: 0;
                        width: 100%;
                        .view-menu-list {
                            padding: 18px 8%;
                        }
                    }
                    .view-body {
                        display: none;
                    }
                }
                .view-menu {
                    position: relative;
                    height: 100%;
                    width: 280px;
                    border-right: 1px solid #E6ECF1;
                    .view-menu-list {
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        padding: 18px 12px;
                        overflow: auto;
                    }
                }
                .view-body {
                    flex: 1;
                    height: 100%;
                    position: relative;
                    .view-body-content {
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        padding: 18px;
                        overflow: auto;
                    }
                }
            }
        }
    }
</style>
<script>
    import Vue from 'vue'
    import minder from '../../components/docs/minder'
    Vue.use(minder)


    const Sheet = resolve => require(['../../components/docs/sheet/index'], resolve);
    const Flow = resolve => require(['../../components/docs/flow/index'], resolve);
    const NestedDraggable = resolve => require(['../../components/docs/NestedDraggable'], resolve);
    const MarkdownPreview = resolve => require(['../../components/MDEditor/components/preview/index'], resolve);
    const ReportContent = resolve => require(['../../components/report/content'], resolve);

    export default {
        components: {Sheet, Flow, ReportContent, MarkdownPreview, NestedDraggable},
        data () {
            return {
                loadIng: 0,

                sid: 0,

                docDetail: { },
                docContent: { },

                bookDetail: {},

                sectionLists: [],
                sectionNoDataText: "",

                routeName: '',

                isBook: false,
                isFullscreen: false,
            }
        },
        mounted() {
            this.routeName = this.$route.name;
            //
            document.addEventListener("fullscreenchange", () => {
                this.isFullscreen = !!document.fullscreenElement;
            });
        },
        activated() {
            this.refreshSid();
        },
        deactivated() {
            if ($A.getToken() === false) {
                this.sid = 0;
            }
        },
        watch: {
            sid(val) {
                if (!val) {
                    return;
                }
                val += "";
                if (val.substring(0, 1) == 'b') {
                    this.isBook = true;
                    this.docDetail.bookid = val.substring(1);
                    this.getSectionMenu();
                } else {
                    this.isBook = false;
                    this.refreshDetail();
                }
            },
            '$route' (To) {
                if (To.name == 'docs-view') {
                    this.sid = To.params.sid;
                }
            },
        },
        methods: {
            refreshSid() {
                this.sid = this.$route.params.sid;
                if (typeof this.$route.params.other === "object") {
                    this.$set(this.docDetail, 'title', $A.getObject(this.$route.params.other, 'title'))
                }
            },

            refreshDetail() {
                this.docDetail = { };
                this.docContent = { };
                this.getDetail();
            },

            getDetail() {
                this.loadIng++;
                $A.apiAjax({
                    url: 'docs/section/content',
                    data: {
                        act: 'view',
                        id: this.sid,
                    },
                    complete: () => {
                        this.loadIng--;
                    },
                    error: () => {
                        alert(this.$L('网络繁忙，请稍后再试！'));
                    },
                    success: (res) => {
                        if (res.ret === 1) {
                            this.docDetail = res.data;
                            this.docContent = $A.jsonParse(res.data.content);
                            this.getSectionMenu();
                        } else {
                            this.$Modal.error({
                                title: this.$L('温馨提示'),
                                content: res.msg,
                                onOk: () => {
                                    if (res.data == '-1001') {
                                        this.goForward({path: '/', query:{from:encodeURIComponent(window.location.href)}}, true);
                                    }
                                }
                            });
                        }
                    }
                });
            },

            getSectionMenu() {
                this.sectionNoDataText = this.$L("数据加载中.....");
                let bookid = this.docDetail.bookid;
                $A.apiAjax({
                    url: 'docs/section/lists',
                    data: {
                        act: 'view',
                        bookid: bookid
                    },
                    error: () => {
                        if (bookid != this.docDetail.bookid) {
                            return;
                        }
                        this.sectionNoDataText = this.$L("数据加载失败！");
                    },
                    success: (res) => {
                        if (bookid != this.docDetail.bookid) {
                            return;
                        }
                        if (res.ret === 1) {
                            this.bookDetail = res.data.book;
                            this.sectionLists = res.data.tree;
                            this.sectionNoDataText = this.$L("没有相关的数据");
                        } else {
                            this.sectionLists = [];
                            this.sectionNoDataText = res.msg;
                            this.$Modal.error({
                                title: this.$L('温馨提示'),
                                content: res.msg,
                                onOk: () => {
                                    if (res.data == '-1001') {
                                        this.goForward({path: '/', query:{from:encodeURIComponent(window.location.href)}}, true);
                                    }
                                }
                            });
                        }
                    }
                });
            },

            handleSection(act, detail) {
                if (act === 'open') {
                    this.goForward({name: 'docs-view', params: {sid: detail.id, other: detail || {}}});
                    this.refreshSid();
                }
            },

            toggleFullscreen() {
                if (this.isFullscreen) {
                    this.exitFullscreen();
                } else {
                    this.launchFullscreen(this.$el);
                }
            },

            launchFullscreen(element) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullScreen();
                }
            },

            exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
        },
    }
</script>