dy-admin-manager/src/views/teamDetail/components/courseTransModals/transClass.vue

<template>
  <div>
    <el-dialog
      title="创建班级"
      append-to-body
      width="800px"
      :visible.sync="transClassVisible"
    >
      <div v-if="transClassVisible">
        <el-alert type="warning" :closable="false" class="tramsAlert">
          <p class="title">温馨提醒：</p>
          <p class="descript">您正在操作声部课、集训声部课转换线上基础技能课</p>
          <p class="descript">
            若转换后仅创建1个线上基础技能班，转换后班级将根据转换前课程总时长排课
          </p>
          <p class="descript">
            若转转后创建多个线上基础技能班，则转换后班级按转换前课时数排课
          </p>
        </el-alert>
        <el-form :model="form" ref="form">
          <div
            class="classWrap"
            v-for="(item, index) in form.classList"
            :key="index"
          >
            <h2 class="classTitle">
              <span>线上基础技能班{{ index + 1 }}</span>
              <i
                @click="remove(index)"
                v-if="form.classList.length > 1"
                class="close-icon el-icon-delete-solid"
              ></i>
            </h2>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item
                  :prop="'classList.' + index + '.name'"
                  :rules="[
                    {
                      required: true,
                      message: '输入班级名称',
                      trigger: 'blur',
                    },
                  ]"
                  ref="paymentDate"
                >
                  <template slot="label">
                    <p style="position: relative">
                      <span style="color: #f56c6c; margin-right: 4px">*</span>
                      班级名称
                    </p>
                  </template>
                  <el-input
                    v-model="item.name"
                    style="width: 100%"
                    placeholder="请输入班级名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="'声部'"
                  style="margin-right: 0"
                  :prop="'classList.' + index + '.subjectIdList'"
                  :rules="[
                    { required: true, message: '请选择声部', trigger: 'blur' },
                  ]"
                >
                  <template slot="label">
                    <p style="position: relative">
                      <span style="color: #f56c6c; margin-right: 4px">*</span>
                      网络教室声部
                    </p>
                  </template>
                  <el-select
                    v-model="item.subjectIdList"
                    style="width: 100% !important"
                    clearable
                    collapse-tags
                    filterable
                    placeholder="请选择声部"
                  >
                    <el-option
                      v-for="(item, index) in soundList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item
                  label="主教老师"
                  :prop="'classList.' + index + '.coreTeacher'"
                  :rules="[{ required: true, message: '请选择主教老师' }]"
                >
                  <template slot="label">
                    <p style="position: relative">
                      <span style="color: #f56c6c; margin-right: 4px">*</span>
                      主教老师
                    </p>
                  </template>
                  <el-select
                    v-model.trim="item.coreTeacher"
                    placeholder="请选择主教老师"
                    clearable
                    filterable
                    style="width: 100% !important"
                  >
                    <el-option
                      v-for="(item, index) in teacherList"
                      :key="index"
                      :label="item.realName"
                      :value="String(item.id)"
                    >
                      <span style="float: left">{{ item.realName }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ String(item.id) }}</span
                      >
                    </el-option>
                  </el-select>
                  <!-- <remote-search :commit="'setTeachers'" v-model="form.coreTeacher"  /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <template slot="label">
                    <p style="position: relative">
                      &nbsp;
                      <!-- <span style="color: #f56c6c; margin-right: 4px">*</span> -->
                    </p>
                  </template>
                  <div class="studentTitle">
                    <p>
                      已选择<span style="color: red">{{
                        item.studentList.length
                      }}</span
                      >名
                    </p>
                    <el-button type="text" @click="chioseStudent(index)"
                      >选择学员 >></el-button
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-button class="addButton" @click="addClass">添加+</el-button>
        </el-form>
        <transStudent
          ref="transStudent"
          @close="
            () => {
              showStudentVisible = false;
            }
          "
          @submit="setStudent"
          v-if="showStudentVisible"
          :soundList="soundList"
          :studentList="studentList"
          :activeListStudent="activeListStudent"
          activeType="HIGH_ONLINE"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transClassVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotoNext">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCourseScheduleConvert } from "../../api";
