rt-sim-training-client/src/views/lesson/details.vue

<template>
  <el-card>
    <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>