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

<template>
  <div class="joylink-card">
    <div class="lesson-header">
      <div class="lesson-list">草稿{{ $t('lesson.courseList') }}</div>
      <div class="but-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 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>
    </div>
    <QueryListPage ref="queryListPage" :query-form="queryForm" :pager-config="pagerConfig" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;" />
    <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 '@/scripts/ConstDic';
import PublishCreate from './lessoncategory/edit/create';
import PublishLesson from './lessoncategory/edit/lesson/publish';
import { delLesson } from '@/api/jmap/lessondraft';
import LessonDetail from '@/views/approval/detail';
import ConstConfig from '@/scripts/ConstConfig';

export default {
    name: 'LessonHome',
    components: {
        PublishCreate,
        PublishLesson,
        LessonDetail
    },
    data() {
        return {
            loading: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                show: false
            },
            queryList: {
                query: this.queryFunction,
                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'; }
                    },
                    {
                        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') || this.$store.state.user.roles.includes('03');
        }
    },
    watch: {
        $route() {
            this.refresh();
        }
    },
    mounted() {
    },
    methods: {
        queryFunction(params) {
            return getLessonDrftList(this.$route.params.mapId, params);
        },
        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: {mapId: this.$route.params.mapId, cityCode: this.$route.query.cityCode, lineCode: this.$route.query.lineCode} });
        },
        lessonCreateByPublish() {
            this.$nextTick(() => {
                this.$refs.publishCreate.doShow();
            });
        },
        publish(index, row) {
            row.mapId = this.$route.params.mapId;
            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}});
        },
        trainingManage() {
            this.$router.push({path: `${UrlConfig.design.trainingManage}`, query: {mapId: this.$route.params.mapId, lineCode: this.$route.query.lineCode}});
        },
        operationManage() {
            this.$router.push({path: `${UrlConfig.design.trainingRule}`, query: {mapId: this.$route.params.mapId, lineCode: this.$route.query.lineCode}});
        },
        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, lineCode: this.$route.query.lineCode, cityCode: this.$route.query.cityCode, mapId: this.$route.params.mapId}});
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .joylink-card{
        height: 100%;
        overflow: auto;
    }
    .lesson-header{
        display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
    }
    .lesson-list{
        display:inline-block;padding:7px 0px
    }
    .but-group{
        float: right;
        margin-right:20px;
    }
</style>