rt-sim-training-client/src/views/newMap/displayNew/LeftSlider.vue

<template>
  <div id="leftSlider" class="left-slider">
    <div class="tip-title">
      <span>
        {{ $t('display.lesson.coursePracticeList') }}
      </span>
    </div>
    <div class="handleShow">
      <span v-if="show" class="el-icon-arrow-right" @click="handleSliderShow(true)">{{ $t('display.lesson.unfold') }}</span>
      <span v-else class="el-icon-arrow-left" @click="handleSliderShow(false)">{{ $t('display.lesson.fold') }}</span>
    </div>
    <div class="slider-tree">
      <el-scrollbar wrap-class="scrollbar-wrapper" style="background: #fff;">
        <el-tree
          ref="tree"
          style="margin-top: 10px"
          :data="treeList"
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          highlight-current
          :span="22"
          default-expand-all
          @node-click="clickEvent"
        >
          <span slot-scope="{ node }">
            <span v-if="node.data.type === 'Training'" class="el-icon-goods" />
            <span v-if="node.data.id === trainingId" :style="{color: 'red'}">&nbsp;{{ node.data.name }}</span>
            <span v-else-if="node.data.valid" :style="{color: 'green'}">&nbsp;{{ node.data.name }}</span>
            <span v-else>&nbsp;{{ node.data.name }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getPublishLessonTree } from '@/api/jmap/lesson';
import { trainingNotifyNew } from '@/api/simulation';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/scripts/ConstDic';
export default {
    name: 'LeftSlider',
    props:{
        offsetBottom:{
            type: Number,
            required: true
        }
    },
    data() {
        return {
            show: true,
            treeList: []
        };
    },
    computed: {
        trainingId () {
            return this.$route.query.trainingId;
        }
    },
    mounted() {
        this.initLoadPage();
        // this.$nextTick(() => {
        //     document.querySelector('.left-slider').style.height = document.querySelector('.left-slider').offsetHeight - this.offsetBottom + 'px';
        // });
    },
    methods: {
        initLoadPage() {
            getPublishLessonTree(this.$route.query.lessonId).then(response => {
                if (response.data.tree && response.data.tree.length > 0) {
                    this.treeList = response.data.tree;
                }
            }).catch(error => {
                this.$message.error(this.$t('tip.failedCourse') + ':' + error.message);
            });
        },
        handleSliderShow(flag) {
            this.$emit('overallTranslation', flag);
            const slider = document.getElementById('leftSlider');
            if (flag) {
                slider.style.transform = 'translateX(0)';
                this.show = false;
            } else {
                slider.style.transform = '';
                this.show = true;
            }
        },
        clickEvent(obj, node, ele) {
            if (obj && obj.type === 'Training') {
                if (obj.valid) {
                    this.disabled = true;
                    trainingNotifyNew({ trainingId: obj.id }).then(resp => {
                        const query = {
                            group: resp.data, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, lineCode:this.$route.query.lineCode
                        };
                        this.$router.replace({ path: `${UrlConfig.displayNew}/teach`, query: query });
                        launchFullscreen();
                    }).catch(error => {
                        this.$messageBox(`${this.$t('tip.createSimulationFaild')} : ${error.message}`);
                        this.disabled = false;
                    });
                } else {
                    this.$confirm(this.$t('tip.accessCourseNo'), this.$t('tip.hint'), {
                        confirmButtonText: this.$t('tip.confirm'),
                        cancelButtonText: this.$t('tip.cancel')
                    }).then(() => {
                        // this.buy();
                    }).catch(() => { });
                }
            }
        }
    }
};
</script>

<style scoped>
    .left-slider{
        z-index: 10;
        width: 400px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateX(-400px);
    }
    .slider-tree{
        height: calc(100% - 40px);
        border: 2px solid #409EFF;
    }
    .handleShow{
        position: absolute;
        left: 400px;
        top: 50%;
        background: #fff;
        color: #000;
        border-radius: 3px;
        box-shadow: 3px 1px 5px #000;
        padding: 3px;
    }
    .tip-title {
        width: 100%;
        overflow: hidden;
        height: 40px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        background-color: #409EFF;
        border-radius: 5px 5px 0 0;
        justify-content: center;
        padding: 0 10px;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }
</style>