dy-admin-manager/src/views/teamDetail/components/modals/classList-group.vue

<template>
  <div>
    <el-form :model="form" ref="form">
      <classListItem v-for="(item, index) in form.classList" :key="index" :index="index" :item="item"
        @deteleClass="deteleClass" :soundList="soundList" :form="form" :classList="activeClassList" @filterClassList="filterClassList" />
    </el-form>
    <!-- <el-button
      icon="el-icon-circle-plus-outline"
      plain
      type="info"

      style="width: 100%; margin: 20px 0"
      @click="addClass"
      :disabled="form.classList.length >= classList.length"
      >添加班级</el-button
    > -->
    <el-dialog :visible.sync="showSecondVisable" title="缴费信息设置" append-to-body width="800px">
      <classPayList :classIdList="classIdList" :addCourseType="addCourseType" :courseTypesByType="courseTypesByType"
        :classMaxCourseNumMap="classMaxCourseNumMap" :form="form" :teacherList="teacherList" :payInfo.sync="payInfo"
        @resetPayInfo="resetPayInfo" @close="showSecondVisable = false" v-if="showSecondVisable" />
    </el-dialog>
  </div>
</template>
<script>
import classListItem from "./classList-item";
import classPayList from "./class-pay-list";
import { getDefaultPaymentCalender } from "@/api/buildTeam";
export default {
  props: ["classList", "courseTypesByType", "teacherList", "soundList"],
  components: { classListItem, classPayList },
  data() {
    return {
      form: {
        classList: [
          {
            classId: "",
            studentList: [],
            courseList: {},
            index: "",
            type: "",
            classList: this.classList,
          },
        ],
      },
      showSecondVisable: false,
      classIdList: [],
      activeClassList: [],
      addCourseType: [],
    };
  },
  mounted() {
    this.activeClassList = this.classList;
  },
  methods: {
    addClass() {
      this.form.classList.push({
        classId: "",
        studentList: [],
        courseList: {},
        index: "",
        type: "",
        classList: this.classList,
      });
    },
    deteleClass(index) {
      this.form.classList.splice(index, 1);
    },
    gotoSecond() {
      this.$refs.form.validate(async (res) => {
        if (res) {
          let flag = false;
          this.form.classList.forEach((item) => {
            if (item.studentList.length <= 0) {
              flag = true;
            }
          });
          if (flag) {
            this.$message.error("每个班级至少勾选一名学员");
            return;
          }
          this.classIdList = this.form.classList.map((item) => {
            return item.classId;
          });
          try {
            let result = await getDefaultPaymentCalender(this.classIdList);
            this.payInfo = result.data.defaultPaymentCalender;
            this.addCourseType = result.data.groupTypeSet;
            this.classMaxCourseNumMap = result.data.classMaxCourseNumMap;
            this.showSecondVisable = true;
          } catch { }
        }
      });
    },
    filterClassList(id) {
      let arr = [];
      this.form.classList.forEach((item) => {
        if (item.classId) {
          arr.push(item.classId);
        }
      });
      if (id) {
        let item;
        // 找到对应的班级
        this.classList.forEach((classes) => {
          if (classes.id == id) {
            item = classes;
          }
        });
        this.form.classList.forEach((classes) => {
          if (classes.classId == id) {
            classes.type = item.type;
          }
        });

        // 过滤类型不一样的
        this.activeClassList = this.classList.filter((classes) => {
          return item.type == classes.type;
        });
        this.addDisabled(arr);
      } else {
        if (arr.length == 0) {
          this.activeClassList = this.classList;
        } else {
          this.addDisabled(arr);
        }
      }
    },
    addDisabled(arr) {
      this.activeClassList = this.activeClassList.map((classes) => {
        return {
          ...classes,
          disabled: arr.indexOf(classes.id) != -1,
        };
      });
    },
    resetPayInfo(key, value, time) {
      console.log(value, time);
      console.log(this.payInfo);
      let obj = { ...this.payInfo };
      for (let k in obj) {
        if (obj[k][key]) {
          obj[k][key].courseCurrentPrice = value;
          obj[k][key].courseOriginalPrice = value;
          obj[k][key].courseTotalMinuties = parseInt(time);
        }
      }
      this.payInfo = obj;
    },
  },
};
</script>
<style lang="scss" scoped></style>