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'}"-->
      <!--&gt;-->
      <!--<el-table-column-->
      <!--prop="name"-->
      <!--border-->
      <!--:label="this.$t('lesson.lesson')"-->
      <!--/>-->
      <!--<el-table-column-->
      <!--:label="this.$t('global.status')"-->
      <!--&gt;-->
      <!--<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')"-->
      <!--&gt;-->
      <!--<template slot-scope="scope">-->
      <!--<el-button-->
      <!--v-if="scope.row.status!=='1'"-->
      <!--size="mini"-->
      <!--type="primary"-->
      <!--@click="createChapter(scope.row)"-->
      <!--&gt;{{ 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)"-->
      <!--&gt;-->
      <!--{{ $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)"-->
      <!--&gt;{{ $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)"-->
      <!--&gt;{{ $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)"-->
      <!--&gt;{{ 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)"-->
      <!--&gt;{{ $t('global.delete') }}</el-button>-->
      <!--<el-button-->
      <!--v-if="scope.row.status ==='1'"-->
      <!--size="mini"-->
      <!--type="danger"-->
      <!--@click="revertLesson(scope.row)"-->
      <!--&gt;-->
      <!--{{ $t('lesson.withdraw') }}-->
      <!--</el-button>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <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: '课程名称',
						prop: 'name'
					},
					{
						title: '课程说明',
						prop: 'remarks'
					},
					{
						title: '状态',
						prop: 'status',
						type: 'tag',
						columnValue: (row) => {
							return this.$convertField(row.status, ConstConfig.ConstSelect.releaseReview, ['value', 'label']);
						},
						tagType: (row) => { return 'success'; }
					},
					{
						title: '驳回说明',
						prop: 'explanation'
					},
					{
						type: 'button',
						title: this.$t('global.operate'),
						width: '400',
						buttons: [
							{
								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('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';
								}
							},
							{
								name: '课程详情',
								handleClick: this.goDetail,
								type: 'primary'
							}
						]
					}
				],
				actions: [
					/* { text: this.$t('global.create'), btnCode: 'employee_insert', handler: this.handleCreateRunPlan }*/
				]
			}

		};
	},
	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() {
			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);
		},
		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(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();
			}).catch(() => {
				this.$messageBox(this.$t('tip.failDelete'));
			});
		},
		createChapter(index, 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(index, 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(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();
				});
			});
		},
		goDetail(index, row) {
			// this.$refs.lessonDetail.show(row.id);
			this.$router.push({path: `/design/lesson/details`, query: {lessonId: row.id, 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>