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" :teacherList="teacherList"
        :cooperationList="teacherList" @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-merge";
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",
    "teacherList",
  ],
  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>