|  | @@ -0,0 +1,335 @@
 | 
	
		
			
				|  |  | +<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"
 | 
	
		
			
				|  |  | +        @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: 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() {
 | 
	
		
			
				|  |  | +       this.$emit("getList");
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    refresh(){
 | 
	
		
			
				|  |  | +      this.clearCom()
 | 
	
		
			
				|  |  | +      this.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>
 |