144 lines
4.6 KiB
Vue
144 lines
4.6 KiB
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">
|
|
<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'}"> {{ node.data.name }}</span>
|
|
<span v-else-if="node.data.valid" :style="{color: 'green'}"> {{ node.data.name }}</span>
|
|
<span v-else> {{ 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',
|
|
data() {
|
|
return {
|
|
show: true,
|
|
treeList: []
|
|
};
|
|
},
|
|
computed: {
|
|
trainingId () {
|
|
return this.$route.query.trainingId;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initLoadPage();
|
|
},
|
|
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.setAttribute('style', 'transform: translateX(0)');
|
|
this.show = false;
|
|
} else {
|
|
slider.setAttribute('style', '');
|
|
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
|
|
};
|
|
this.$router.push({ 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%;
|
|
color: #fff;
|
|
}
|
|
.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>
|