dy-admin-manager/src/views/teamDetail/componentCourse/addCompound.vue

<template>
  <div class="fixedBox" @click="isLook = true">
    <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-table
              :data="dataList"
              height="300px"
              :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
            >
              <el-table-column align="center" label="课程编号" width="110">
                <template slot-scope="scope">
                  <div>{{ scope.row.id }}</div>
                </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.teacherName }}({{ scope.row.actualTeacherId }})
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" width="200px" label="上课时间">
                <template slot-scope="scope"
                  >{{
                    scope.row.startClassTime
                      ? scope.row.startClassTime.substr(0, 16)
                      : ""
                  }}-{{
                    scope.row.endClassTime
                      ? scope.row.endClassTime.substr(11, 5)
                      : ""
                  }}</template
                >
              </el-table-column>
              <el-table-column align="center" width="100px" label="是否结算">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.isSettlement ? "是" : "否" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="cancleCom(scope.row)"
                    >取消</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="addBtnList">
            <el-button
              v-permission="'courseSchedule/batchDelete?page=teamCourseList'"
              @click="removeCourse"
              :disabled="!dataList.length > 0"
              type="primary"
              
              >批量删除</el-button
            >

            <el-button type="primary" @click="resetClass" 
              v-permission="'courseSchedule/batchCourseAdjust'"

              >课程调整</el-button
            >
            <el-button type="primary" @click="submitClass" 
            v-permission="'courseSchedule/courseMerge'"
              >课程合并</el-button
            >
          </div>

          <i class="el-icon-copy-document" slot="reference"></i>
        </el-popover>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="show"
      v-if="show"
      title="临时合课信息"
      append-to-body
      width="800px"
    >
      <compoundClass
        @closeReset="closeReset"
        @cancaleMerge="cancaleMerge"
        :isDisabled="true"
        @getList="getList"
        :idList="idList"
        :dataList="dataList"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="resetCourseVisible"
      v-if="resetCourseVisible"
        @closeReset="closeReset"
      title="课程调整"
      append-to-body
      width="800px"
    >
      <resetCourse
        :idList="idList"
        :dataList="dataList"
        @getList="getList"
        @cancaleMerge="cancaleMerge"
        @closeReset="closeReset"
      />
    </el-dialog>
  </div>
</template>
<script>
import compoundClass from "./compoundClass";
import resetCourse from "./resetCourse";
export default {
  props: ["compoundList"],
  components: { compoundClass, resetCourse },
  data() {
    return {
      radio: "",
      dataList: this.compoundList,
      isLook: false,
      show: false,
      idList: "",
      courseTime: 0,
      resetCourseVisible: false,
    };
  },
  methods: {
    cancleCom(row) {
      this.$emit("cancleCompound", row);
    },
    clearCom() {
      this.$emit("clearCom");
    },
    submitClass() {
      // if (!this.radio) {
      //   this.$message.error("请选择一节主课");
      //   return;
      // }
      let arr = [];
      let idList = [];
      let isFlage = false;
      this.dataList.forEach((com) => {
        arr.push(com.type);
        idList.push(com.id);
        if (
          com.groupType != "MUSIC" ||
          com.type == "MUSIC_NETWORK" ||
          com.type == "HIGH_ONLINE"
        ) {
          this.$message.error("只有乐团的线下课可以合并");
          isFlage = true;
          return;
        }
        if (com.status != "NOT_START") {
          this.$message.error("只有未开始的课可以合并");
          isFlage = true;
          return;
        }
        if (com.newCourseId > 0 || com.beMerged) {
          this.$message.error("已经合并课程不可再次合并");
          isFlage = true;
          return;
        }
        if (com.isLock) {
          this.$message.error("已锁定的课程不能合并");
          isFlage = true;
          return;
        }
      });
      if (isFlage) return;
      /**
       *  scope.row.groupType == 'MUSIC' &&
                    scope.row.type != 'MUSIC_NETWORK' &&
                    scope.row.type != 'HIGH_ONLINE' &&
                    scope.row.status == 'NOT_START' &&
                     scope.row.newCourseId <= 0
                     !scope.row.beMerged &&
                    !scope.row.isLock
       */
      if (arr.indexOf("HIGH") != -1) {
        arr = [...new Set(arr)];
        if (arr.length != 1) {
          this.$message.error("基础技能课只能和基础技能课合并");
          return;
        }
      }

      if (this.dataList.length <= 1) {
        this.$message.error("请至少选择2节课程");
        return;
      }
      // 做判断
      this.idList = idList.join(",");
      this.show = true;
      // this.isLook = false;
    },
    getList() {},
    closeReset() {
      this.clearCom();
      this.show = false;
      this.isLook = false;
      this.resetCourseVisible = false
      this.$emit("getList");
    },
    cancaleMerge() {
      this.show = false;
      this.resetCourseVisible = false;
      this.isLook = true;
    },
    removeCourse() {
      this.$emit("removeCourse");
    },
    resetClass() {
      // 判断条件
      if (!this.checkCourseTimer()) {
        this.$message.error("请选择相同的课程时长");
        return
      }
      let isNotStart = false;
      let  idList =[];
      this.dataList.forEach((course) => {
        idList.push(course.id)
        if (course.status != "NOT_START") {
          isNotStart = true;
        }
      });
      if (isNotStart) {
        this.$message.error("请选择未开始的课程");
        return;
      }
      let isEqual = this.dataList.every(coures=>{
        return coures.musicGroupId==this.dataList[0].musicGroupId&&coures.groupType==this.dataList[0].groupType
      })
      if (!isEqual) {
        this.$message.error("请选择相同的课程组");
        return;
      }

       this.idList = idList;
      //  开始选择课程
      this.resetCourseVisible = true;
    },
    checkCourseTimer() {
      let arr = [];
      this.dataList.forEach((course) => {
        let dayjs = this.$helpers.dayjs;
        arr.push(
          Math.abs(
            dayjs(course.startClassTime).diff(course.endClassTime, "Minute")
          )
        );
      });
      if ((arr = [...new Set(arr)].length != 1)) {
        return false;
      } else {
        this.courseTime = arr[0];
        return true;
      }
    },
  },
  watch: {
    compoundList(val) {
      this.dataList = val;
    },
  },
};
</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;
}
.addBtnList {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
  padding-bottom: 10px;
}
</style>