rt-sim-training-client/src/views/lesson/lessoncategory/index.vue
2020-06-28 13:44:04 +08:00

119 lines
3.0 KiB
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>