rt-sim-training-client/src/views/lesson/lessoncategory/index.vue

<template>
  <div class="mainContext">
    <div v-if="lessonShow" class="box">
      <lesson-edit ref="lesson" @refresh="refresh" />
    </div>
    <div v-if="chapterShow" class="box">
      <chapter-edit ref="chapter" @refresh="refresh" />
    </div>
    <div v-if="sortTreeShow" class="box">
      <sort-tree ref="sortTree" @refresh="refresh" />
    </div>
  </div>
</template>

<script>
import LessonEdit from './edit/lesson/index';
import ChapterEdit from './edit/chapter/index';
import SortTree from './edit/sorttree/index';
import localStore from 'storejs';

export default {
    name: 'LessonDraft',
    components: {
        LessonEdit,
        ChapterEdit,
        SortTree
    },
    data() {
        return {
            isNew: true,
            lessonShow: true,
            chapterShow: false,
            sortTreeShow: false,
            menuoper: {},
            demoObj: null
        };
    },
    computed: {
        width() {
            return this.$store.state.app.width - localStore.get('LeftWidth');
        },
        height() {
            return this.$store.state.app.height - 125;
        }
    },
    watch: {
        $route() {
            this.initData();
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            const data = this.$route.query;
            this.runFunc(this.$route.params.type, data);
        },
        exchangeShow(model) {
            ['lessonShow', 'chapterShow', 'sortTreeShow'].forEach(elem => {
                if (model[elem]) {
                    this[elem] = true;
                } else {
                    this[elem] = false;
                }
            });
        },
        runFunc(func, data) {
            // 策略模式
            return this[func](data);
        },
        toNextPage(type, isCreate, data) {
            this.isNew = isCreate;
            const typeShow = {};
            typeShow[type + 'Show'] = true;
            this.exchangeShow(typeShow);
            this.$nextTick(() => {
                if (type != 'sortTree') {
                    this.$refs[type].initData(isCreate, data);
                } else {
                    this.$refs[type].initData(data);
                }
            });
        },
        lessonCreate(data) {
            this.toNextPage('lesson', true, data);
        },
        lessonEdit(data) {
            this.toNextPage('lesson', false, data);
        },
        chapterCreate(data) {
            this.toNextPage('chapter', true, data);
        },
        chapterEdit(data) {
            this.toNextPage('chapter', false, data);
        },
        treeSort(data) {
            this.toNextPage('sortTree', false, data);
        },
        refresh(filterSelect) {
            this.$emit('refresh');
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .mainContext{
        display: -webkit-box;
		height: 100%;
        overflow-y: auto;
        .box{
			height: 100%;
			display: -webkit-box;
            width: 100%;
        }
    }
</style>