分班调整分页

src/components/MxTable/index.vue

@@ -56,7 +56,7 @@
           </el-table-column>
         </template>
       </el-table-column>
-      <el-table-column :key="key" v-else :type="prop.type" :label="prop.label" :width="prop.width"
+      <el-table-column :key="key" v-else :type="prop.type" :reserve-selection="reserveSelection" :label="prop.label" :width="prop.width"
                        :align="prop.align || 'center'"></el-table-column>
     </template>
   </el-table>
@@ -78,6 +78,10 @@ export default {
       type: Boolean,
       default: false
     },
+    reserveSelection: {
+      type: Boolean,
+      default: false
+    },
     border: {
       type: Boolean,
       default: false

src/views/elective/dispatch/components/class-adjust.vue

@@ -4,22 +4,22 @@
         <el-row>
           <el-col class="flex-center-column" :span="12">
             <el-form-item>
-              <mx-select @change="getStudents('from',$event)" :span="12" :list="display" v-model="fromClassId"
+              <mx-select @change="toGetStudents('from',$event)" :span="12" :list="display" v-model="fromClassId"
                          placeholder="请选择" item-label="className" item-value="classId"
               ></mx-select>
             </el-form-item>
             <el-form-item>
-              <class-table :list="studentsTableLeft" @confirm="studentSelected($event,'from')"></class-table>
+              <class-table ref="fromTable" :pageForm="pageFormFrom" :list="studentsTableLeft" @confirm="studentSelected($event,'from')"></class-table>
             </el-form-item>
           </el-col>
           <el-col class="flex-center-column" :span="12">
             <el-form-item>
-              <mx-select @change="getStudents('to',$event)" :span="12" :list="display" v-model="toClassId"
+              <mx-select @change="toGetStudents('to',$event)" :span="12" :list="display" v-model="toClassId"
                          placeholder="请选择" item-label="className" item-value="classId"
               ></mx-select>
             </el-form-item>
             <el-form-item>
-              <class-table :list="studentsTableRight" @confirm="studentSelected($event,'to')"></class-table>
+              <class-table ref="toTable" :pageForm="pageFormTo" :list="studentsTableRight" @confirm="studentSelected($event,'to')"></class-table>
             </el-form-item>
           </el-col>
         </el-row>
@@ -55,6 +55,20 @@ export default {
       type: Array
     }
   },
