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"
        :form="form"
        :classList="activeClassList"
        @filterClassList="filterClassList"
      />
    </el-form>
    <!-- <el-button
      icon="el-icon-circle-plus-outline"
      plain
      type="info"
      size="small"
      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"],
  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>