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="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>