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

<template>
    <div style="height: 100%; overflow: hidden">
        <el-card>
            <div class="button_group">
                <el-button size="mini" v-if="hasRelease" @click="trainingManage">{{$t('lesson.trainingManage')}}</el-button>
                <el-button size="mini" v-if="hasRelease" @click="taskManage">{{$t('lesson.taskManage')}}</el-button>
                <el-button size="mini" v-if="hasRelease" @click="operationManage">{{$t('lesson.trainingRule')}}</el-button>
                <el-button size="mini" type="primary" @click="lessonCreateByPublish">{{$t('lesson.createNewCoursesFromRelease')}}</el-button>
                <el-button size="mini" type="primary" @click="lessonCreate">{{$t('lesson.newConstruction')}}</el-button>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <el-table
                :data="tableData"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="name"
                    border
                    :label="this.$t('lesson.lesson')">
                </el-table-column>
                <el-table-column
                    :label="this.$t('global.operate')">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="createChapter(scope.row)"
                           >{{ scope.row.type==='lesson'? $t('lesson.createChapter'):$t('lesson.updateChapter')}}</el-button>
                        <el-button
                            size="mini"
                            type="primary" plain
                            v-if="scope.row.type === 'lesson'"
                            @click="treeSort(scope.row)"
                            >{{$t('lesson.contentSorting')}}</el-button>
                        <el-button size="mini"
                                   type="info"
                                   v-if="scope.row.type === 'lesson'"
                                   @click="editLesson(scope.row)"
                        >{{$t('lesson.editCourse')}}</el-button>
                        <el-button size="mini"
                                   type="primary"
                                   v-if="scope.row.type === 'lesson'"
                                   @click="publish(scope.row)"
                        >{{hasRelease?$t('global.release'):$t('lesson.applicationForRelease')}}</el-button>
                        <el-button size="mini"
                                   type="danger"
                                   v-if="scope.row.type === 'lesson'"
                                   @click="deleteLesson(scope.row)"
                        >{{$t('global.delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <publish-create @refresh="refresh" ref="publishCreate" />
        <publish-lesson ref="publishLesson" />
    </div>
</template>

<script>
    import { getDraftLesson } from '@/api/designPlatform';
    import { UrlConfig } from '@/router/index';
    import PublishCreate from './lessoncategory/edit/create';
    import PublishLesson from './lessoncategory/edit/lesson/publish';
    import { delLesson } from '@/api/jmap/lessondraft';


    export default {
        name: 'LessonHome',
        components: {
            PublishCreate,
            PublishLesson
        },
        computed: {
            mapId() {
                return this.$route.params.mapId;
            },
            hasRelease() {
                return this.$store.state.user.roles.includes('04') ||
                    this.$store.state.user.roles.includes('05');
            }
        },
        data() {
            return {
                tableData: [],
                loading: false,
                showEdit: false
            };
        },
        watch: {
            $route() {
                this.refresh();
            }
        },
        mounted() {
            this.loading = true;
            this.loadInitData();
        },
        methods: {
            loadInitData() {
                getDraftLesson({},this.mapId).then(response=> {
                    response.data.forEach(elem => {
                        if (elem.children) {
                            elem.children.forEach( it => {
                                it.parentId = elem.id;
                            } )
                        }
                    });
                    this.tableData = response.data;
                    this.loading = false;
                });
            },
            refresh() {
                this.loading = true;
                this.loadInitData();
            },
            editLesson(row) {
                this.$router.push( {path: `${UrlConfig.design.lessonEdit}/lessonEdit`, query: {id: row.id, skinCode: row.code}} )
            },
            lessonCreate() {
                this.$router.push({ path: `${UrlConfig.design.lessonEdit}/lessonCreate`,query: {skinCode: this.$route.params.skinCode} })
            },
            lessonCreateByPublish() {
                this.$nextTick(() => {
                    this.$refs.publishCreate.doShow();
                });
            },
            publish(row) {
                row.skinCode = this.$route.params.skinCode;
                row.cityCode = this.$route.query.cityCode;
                this.$refs.publishLesson.doShow(row);
            },
            deleteLesson(row) {
                delLesson(row).then(response => {
                    this.$message.success(this.$t('tip.successfullyDelete'));
                    this.loading = true;
                    this.loadInitData();
                }).catch(error => {
                    this.$messageBox(this.$t('tip.failDelete'))
                });
            },
            createChapter(row) {
                if (row.type === 'lesson') {
                    this.$router.push({path: `${UrlConfig.design.lessonEdit}/chapterCreate`, query: {lessonId: row.id}});
                } else if (row.type === 'chapter') {
                    this.$router.push( {path: `${UrlConfig.design.lessonEdit}/chapterEdit`,query: {id: row.id, lessonId: row.parentId}} )
                }
            },
            treeSort(row){
                this.$router.push({path: `${UrlConfig.design.lessonEdit}/treeSort`, query: row});
            },
            taskManage() {
                this.$router.push({path: `${UrlConfig.design.taskManage}`, query: {mapId: this.$route.params.mapId, skinCode: this.$route.params.skinCode}})
            },
            trainingManage() {
                this.$router.push({path: `${UrlConfig.design.trainingManage}/${this.$route.params.skinCode}`, query: {mapId: this.$route.params.mapId}})
            },
            operationManage() {
                this.$router.push({path: `${UrlConfig.design.trainingRule}`, query: {mapId: this.$route.params.mapId, skinCode: this.$route.params.skinCode}})
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
    .button_group {
        float: right;
        margin: 20px 10px;
    }
</style>