dy-admin-manager/src/views/teamDetail/componentClass/classCompound.vue

<template>
  <div class="fixedBox">
    <el-card>
      <div class="boxWrap">
        <p>
          班级合并<span style="color: red"> {{ compoundList.length }} </span>
        </p>
        <el-popover placement="top" v-model="isLook" trigger="manual">
          <div>
            <p class="title">
              班级合并列表
              <i class="el-icon-minus minus" @click="isLook = false"></i>
            </p>

            <el-divider></el-divider>
          </div>
          <el-button type="text" style="float: right" @click="clearCom"
            >清空列表</el-button
          >
          <div>
            <el-radio-group v-model="radio" @change="changeMasterClass">
              <el-table
                :data="dataList"
                height="300px"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
              >
                <el-table-column align="center" label="主班" width="110">
                  <template slot-scope="scope">
                    <el-radio :label="scope.row.id"></el-radio>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  width="180px"
                  label="班级名称"
                  prop="name"
                ></el-table-column>
                <el-table-column align="center" label="班级类型">
                  <template slot-scope="scope">
                    <div>{{ scope.row.type | coursesType }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  width="180px"
                  prop="teacherName"
                  label="已选学生数"
                >
                  <!--    -->
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.studentList ? scope.row.studentList.length : 0
                      }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作" width="200px">
                  <template slot-scope="scope">
                    <el-button type="text" @click="cancleCom(scope.row)"
                      >取消</el-button
                    >
                    <el-button
                      type="text"
                      @click="showStudentList(scope.row)"
                      :disabled="scope.row.id == radio"
                      >添加学生</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-radio-group>
          </div>
          <el-button
            type="primary"
            size="mini"
            style="float: right; margin-top: 20px"
            @click="submitClass"
            >确定</el-button
          >
          <i
            class="el-icon-copy-document"
            slot="reference"
            @click="isLook = true"
          ></i>
        </el-popover>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="studentListModalVisible"
      title="学员列表"
      append-to-body
      width="800px"
    >
      <viewStudentList
        :classId="activeRow.id"
        :disabledList="allStudentList"
        :list="studentList"
        :chioseList="activeRow.studentList"
        v-if="studentListModalVisible"
        :showOk="true"
        :isChiose="true"
        @close="closeStudentView"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="calenderStudentVisible"
      title="学员缴费列表"
      append-to-body
      width="800px"
    >
      <!--   studentIds:[],
      masterClassGroupId:'',
      classGroupStudents:[] -->
      <calenderStudentList
      ref='calenderStudentList'
        v-if="calenderStudentVisible"
        :classList="dataList"
        :studentIds="studentIds"
        :masterClassGroupId="masterClassGroupId"
        :classGroupStudents="classGroupStudents"
        :mergeInfo="mergeInfo"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="calenderStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import compoundClass from './compoundClass' compoundClass
import viewStudentList from "./student-list";
import calenderStudentList from "./calenderStudentList";
import { getClassAllStudent } from "@/api/studentManager";
import { getStudentPaymentCalenders } from "@/api/buildTeam";
let that;
export default {
  props: ["compoundList"],
  components: { viewStudentList, calenderStudentList },
  data() {
    return {
      radio: "",
      dataList: this.compoundList,
      isLook: false,
      show: false,
      idList: "",
      studentList: [],
      studentListModalVisible: false,
      activeRow: null,
      calenderStudentVisible: false,
      studentIds: [],
      masterClassGroupId: "",
      classGroupStudents: [],
      mergeInfo: {},
    };
  },
  created() {
    that = this;
  },
  methods: {
    cancleCom(row) {
      this.$emit("cancleCompound", row);
    },
    clearCom() {
      this.$emit("clearCom");
    },
    async submitClass() {
      if (!this.radio) {
        this.$message.error("请选择一个主班");
        return;
      }
      // let arr = []
      // 主班id
      // 第一个是所有学员 this.radio
      // 班级和学生id的键值对
      // 第三个是主班编号 this.radio
      let idList = []; // 所有的班级id
      this.classGroupStudents = [];
      let flag = false;
      this.dataList.forEach((com) => {
        // arr.push(com.type)
        if (
          (!com.studentList && com.id != this.radio) ||
          (com.studentList?.length <= 0 && com.id != this.radio)
        ) {
          flag = true;
        }
        if (com.id != this.radio) {
          this.classGroupStudents.push({
            [com.id]: com.studentList.map((stu) => stu.userId).join(","),
          });
        }
        idList.push(com.id);
      });
      if (this.dataList.length <= 1) {
        this.$message.error("请至少选择2个班级");
        return;
      }
      if (flag) {
        this.$message.error("请保证每个班至少勾选一名学员");
        return;
      }
      // 做判断
      this.show = true;
      this.isLook = false;
      this.masterClassGroupId = this.radio;
      this.studentIds = this.allStudentList.map((stu) => {
        return stu.userId;
      });

      try {
        const rest = await getStudentPaymentCalenders({
          studentIds: this.studentIds,
          masterClassGroupId: this.masterClassGroupId,
          classGroupStudents: this.classGroupStudents,
        });
        this.mergeInfo = rest.data;
        this.calenderStudentVisible = true;
      } catch (e) {
        console.log(e);
      }

      // 试着请求
    },
    getList() {},
    closeReset() {
      this.clearCom();
      this.show = false;
      this.$emit("getList");
    },
    showStudentList(row) {
      // row.id
      this.activeRow = row;
      getClassAllStudent({ classGroupId: row.id }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data.map((item) => {
            return {
              userId: item.userId,
              nickName: item.name,
              gender: item.gender,
              phone: item.parentsPhone,
              subjectNames: item.subjectName,
            };
          });
          this.studentListModalVisible = true;
        }
      });
    },
    closeStudentView(list) {
      this.activeRow.studentList = list;
      this.dataList.splice(1, 0);
      this.studentListModalVisible = false;
    },
    changeMasterClass(val) {
      this.dataList.forEach((classes) => {
        if (classes.id == val) {
          classes.studentList = null;
          this.dataList.splice(1, 0);
        }
      });
    },
    submitInfo(){
      this.$refs.calenderStudentList.submit()
    }
  },
  watch: {
    compoundList(val) {
      this.dataList = val;
    },
  },
  computed: {
    allStudentList() {
      let arr = [];
      that.dataList.forEach((classes) => {
        if (classes.studentList) {
          arr = arr.concat(
            classes.studentList.map((stu) => {
              stu.classId = classes.id;
              return stu;
            })
          );
        }
      });
      return arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  line-height: 44px;
}
.fixedBox {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 100;
  width: 200px;
  background-color: #fff;
  font-size: 14px;

  .boxWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    i {
      font-size: 18px;
      cursor: pointer;
    }
  }
}
/deep/.el-divider--horizontal {
  margin: 0 !important;
}
.minus {
  float: right;
  line-height: 44px;
  padding-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
</style>