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

<template>
  <div style="height: 100%; overflow-y: auto;">
    <el-card>
      <div class="button_group">
        <el-button v-if="hasRelease" size="mini" @click="operationManage">{{ $t('lesson.trainingRule') }}</el-button>
        <el-button v-if="hasRelease" size="mini" @click="trainingManage">{{ $t('lesson.trainingManage') }}</el-button>
        <el-button v-if="hasRelease" size="mini" @click="taskManage">{{ $t('lesson.taskManage') }}</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">
      <QueryListPage ref="queryListPage" :query-form="queryForm" :pager-config="pagerConfig" :query-list="queryList" />
    </el-card>
    <publish-create ref="publishCreate" @refresh="refresh" />
    <publish-lesson ref="publishLesson" @refresh="refresh" />
    <lesson-detail ref="lessonDetail" />
  </div>
</template>

<script>
import { releaseOrCancel } from '@/api/designPlatform';
import { getLessonDrftList } from '@/api/jmap/lessondraft';
import { UrlConfig } from '@/router/index';
import PublishCreate from './lessoncategory/edit/create';
import PublishLesson from './lessoncategory/edit/lesson/publish';
import { delLesson, getLessonTree } from '@/api/jmap/lessondraft';
import LessonDetail from '@/views/approval/lesson/detail';
import ConstConfig from '@/scripts/ConstConfig';

export default {
    name: 'LessonHome',
    components: {
        PublishCreate,
        PublishLesson,
        LessonDetail
    },
    data() {
        return {
            tableData: [],
            loading: false,
            showEdit: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                show: false
            },
            queryList: {
                query: getLessonDrftList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('lesson.courseName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('lesson.courseDescription'),
                        prop: 'remarks'
                    },
                    {
                        title: this.$t('global.status'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => {
                            return this.$convertField(row.status, ConstConfig.ConstSelect.releaseReview, ['value', 'label']);
                        },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        title: this.$t('lesson.explanation'),
                        prop: 'explanation'
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '400',
                        buttons: [
                            {
                                name: this.$t('lesson.courseDetails'),
                                handleClick: this.goDetail,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('lesson.contentSorting'),
                                handleClick: this.treeSort,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('global.release'),
                                handleClick: this.publish,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '0' && this.hasRelease;
                                }
                            },
                            {
                                name: this.$t('lesson.applicationForRelease'),
                                handleClick: this.publish,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '0' && !this.hasRelease;
                                }
                            },
                            {
                                name: this.$t('lesson.review'),
                                handleClick: this.review,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '1';
                                }
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.deleteLesson,
                                type: 'danger',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('lesson.withdraw'),
                                handleClick: this.revertLesson,
                                type: 'danger',
                                showControl: (row) => {
                                    return row.status === '1';
                                }
                            }
                        ]
                    }
                ]
            }

        };
    },
    computed: {
        mapId() {
            return this.$route.params.mapId;
        },
        hasRelease() {
            return this.$store.state.user.roles.includes('04') ||
                    this.$store.state.user.roles.includes('05');
        }
    },
    watch: {
        $route() {
            this.refresh();
        }
    },
    mounted() {
    },
    methods: {
        loadInitData() {
            this.loading = true;
            getLessonTree(this.$route.params.skinCode).then(response=> {
                response.data.forEach(elem => {
                    if (elem.children) {
                        elem.children.forEach( it => {
                            it.parentId = elem.id;
                        } );
                    }
                });
                this.tableData = response.data;
                this.loading = false;
            }).catch(( ) => {
                this.$messageBox(this.$t('error.getDraftCourseDataFailed'));
            });
        },
        refuse() {
            this.loading = true;
            getLessonTree(this.$route.params.skinCode).then(response=> {
                response.data.forEach(elem => {
                    if (elem.children) {
                        elem.children.forEach( it => {
                            it.parentId = elem.id;
                        } );
                    }
                });
                this.tableData = response.data;
                this.loading = false;
            });
        },
        handlerStatus(row) {
            let lessonStatus = '';
            switch (row.status) {
            case '0':
                lessonStatus = this.$t('lesson.notRelease');
                break;
            case '1':
                lessonStatus = this.$t('lesson.pendingReview');
                break;
            case '2':
                lessonStatus = this.$t('lesson.published');
                break;
            case '3':
                lessonStatus = this.$t('lesson.rejected');
                break;
            }
            return lessonStatus;
        },
        refresh() {
            this.$refs.queryListPage.refresh(true);
        },
        lessonCreate() {
            this.$router.push({ path: `${UrlConfig.design.lessonEdit}/lessonCreate`, query: {skinCode: this.$route.params.skinCode, mapId: this.$route.params.mapId, cityCode: this.$route.query.cityCode} });
        },
        lessonCreateByPublish() {
            this.$nextTick(() => {
                this.$refs.publishCreate.doShow();
            });
        },
        publish(index, row) {
            row.skinCode = this.$route.params.skinCode;
            row.cityCode = this.$route.query.cityCode;
            this.$refs.publishLesson.doShow(row);
        },
        deleteLesson(index, row) {
            delLesson(row).then(response => {
                this.$message.success(this.$t('tip.successfullyDelete'));
                this.loading = true;
                this.refresh();
                this.loading = false;
            }).catch(() => {
                this.$messageBox(this.$t('tip.failDelete'));
            });
        },
        treeSort(index, row) {
            this.$router.push({path: `${UrlConfig.design.lessonEdit}/treeSort`, query: {id: row.id}});
        },
        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}});
        },
        revertLesson(index, row) {
            this.$confirm(this.$t('tip.cancelCoursePublicationHint'), this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                releaseOrCancel(row.id, '0').then(response => {
                    this.loading = false;
                    this.$message.success(this.$t('tip.cancelTheSuccessfulApplicationOfTheCourseRelease'));
                    this.refresh();
                }).catch(() => {
                    this.loading = false;
                    this.$messageBox(this.$t('tip.cancellationOfCoursePublicationApplicationFailed'));
                    this.refresh();
                });
            });
        },
        review(index, row) {
            this.$refs.lessonDetail.show(row.id);
        },
        goDetail(index, row) {
            this.$router.push({path: `/design/lesson/details`, query: {lessonId: row.id, skinCode: this.$route.params.skinCode, cityCode: this.$route.query.cityCode, mapId: this.$route.params.mapId}});
        }
    }
};
</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>