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

<template>
  <div>
     <el-alert
    title="课程时长设置"
    type="info" :closable='false'>
  </el-alert>
    <el-form :model='courseTimeForm' ref='courseTimeForms' :inline='true' style="margin-top:20px;">
      <el-form-item v-for="(item,index) in courseTimeForm.timeList" :key="index" :label="item.label"
       :prop="'timeList.' + index + '.value'" :rules="[{required: true, message: '请选择课程时长', trigger: 'blur'}]" label-width="100px">
        <el-select clearable v-model="item.value" placeholder="请选择课程时长" @change="(val)=>setCourseTime(item,val)">
          <el-option v-for="(time,index) in item.list" :key='index' :value='time' :label="time"></el-option>
        </el-select>
       </el-form-item>
    </el-form>
    <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"
        :musicGroupId="teamid"
        :activeType="activeType"
        :courseTypeList="courseTypeList"
        :studentSubmitedData="studentSubmitedData"
        :classIdList="classIdList"
        :classGroupStudents="classGroupStudents"
        :selectPrices='classCourseMinuteMap'
        :classCouresTimeList ="classCouresTimeList "
        @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 classNewInfo from "./class-new-info";
import classPayListItem from './class-pay-list-item'
import classSetting from './classroom-setting'
import  {getCourseType} from "@/utils/utils"
import {courseType,classTime} from '@/constant'
import { getOrganCourseDurationSettings} from '@/api/buildTeam'
import MusicStore from '@/views/resetTeaming/store'
export default {
  props: ["form", "payInfo", "courseTypesByType","classIdList","addCourseType",'classMaxCourseNumMap'],
  components: {
    classNewInfo,
    classPayListItem,
    classSetting
  },
  data() {
    return {
      showLastVisable:false,
      musicGroupPaymentCalenderDtos:null,
      teacherList:[],
      studentList:[],
      teamid:'',
      activeType:'',
      courseTypeList:[],
      studentSubmitedData:{},
      classGroupStudents:[],
      courseTimeForm:{
        timeList:[]
      },
      organId:'',
      organCourseTime:{},
      classCourseMinuteMap:{}
    };
  },
  async mounted(){
    // 1.查询该分部下得所有课程时长
    // 2.组成select需要得选项并且指定


         this.teamid = this.$route.query.id;
        MusicStore.dispatch('getBaseInfo', {
          data: { musicGroupId: this.teamid }
        }).then(async (res) => {
          this.organId =res.data.musicGroup.organId

          try{
           const res = await getOrganCourseDurationSettings({organId:this.organId})
           this.organCourseTime = res.data;

           this.setTimeList(res.data)

          }catch{}
        })
  },
  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
      this.courseTypeList = getCourseType(this.activeType)
      this.studentSubmitedData = {
        name:'',
        seleched:this.studentList.map(stu=> {return stu.userId})
      }
    this.courseTimeForm.timeList.map(item=>{
     this.classCourseMinuteMap[item.type]=item.value
    })
    // this.classMaxCourseNumMap;
    this.classCouresTimeList ={}
    for(let key in this.classCourseMinuteMap){
      this.classCouresTimeList[key] =  this.classMaxCourseNumMap[key]*this.classCourseMinuteMap[key]
    }

    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() {
       this.$refs.courseTimeForms.validate(_=>{
        if(_){
      const forms = this.getForms();

      let musicGroupPaymentCalenderDtos = []
      // 判断有没有缴费项目(因为又可能没有)
      // let flag = false
      let arr = []
      for (const form of forms) {
         let data =  form.getData()
        if(data=='error'){
          arr.push(data)
        }
        if(data&&data!='error'){
          musicGroupPaymentCalenderDtos.push(data)
        }
      }
      if(arr.length>0){
        return
      }

           this.musicGroupPaymentCalenderDtos = musicGroupPaymentCalenderDtos
      this.init()
        }
      })
      // 弹出最后一页


    },
    submitResetClass(){
      this.$refs.classSetting.submit()
    },
    setTimeList(organCourseTime){

      this.addCourseType.map(course=>{
        let arr = []
      if(organCourseTime[course]){
         arr =organCourseTime[course].split(',')
      }else {
        arr = [classTime[course]]
      }
        this.courseTimeForm.timeList.push({type:course,value:'',label:courseType[course],list:arr})
      })
    },
    setCourseTime(item,val){
      console.log(this.payInfo)
      let obj = {...this.payInfo}
      for(let k in obj){
        if( obj[k][item.type]){
         let courseCurrentPrice =val?val* obj[[k]][item.type].unitPrice:0
         let courseTotalMinuties = val?val*obj[[k]][item.type].courseTotalNum:0
           this.$emit('resetPayInfo',item.type,courseCurrentPrice,courseTotalMinuties)
        }
      }
      this.payInfo = obj;

    }
  },

};
</script>
<style lang="scss" scoped>
.studentTitle {
  width: 120px !important;
  text-align: right;
  display: inline-block;
  color: #409eff;
}
.dialog-footer {
  text-align: right;
}

</style>