分班完善

src/api/webApi/elective/dispatch.js

@@ -19,11 +19,12 @@ export function getSettings(params) {
 }
 
 // 保存分班配置
-export function saveSettings(params) {
+export function saveSettings(query,data) {
   return request({
     url: '/front/elective/classes/settings',
     method: 'post',
-    data: params
+    params: query,
+    data: data
   })
 }
 

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

@@ -1,79 +1,67 @@
 <template>
-  <el-dialog
-    :title="`选择班级(${roundGroup.groupName || ''})`"
-    :visible.sync="show"
-    :close-on-click-modal="false"
-    width="50%"
-  >
-    <div>
-      <el-checkbox-group
-        v-model="tmpClassIds"
-        :max="roundGroup.classCount"
-      >
-        <el-checkbox style="margin-bottom: 20px" v-for="item in classList"
-                     :disabled="item.disabled" :label="item.classId" :key="item.classId"
-        >{{ item.className }}
-        </el-checkbox>
-      </el-checkbox-group>
-      <el-form v-if="inputVisible" :rules="rules" ref="form" :model="form" label-width="80px" @submit.native.prevent>
-        <el-form-item label="输入班级"  prop="name" >
-          <el-tooltip class="item" effect="dark" content="输入班级名称后回车创建班级" :hide-after="1500" placement="bottom-start">
-            <el-input
-              style="width:60%"
-              class="input-new-tag"
-              v-model="form.name"
-              ref="saveTagInput"
-              size="small"
-              @keyup.enter.native="handleInputEnter"
-            >
-            </el-input>
-          </el-tooltip>
-          <div class="size-icon" @click="handleInputConfirm">
-            <i class="icon el-icon-circle-close" ></i>
-          </div>
-        </el-form-item>
-      </el-form>
-
-      <el-button v-else type="primary" size="small" @click="showInput">新增班级</el-button>
-    </div>
-    <span slot="footer" class="dialog-footer">
-    <el-button @click="close">取 消</el-button>
-    <el-button type="primary" @click="confirm">确 定</el-button>
-  </span>
-  </el-dialog>
+  <div>
+    <el-form  :rules="rules" ref="form" :model="form" label-width="80px" @submit.native.prevent>
+      <el-form-item label-width="0">
+        <el-checkbox-group
+          v-model="tmpClassIds"
+          :max="roundGroup.classCount"
+        >
+          <el-checkbox style="margin-bottom: 20px" v-for="item in classList"
+                       :disabled="item.disabled" :label="item.classId" :key="item.classId"
+          >{{ item.className }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="输入班级" prop="name" v-if="inputVisible" >
+        <el-tooltip class="item" effect="dark" content="输入班级名称后回车创建班级" :hide-after="1500" placement="bottom-start">
+          <el-input
+            style="width:60%"
+            class="input-new-tag"
+            v-model="form.name"
+            ref="saveTagInput"
+            size="small"
+            @keyup.enter.native="handleInputEnter"
+          >
+          </el-input>
+        </el-tooltip>
+        <div class="size-icon" @click="handleInputConfirm">
+          <i class="icon el-icon-circle-close"></i>
+        </div>
+      </el-form-item>
+    <el-button v-else type="primary" size="small" @click="showInput">新增班级</el-button>
+    </el-form>
+  </div>
 </template>
 
 <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',
   props: {
-    year:{
-      type: Number ,
-      default: 0
-    }
+    year: {
+      type: Number
+    },
   },
   mixins: [MxClassTreeTranslateMixin],
   data() {
     return {
-      show: false,
-      roundGroup: null,
-      settingContainer: [],
       tmpClasses: [],
+      roundGroup: {},
+      settingContainer: [],
       inputVisible: false,
       form: {
         name: '',
         type: 1, // 默认为行政班
         year: '', // 学年
         gradeId: '', // 年级
-        subjectId: "1,2,3,4,5,6,7,8,9" // 默认为全科目
+        subjectId: '1,2,3,4,5,6,7,8,9' // 默认为全科目
       },
       rules: {
         name: [
           { required: true, message: '班级名称不能为空', trigger: 'blur' }
-        ],
+        ]
       },
       tmpClassIds: []
     }
@@ -83,8 +71,8 @@ export default {
       if (!this.classTree?.length) return []
       if (!this.year) return []
       // 获取该年份下的年级
-      const classTree= this.classTree[this.classTree.findIndex(i => i.year = this.year)]
-      this.form.grade = classTree.gradeId
+      const classTree = this.classTree[this.classTree.findIndex(i => i.year = this.year)]
+      this.form.gradeId = classTree.gradeId
       this.form.year = classTree.year
       return this.classTree[this.classTree.findIndex(i => i.year = this.year)].classList.map(item => {
         item['disabled'] = this.settingContainer.some(c => c.classId == item.classId && c.groupId !== this.roundGroup.groupId)
@@ -94,21 +82,20 @@ export default {
   },
   methods: {
     close() {
-      this.show = false
       this.handleInputConfirm()
     },
+    validate() {
+      //
+      if (this.tmpClassIds.length !== this.roundGroup.classCount) return false
+      return true
+    },
     open(roundGroup, settingContainer) {
-      console.log(roundGroup)
-      this.show = true
       this.roundGroup = roundGroup
       this.settingContainer = settingContainer
       this.tmpClasses = settingContainer.filter(setting => setting.groupId == roundGroup.groupId)
       this.tmpClassIds = this.tmpClasses.map(c => c.classId)
     },
     confirm() {
-      this.show = false
-      // int groupId; // 组合ID
-      // int classId; // 班级
       const mergeClasses = this.tmpClassIds.map(id => {
         return this.tmpClasses.find(c => c.classId == id) || {
           classId: id, // 班级Id
@@ -124,14 +111,15 @@ export default {
       this.tmpClasses.forEach(c => this.settingContainer.remove(c))
       mergeClasses.forEach(c => this.settingContainer.push(c))
       this.handleInputConfirm()
+      return this.settingContainer
     },
     handleInputConfirm() {
-      this.inputVisible = false;
+      this.inputVisible = false
     },
     handleInputEnter() {
       console.log('回车')
       this.$refs.form.validate(valid => {
-        if(valid){
+        if (valid) {
           console.log('提交')
           this.addClass()
         }
@@ -144,11 +132,6 @@ export default {
       })
     },
     addClass() {
-      // gradeId: 500
-      // name: "数学,英语,历史,地理,化学,物理,生物,政治,语文行政班2021"
-      // subjectId: "2,3,4,5,9,8,7,6,1"
-      // type: "1"
-      // year: 2021
       busiClass.add(this.form).then(res => {
         this.form.name = ''
         this.msgSuccess('保存成功')
@@ -165,14 +148,15 @@ export default {
 </script>
 
 <style scoped>
-.size-icon{
+.size-icon {
   font-size: 25px;
   cursor: pointer;
   display: inline-block;
   height: 100%;
   position: absolute;
 }
-.icon{
+
+.icon {
   margin-left: 20px;
   color: red;
 }

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

@@ -6,17 +6,6 @@
                          :disabled="row.classCount != 0" label="label"
         ></el-input-number>
       </template>
-      <!-- 人数设定 -->
-      <template #countSet="{row}">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          @click="editCount(row)"
-        >设定
-        </el-button>
-      </template>
       <!-- 分班编辑-->
       <template #edit="{row}">
         <el-button
@@ -24,7 +13,7 @@
           plain
           icon="el-icon-edit"
           size="mini"
-          @click="editClass(row)"
+          @click="openEditDialog(row)"
         >编辑
         </el-button>
       </template>
@@ -40,21 +29,20 @@
         </el-button>
       </template>
     </mx-table>
-    <choose-class  :year="round.year" :roundId="round.roundId"  ref="editClassDialog"></choose-class>
-    <set-classcount ref="setClassDialog"></set-classcount>
+    <edit-group :year="round.year"  ref="editDialog"></edit-group>
     <class-adjust ref="adjustDialog"></class-adjust>
   </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 ChooseClass from './choose-class'
 import ClassAdjust from './class-adjust'
 import SetClasscount from './set-classcount'
+import EditGroup from './editGroup'
 
 export default {
   components: {
-    ChooseClass,
+    EditGroup,
     SetClasscount,
     ClassAdjust,
   },
@@ -71,6 +59,7 @@ export default {
   },
   data() {
     return {
+      modifyGroupSettings: [],
       settingList: [],
       dataList: [],
       propDefines: {
@@ -91,10 +80,6 @@ export default {
         groupClass: {
           label: '班级名称'
         },
-        countSet: {
-          label: '人数设定',
-          slot: 'countSet'
-        },
         expectedCount: {
           label: '人数'
         },
@@ -130,6 +115,14 @@ export default {
 
   },
   methods: {
+    openEditDialog(row) {
+      if (!row.classCount) {
+        this.$message.warning('班级数为0时不可分班')
+        return
+      }
+      this.modifyGroupSettings = this.deepClone(this.settings)
+      this.$refs.editDialog.open(row, this.modifyGroupSettings)
+    },
     adjust() {
       this.$refs.adjustDialog.open()
     },
@@ -147,20 +140,6 @@ export default {
     },
     classCountChange(newVal, index) {
       this.round.groupList[index] = newVal
-    },
-    editClass(row) {
-      // 分配班级
-      if (!row.classCount) {
-        this.$message.warning('班级数为0时不可分班')
-        return
-      }
-      // 获取分班配置
-      // getSettings({
-      //   roundId: row.roundId
-      // }).then(res => {
-      //   this.$refs.editClassDialog.open(row, res.data)
-      // })
-      this.$refs.editClassDialog.open(row, this.settings)
     }
   }
 }

src/views/elective/dispatch/components/editGroup.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-dialog
+    :title="`分班编辑(${roundGroup.groupName})`"
+    :visible.sync="show"
+    :close-on-click-modal="false"
+    width="70%"
+  >
+    <div>
+        <el-steps :active="active" finish-status="success">
+          <el-step title="设定班级"></el-step>
+          <el-step title="设定班级人数"></el-step>
+          <el-step title="完成"></el-step>
+        </el-steps>
+      <div style="padding: 20px 10px">
+        <choose-class v-if="active == 0" :year="year" ref="editClassDialog"></choose-class>
+        <set-classcount  v-if="active == 1" ref="setClassDialog"></set-classcount>
+        <p>
+          <el-button v-if="active == 0" @click="confirm" type="primary" style="float: right">下一步</el-button>
+        </p>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="show = false">取 消</el-button>
+      <el-button type="primary" @click="save()" :disabled="active != 1">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+
+import ChooseClass from '@/views/elective/dispatch/components/choose-class'
+import SetClasscount from '@/views/elective/dispatch/components/set-classcount'
+
+export default {
+  props: {
+    year: {
+      type: Number
+    }
+  },
+  components: {
+    ChooseClass,
+    SetClasscount
+  },
+  data() {
+    return {
+      active: 0,
+      show: false,
+      roundGroup: {},
+      settingContainer: [],
+
+    }
+  },
+  methods: {
+    open(roundGroup, settingContainer) {
+      this.active = 0
+      this.show = true
+      this.roundGroup = roundGroup
+      this.settingContainer = settingContainer
+      this.$nextTick(() => {
+        this.$refs.editClassDialog.open(roundGroup, settingContainer)
+      })
+    },
+    confirm() {
+      // 验证
+      const flag =this.$refs.editClassDialog.validate()
+      if (flag) {
+        // 下一步 保存班级
+        this.$refs.editClassDialog.confirm()
+        this.active = 1
+        // this.modifyGroupSettings = this.deepClone(this.settingContainer.filter(item => item.groupId == row.groupId))
+        this.$nextTick(() => {
+          this.$refs.setClassDialog.init(this.roundGroup,this.settingContainer)
+        })
+        return
+      }
+      this.$message.error(`${this.roundGroup.groupName}设定了${this.roundGroup.classCount}个班级`)
+      console.log(flag)
+    },
+    save() {
+      // 验证
+      const flag =this.$refs.setClassDialog.valid()
+      if(flag) this.show = false
+
+
+    }
+  }
+}
+</script>
+<style>
+
+</style>

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

@@ -1,16 +1,17 @@
 <template>
-  <el-dialog
-    title="设定人数"
-    :visible.sync="setShow"
-    :close-on-click-modal="false"
-    width="50%"
-  >
     <div>
-      <p style="margin-bottom: 10px;">组合人数为:{{roundGroup.number}}</p>
+      <p style="margin-bottom: 10px;">该组合录取人数为:{{roundGroup.number}}</p>
       <el-table
         :data="formatSetting"
         style="width: 100%"
       >
+        <el-table-column
+          label="序号"
+          prop="sortIndex"
+          width="100"
+          sortable
+        >
+        </el-table-column>
         <el-table-column
           label="组合"
           width="180"
@@ -29,7 +30,7 @@
           label="人数"
         >
           <template slot-scope="scope">
-            <el-input-number :min="0" :max="roundGroup.number?setPubMax(scope.$index):Infinity" v-model="scope.row.expectedCount" @change="countEdit(scope.row,scope.$index)" ></el-input-number>
+              <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
@@ -55,11 +56,6 @@
         </el-table-column>
       </el-table>
     </div>
-    <span slot="footer" class="dialog-footer">
-    <el-button @click="setShow = false">取 消</el-button>
-    <el-button type="primary" @click="confirm()">确 定</el-button>
-  </span>
-  </el-dialog>
 </template>
 
 <script>
@@ -71,8 +67,9 @@ export default {
   data() {
     return {
       setShow: false,
-      settingContainer: [],
-      roundGroup: {}
+      roundId: '',
+      roundGroup: {},
+      settingContainer: []
     }
   },
   computed: {
@@ -90,8 +87,9 @@ export default {
       }
     },
     formatSetting() {
-      return this.settingContainer.map(item => {
+      return this.settingContainer.map((item,index) => {
         return {
+          sortIndex: index + 1,
           expectedCount: item.expectedCount,
           classId: item.classId,
           className: this.getClassName(item.classId),
@@ -100,22 +98,37 @@ export default {
     },
   },
   methods: {
-    open(roundGroup, settingContainer) {
-      this.setShow = true
+    countEdit(newVal,index){
+      this.settingContainer[index].expectedCount = newVal.expectedCount
+    },
+    init(roundGroup,settingContainer) {
       this.roundGroup = roundGroup
+      this.settingContainer = settingContainer
       this.roundId = roundGroup.roundId
       this.settingContainer = settingContainer.filter(item => item.groupId == roundGroup.groupId)
     },
-    countEdit(newVal,index){
-      this.settingContainer[index].expectedCount = newVal.expectedCount
+    valid() {
+      // 验证
+      // 累计人数
+      const count =this.formatSetting.reduce((pre, cur) => {
+          return pre + cur.expectedCount
+      }, 0)
+      if(count != this.roundGroup.number) {
+        this.$message.warning('还有学生未分班')
+        return
+      }
+      // 校验通过 保存
+      this.confirm()
+      return true
     },
     confirm() {
-      // 保存settings
       console.log(this.settingContainer)
-      saveSettings({
-        roundId: this.roundId,
-        settings: this.settingContainer }).then(res => {
-        console.log(res)
+      saveSettings(
+        {roundId: this.roundId }, this.settingContainer ).then(res => {
+          if (res.code == 200) {
+            this.$message.success(res.msg)
+          }
+      }).finally(res => {
       })
     }
   }