封装 mx-select 下拉框组件， 模拟分班调整班级

mock/modules/elective-dispatch.js

@@ -68,8 +68,79 @@ module.exports = [
         code: 200,
         msg: 'success',
         data: [{
-
-        }]
+          roundId: 1, // 轮次ID
+          groupId: 1, // 组合ID
+          classId: 201, // 班级
+          students: [
+            {
+              studentId: 1,
+              studentName: '张飞',
+              sex: 0,
+              rankInGroup: 1// 组合内排名
+            },
+            {
+              studentId: 2,
+              studentName: '刘备',
+              sex: 0,
+              rankInGroup: 2// 组合内排名
+            },
+            {
+              studentId: 3,
+              studentName: '关羽',
+              sex: 0,
+              rankInGroup: 3// 组合内排名
+            },
+            {
+              studentId: 4,
+              studentName: '陈菲菲',
+              sex: 1,
+              rankInGroup: 4// 组合内排名
+            },
+            {
+              studentId: 5,
+              studentName: '欧李',
+              sex: 1,
+              rankInGroup: 5// 组合内排名
+            }
+          ]
+        }, {
+            roundId: 1, // 轮次ID
+            groupId: 1, // 组合ID
+            classId: 202, // 班级
+            students: [
+              {
+                studentId: 6,
+                studentName: '曹操',
+                sex: 0,
+                rankInGroup: 1// 组合内排名
+              },
+              {
+                studentId: 7,
+                studentName: '吴飞',
+                sex: 0,
+                rankInGroup: 2// 组合内排名
+              },
+              {
+                studentId: 8,
+                studentName: '海清',
+                sex: 1,
+                rankInGroup: 3// 组合内排名
+              },
+              {
+                studentId: 9,
+                studentName: '张扬',
+                sex: 1,
+                rankInGroup: 4// 组合内排名
+              },
+              {
+                studentId: 10,
+                studentName: '张燕',
+                sex: 1,
+                rankInGroup: 5// 组合内排名
+              }
+            ]
+          },
+        ]
       }
     }
   }

src/api/webApi/elective/dispatch.js

@@ -7,3 +7,11 @@ export function getCurrentRound(params) {
     params
   })
 }
+
+export function getDispatchResult(params) {
+  return request({
+    url: '/mock/front/report/getDispatchResult',
+    method: 'get',
+    params
+  })
+}

