192 lines
6.2 KiB
Vue
192 lines
6.2 KiB
Vue
<template>
|
||
<div class="joylink-card">
|
||
<div class="title_box">
|
||
<b>{{ $t('lesson.courseName') + ': '+ name }}</b>
|
||
</div>
|
||
<div class="content_box">
|
||
<div class="tree_box">
|
||
<div class="tree_content_box">
|
||
<p>{{ this.$t('lesson.courseTree') }}</p>
|
||
<div style="height: calc(100% - 89px); overflow-y: auto;">
|
||
<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"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<transition>
|
||
<router-view @refresh="refresh" />
|
||
</transition>
|
||
</div>
|
||
<operate-menu ref="menu" :point="point" :node="node" @refresh="refresh" @changeRouter="changeRouter" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getLessonTree, deleteLessonChapter } 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;
|
||
}
|
||
},
|
||
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, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId, drawWay: this.$route.query.drawWay, lineCode:this.$route.query.lineCode}} );
|
||
},
|
||
createChapte(node) {
|
||
this.$router.push({path: `/design/lesson/details/edit/chapterCreate`, query: {id: node.data.id, type:node.data.type, lessonId: this.lessonId, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId, drawWay: this.$route.query.drawWay, lineCode:this.$route.query.lineCode}});
|
||
},
|
||
updateChapte(node) {
|
||
this.$router.push( {path: `/design/lesson/details/edit/chapterEdit`, query: {id: node.data.id, type:node.data.type, lessonId: this.lessonId, cityCode: this.$route.query.cityCode, mapId: this.$route.query.mapId, drawWay: this.$route.query.drawWay, lineCode:this.$route.query.lineCode}});
|
||
},
|
||
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 });
|
||
}
|
||
},
|
||
refresh() {
|
||
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;
|
||
}
|
||
});
|
||
},
|
||
deleteChapter(node) {
|
||
const _that = this;
|
||
this.$confirm('是否确认删除章节《' + node.data.name + '》 ' + ' ？', this.$t('tip.hint'), {
|
||
confirmButtonText: '确认',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteLessonChapter(node.data.id).then(response => {
|
||
_that.refresh();
|
||
_that.$message.success(this.$t('map.successfullyDelete'));
|
||
}).catch(error => {
|
||
_that.$message.error(this.$t('map.failDelete') + error.message);
|
||
});
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
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;
|
||
case '05':
|
||
this.deleteChapter(params.node);
|
||
break;
|
||
}
|
||
},
|
||
refresh() {
|
||
this.initPageData();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
|
||
.joylink-card{
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
|
||
.title_box{
|
||
height: 47px;
|
||
line-height: 47px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #EBEEF5;
|
||
}
|
||
.content_box{
|
||
height: calc(100% - 47px);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
.tree_box{
|
||
position: relative;
|
||
left: 10px;
|
||
width: 400px;
|
||
padding-right: 20px;
|
||
padding-top: 20px;
|
||
height: 100%;
|
||
.tree_content_box{
|
||
border: 2px dashed #B0C4DE;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|