分班调整

mock/modules/elective-dispatch.js

@@ -58,5 +58,19 @@ module.exports = [
         }
       }
     }
+  },
+
+  {
+    url: '/mock/front/report/getDispatchResult',
+    type:'get',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: [{
+
+        }]
+      }
+    }
   }
 ]

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

@@ -46,6 +46,7 @@
 <script>
 import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
 import * as busiClass from '@/api/webApi/busi-classes.js'
+import { add } from '@/api/webApi/busi-classes.js'
 export default {
   name: 'choose-class',
   mixins: [MxClassTreeTranslateMixin],
@@ -136,17 +137,16 @@ export default {
       // subjectId: "2,3,4,5,9,8,7,6,1"
       // type: "1"
       // year: 2021
-      const saveClass = busiClass.add
-      saveClass(this.form).then(res => {
+      busiClass.add(this.form).then(res => {
         this.form.name = ''
         this.msgSuccess('保存成功')
-        this.getClassTreeByCache(false)
-        // this.$store.dispatch('GetInfo') // 借机清除了用户缓存
+        // this.getClassTreeByCache(false)
+        this.refreshClassTree()
       }).finally()
     },
     refreshClassTree() {
-      // dispatch('getInfo') // clear cache
-      // this.loadClassTree
+      this.$store.dispatch('GetInfo') // 借机清除了用户缓存 // clear cache
+      this.loadTranslateClassTree()
     }
   }
 }

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

@@ -0,0 +1,130 @@
+<template>
+  <el-dialog
+    title="班级调整"
+    :visible.sync="adjustShow"
+    :close-on-click-modal="false"
+    width="50%"
+  >
+    <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-form-item>
+          </el-col>
+          <el-col class="flex-center" :span="12">
+            <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>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-col :span="24" class="flex-center" style="margin-top: 20px">
+          <el-transfer
+            :button-texts="['到左边', '到右边']"
+            v-model="value"
+            :titles="[from, to]"
+            :data="list"
+            @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>
+  </span>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'class-adjust',
+  data() {
+    return {
+      value: [],
+      list:  [],
+      form: {},
+      from: '',
+      to: '',
+      classList: [{
+        classId: '201',
+        className: '201班'
+      },{
+        classId: '202',
+        className: '202班'
+      },{
+        classId: '203',
+        className: '203班'
+      }],
+      adjustShow: false
+    }
+  },
+  created() {
+    this.list = this.getList()
+    this.value = this.list.filter(item => {
+        if (item.key > 30) {
+          return item
+        }
+    }).map(item => item.key)
+  },
+  computed: {},
+  methods: {
+    // 判断是否有这个元素
+    getDisable(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)
+    },
+    open() {
+      this.adjustShow = true
+    },
+  }
+}
+</script>
+
+<style scoped>
+.flex-center{
+ display: flex;justify-content: center;
+}
+</style>

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

@@ -2,10 +2,10 @@
   <el-row>
     <mx-table :propDefines="propDefines" :rows="displayRows">
       <template #classCount="{row,$index}">
-        <el-input-number v-model="row.classCount" @change="classCountChange(row,$index)" :min="0" :disabled="row.classCount != 0" label="label"></el-input-number>
+        <el-input-number  size="small" v-model="row.classCount" @change="classCountChange(row,$index)" :min="0" :disabled="row.classCount != 0" label="label"></el-input-number>
       </template>
       <!-- 人数设定 -->
-      <template #countEdit="{row}">
+      <template #countSet="{row}">
         <el-button
           type="success"
           plain
@@ -15,6 +15,7 @@
         >设定
         </el-button>
       </template>
+      <!-- 分班编辑-->
       <template #edit="{row}">
         <el-button
           type="success"
@@ -25,9 +26,21 @@
         >编辑
         </el-button>
       </template>
+      <!-- 班级调整 -->
+      <template #adjust="{row}">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          @click="adjust"
+        >调整
+        </el-button>
+      </template>
     </mx-table>
     <choose-class ref="editClassDialog"></choose-class>
     <set-classcount ref="setClassDialog"></set-classcount>
+    <class-adjust ref="adjustDialog"></class-adjust>
   </el-row>
 </template>
 <script>
@@ -36,11 +49,13 @@ import MxSelectTranslateMixin from '@/components/Cache/modules/mx-select-transla
 import * as gradeAxios from '@/api/webApi/grade'
 import { getCurrentRound } from '@/api/webApi/elective/dispatch'
 import ChooseClass from './choose-class'
+import ClassAdjust from './class-adjust'
 import SetClasscount from './set-classcount'
 export default {
   components: {
     ChooseClass,
-    SetClasscount
+    SetClasscount,
+    ClassAdjust
   },
   mixins: [MxClassTreeTranslateMixin, MxSelectTranslateMixin],
   props: {
@@ -71,13 +86,17 @@ export default {
         groupClass: {
           label: '班级名称',
         },
-        countEdit: {
+        countSet: {
           label: '人数设定',
-          slot:  'countEdit'
+          slot:  'countSet'
         },
         actualCount: {
           label: '人数',
         },
+        adjust: {
+          label: '操作',
+          slot:'adjust'
+        },
       }
     }
   },
@@ -110,6 +129,9 @@ export default {
     this.loadRoundStatus()
   },
   methods: {
+    adjust() {
+      this.$refs.adjustDialog.open()
+    },
     countEdit(row) {
       // 设定人数
       const filter = this.settingList.filter(item => item.groupId == row.groupId)

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

@@ -38,14 +38,21 @@
           label="操作"
         >
           <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.active"
-              active-color=""
-              active-text="按排名"
-              inactive-text="随机"
-              inactive-color="#ff4949"
-            >
-            </el-switch>
+            <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>