科目要求排序

src/assets/styles/common-comp.scss

@@ -464,6 +464,15 @@ $--cc-labels-pre: cc-labels;
     }
   }
   .drag-handle {
+    padding: 5px;
     cursor: move;
+
+    i {
+      color: #8b8fa1;
+      transform: rotate(90deg);
+    }
+    &:hover i {
+      color: #3a5ae5;
+    }
   }
 }

src/components/DragTable.vue

@@ -14,7 +14,7 @@
     </thead>
     <tbody
       class="drag-table-tbody"
-      @drop.prevent="dropInnerElement"
+      @drop.prevent
       @dragover.prevent="dragOver($event)"
       @dragleave.prevent
     >
@@ -38,7 +38,7 @@
           @mousedown.stop="dragHandleMousedown"
           @mouseup.stop="dragHandleMouseup"
         >
-          <div class="drag-handle">1</div>
+          <i class="el-icon-more"></i>
         </td>
         <td v-for="column in columns" :key="column.prop">
           <slot :name="column.prop" v-bind:row="row">
@@ -90,9 +90,10 @@ export default {
         return;
       }
 
-      this.tableData = val.map((item) => {
+      this.tableData = val.map((item, index) => {
         return {
           ...item,
+          $index: index + 1,
           $key: randomCode(),
         };
       });
@@ -134,10 +135,8 @@ export default {
       const targetKey = elementDom.id;
       this.curDropRow = this.getSiblingRow(targetKey, 0);
     },
-    dropInnerElement() {
-      // console.log(this.curDragRow.id, this.curDropRowId);
+    dragEnd(e) {
       if (this.curDragRow.id === this.curDropRow.id || !this.curDropRow) return;
-
       // 往下：target上一个位置
       // 往上：target下一个位置
       this.moveElementToElement({
@@ -145,9 +144,9 @@ export default {
         toRow: this.curDropRow,
         isDragDown: this.isDragDown,
       });
-    },
-    dragEnd(e) {
+
       e.target.setAttribute("draggable", false);
+
       this.curDragRow = {};
       this.curDropRow = {};
       this.dragStartPageY = null;
@@ -165,6 +164,7 @@ export default {
 
       this.tableData.forEach((row, index) => {
         row[this.sortField] = index + 1;
+        row.$index = index + 1;
       });
       this.$emit("sort-change", this.tableData);
     },

src/modules/course/components/profession/ModifyRequirement.vue

@@ -40,6 +40,7 @@ const initModalForm = {
   professionalId: "",
   name: "",
   sortNum: "",
+  nodeCount: 0,
 };
 
 export default {
@@ -101,6 +102,7 @@ export default {
       if (this.isSubmit) return;
       this.isSubmit = true;
       let datas = { ...this.modalForm };
+      if (!this.isEdit) datas.nodeCount = undefined;
       const data = await professionalRequirementSave(datas).catch(() => {});
       this.isSubmit = false;
 

src/modules/course/components/profession/ProfessionalCourse.vue

@@ -10,24 +10,18 @@
     </div>
 
     <div class="part-box part-box-pad">
-      <el-table :data="dataList" border>
-        <el-table-column type="index" width="50"> </el-table-column>
-        <el-table-column label="课程（代码）">
-          <template slot-scope="scope">
-            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
-          </template>
-        </el-table-column>
-        <el-table-column class-name="action-column" label="操作" width="120px">
-          <template slot-scope="scope">
-            <el-button
-              class="btn-danger"
-              type="text"
-              @click="toDelete(scope.row)"
+      <drag-table :data="dataList" :columns="columns" @sort-change="sortChange">
+        <template #course="{ row }">
+          {{ row.courseName }}（{{ row.courseCode }}）
+        </template>
+        <template #action="{ row }">
+          <div class="action-column">
+            <el-button class="btn-danger" type="text" @click="toDelete(row)"
               >删除</el-button
             >
-          </template>
-        </el-table-column>
-      </el-table>
+          </div>
+        </template>
+      </drag-table>
     </div>
 
     <!-- AddProfessionalCourse -->
@@ -43,14 +37,17 @@
 import {
   professionalCourseListPage,
   professionalCourseRemove,
+  professionalCourseSort,
 } from "../../api";
 
 import AddProfessionalCourse from "./AddProfessionalCourse.vue";
+import DragTable from "@/components/DragTable.vue";
 
 export default {
   name: "professional-course",
   components: {
     AddProfessionalCourse,
+    DragTable,
   },
   props: {
     rowData: {
@@ -63,6 +60,22 @@ export default {
   data() {
     return {
       dataList: [],
+      columns: [
+        {
+          label: "序号",
+          prop: "$index",
+          width: 60,
+        },
+        {
+          label: "课程（代码）",
+          prop: "course",
+        },
+        {
+          label: "操作",
+          prop: "action",
+          width: 100,
+        },
+      ],
     };
   },
   mounted() {
@@ -75,6 +88,16 @@ export default {
       });
       this.dataList = data || [];
     },
+    async sortChange(data) {
+      const res = await professionalCourseSort(
+        data.map((item) => {
+          return { id: item.id, sortNum: item.sortNum };
+        })
+      ).catch(() => {});
+      if (!res) {
+        await this.getList();
+      }
+    },
     toAdd() {
       this.$refs.AddProfessionalCourse.open();
     },

src/modules/course/components/profession/ProfessionalRequirement.vue

@@ -12,35 +12,25 @@
     </div>
 
     <div class="part-box part-box-pad">
-      <el-table :data="dataList" border>
-        <el-table-column type="index" width="50" align="center">
-        </el-table-column>
-        <el-table-column prop="name" label="毕业要求"> </el-table-column>
-        <el-table-column prop="nodeCount" label="子节点"> </el-table-column>
-        <el-table-column class-name="action-column" label="操作" width="160px">
-          <template slot-scope="scope">
-            <el-button
-              class="btn-primary"
-              type="text"
-              @click="toEditNode(scope.row)"
+      <drag-table :data="dataList" :columns="columns" @sort-change="sortChange">
+        <template #action="{ row }">
+          <div class="action-column">
+            <el-button class="btn-primary" type="text" @click="toEditNode(row)"
               >子节点</el-button
             >
-            <el-button
-              class="btn-primary"
-              type="text"
-              @click="toEdit(scope.row)"
+            <el-button class="btn-primary" type="text" @click="toEdit(row)"
               >编辑</el-button
             >
             <el-button
-              :disabled="!!scope.row.code"
+              :disabled="!!row.code"
               class="btn-danger"
               type="text"
-              @click="toDelete(scope.row)"
+              @click="toDelete(row)"
               >删除</el-button
             >
-          </template>
-        </el-table-column>
-      </el-table>
+          </div>
+        </template>
+      </drag-table>
     </div>
 
     <!-- ModifyRequirement -->
@@ -62,16 +52,19 @@
 import {
   professionalRequirementListPage,
   professionalRequirementRemove,
+  professionalRequirementSort,
 } from "../../api";
 
 import ModifyRequirement from "./ModifyRequirement.vue";
 import ModifyRequirementNode from "./ModifyRequirementNode.vue";
+import DragTable from "@/components/DragTable.vue";
 
 export default {
   name: "professional-requirement",
   components: {
     ModifyRequirement,
     ModifyRequirementNode,
+    DragTable,
   },
   props: {
     rowData: {
@@ -85,6 +78,26 @@ export default {
     return {
       dataList: [],
       curRow: {},
+      columns: [
+        {
+          label: "序号",
+          prop: "$index",
+          width: 60,
+        },
+        {
+          label: "毕业要求",
+          prop: "name",
+        },
+        {
+          label: "子节点",
+          prop: "nodeCount",
+        },
+        {
+          label: "操作",
+          prop: "action",
+          width: 160,
+        },
+      ],
     };
   },
   mounted() {
@@ -97,6 +110,16 @@ export default {
       });
       this.dataList = data || [];
     },
+    async sortChange(data) {
+      const res = await professionalRequirementSort(
+        data.map((item) => {
+          return { id: item.id, sortNum: item.sortNum };
+        })
+      ).catch(() => {});
+      if (!res) {
+        await this.getList();
+      }
+    },
     toAdd() {
       this.curRow = { professionalId: this.rowData.id };
       this.$refs.ModifyRequirement.open();