dy-admin-manager/src/views/teamDetail/components/modals/class-pay-list.vue

<template>
  <div>
    <classPayListItem
      :payInfo="payInfo"
      ref="base"
      :courseTypesByType="courseTypesByType"
      v-for="(item, index) in form.classList"
      :key="index"
      :item="item"
      :index="index"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">上一步</el-button>
      <el-button type="primary" @click="gotoLast">下一步</el-button>
    </div>
    <div style="clear: both"></div>
        <el-dialog
      :visible.sync="showLastVisable"
      title="合并结果确认"
      append-to-body
      width="800px"
    >
      <classSetting
      :form='form'
      ref="classSetting"
        :musicGroupPaymentCalenderDtos="musicGroupPaymentCalenderDtos"
        :classType="5"
        :teacherList="selects.teachers"
        :musicGroupId="teamid"
        :activeType="activeType"
        :courseTypeList="courseTypeList"
        :cooperationList="selects.teachers"
        :studentSubmitedData="studentSubmitedData"
        :classIdList="classIdList"
        :classGroupStudents="classGroupStudents"
        @close="showLastVisable = false"
        v-if="showLastVisable"

      />
        <div slot="footer" class="dialog-footer" >
        <el-button @click="showLastVisable = false">上一步</el-button>
        <el-button type="primary" @click="submitResetClass">确 定</el-button>
      </div>
          
    </el-dialog>
  </div>
</template>
<script>
import { getDefaultPaymentCalender } from "@/api/buildTeam";
import classNewInfo from "./class-new-info";
import classPayListItem from './class-pay-list-item'
import classSetting from './classroom-setting'
import  {getCourseType} from "@/utils/utils"
export default {
  props: ["form", "payInfo", "courseTypesByType","classIdList"],
  components: {
    classNewInfo,
    classPayListItem,
    classSetting
  },
  data() {
    return {
      showLastVisable:false,
      musicGroupPaymentCalenderDtos:null,
      teacherList:[],
      studentList:[],
      teamid:'',
      activeType:'',
      courseTypeList:[],
      studentSubmitedData:{},
      classGroupStudents:[]
    };
  },


  methods: {
    init(){
       this.$store.dispatch('setTeachers')
      this.studentList = []
      let classGroupStudents = []
      this.form.classList.forEach(classes=>{
          this.studentList = this.studentList.concat(classes.studentList)
          let arr = []
          classes.studentList.forEach(stu=>{
            arr.push(stu.userId)
          })
          classGroupStudents.push({[classes.classId]:arr.join(',')})
      })
      this.classGroupStudents = classGroupStudents
      this.teamid = this.$route.query.id
      this.activeType = this.form.classList[0].type
      console.log(this.form.classList)
      this.courseTypeList = getCourseType(this.activeType)
      console.log('courseTypeList:',this.courseTypeList)
      this.studentSubmitedData = {
        name:'',
        seleched:this.studentList.map(stu=> {return stu.userId})
      }
    this.showLastVisable = true
    },
    close() {
      this.$emit("close");
    },
    getForms() {
      const { $refs: refs } = this;
      // [refs.base, refs.eclass, refs.cycle, ...(refs.cycles || []), refs.other, refs.payment]
      return [...refs.base]
        .filter((item) => !!item)
        .map((item) => item.$refs.form || item);
    },
    gotoLast() {
      const forms = this.getForms();
      let musicGroupPaymentCalenderDtos = []
      // 判断有没有缴费项目(因为又可能没有)
      // let flag = false
      for (const form of forms) {
         let data =  form.getData()
        if(data){
          musicGroupPaymentCalenderDtos.push(data)

        }
      }
      // 弹出最后一页
      this.musicGroupPaymentCalenderDtos = musicGroupPaymentCalenderDtos
      this.init()
           
    },
    submitResetClass(){
      this.$refs.classSetting.submit()
    }
  },
};
</script>
<style lang="scss" scoped>
.studentTitle {
  width: 120px !important;
  text-align: right;
  display: inline-block;
  color: #409eff;
}
.dialog-footer {
  text-align: right;
}

</style>