模拟分班--模拟编辑班级

mock/modules/elective-dispatch.js

@@ -0,0 +1,62 @@
+const Mock = require('mockjs')
+
+module.exports = [
+  {
+    url: '/mock/front/report/getCurrentRound',
+    type:'get',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          year: 2021,
+          roundId: 1,
+          roundName: '第X次选科',
+          groupIds:  '1,2,3',
+          roundGroups: [
+            {
+              "id": 32,
+              "schoolId": 31,
+              "roundId": 14,
+              "modelId": 0,
+              "groupId": 1,
+              "personCount": 0,
+              "classCount": 5,
+              "limitPerson": 0,
+              "rankOut": 0
+            },
+            {
+              "id": 33,
+              "schoolId": 31,
+              "roundId": 14,
+              "modelId": 0,
+              "groupId": 2,
+              "personCount": 0,
+              "classCount": 4,
+              "limitPerson": 0,
+              "rankOut": 0
+            },
+            {
+              "id": 34,
+              "schoolId": 31,
+              "roundId": 14,
+              "modelId": 0,
+              "groupId": 3,
+              "personCount": 0,
+              "classCount": 0,
+              "limitPerson": 0,
+              "rankOut": 0
+            }
+          ],
+          enrollGroupCount:{
+            '1': 250, // 录取人数
+            '2': 122,
+            '3': 100
+          },
+          allowDispatch: true,
+          dispatchCompleted: false
+        }
+      }
+    }
+  }
+]

src/api/webApi/elective/dispatch.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getCurrentRound(params) {
+  return request({
+    url: '/mock/front/report/getCurrentRound',
+    method: 'get',
+    params
+  })
+}

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

@@ -1,12 +1,63 @@
 <template>
-  <el-dialog>
-
+  <el-dialog
+    title="选择班级"
+    :visible.sync="show"
+    width="50%"
+    :before-close="handleClose">
+    <div>
+      <el-checkbox-group
+        v-model="checkedClass"
+        :max="selectMax">
+        <el-checkbox style="margin-bottom: 20px" v-for="item in classList" :label="item.classId" :key="item.classId">{{item.className}}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="show = false">取 消</el-button>
+    <el-button type="primary" @click="confirm">确 定</el-button>
+  </span>
   </el-dialog>
 </template>
 
 <script>
+import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
 export default {
-  name: 'choose-class'
+  name: 'choose-class',
+  mixins: [MxClassTreeTranslateMixin],
+  data() {
+    return {
+      show: false,
+      selectMax: 999,
+      checkedClass: [],
+      groupId: '',
+    }
+  },
+  computed: {
+    classList() {
+      if (!this.classTree) return []
+      return this.classTree[0].classList
+      console.log(this.classTree[0])
+    }
+  },
+  methods: {
+    handleClose() {
+
+    },
+    init(params) {
+      this.show = true
+      this.selectMax = params.classCount
+      this.groupId = params.groupId
+      console.log(params)
+    },
+    confirm() {
+      this.show = false
+      const format = {
+        groupId: this.groupId,
+        groupClass: this.checkedClass
+      }
+      this.$emit('confirm',format)
+    }
+
+  }
 }
 </script>
 

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

@@ -1,90 +1,97 @@
 <template>
   <el-row>
-    <mx-table :propDefines="propDefines" :rows="round">
-      <template #group="{row}">
-        <span>{{ listGroupsOptions.filter(item => item.value == row.groupId)[0].text}}</span>
-      </template>
-      <template #edit>
+    <mx-table :propDefines="propDefines" :rows="displayRows">
+      <template #edit="{row}">
         <el-button
           type="success"
           plain
           icon="el-icon-edit"
           size="mini"
-          @click="edit"
-          >编辑
+          @click="edit(row)"
+        >编辑
         </el-button>
       </template>
     </mx-table>
+    <choose-class ref="dialog" @confirm="confirm"></choose-class>
   </el-row>
 </template>
 <script>
