分班模拟，添加班级分配班级

src/components/Cache/modules/mx-classTree-translate-mixin.js

@@ -1,4 +1,5 @@
 import cacheMixin from '@/components/Cache/mx-cache-mixin.js'
+
 export default {
   mixins: [cacheMixin],
   data() {
@@ -43,5 +44,14 @@ export default {
       })
       return nodes.join('/')
     },
+    getClassName(classId) {
+      if (!classId) return ''
+      const nodes = []
+      this.classTree.forEach(grade => {
+        const match = grade.classList.find(c => c.classId == classId)
+        if (match) nodes.push(match.className)
+      })
+      return nodes.join('/')
+    }
   }
 }

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

@@ -1,18 +1,45 @@
 <template>
   <el-dialog
-    title="选择班级"
+    :title="`选择班级(${roundGroup.groupName})`"
     :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>
+        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="show = false">取 消</el-button>
+    <el-button @click="close">取 消</el-button>
     <el-button type="primary" @click="confirm">确 定</el-button>
   </span>
   </el-dialog>
@@ -20,47 +47,122 @@
 
 <script>
 import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
+import * as busiClass from '@/api/webApi/busi-classes.js'
 export default {
   name: 'choose-class',
   mixins: [MxClassTreeTranslateMixin],
   data() {
     return {
       show: false,
-      selectMax: 999,
-      checkedClass: [],
-      groupId: '',
+      roundGroup: null,
+      settingContainer: [],
+      tmpClasses: [],
+      inputVisible: false,
+      form: {
+        name: '',
+        type: 1, // 默认为行政班
+        year: '2021', // 学年
+        gradeId: 500, // 年级
+        subjectId: "2,3,4,5,9,8,7,6,1" // 默认为全科目
+      },
+      rules: {
+        name: [
+          { required: true, message: '班级名称不能为空', trigger: 'blur' }
+        ],
+      },
+      tmpClassIds: []
     }
   },
   computed: {
     classList() {
-      if (!this.classTree) return []
-      return this.classTree[0].classList
-      console.log(this.classTree[0])
+      if (!this.classTree?.length) return []
+
+      return this.classTree[0].classList.map(item => {
+        item['disabled'] = this.settingContainer.some(c => c.classId == item.classId && c.groupId !== this.roundGroup.groupId)
+        return item
+      })
     }
   },
   methods: {
-    handleClose() {
-
+    close() {
+      this.show = false
+      this.handleInputConfirm()
     },
-    init(params) {
+    open(roundGroup, settingContainer) {
+      console.log(roundGroup)
       this.show = true
-      this.selectMax = params.classCount
-      this.groupId = params.groupId
-      console.log(params)
+      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
-      const format = {
-        groupId: this.groupId,
-        groupClass: this.checkedClass
-      }
-      this.$emit('confirm',format)
+      // int groupId; // 组合ID
+      // int classId; // 班级
+      const mergeClasses = this.tmpClassIds.map(id => {
+        return this.tmpClasses.find(c => c.classId == id) || {
+          classId: id,
+          groupId: this.roundGroup.groupId,
+          expectedCount: 0,
+          actualCount: 0,
+          actualCountInMale: 0,
+          actualCountInFemale: 0
+        }
+      })
+      this.tmpClasses.forEach(c => this.settingContainer.remove(c))
+      mergeClasses.forEach(c => this.settingContainer.push(c))
+      this.handleInputConfirm()
+    },
+    handleInputConfirm() {
+      this.inputVisible = false;
+    },
+    handleInputEnter() {
+      console.log('回车')
+      this.$refs.form.validate(valid => {
+        if(valid){
+          console.log('提交')
+          this.addClass()
+        }
+      })
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    addClass() {
+      // gradeId: 500
+      // name: "数学,英语,历史,地理,化学,物理,生物,政治,语文行政班2021"
+      // subjectId: "2,3,4,5,9,8,7,6,1"
+      // type: "1"
+      // year: 2021
+      const saveClass = busiClass.add
+      saveClass(this.form).then(res => {
+        this.form.name = ''
+        this.msgSuccess('保存成功')
+        this.$store.dispatch('GetInfo') // 借机清除了用户缓存
+      }).finally()
+    },
+    refreshClassTree() {
+      // dispatch('getInfo') // clear cache
+      // this.loadClassTree
     }
-
   }
 }
 </script>
 
 <style scoped>
-
+.size-icon{
+  font-size: 25px;
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  position: absolute;
+}
+.icon{
+  margin-left: 20px;
+  color: red;
+}
 </style>

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

@@ -12,7 +12,7 @@
         </el-button>
       </template>
     </mx-table>
-    <choose-class ref="dialog" @confirm="confirm"></choose-class>
+    <choose-class ref="dialog"></choose-class>
   </el-row>
 </template>
 <script>
@@ -49,8 +49,8 @@ export default {
           label: '分班编辑',
           slot: 'edit'
         },
-        classNames: {
-          label: '班级名称'
+        groupClass: {
+          label: '班级名称',
         }
       }
     }
@@ -61,15 +61,19 @@ export default {
     },
     displayRows() {
       if (!this.classTree.length) return []
-      //if (!this.settingList.length) return []
       if (!this.listGroupsOptions.length) return []
+      // if (!this.settingList.length) return []
       if (!this.round) 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
+        classCount: rg.classCount,
+        groupClass: this.settingList
+          .filter(item => item.groupId == rg.groupId)
+          .map(item => this.getClassName(item.classId)).toString(),
       }))
       console.log('displayRows computed:', rows)
       return rows
@@ -81,13 +85,23 @@ export default {
   methods: {
     async loadRoundStatus() {
       const res = await getCurrentRound()
-      this.$set(this, 'round', res.data)
+      this.round = res.data
     },
-    edit(params) {
-      if (!params.classCount) return
-      this.$refs.dialog.init(params)
+    edit(row) {
+      if (!row.classCount) {
+        this.$message.warning('班级数为0时不可分班')
+        return
+      }
+      this.$refs.dialog.open(row,this.settingList)
     },
+
     confirm(list) {
+      this.round.roundGroups.filter(item => {
+        if(list.groupId == item.groupId) {
+           item.groupClass = list.groupClass
+        }
+      })
+      console.log(this.displayRows)
       console.log(list)
     }
   }