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">
        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-50) +'px' }">
          <el-tree
            ref="tree"
            style="width: 380px"
            :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>
      <transition>
        <router-view />
      </transition>
    </div>
  </el-card>
</template>

<script>
import { getLessonTree } from '@/api/jmap/lessondraft';
import { DeviceMenu } from '@/scripts/ConstDic';
export default {
	name: 'LessonDetail',
	data() {
		return {
			treeList: [],
			defaultProps: {
				children: 'children',
				label: 'name',
				disabled: this.showNode
			},
			name: '',
			lessonId: '',
			expandList: []
		};
	},
	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.treeList[0].id, skinCode: this.$route.query.skinCode}} );
		},
		showNode(obj) {
			return obj.type !== 'Training';
		},
		showContextMenu(e, obj, node, vueElem) {
			if (obj && obj.type === 'TrainingType' || obj.type === 'Training') {
				e.preventDefault();
				this.point = {
					x: e.clientX,
					y: e.clientY
				};
				this.node = node;
				const menu = DeviceMenu.Training;
				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
			}
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .tree_box{
        position: relative;
        left: 10px;
        width: 400px;
        padding-right: 10px;
    }
    .right_box{
    }
</style>