rt-sim-training-client/src/views/lesson/details.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, 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, 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, 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;
            }
        }
    }
};
</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>