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>
          <div class="topWrap">
            <el-select
              placeholder="请选择主班"
              v-model="radio"
              clearable
              @change="changeMasterClass"
            >
              <el-option
                v-for="(item, index) in dataList"
                :label="item.name"
                :value="item.id"
                :key="index"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  String(item.id)
                }}</span>
              </el-option>
            </el-select>
            <el-button type="text" style="float: right" @click="clearCom"
              >清空列表</el-button
            >
          </div>

          <div>
            <!-- <el-radio-group v-model="radio" @change="changeMasterClass"> -->
            <el-table
              ref="studentRef"
              :data="dataList"
              :key="studentRefKey"
              height="300px"
              :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
            >
              <el-table-column align="center" label="班级编号" width="110">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                  <!-- <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 | classType }}</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="180px"
                prop="teacherName"
                label="已选学生数"
              >
                <!--    -->
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.chioseStudentNum ? scope.row.chioseStudentNum : 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"
            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"
        :activeRow="activeRow"
        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"
        @refresh="refresh"
      />
      <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: [],
      isLook: false,
      show: false,
      idList: "",
      studentList: [],
      studentListModalVisible: false,
      activeRow: null,
      calenderStudentVisible: false,
      studentIds: [],
      masterClassGroupId: "",
      classGroupStudents: [],
      mergeInfo: {},
      studentRefKey: "12321321",
    };
  },
  created() {
    that = this;
  },
  methods: {
    cancleCom(row) {
      if (row.id == this.radio) {
        this.radio = "";
      }
      this.$emit("cancleCompound", row);
    },
    clearCom() {
      this.radio = "";
      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 && com.studentList?.length > 0) {
          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() {
      this.$emit("getList");
    },
    refresh() {
      this.calenderStudentVisible = false;
      this.clearCom();
      this.getList();
    },
    closeReset() {
      this.clearCom();
      this.show = false;
      this.$emit("getList");
    },
    showStudentList(row) {
      // row.id
      this.activeRow = row;
      
      this.studentListModalVisible = true;
    },
    closeStudentView(list) {
      if(list && list.length > 0) {
        this.activeRow.studentList = list;
        this.activeRow.chioseStudentNum = list.length;
        this.dataList = this.dataList.map((item, index) => {
          if (item.id == this.activeRow.id) {
            return this.activeRow;
          } else {
            return item;
          }
        });
        this.$emit("updataCompoundList", this.dataList);
        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) {
      console.log("watche111", val);
      this.dataList = val;
      this.studentRefKey = Math.random();
      console.log("watche112222", this.$refs.studentRef);
    },
  },
  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;
    }
  }
}
::v-deep .el-divider--horizontal {
  margin: 0 !important;
}
.topWrap {
  margin: 10px 0;
  padding: 0 20px 0 0;
}
.minus {
  float: right;
  line-height: 44px;
  padding-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
</style>