代码暂提

src/views/teach/create.vue

@@ -2,68 +2,158 @@
   <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-row>
-      <el-form ref="form" :model="courseModel" :rules="rules" label-width="135px">
+      <el-col :span="8">
-        <el-form-item :label="this.$t('lesson.courseName')+this.$t('global.colon')" prop="name">
+        <div class="joylink-card">
-          <el-input v-model="courseModel.name" />
+          <div class="title_box">
-        </el-form-item>
+            <b>{{ $t('lesson.courseName') + ':  '+ lessonName }}</b>
-        <el-form-item :label="this.$t('lesson.mapName')+this.$t('global.colon')" prop="mapId">
+          </div>
-          <el-select v-model="courseModel.mapId" :placeholder="$t('rules.pleaseSelect')" :disabled="true">
+          <div class="content_box">
-            <el-option
+            <div class="tree_box">
-              v-for="(item,index) in mapIdList"
+              <div class="tree_content_box">
-              :key="index"
+                <p>{{ this.$t('lesson.courseTree') }}</p>
-              :label="item.name"
+                <div style="height: calc(100% - 89px); overflow-y: auto;">
-              :value="item.id"
+                  <el-tree
-            />
+                    ref="tree"
-          </el-select>
+                    style="width: 370px"
-        </el-form-item>
+                    :data="treeList"
-        <el-form-item :label="this.$t('lesson.prdType')+this.$t('global.colon')" prop="prdType">
+                    node-key="id"
-          <el-select v-model="courseModel.prdType" :placeholder="$t('rules.pleaseSelect')" :disabled="true">
+                    :props="defaultProps"
-            <el-option
+                    default-expand-all
-              v-for="(item,index) in prdTypeList"
+                    highlight-current
-              :key="index"
+                    :span="22"
-              :label="item.label"
+                    :filter-node-method="filterNode"
-              :value="item.value"
+                    :default-expanded-keys="expandList"
-            />
+                    @node-contextmenu="showContextMenu"
-          </el-select>
+                    @node-click="clickEvent"
-        </el-form-item>
+                  />
-        <el-form-item :label="$t('lesson.courseDescription')+this.$t('global.colon')" prop="remarks">
+                </div>
-          <el-input
+              </div>
-            v-model="courseModel.remarks"
+            </div>
-            type="textarea"
+          </div>
-            :autosize="{ minRows: 6, maxRows: 6}"
+        </div>
-            :placeholder="this.$t('rules.pleaseEnterContent')"
+      </el-col>
-          />
+      <el-col :span="16">
-        </el-form-item>
+        <div style="height: 100%; overflow-y: auto;">
-      </el-form>
+          <el-form v-if="editType === 'editLesson'" ref="form" :model="courseModel" :rules="courseRules" label-width="135px">
-    </div>
+            <el-form-item :label="this.$t('lesson.courseName')+this.$t('global.colon')" prop="name">
-    <div class="draft">
+              <el-input v-model="courseModel.name" />
-      <el-button-group>
+            </el-form-item>
-        <template v-if="!isEdit">
+            <el-form-item :label="this.$t('lesson.mapName')+this.$t('global.colon')" prop="mapId">
-          <el-button v-if="courseModel.mapId" type="primary" @click="create">{{ $t('global.create') }}</el-button>
+              <el-select v-model="courseModel.mapId" :placeholder="$t('rules.pleaseSelect')" :disabled="true">
-          <el-button type="primary" @click="handleClose">取消</el-button>
+                <el-option
-        </template>
+                  v-for="(item,index) in mapIdList"
-        <template v-else>
+                  :key="index"
-          <el-button type="primary" @click="update">{{ $t('global.update') }}</el-button>
+                  :label="item.name"
-          <el-button type="primary" @click="handleClose">取消</el-button>
+                  :value="item.id"
-        </template>
+                />
-      </el-button-group>
+              </el-select>
-    </div>
+            </el-form-item>
+            <el-form-item :label="this.$t('lesson.prdType')+this.$t('global.colon')" prop="prdType">
+              <el-select v-model="courseModel.prdType" :placeholder="$t('rules.pleaseSelect')" :disabled="true">
+                <el-option
+                  v-for="(item,index) in prdTypeList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('lesson.courseDescription')+this.$t('global.colon')" prop="remarks">
+              <el-input
+                v-model="courseModel.remarks"
+                type="textarea"
+                :autosize="{ minRows: 6, maxRows: 6}"
+                :placeholder="this.$t('rules.pleaseEnterContent')"
+              />
+            </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>
+            </template>
+            <template v-else>
+              <el-button type="primary" @click="update">{{ $t('global.update') }}</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;

src/views/teach/operateMenu.vue

@@ -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>