src/components/mx-select/mx-select.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-col :span="span">
+    <el-select
+      class="search-select"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :multiple="multiple"
+      v-model="selectedValue"
+      @change="onSelectChange"
+    >
+      <el-option
+        :disabled="item[itemDisabled]"
+        v-for="item in list"
+        :key="item[itemValue]"
+        :label="item[itemLabel]"
+        :value="item[itemValue]"
+      ></el-option>
+    </el-select>
+  </el-col>
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    itemDisabled: {
+      type: String,
+      default: 'disabled'
+    },
+    itemLabel: {
+      type: String,
+      default: 'name'
+    },
+    itemValue: {
+      type: String,
+      default: 'id'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    span: {
+      type: Number,
+      default: 24
+    },
+    offset: {
+      type: Number,
+      default: 0
+    },
+    value: [String, Number, Array]
+  },
+  methods: {
+    onSelectChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  },
+  computed: {
+    selectedValue: {
+      get: function() {
+        return this.value
+      },
+      set: function(newValue) {
+        this.$emit('input', newValue)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.search-select {
+  width: 100%;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -1,130 +1,187 @@
 <template>
   <el-dialog
     title="班级调整"
-    :visible.sync="adjustShow"
+    :visible.sync="show"
     :close-on-click-modal="false"
-    width="50%"
+    width="70%"
   >
     <el-form ref="form" :model="form" label-width="50px" label-position="right">
       <el-row justify="center">
-        <el-row >
-          <el-col class="flex-center" :span="12" >
-            <el-form-item :label="from" >
-              <el-select v-model="from" placeholder="请选择">
-                <el-option
-                  v-for="item in classList"
-                  :key="item.classId"
-                  :label="item.className"
-                  :disabled="getDisable(item.classId)"
-                  :value="item.classId"
-                >
-                </el-option>
-              </el-select>
+        <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="from" placeholder="请选择" item-label="className" item-value="classId"
+              ></mx-select>
+            </el-form-item>
+            <el-form-item :label="from">
+              <class-table :list="studentsTableLeft" @confirm="studentSelected($event,'from')"></class-table>
             </el-form-item>
           </el-col>
-          <el-col class="flex-center" :span="12">
+          <el-col class="flex-center-column" :span="12">
+            <el-form-item >
+              <mx-select @change="getStudents('to',$event)"  :span="12" :list="display" v-model="to"  placeholder="请选择" item-label="className" item-value="classId"
+              ></mx-select>
+            </el-form-item>
             <el-form-item :label="to">
-              <el-select v-model="to" placeholder="请选择">
-                <el-option
-                  v-for="item in classList"
-                  :key="item.classId"
-                  :label="item.className"
-                  :disabled="getDisable(item.classId)"
-                  :value="item.classId"
-                >
-                </el-option>
-              </el-select>
+              <class-table :list="studentsTableRight" @confirm="studentSelected($event,'to')" ></class-table>
             </el-form-item>
           </el-col>
         </el-row>
-
-        <el-col :span="24" class="flex-center" style="margin-top: 20px">
+<!--        <el-col>-->
+<!--          <el-alert-->
+<!--            title="不可关闭的 alert"-->
+<!--            type="success"-->
+<!--            :closable="false">-->
+<!--          </el-alert>-->
+<!--        </el-col>-->
+        <el-col :span="24" class="flex-center" v-if="this.from && this.to" style="margin-top: 20px">
           <el-transfer
-            :button-texts="['到左边', '到右边']"
-            v-model="value"
-            :titles="[from, to]"
-            :data="list"
+            v-model="tranRight"
+            :titles="[from ? from : '未选择', to ? to : '未选择']"
+            :data="tranLeft"
             @change="transferChange"
           >
           </el-transfer>
         </el-col>
-        <el-row :gutter="10">
-          <el-col :span="12">
-            <span></span>
-          </el-col>
-          <el-col :span="12">10</el-col>
-        </el-row>
       </el-row>
     </el-form>
     <span slot="footer" class="dialog-footer">
-    <el-button @click="adjustShow = false">取 消</el-button>
-    <el-button type="primary" @click="adjustShow = false">确 定</el-button>
+    <el-button @click="show = false">取 消</el-button>
+    <el-button type="primary" @click="show = false">确 定</el-button>
   </span>
   </el-dialog>
 </template>
 
 <script>
+import {  getDispatchResult } from '@/api/webApi/elective/dispatch'
+import MxSelect from '@/components/mx-select/mx-select'
+import ClassTable from './class-table'
 
 export default {
   name: 'class-adjust',
+  components: {
+    MxSelect,
+    ClassTable
+  },
   data() {
     return {
-      value: [],
-      list:  [],
+      studentListOne: [],
       form: {},
+      studentsTableLeft: [],
+      studentsTableRight: [],
       from: '',
       to: '',
       classList: [{
         classId: '201',
         className: '201班'
-      },{
+      }, {
         classId: '202',
         className: '202班'
-      },{
+      }, {
         classId: '203',
         className: '203班'
       }],
-      adjustShow: false
+      selectedLeft: [],
+      selectedRight: [],
+      show: false,
+      tranRight: []
     }
   },
   created() {
-    this.list = this.getList()
-    this.value = this.list.filter(item => {
-        if (item.key > 30) {
-          return item
+  },
+  computed: {
+    tranLeft() {
+      const selected = this.selectedRight.concat(this.selectedLeft)
+      return selected.map(item => {
+        return {
+          key: item.studentId,
+          label: item.studentName,
         }
-    }).map(item => item.key)
+      })
+    },
+    display() {
+      return this.classList.map(item => {
+        return {
+          classId: item.classId,
+          className: item.className,
+          disabled: this.getDisable(item.classId)
+        }
+      })
+    }
   },
-  computed: {},
   methods: {
+    studentSelected(list,type) {
+      // 1 添加至母框
+      if(type== 'from'){
+        this.selectedLeft = list
+      }
+      if(type== 'to'){
+        this.selectedRight = list
+      }
+    },
+    async getStudents(type,classId) {
+      console.log(classId)
+      if(type == 'from') {
+        // 左边table
+        const res =  await getDispatchResult()
+        const index = res.data.findIndex(item=>(item.classId == classId))
+        index != -1 ? this.studentsTableLeft = res.data[index].students.map(
+            item => {
+              return {
+                ...item,
+                className: res.data[index].classId
+              }
+            }
+          )
+          :
+          this.studentsTableLeft = []
+
+      }
+      if(type == 'to') {
+        // 右边table
+        const res =  await getDispatchResult()
+        const index = res.data.findIndex(item=>(item.classId == classId))
+        index != -1 ? this.studentsTableRight = res.data[index].students.map(
+            item => {
+              return {
+                ...item,
+                className: res.data[index].classId
+              }
+            }
+          )
+          :
+          this.studentsTableRight = []
+
+
+      }
+    },
     // 判断是否有这个元素
     getDisable(itemId) {
-      return this.from == itemId || this.to == itemId
+       return this.from == itemId || this.to == itemId
     },
-    getList(){
-        const data = [];
-        for (let i = 1; i <= 40; i++) {
-          data.push({
-            key: i,
-            label: `学生${i}`,
-          });
-        }
-        return data;
-    },
-    transferChange(currentVal,direction,array) {
-      console.log('当前值',currentVal)
-      console.log('方向',direction)
-      console.log('array',array)
+    transferChange(currentVal, direction, array) {
+      if(!this.from || !this.to) {
+        console.log(111111111)
+        this.$message.warning('需要选择两个班级')
+        return
+      }
     },
     open() {
-      this.adjustShow = true
-    },
+      this.show = true
+    }
   }
 }
 </script>
 
 <style scoped>
+.flex-center-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 .flex-center{
- display: flex;justify-content: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 </style>

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

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-table
+      :data="list"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="className"
+        label="班级"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="studentName"
+        label="姓名"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="sex"
+        label="性别"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="rankInGroup"
+        label="排名"
+      >
+      </el-table-column>
+    </el-table>
+    <!-- 操作 确认和分页-->
+    <div class="tmp">
+
+<!--      <el-button v-if="list.length > 0 && selected.length > 0" type="primary" @click="confirm">确认选择</el-button>-->
+      <el-pagination
+        layout="prev, pager, next"
+        :total="10">
+      </el-pagination>
+    </div>
+  </div>
+
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      required: true,
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selected: [],
+    }
+  },
+  methods: {
+    handleSelectionChange(row) {
+      this.selected = row
+      this.$emit('confirm',this.selected)
+    },
+    confirm() {
+    }
+  }
+}
+
+</script>
+<style scoped>
+.tmp{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 10px 0;
+}
+</style>