feat：一键置顶和置底

src/views/education/create-component.vue

@@ -207,7 +207,7 @@
               :label="'模块' + parseInt(index + 1)"
               :name="'' + parseInt(index + 1)"
             >
-              <div>
+              <div v-if="(index + 1) == firstTab">
                 <el-form
                   ref="moduleForm"
                   :model="item"
@@ -299,7 +299,7 @@
                     <div class="template-content">
                       <div class="template-content-div">
                         <div class="title">
-                          {{ item1.name }}
+                          {{index1+1}}.{{ item1.name }}
                           <!-- <span v-if="newfieldDisabled(item)"> -->
                           <span>
                             变更顺序:
@@ -498,6 +498,7 @@
                                 :key="index3"
                               >
                                 <el-col :span="10" class="item-icon">
+                                  <span v-if="item1.type == 3 || item1.type == 4 || item1.type == 5" class="sort-icon">{{index3 + 1}})</span>
                                   <span class="require">*</span>
                                   <el-form-item label="课程名称">
                                     <el-input
@@ -518,7 +519,8 @@
                                         style="color: #449284"
                                       ></i>
                                       <i
-                                        class="el-icon-caret-bottom"
+                                        v-if="index3 != (item2.partContentModelList.length-1)"
+                                        class="el-icon-bottom"
                                         @click="
                                           sortCourseDown(
                                             index,
@@ -530,7 +532,8 @@
                                         style="font-size: 17px"
                                       ></i>
                                       <i
-                                        class="el-icon-caret-top"
+                                        v-if="index3"
+                                        class="el-icon-top"
                                         @click="
                                           sortCourseUp(
                                             index,
@@ -557,7 +560,8 @@
                                         style="color: red"
                                       ></i>
                                       <i
-                                        class="el-icon-caret-bottom"
+                                        v-if="index3 != (item2.partContentModelList.length-1)"
+                                        class="el-icon-bottom"
                                         @click="
                                           sortCourseDown(
                                             index,
@@ -569,7 +573,8 @@
                                         style="font-size: 17px"
                                       ></i>
                                       <i
-                                        class="el-icon-caret-top"
+                                        v-if="index3"
+                                        class="el-icon-top"
                                         @click="
                                           sortCourseUp(
                                             index,
@@ -1738,6 +1743,36 @@ export default {
       }
     },
 
+    // 课程排序-置顶
+    sortCourseUp(index, index1flag, index2, index3) {
+      let index1 = index1flag + (this.pageNo-1) * this.pageSize;
+      // 不是第一个元素，才可能上移
+      if (index3 > 0) {
+        let item = vm.componentList.moduleModelList[index].templetModelList[index1].partModelList[index2].partContentModelList.splice(index3, 1)[0];
+        vm.componentList.moduleModelList[index].templetModelList[index1].partModelList[index2].partContentModelList.splice(
+          0,
+          0,
+          item
+        );
+        vm.$forceUpdate();
+      }
+    },
+
+    // 课程排序-置底部
+    sortCourseDown(index, index1flag, index2, index3) {
+      let index1 = index1flag + (this.pageNo-1) * this.pageSize;
+      let pLength = vm.componentList.moduleModelList[index].templetModelList[index1].partModelList[index2].partContentModelList.length - 1;
+      if (index3 <= pLength && pLength > 0) {
+        let item = vm.componentList.moduleModelList[index].templetModelList[index1].partModelList[index2].partContentModelList.splice(index3, 1)[0];
+        vm.componentList.moduleModelList[index].templetModelList[index1].partModelList[index2].partContentModelList.splice(
+          parseInt(pLength),
+          0,
+          item
+        );
+        vm.$forceUpdate();
+      }
+    },
+
     // 添加多个课程
     addMatterCourse(index, index1flag, index2) {
       console.log(index, index1flag, index2);
@@ -2310,6 +2345,12 @@ export default {
       }
       .item-icon {
         position: relative;
+        span.sort-icon {
+          position: absolute;
+          left: 20px;
+          top: 12px;
+          font-size: 14px;
+        }
         span.require {
           position: absolute;
           left: 37px;