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

<template>
  <div style="height: 100%; overflow: hidden">
    <el-card>
      <div class="button_group">
        <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 v-if="hasRelease" size="mini" @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
          :label="this.$t('global.status')"
        >
          <template slot-scope="scope">
            <span>{{ handlerStatus(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="explanation"
          show-overflow-tooltip
          :label="this.$t('lesson.rejectReason')"
        />
        <el-table-column
          width="500"
          :label="this.$t('global.operate')"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status!=='1'"
              size="mini"
              type="primary"
              @click="createChapter(scope.row)"
            >{{ scope.row.type==='lesson'? $t('lesson.createChapter'):$t('lesson.updateChapter') }}</el-button>
            <el-button
              v-if="scope.row.status==='1'"
              size="mini"
              type="primary"
              @click="goDetail(scope.row)"
            >
              {{ $t('lesson.review') }}
            </el-button>
            <el-button
              v-if="scope.row.type === 'lesson' && scope.row.status!=='1'"
              size="mini"
              type="primary"
              plain
              @click="treeSort(scope.row)"
            >{{ $t('lesson.contentSorting') }}</el-button>
            <el-button
              v-if="scope.row.type === 'lesson'&& scope.row.status!=='1'"
              size="mini"
              type="info"
              @click="editLesson(scope.row)"
            >{{ $t('lesson.editCourse') }}</el-button>
            <el-button
              v-if="scope.row.type === 'lesson'&& scope.row.status==='0'"
              size="mini"
              type="primary"
              @click="publish(scope.row)"
            >{{ hasRelease?$t('global.release'):$t('lesson.applicationForRelease') }}</el-button>
            <el-button
              v-if="scope.row.type === 'lesson'&& scope.row.status!=='1'"
              size="mini"
              type="danger"
              @click="deleteLesson(scope.row)"
            >{{ $t('global.delete') }}</el-button>
            <el-button
              v-if="scope.row.status ==='1'"
              size="mini"
              type="danger"
              @click="revertLesson(scope.row)"
            >
              {{ $t('lesson.withdraw') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <publish-create ref="publishCreate" @refresh="refresh" />
    <publish-lesson ref="publishLesson" @refresh="refresh" />
    <lesson-detail ref="lessonDetail" />
  </div>
</template>

<script>
import { getDraftLesson, releaseOrCancel } 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';
import LessonDetail from '@/views/approval/lesson/detail';

export default {
	name: 'LessonHome',
	components: {
		PublishCreate,
		PublishLesson,
		LessonDetail
	},
	data() {
		return {
			tableData: [],
			loading: false,
			showEdit: false
		};
	},
	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() {
		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;
			}).catch(( ) => {
				this.$messageBox(this.$t('error.getDraftCourseDataFailed'));
			});
		},
		refuse() {
			this.loading = true;
			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;
			});
		},
		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.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(() => {
				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}});
		},
		revertLesson(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.refuse();
				}).catch(() => {
					this.loading = false;
					this.$messageBox(this.$t('tip.cancellationOfCoursePublicationApplicationFailed'));
					this.refuse();
				});
			});
		},
		goDetail(row) {
			this.$refs.lessonDetail.show(row.id);
		}
	}
};
</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>