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

<template>
    <el-card>
        <div slot="header" style="text-align: center;">
            <b>课程管理系统</b>
        </div>
        <div style="margin:50px" :style="{ height: height - 190 +'px' }">
            <p style="font-size: 14px; margin-bottom: 20px"> 课程管理说明:
                <span style="color: #808080 !important;">{{ courseModel.remarks }}</span>
            </p>
            <div :style="{ height: height - 270 +'px' }">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-tree
                        ref="tree"
                        :data="courseModel.detail"
                        node-key="id"
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                        highlight-current
                        @node-contextmenu="showContextMenu"
                        :span="22"
                        @node-click="clickEvent"
                    >
                        <span slot-scope="{ node, data }">
                            <span v-if="node.data.trial" class="el-icon-goods" :style="{color: 'green'}">&nbsp;{{ node.label +'（免费）'}}</span>
                            <span v-else class="el-icon-sold-out">&nbsp;{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-scrollbar>
            </div>
        </div>
        <div class="btn-buy">
            <el-button type="success" @click="lessonEdit">课程编辑</el-button>
            <el-button type="primary" >实训录制</el-button>
            <el-button type="primary" >任务管理</el-button>
            <el-button type="primary" >操作定义</el-button>
            <el-button type="primary" >实训管理</el-button>
            <el-button type="primary" >从发布课程新建</el-button>
        </div>
        <tree-operate-menu ref="treeOperateMenu" :point="point" :selected="selected" @refresh="refresh"
                           @lessonCreate="lessonCreate" @chapterCreate="chapterCreate" @treeSort="treeSort"></tree-operate-menu>
    </el-card>
</template>

<script>
    import { getPublishLessonDetail } from '@/api/jmap/lesson';
    import { UrlConfig } from '@/router/index';
    import { DeviceMenu } from '@/scripts/ConstDic';
    import TreeOperateMenu from './lessoncategory/category/operateMenu';

    export default {
        name: 'LessonDetail',
        components: {
            TreeOperateMenu,
        },
        data() {
            return {
                num: 5,
                loading: false,
                WhetherTypeList: [],
                EffectiveTypeList: [],
                courseModel: {
                    id: '',
                    name: 'test',
                    skinCode: '',
                    price: 0,
                    remarks: '创建课程的一套工具',
                    detail: [],
                    pmsList: []
                },
                activeName: 'first',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                point: {
                    x: 0,
                    y: 0
                },
                selected: {},
            };
        },
        computed: {
            hasPermssion() {
                return this.courseModel.pmsList.length > 0;
            },
            height() {
                return this.$store.state.app.height - 50;
            }
        },
        watch: {
            $route(newVal) {
                this.initLoadPage();
            }
        },
        mounted() {
            this.$Dictionary.effectiveType().then(list => {
                this.EffectiveTypeList = list;
            });
            this.initLoadPage();
        },
        methods: {
            initLoadPage() {
                this.courseModel.detail = [
                    {
                        id:'1',
                        name:'地图设计',
                        type:'lesson',
                        children: [
                            {
                                id: '9',
                                name: '测试章节',
                                type: 'lesson'
                            }
                        ]
                    },
                    {
                        id:'2',
                        name:'课程设计',
                        type:'lesson'
                    },
                    {
                        id:'3',
                        name:'剧本设计',
                        type:'lesson'
                    },
                    {
                        id:'4',
                        name:'运行图设计',
                        type:'lesson'
                    },
                ]
            },
            clickEvent(obj, data, ele) {
                // if (obj.type){
                //     this.$router.push({ path: `${UrlConfig.trainingPlatform.practical}/${obj.id}/${data.id}`});
                // }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            showContextMenu(e, obj, node, vueElem) {
                e.preventDefault();
                this.point = {
                    x: e.clientX,
                    y: e.clientY
                };
                this.node = node;
                this.selected = obj;
                let menu = DeviceMenu.Lesson;
                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
            },
            refresh() {
            },
            lessonCreate() {
                this.$router.push({ path: `${UrlConfig.design.lessonEdit}`})
            },
            treeSort() {
                this.$router.push({ path: `${UrlConfig.design.lessonEdit}`})
            },
            chapterCreate() {
                this.$router.push({ path: `${UrlConfig.design.lessonEdit}`})
            },
            lessonEdit() {
                this.$router.push({ path: `${UrlConfig.design.lessonManage}`})
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .menu li {
        border-right: solid white 1px;
    }

    ul {
        line-height: 22px;
        margin: 5px;
    }

    .btn-buy {
        position: relative;
        text-align: center;
        justify-content: center;
        transform: translateY(-20px);
    }
</style>