+  watch: {
+    pageFormFrom:{
+      deep:true,
+      handler() {
+        this.getStudents('from',this.fromClassId)
+      }
+    },
+    pageFormTo:{
+      deep:true,
+      handler() {
+        this.getStudents('to',this.toClassId)
+      }
+    }
+  },
   inject: ['refreshData'],
   mixins: [MxClassTreeTranslateMixin],
   data() {
@@ -62,6 +76,17 @@ export default {
       form: {},
       studentsTableLeft: [],
       studentsTableRight: [],
+      pageFormTo: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0,
+      },
+      pageFormFrom: {
+        paramsName: 'pageFormFrom',
+        pageSize: 10,
+        pageNum: 1,
+        total: 0,
+      },
       fromClassId: '',
       toClassId: '',
       selectedLeft: [],
@@ -165,18 +190,32 @@ export default {
       if (type == 'to') this.selectedRight = list
 
     },
+    toGetStudents(type, classId) {
+      // 清空
+      if(type == 'from') {
+        this.$refs.fromTable.clearSelection()
+        this.selectedLeft = []
+      }
+      if(type == 'to') {
+        this.$refs.toTable.clearSelection()
+        this.selectedRight = []
+      }
+      this.getStudents(type, classId)
+    },
     getStudents(type, classId) {
-      console.log(type)
-      console.log(classId)
       classesResult({
         groupId: this.group.groupId,
         roundId: this.group.roundId,
+        pageSize: type == 'from' ? this.pageFormFrom.pageSize : this.pageFormTo.pageSize,
+        pageNum: type == 'from' ? this.pageFormFrom.pageNum : this.pageFormTo.pageNum,
         classId: classId
       }).then(res => {
         if( type == 'from') {
           this.studentsTableLeft = res.rows
+          this.pageFormFrom.total = res.total
         }else if( type == 'to') {
           this.studentsTableRight = res.rows
+          this.pageFormTo.total = res.total
         }
       })
     },

src/views/elective/dispatch/components/class-table.vue

@@ -1,10 +1,60 @@
 <template>
   <div>
-    <mx-table :propDefines="propDefines" :rows="list" @selection-change="handleSelectionChange">
-    </mx-table>
+    <el-table
+      :data="list"
+      row-key="studentId"
+      ref="table"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
+      <el-table-column
+        label="选择"
+        type="selection"
+        :reserve-selection="true"
+        width="100"
+        v-if="type  != '2'"
+      >
+      </el-table-column>
+      <el-table-column
+        label="组合"
+        prop="groupName"
+        v-if="type != '1'"
+      >
+      </el-table-column>
+      <el-table-column
+        label="班级"
+        prop="className"
+      >
+      </el-table-column>
+      <el-table-column
+        label="姓名"
+        prop="name"
+      >
+      </el-table-column>
+      <el-table-column
+        label="性别"
+        prop="sex"
+      >
+      </el-table-column>
+      <el-table-column
+        label="班级排名"
+        prop="rankInGroup"
+      >
+      </el-table-column>
+      <el-table-column
+        label="年级排名"
+        prop="rankInGrade"
+        v-if="type != '1'"
+      >
+      </el-table-column>
+    </el-table>
+<!--    <mx-table row-key="studentId"  :reserveSelection="true" :propDefines="propDefines" :rows="list" @selection-change="handleSelectionChange">-->
+<!--    </mx-table>-->
     <!-- 操作 确认和分页-->
-      <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage" :page.sync="pageForm.pageNum"
-                  :limit.sync="pageForm.pageSize"></pagination>
+    <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
+                :page.sync="pageForm.pageNum"
+                :limit.sync="pageForm.pageSize"
+    ></pagination>
   </div>
 
 </template>
@@ -22,7 +72,7 @@ export default {
     },
     pageForm: {
       type: Object,
-      default: () =>  {
+      default: () => {
         return {
           pageSize: 10,
           pageNum: 1,
@@ -36,7 +86,7 @@ export default {
       propDefines: {
         selection: {
           label: '选择',
-          type:'selection',
+          type: 'selection',
           hidden: this.type == '2'
         },
         groupName: {
@@ -47,10 +97,10 @@ export default {
           label: '班级'
         },
         name: {
-          label: '姓名',
+          label: '姓名'
         },
         sex: {
-          label: '性别',
+          label: '性别'
         },
         rankInGroup: {
           label: '班级排名'
@@ -60,28 +110,30 @@ export default {
           hidden: this.type == '1'
         }
       },
-      selected: [],
+      selected: []
     }
   },
-  computed: {
-  },
+  computed: {},
   methods: {
-    onChangePage(page){
-      this.pageForm.pageSize = page.limit;
-      this.pageForm.pageNum = page.page;
-      this.$emit("update:pageForm",this.pageForm)
+    clearSelection() {
+      this.$refs.table.clearSelection()
+    },
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.$emit(`update:${this.pageForm.paramsName}`, this.pageForm)
       // this.getBatchList();
     },
     handleSelectionChange(row) {
       this.selected = row
-      this.$emit('confirm',this.selected)
-    },
+      this.$emit('confirm', this.selected)
+    }
   }
 }
 
 </script>
 <style scoped>
-.tmp{
+.tmp {
   display: flex;
   justify-content: flex-end;
   align-items: center;

src/views/elective/dispatch/detail.vue

@@ -42,6 +42,7 @@ export default {
       requireFields: ['localGroupId'],
       studentList: [],
       pageForm:{
+        ParamsName: 'pageForm',
         pageNum: 1,
         pageSize: 10,
         total: 0