feat 增加课程可排序

package-lock.json

@@ -1333,6 +1333,7 @@
       "resolved": "https://registry.npmmirror.com/boom/-/boom-2.10.1.tgz",
       "integrity": "sha512-KbiZEa9/vofNcVJXGwdWWn25reQ3V3dHBWbS07FTF3/TOehLnm9GEhJV4T6ZvGPkShRpmUqYwnaCrkj0mRnP6Q==",
       "dev": true,
+      "optional": true,
       "requires": {
         "hoek": "2.x.x"
       }
@@ -3188,7 +3189,8 @@
       "version": "2.16.3",
       "resolved": "https://registry.npmmirror.com/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha512-V6Yw1rIcYV/4JsnggjBU0l4Kr+EXhpwqXRusENU1Xx6ro00IHPHYNynCuBTOZAPlr3AAmLvchH9I7N/VUdvOwQ==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "home-or-tmp": {
       "version": "2.0.0",
@@ -3854,7 +3856,7 @@
       "integrity": "sha512-J9X76xnncMw+wIqb15HeWfPMqPwYxSpPY8yWPJ7rAZN/ZDzFkjCSZObryCyUe8zbrVRNiuCnIeQteCzMn7GnWw==",
       "requires": {
         "canvg": "1.5.3",
-        "file-saver": "github:eligrey/FileSaver.js#e865e37af9f9947ddcced76b549e27dc45c1cb2e",
+        "file-saver": "github:eligrey/FileSaver.js#1.3.8",
         "html2canvas": "1.0.0-alpha.12",
         "omggif": "1.0.7",
         "promise-polyfill": "8.1.0",

package.json

@@ -42,7 +42,7 @@
     "vue-router": "^2.1.1",
     "vue-ueditor-wrap": "^2.4.1",
     "vue-video-player": "^5.0.2",
-    "vuedraggable": "^2.23.2",
+    "vuedraggable": "^2.24.3",
     "vuex": "^2.0.0"
   },
   "devDependencies": {

src/views/education/create-component.vue

@@ -79,6 +79,7 @@
               size="small"
               placeholder="请输入组件名称"
               style="width: 30%"
+              clearable
             ></el-input>
             <span class="word-num"
               >{{ portalComponent.name.replace(/\s+/g, "").length }}/20</span
@@ -94,6 +95,7 @@
               size="small"
               placeholder="请输入组件简介"
               style="width: 37%"
+              clearable
             ></el-input>
             <span class="word-num"
               >{{
@@ -135,6 +137,7 @@
               :step="1"
               :min="0"
               :max="100"
+              clearable
             >
             </el-input-number>
           </el-form-item>
@@ -226,6 +229,7 @@
                           size="small"
                           placeholder="请选择模块名称"
                           style="width: 288px"
+                          clearable
                         ></el-input>
                       </el-form-item>
                     </el-col>
@@ -345,6 +349,7 @@
                                       maxlength="30"
                                       placeholder="请输入考试名称"
                                       style="width: 288px"
+                                      clearable
                                     ></el-input>
                                     <span
                                       v-if="item2.numFlag == 2 && index3 == 0"
@@ -492,6 +497,7 @@
                               {{ item2.introduce }}
                             </div>
                             <div class="sortable-course">
+                              <draggable v-model="item2.partContentModelList" @end="onDragEnd">
                               <el-row
                                 v-for="(item3,
                                 index3) in item2.partContentModelList"
@@ -508,6 +514,7 @@
                                       maxlength="30"
                                       placeholder="请输入课程名称"
                                       style="width: 288px"
+                                      clearable
                                     ></el-input>
                                     <span
                                       v-if="item2.numFlag == 2 && index3 == 0"
@@ -637,6 +644,7 @@
                                       size="small"
                                       placeholder="请输入试看时长"
                                       style="width: 300px"
+                                      clearable
                                     ></el-input>
                                     <span class="word-num">(秒)</span>
                                   </el-form-item>
@@ -650,6 +658,7 @@
                                   </el-form-item>
                                 </el-col>
                               </el-row>
+                              </draggable>
                             </div>
                           </div>
                         </div>
@@ -776,6 +785,7 @@
   </div>
 </template>
 <script>
+import draggable from "vuedraggable";
 import BreadCrumb from "../../components/breadcrumb.vue";
 import { doUpload, getFilePath } from "../../utils/qiniu-util";
 // import { validateWord150 } from "../../utils/validate.js"
@@ -838,6 +848,7 @@ let validateModuleName = function (rule, value, callback, message) {
 export default {
   components: {
     BreadCrumb,
+    draggable
   },
   data() {
     return {
@@ -1072,7 +1083,6 @@ export default {
         });
       });
     },
-
     // 根据ID查询组件基本信息
     componentBasicInfo() {
       if (vm.componentId) {
@@ -1095,7 +1105,6 @@ export default {
         });
       }
     },
-
     selectStandard(index) {},
     //  删除图片
     deleteImg() {
@@ -1472,7 +1481,6 @@ export default {
       //          }
       //          vm.$forceUpdate();
     },
-
     // 删除模块前进行确认
     beforeRemoveTab(targetName) {
       // 模板不为空
@@ -1497,7 +1505,6 @@ export default {
           });
         });
     },
-
     // 删除tab
     removeTab(targetName) {
       for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
@@ -1650,7 +1657,6 @@ export default {
       }
       vm.templetIndex++;
     },
-
     // 删除模板前
     beforeDeleteTemplate(index, index1flag) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1675,7 +1681,6 @@ export default {
           });
         });
     },
-
     // 删除模板
     deleteTemplate(index, index1) {
       for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
@@ -1700,7 +1705,9 @@ export default {
         }
       }
     },
+    onDragEnd() {
 
+    },
     // 课程排序-向上
     sortCourseUp(index, index1flag, index2, index3) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1719,7 +1726,6 @@ export default {
         vm.$forceUpdate();
       }
     },
-
     // 课程排序-向下
     sortCourseDown(index, index1flag, index2, index3) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1742,7 +1748,6 @@ export default {
         vm.$forceUpdate();
       }
     },
-
     // 课程排序-置顶
     sortCourseUp(index, index1flag, index2, index3) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1757,7 +1762,6 @@ export default {
         vm.$forceUpdate();
       }
     },
-
     // 课程排序-置底部
     sortCourseDown(index, index1flag, index2, index3) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1772,7 +1776,6 @@ export default {
         vm.$forceUpdate();
       }
     },
-
     // 添加多个课程
     addMatterCourse(index, index1flag, index2) {
       console.log(index, index1flag, index2);
@@ -1816,7 +1819,6 @@ export default {
         }
       }
     },
-
     // 删除多个课程(多个考试)元件的确认框
     beforeDeleteMatterCourse(index, index1flag, index2, index3) {
       let index1 = index1flag + (this.pageNo-1) * this.pageSize;
@@ -1842,7 +1844,6 @@ export default {
           });
         });
     },
-
     // 删除多个课程(多个考试)元件
     deleteMatterCourse(index, index1, index2, index3) {
       for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {