代码暂提
This commit is contained in:
fan
parent
8b23f8aecc
commit
c352214e89
@ -2,12 +2,44 @@
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1000px"
|
||||
width="1400px"
|
||||
:before-close="handleClose"
|
||||
:center="true"
|
||||
>
|
||||
<div style="height: 100%; padding-top: 40px; overflow-y: auto;">
|
||||
<el-form ref="form" :model="courseModel" :rules="rules" label-width="135px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="joylink-card">
|
||||
<div class="title_box">
|
||||
<b>{{ $t('lesson.courseName') + ': '+ lessonName }}</b>
|
||||
</div>
|
||||
<div class="content_box">
|
||||
<div class="tree_box">
|
||||
<div class="tree_content_box">
|
||||
<p>{{ this.$t('lesson.courseTree') }}</p>
|
||||
<div style="height: calc(100% - 89px); overflow-y: auto;">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
style="width: 370px"
|
||||
:data="treeList"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
:span="22"
|
||||
:filter-node-method="filterNode"
|
||||
:default-expanded-keys="expandList"
|
||||
@node-contextmenu="showContextMenu"
|
||||
@node-click="clickEvent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="height: 100%; overflow-y: auto;">
|
||||
<el-form v-if="editType === 'editLesson'" ref="form" :model="courseModel" :rules="courseRules" label-width="135px">
|
||||
<el-form-item :label="this.$t('lesson.courseName')+this.$t('global.colon')" prop="name">
|
||||
<el-input v-model="courseModel.name" />
|
||||
</el-form-item>
|
||||
@ -40,30 +72,88 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-if="editType === 'updateChapter' || editType === 'createChapter'" ref="form" :model="chapterModel" :rules="chapterRules" label-width="135px">
|
||||
<el-form-item :label="this.$t('lesson.parentChapter')" prop="parentName">
|
||||
<el-input v-model="chapterModel.parentName" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.chapterName')" prop="name">
|
||||
<el-input v-model="chapterModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.chapterInstructions')" prop="remarks">
|
||||
<el-input
|
||||
v-model="chapterModel.remarks"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 2}"
|
||||
:placeholder="this.$t('rules.pleaseEnterContent')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('lesson.associatedTraining')">
|
||||
<el-table
|
||||
ref="singleTable"
|
||||
:data="chapterModel.trainings"
|
||||
border
|
||||
highlight-current-row
|
||||
:height="237"
|
||||
>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column property="trainingName" :label="this.$t('lesson.trainingName')" />
|
||||
<el-table-column property="trial" :label="this.$t('global.isTry')" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.trial" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" :label="this.$t('global.operate')" width="70">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.native.prevent="deleteRow(scope.$index, chapterModel.trainings)"
|
||||
>{{ $t('global.remove') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" style="margin-top: 20px" @click="pushTrain">{{ $t('lesson.addTraining') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="draft">
|
||||
<el-button-group>
|
||||
<template v-if="!isEdit">
|
||||
<el-button v-if="courseModel.mapId" type="primary" @click="create">{{ $t('global.create') }}</el-button>
|
||||
<el-button type="primary" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose">取 消</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button type="primary" @click="update">{{ $t('global.update') }}</el-button>
|
||||
<el-button type="primary" @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose">取 消</el-button>
|
||||
</template>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<operate-menu ref="menu" :point="point" :node="node" @refresh="refresh" @changeRouter="changeRouter" />
|
||||
<train-list
|
||||
ref="pathRoute"
|
||||
:trainings="chapterModel.trainings"
|
||||
:detail="detail"
|
||||
@routeSelected="routeSelected"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createLesson, updateLesson, getLessonDetail } from '@/api/jmap/lessondraft';
|
||||
import { getLessonTree, deleteLessonChapter } from '@/api/jmap/lessondraft';
|
||||
import { getPublishMapListOnline } from '@/api/jmap/map';
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import OperateMenu from './operateMenu';
|
||||
import Cookies from 'js-cookie';
|
||||
import TrainList from '@/views/lesson/lessoncategory/edit/chapter/list';
|
||||
|
||||
export default {
|
||||
name: 'CourseEdit',
|
||||
components: {
|
||||
OperateMenu,
|
||||
TrainList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -78,13 +168,35 @@ export default {
|
||||
mapId: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
}
|
||||
},
|
||||
chapterModel: {
|
||||
trainingId: '',
|
||||
lessonId: '',
|
||||
name: '',
|
||||
remarks: '',
|
||||
trainings: [],
|
||||
parentId: null,
|
||||
parentName: ''
|
||||
},
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
detail: {
|
||||
mapId: '',
|
||||
prdType: ''
|
||||
},
|
||||
expandList: [],
|
||||
lessonName: '',
|
||||
lessonId: '',
|
||||
node: {},
|
||||
point: {},
|
||||
title: '编辑课程',
|
||||
editType: 'editLesson'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.isEdit ? this.$t('lesson.editCourse') : this.$t('lesson.createCourse');
|
||||
},
|
||||
prdTypeList() {
|
||||
const productTypeList = [
|
||||
{ enlabel: 'ATS local workstation', label: 'ATS现地工作站', value: '01'},
|
||||
@ -94,7 +206,7 @@ export default {
|
||||
? productTypeList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
|
||||
: productTypeList.map(elem => { return { value: elem.value, label: elem.label }; });
|
||||
},
|
||||
rules() {
|
||||
courseRules() {
|
||||
const baseRules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.enterCourseName'), trigger: 'change' }
|
||||
@ -110,6 +222,17 @@ export default {
|
||||
]
|
||||
};
|
||||
return baseRules;
|
||||
},
|
||||
chapterRules() {
|
||||
const baseRules = {
|
||||
name: [
|
||||
{ required: true, message: this.$t('rules.enterChapterName'), trigger: 'change' }
|
||||
],
|
||||
remarks: [
|
||||
{ required: true, message: this.$t('rules.enterChapterInstructions'), trigger: 'change' }
|
||||
]
|
||||
};
|
||||
return baseRules;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -121,6 +244,23 @@ export default {
|
||||
this.courseModel.id = '';
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
showContextMenu(e, obj, node, vueElem) {
|
||||
if (obj && obj.type === 'Lesson' || obj.type === 'Chapter') {
|
||||
e.preventDefault();
|
||||
this.point = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
this.node = node;
|
||||
const menu = DeviceMenu.Lesson;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
||||
}
|
||||
},
|
||||
clickEvent(obj, node, ele) {},
|
||||
doShow(data) {
|
||||
this.mapIdList = [];
|
||||
this.isEdit = false;
|
||||
@ -136,6 +276,13 @@ export default {
|
||||
this.courseModel.remarks = data.remarks;
|
||||
}
|
||||
});
|
||||
getLessonTree(data.id).then(resp => {
|
||||
if (resp.data && resp.data[0]) {
|
||||
this.lessonName = resp.data[0].name;
|
||||
this.lessonId = resp.data[0].id;
|
||||
this.treeList = resp.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
create() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
@ -191,6 +338,55 @@ export default {
|
||||
this.$messageBox(this.$t('error.obtainCourseInformationFailed'));
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteChapter(node) {
|
||||
const _that = this;
|
||||
this.$confirm('是否确认删除章节《' + node.data.name + '》 ' + ' ？', this.$t('tip.hint'), {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteLessonChapter(node.data.id).then(response => {
|
||||
_that.refresh();
|
||||
_that.$message.success(this.$t('map.successfullyDelete'));
|
||||
}).catch(error => {
|
||||
_that.$message.error(this.$t('map.failDelete') + error.message);
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
pushTrain() {
|
||||
if (this.$refs && this.$refs.pathRoute) {
|
||||
this.$refs.pathRoute.doShow();
|
||||
}
|
||||
},
|
||||
routeSelected(data) {
|
||||
data.forEach((elem, index) => {
|
||||
this.chapterModel.trainings.push({
|
||||
trainingName: elem.name,
|
||||
trial: false,
|
||||
trainingId: elem.id
|
||||
});
|
||||
});
|
||||
},
|
||||
changeRouter(params) {
|
||||
switch (params.event) {
|
||||
case '01':
|
||||
this.editType = 'editLesson';
|
||||
break;
|
||||
case '02':
|
||||
this.editType = 'createChapter';
|
||||
break;
|
||||
case '03':
|
||||
this.editType = 'updateChapter';
|
||||
break;
|
||||
case '04':
|
||||
this.editType = 'createChapter';
|
||||
break;
|
||||
case '05':
|
||||
this.deleteChapter(params.node);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -233,7 +429,34 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.joylink-card{
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
.title_box{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
.content_box{
|
||||
height: calc(100% - 57px);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.tree_box{
|
||||
position: relative;
|
||||
left: 24px;
|
||||
top: 10px;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
.tree_content_box{
|
||||
border: 2px dashed #B0C4DE;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.draft {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
|
||||
130
src/views/teach/operateMenu.vue
Normal file
130
src/views/teach/operateMenu.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<pop-menu ref="popMenu" :menu="menu" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import PopMenu from '@/components/PopMenu';
|
||||
|
||||
export default {
|
||||
name: 'TrainingOperateMenu',
|
||||
components: {
|
||||
PopMenu
|
||||
},
|
||||
props: {
|
||||
point: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuShow: false,
|
||||
menu: [],
|
||||
menuChapte: [
|
||||
{
|
||||
label: this.$t('lesson.updateChapter'),
|
||||
handler: this.updateChapter
|
||||
},
|
||||
{
|
||||
label: this.$t('lesson.createChapter'),
|
||||
handler: this.createChapterInChapter
|
||||
},
|
||||
{
|
||||
label: '删除章节',
|
||||
handler: this.deleteChapter
|
||||
}
|
||||
],
|
||||
menuLesson: [
|
||||
{
|
||||
label: this.$t('lesson.editCourse'),
|
||||
handler: this.editLesson
|
||||
},
|
||||
{
|
||||
label: this.$t('lesson.createChapter'),
|
||||
handler: this.createChapter
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
node: function (val, old) {
|
||||
if (val && val.data) {
|
||||
switch (val.data.type) {
|
||||
case 'Lesson':
|
||||
this.menu = this.menuLesson;
|
||||
break;
|
||||
case 'Chapter':
|
||||
this.menu = this.menuChapte;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.menuOperation.menuCount': function (val) {
|
||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Lesson)) {
|
||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||
} else {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closeEvent();
|
||||
},
|
||||
methods: {
|
||||
closeEvent() {
|
||||
const self = this;
|
||||
window.onclick = function (e) {
|
||||
self.doClose();
|
||||
};
|
||||
},
|
||||
doShow(point) {
|
||||
this.closeEvent();
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.resetShowPosition(point);
|
||||
}
|
||||
this.menuShow = true;
|
||||
},
|
||||
doClose() {
|
||||
if (this.$refs && this.$refs.popMenu) {
|
||||
this.$refs.popMenu.close();
|
||||
}
|
||||
this.menuShow = false;
|
||||
},
|
||||
updateChapter() {
|
||||
this.$emit('changeRouter', {event: '03', node: this.node});
|
||||
},
|
||||
deleteChapter() {
|
||||
this.$emit('changeRouter', {event: '05', node: this.node});
|
||||
},
|
||||
createChapter() {
|
||||
this.$emit('changeRouter', {event: '02', node: this.node});
|
||||
},
|
||||
editLesson() {
|
||||
this.$emit('changeRouter', {event: '01', node: this.node});
|
||||
},
|
||||
createChapterInChapter() {
|
||||
this.$emit('changeRouter', {event: '04', node: this.node});
|
||||
},
|
||||
refresh(filterSelect) {
|
||||
this.$emit('refresh', filterSelect);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ {
|
||||
.menu-item{
|
||||
background: #f1ecec;
|
||||
.pop-menu {
|
||||
background: #5F9EA0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user