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"
        :courseTypesByType="courseTypesByType"
        :form="form"
        :payInfo="payInfo"
        @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"],
  components: { classListItem, classPayList },
  data() {
    return {
      form: {
        classList: [
          {
            classId: "",
            studentList: [],
            courseList: {},
            index: "",
            type: "",
            classList: this.classList,
          },
        ],
      },
      showSecondVisable: false,
      classIdList: [],
      activeClassList: [],
    };
  },
  mounted() {
    this.activeClassList = [...new Set(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;
            this.showSecondVisable = true;
          } catch {}
        }
      });
    },
    filterClassList(id) {
      let arr = [];
      this.form.classList.forEach((item) => {
        if (item.classId) {
          arr.push(item.classId);
        }
      });
      console.log(arr)
      if (id) {
        let item;
        // 找到对应的班级
        this.classList.forEach((classes) => {
          if (classes.id == id) {
            item = classes;
          }
        });
        // 过滤类型不一样的
        this.activeClassList = this.classList.filter((classes) => {
          return item.type == classes.type;
        });
        this.activeClassList = this.activeClassList.map((classes) => {
          if (arr.indexOf(classes.id) != -1) {
            classes.disabled = true;
          } else {
            classes.disabled = false;
          }
          return classes;
        });
      } else {
        if (arr.length == 0) {
          this.activeClassList = [...new Set(this.classList)];
          console.log(this.activeClassList)
        } else {
          this.activeClassList =this.activeClassList.map((classes) => {
            if (arr.indexOf(classes.id) != -1) {
              classes.disabled = true;
            } else {
              classes.disabled = false;
            }
            return classes;
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>