选科分班-拖拽

package.json

@@ -60,7 +60,7 @@
     "pizzip": "^3.1.1",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
-    "sortablejs": "1.10.2",
+    "sortablejs": "^1.10.2",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "2.6.12",
     "vue-aliplayer": "^1.0.0",

src/views/elective/dispatch/components/set-classcount.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <div id="set-classcount">
       <p style="margin-bottom: 10px;">该组合录取人数为：{{roundGroup.number}}</p>
       <el-table
         :data="formatSetting"
+        row-key="classId"
         style="width: 100%"
       >
         <el-table-column
@@ -32,27 +33,6 @@
               <el-input-number :min="1" :max="roundGroup.number?setPubMax(scope.$index):Infinity" v-model="scope.row.expectedCount" @change="countEdit(scope.row,scope.$index)" ></el-input-number>
           </template>
         </el-table-column>
-<!--        <el-table-column-->
-<!--          label="操作"-->
-<!--        >-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-popover-->
-<!--              placement="bottom"-->
-<!--              title="标题"-->
-<!--              width="200"-->
-<!--              trigger="click"-->
-<!--              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">-->
-<!--              <el-switch-->
-<!--                v-model="scope.row.active"-->
-<!--                active-color=""-->
-<!--                active-text="按排名"-->
-<!--                inactive-text="随机"-->
-<!--                inactive-color="#ff4949"-->
-<!--                slot="reference">-->
-<!--              </el-switch>-->
-<!--            </el-popover>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
       </el-table>
       <el-radio-group class="mt10" v-model="mode">
         <el-popover
@@ -81,6 +61,7 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
 import { saveSettings, applySettings } from '@/api/webApi/elective/dispatch'
 export default {
@@ -98,6 +79,9 @@ export default {
       settingContainer: []
     }
   },
+  mounted() {
+    this.rowDrop()
+  },
   computed: {
     // input-number设置公用max
     setPubMax() {
@@ -125,13 +109,33 @@ export default {
   },
   inject: ['refreshData'],
   methods: {
+    rowDrop() {
+      console.log('rowDrop挂载')
+      // 要侦听拖拽响应的DOM对象
+      const tbody = document.querySelector('#set-classcount .el-table__body-wrapper tbody');
+      const that = this;
+      Sortable.create(tbody, {
+        // 结束拖拽后的回调函数
+        onEnd({ newIndex, oldIndex }) {
+          console.log('拖动了行，当前序号：' + newIndex);
+          const currentRow = that.tableData.splice(oldIndex, 1)[0];
+          that.tableData.splice(newIndex, 0, currentRow);
+        }
+      })
+    },
     countEdit(newVal,index){
       this.settingContainer[index].expectedCount = newVal.expectedCount
     },
     init(roundGroup,settingContainer) {
+      console.log(roundGroup,settingContainer)
       this.roundGroup = roundGroup
       this.roundId = roundGroup.roundId
-      if( settingContainer.length > 0) {
+      const isSetting = settingContainer.filter(item=> {
+        return item.groupId == roundGroup.groupId && item.expectedCount != 0
+      }).length
+      console.log(isSetting)
+      if( isSetting > 0) {
+        // 填充后台的
         this.settingContainer = settingContainer.filter(item => item.groupId == roundGroup.groupId)
         console.log(this.settingContainer)
         return
@@ -171,22 +175,27 @@ export default {
         if (res.code == 200) {
           this.$message.success(res.msg)
         }
+        this.$nextTick(_ => {
+          this.applySettings()
+        })
       }).finally(res => {
         this.refreshData()
       })
     },
-    confirm() {
-      console.log(this.settingContainer)
-      // 应用分班配置
+    applySettings() {
       applySettings({
         roundId:this.roundId,
         mode:this.mode,
         groupId:this.roundGroup.groupId,
-      }).then(res => {})
-      // 保存settings
-      this.$nextTick(_ => {
-        this.saveSettings()
+      }).then(res => {
+        console.log(res)
       })
+    },
+    confirm() {
+      console.log(this.settingContainer)
+      // 应用分班配置
+      // 保存settings
+      this.saveSettings()
     }
   }
 }