rt-sim-training-client/src/views/lesson/home.vue
2019-10-10 09:33:56 +08:00

172 lines
6.7 KiB
Vue

<template>
<div style="height: 100%; overflow: hidden">
<el-card>
<div class="button_group">
<el-button size="mini" @click="trainingManage">实训管理</el-button>
<el-button size="mini" @click="taskManage">任务管理</el-button>
<el-button size="mini" @click="operationManage">操作定义</el-button>
<el-button size="mini" type="primary" @click="lessonCreateByPublish">从发布课程新建</el-button>
<el-button size="mini" type="primary" @click="lessonCreate">新建</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="课程">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="createChapter(scope.row)"
>{{ scope.row.type==='lesson'? '创建章节':'更新章节' }}</el-button>
<el-button
size="mini"
type="primary" plain
v-if="scope.row.type === 'lesson'"
@click="treeSort(scope.row)"
>内容排序</el-button>
<el-button size="mini"
type="info"
v-if="scope.row.type === 'lesson'"
@click="editLesson(scope.row)"
>编辑课程</el-button>
<el-button size="mini"
type="primary"
v-if="scope.row.type === 'lesson'"
@click="publish(scope.row)"
>{{$t('global.release')}}</el-button>
<el-button size="mini"
type="danger"
v-if="scope.row.type === 'lesson'"
@click="deleteLesson(scope.row)"
>{{$t('global.delete')}}</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<publish-create @refresh="refresh" ref="publishCreate" />
<publish-lesson ref="publishLesson" />
</div>
</template>
<script>
import { getDraftLesson } 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';
export default {
name: 'LessonHome',
components: {
PublishCreate,
PublishLesson
},
computed: {
mapId() {
return this.$route.params.mapId;
}
},
data() {
return {
tableData: [],
loading: false,
showEdit: false
};
},
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;
});
},
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;
this.$refs.publishLesson.doShow(row);
},
deleteLesson(row) {
delLesson(row).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.loading = true;
this.loadInitData();
}).catch(error => {
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}})
}
}
};
</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>