-import MxClassTreeTranslateMixin from "@/components/Cache/modules/mx-classTree-translate-mixin.js";
-import MxSelectTranslateMixin from "@/components/Cache/modules/mx-select-translate-mixin.js";
-
+import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
+import MxSelectTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin.js'
+import { getCurrentRound } from '@/api/webApi/elective/dispatch'
+import ChooseClass from './choose-class'
 export default {
+  components: {
+    ChooseClass
+  },
   mixins: [MxClassTreeTranslateMixin, MxSelectTranslateMixin],
   props: {
-    round: {
-      type: Object,
-      default: {},
-    },
-    allowDispatch: {
-      type: Boolean,
-      default: false,
-    },
+    // round: {
+    //   type: Object,
+    //   default: {},
+    // }
   },
   data() {
     return {
+      round: null,
       settingList: [],
       propDefines: {
-        groupId: {
-          label: "组合",
-          slot: 'group'
+        groupName: {
+          label: '组合'
         },
         number: {
-          label: "人数",
+          label: '人数'
         },
-        classNum: {
-          label: "班级数",
+        classCount: {
+          label: '班级数'
         },
         edit: {
-          label: "分班编辑",
-          slot: "edit",
+          label: '分班编辑',
+          slot: 'edit'
         },
         classNames: {
-          label: "班级名称",
-        },
-      },
-    };
+          label: '班级名称'
+        }
+      }
+    }
   },
   computed: {
+    allowDispatch() {
+      return this.round.allowDispatch
+    },
     displayRows() {
-      console.log(this.classTree)
-      if (!this.classTree.length) return [];
-      if (!this.settingList.length) return [];
+      if (!this.classTree.length) return []
+      //if (!this.settingList.length) return []
+      if (!this.listGroupsOptions.length) return []
+      if (!this.round) return []
       //
-
-    },
-  },
-  created() {
-    if (!this.allowDispatch) {
-      this.$message.error("当前不能进行分班逻辑");
-      return;
+      const rows = this.round.roundGroups.map(rg => ({
+        groupId: rg.groupId,
+        groupName: this.translateGroup(rg.groupId),
+        number: this.round.enrollGroupCount[rg.groupId],
+        classCount: rg.classCount
+      }))
+      console.log('displayRows computed:', rows)
+      return rows
     }
   },
-  watch: {
-    round: {
-      handler: function (val, oldVal) {
-        console.log(val);
-        console.log(oldVal);
-      },
-      deep: true,
-    },
+  created() {
+    this.loadRoundStatus()
   },
   methods: {
-    edit() {},
-  },
-};
+    async loadRoundStatus() {
+      const res = await getCurrentRound()
+      this.$set(this, 'round', res.data)
+    },
+    edit(params) {
+      if (!params.classCount) return
+      this.$refs.dialog.init(params)
+    },
+    confirm(list) {
+      console.log(list)
+    }
+  }
+}
 </script>
 <style scoped>
 </style>

src/views/elective/dispatch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <dispatch-table :round="formatRound" :allowDispatch="round.allowDispatch"></dispatch-table>
+    <dispatch-table></dispatch-table>
   </div>
 </template>
 <script>
@@ -13,40 +13,10 @@ export default {
   },
   methods: {},
   computed: {
-    formatRound() {
-      if(!this.round.allowDispatch)return
-      for (const key in this.round.enrollGroupCount) {
-        console.log(key)
-        this.round.roundGroups.filter(item => {
-          if (item.groupId == key) {
-            item['number'] = this.round.enrollGroupCount[key]
-          }
-        })
-      }
-      return this.round.roundGroups
-    }
   },
   data() {
     return {
-      round: {
-        roundId: '1',
-        allowDispatch: true,
-        roundGroups: [{
-          groupId: '1', // 组合
-          classNum: 5  // 班级数
-        },{
-          groupId: '2',
-          classNum: 0
-        },{
-          groupId: '4',
-          classNum: 5
-        }],
-        enrollGroupCount:{
-          '1': 250, // 录取人数
-          '2': 122,
-          '4': 100
-        }
-      }
+
     };
   },
 };