import { findSound, getTeacher } from "@/api/buildTeam";
import transStudent from "./transStudent";
export default {
  props: {
    students: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      transClassVisible: false,
      getStudentList: [],
      form: {
        classList: [
          {
            expectStudentNum: 6,
            groupType: "MUSIC",
            musicGroupId: this.$route.query.id,
            name: "",
            studentList: [],
            coreTeacher: "",
            type: "HIGH_ONLINE",
          },
        ],
      },
      soundList: [],
      teacherList: [],
      teamid: "",
      organId: "",
      showStudentVisible: false,
      activeStudentIndex: 0,
      activeListStudent: [],
      studentList: [],
    };
  },
  components: {
    transStudent,
  },
  mounted() {
    this.init();
  },
  methods: {
    async openDialog() {
      // 获取列表
      this.transClassVisible = true;
    },
    getList() {},
    gotoNext() {
      this.$refs.form.validate((flag) => {});
    },
    remove(index) {
      this.form.classList.splice(index, 1);
    },
    init() {
      this.teamid = this.$route.query.id;
      this.organId = this.$route.query.organId;
      getTeacher({ organId: this.organId }).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
          if (this.teacherList.length <= 0) {
            this.$bus.$emit("showguide", ["teacher"]);
            return;
          }
        }
      });
      findSound({ musicGroupId: this.teamid }).then((res) => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      });
    },
    addClass() {
      this.form.classList.push({
        expectStudentNum: 6,
        groupType: "MUSIC",
        musicGroupId: this.$route.query.id,
        name: "",
        studentList: [],
        coreTeacher: "",
        type: "HIGH_ONLINE",
      });
    },
    setStudent(student) {
      this.form.classList[this.activeStudentIndex].studentList = [...student];
      // 提交完的学生
    },
    chioseStudent(index) {
      this.activeStudentIndex = index;
      this.activeListStudent = [];
      this.students.forEach((item) => {
        if (
          this.form?.classList[index]?.studentList.indexOf(item.userId) != -1
        ) {
          this.activeListStudent.push(item);
        }
      });
      console.log(this.waitStudentList, this.waitStudentList.length);
      this.studentList = this.waitStudentList;
      this.showStudentVisible = true;

      this.$nextTick(() => {
        console.log(this.$refs.transStudent);
        this.$refs.transStudent.openDialog();
      });
    },
  },
  computed: {
    chioseCourse() {
      return this.activeCourseList;
    },
    waitStudentList() {
      let chioseIdList = [];
      this.form.classList.forEach((classes) => {
        classes.studentList.forEach((stu) => {
          chioseIdList.push(stu);
        });
      });
      console.log(chioseIdList)
      let arr = this.students.filter((item) => {
        console.log(chioseIdList.indexOf(item.userId) != -1)
        return chioseIdList.indexOf(item.userId) == -1;

      });
      return arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.subtitle {
  margin-bottom: 20px;
  span {
    color: red;
  }
}
.tramsAlert {
  margin-bottom: 20px;
  p {
    font-size: 12px;
    line-height: 20px;
  }
}
.classWrap {
  background-color: #f2f2f2;
  padding: 20px 20px 10px;
  margin-bottom: 20px;
  .classTitle {
    // width: 760px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .close-icon {
      color: #c1c1c1;
      cursor: pointer;
      // background: #c1c1c1;
    }
  }
}
::v-deep .el-form-item__label {
  display: block;
  width: 100%;
  text-align: left;
  &::before {
    content: "" !important;
    position: absolute;
    color: transparent;
    margin-right: 4px;
  }
}
::v-deep .el-form-item__content {
  display: block;
  margin-left: 0;
}
.addButton {
  width: 100%;
}
.studentTitle {
  display: flex;
  flex-direction: row;
  width: 100%;
  p {
    margin-right: 10px;
  }
}
</style>>