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

<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>