148 lines
4.7 KiB
Vue
148 lines
4.7 KiB
Vue
<template>
|
|
<el-card style="height: 100%; overflow-y: auto;">
|
|
<div slot="header" style="text-align: center;">
|
|
<b>{{ $t('lesson.courseName') + ': '+ name }}</b>
|
|
</div>
|
|
<div style="display: flex;align-items:flex-start">
|
|
<div class="tree_box">
|
|
<div style="border: 2px dashed #B0C4DE">
|
|
<p>{{ this.$t('lesson.courseTree') }}</p>
|
|
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-80) +'px' }">
|
|
<el-tree
|
|
ref="tree"
|
|
style="width: 370px"
|
|
:data="treeList"
|
|
node-key="id"
|
|
:props="defaultProps"
|
|
default-expand-all
|
|
highlight-current
|
|
:span="22"
|
|
:filter-node-method="filterNode"
|
|
:default-expanded-keys="expandList"
|
|
@node-contextmenu="showContextMenu"
|
|
@node-click="clickEvent"
|
|
/>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
<transition>
|
|
<router-view @refresh="refresh" />
|
|
</transition>
|
|
</div>
|
|
<operate-menu ref="menu" :point="point" :node="node" @refresh="refresh" @changeRouter="changeRouter" />
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getLessonTree } from '@/api/jmap/lessondraft';
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
|
import OperateMenu from './operateMenu';
|
|
export default {
|
|
name: 'LessonDetail',
|
|
components: {
|
|
OperateMenu
|
|
},
|
|
data() {
|
|
return {
|
|
treeList: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
name: '',
|
|
lessonId: '',
|
|
expandList: [],
|
|
point: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
node: {
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
width() {
|
|
return this.$store.state.app.width - 481 - this.widthLeft;
|
|
},
|
|
height() {
|
|
return this.$store.state.app.height - 120;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initPageData();
|
|
},
|
|
methods: {
|
|
initPageData() {
|
|
getLessonTree(this.$route.query.lessonId || this.$route.query.id).then(resp => {
|
|
if (resp.data && resp.data[0]) {
|
|
this.name = resp.data[0].name;
|
|
this.lessonId = resp.data[0].id;
|
|
this.treeList = resp.data;
|
|
}
|
|
this.editLesson();
|
|
});
|
|
|
|
},
|
|
clickEvent(obj, node, ele) {
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
editLesson() {
|
|
this.$router.push( {path: `/design/lesson/details/edit/lessonEdit`, query: {id: this.lessonId, skinCode: this.$route.query.skinCode, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId}} );
|
|
},
|
|
createChapte(node) {
|
|
this.$router.push({path: `/design/lesson/details/edit/chapterCreate`, query: {id: node.data.id, lessonId: this.lessonId, skinCode: this.$route.query.skinCode, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId}});
|
|
},
|
|
updateChapte(node) {
|
|
this.$router.push( {path: `/design/lesson/details/edit/chapterEdit`, query: {id: node.data.id, skinCode: this.$route.query.skinCode, lessonId: this.lessonId, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId}});
|
|
},
|
|
showContextMenu(e, obj, node, vueElem) {
|
|
if (obj && obj.type === 'Lesson' || obj.type === 'Chapter') {
|
|
e.preventDefault();
|
|
this.point = {
|
|
x: e.clientX,
|
|
y: e.clientY
|
|
};
|
|
this.node = node;
|
|
const menu = DeviceMenu.Lesson;
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
|
}
|
|
},
|
|
changeRouter(params) {
|
|
switch (params.event) {
|
|
case '01':
|
|
this.editLesson();
|
|
break;
|
|
case '02':
|
|
this.createChapte(params.node);
|
|
break;
|
|
case '03':
|
|
this.updateChapte(params.node);
|
|
break;
|
|
case '04':
|
|
this.createChapte(params.node);
|
|
break;
|
|
}
|
|
},
|
|
refresh() {
|
|
this.initPageData();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.tree_box{
|
|
position: relative;
|
|
left: 10px;
|
|
width: 400px;
|
|
padding-right: 20px;
|
|
padding-top: 20px;
|
|
}
|
|
.right_box{
|
|
}
|
|
</style>
|