dy-admin-manager/src/views/teamDetail/componentCourse/addCompound.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="click">
          <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"
              size="mini"
              >批量删除</el-button
            >
            <el-button
              type="primary"
              @click="submitClass"
              size="mini"
              >课程合并</el-button
            >
          </div>

          <i class="el-icon-copy-document" slot="reference"></i>
        </el-popover>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="show"
      title="临时合课信息"
      append-to-body
      width="800px"
    >
      <compoundClass
        :show="show"
        v-if="show"
        @closeReset="closeReset"
        :isDisabled="true"
        @getList="getList"
        :idList="idList"
        :dataList='dataList'
      />
    </el-dialog>
  </div>
</template>
<script>
import compoundClass from "./compoundClass";
export default {
  props: ["compoundList"],
  components: { compoundClass },
  data() {
    return {
      radio: "",
      dataList: this.compoundList,
      isLook: false,
      show: false,
      idList: "",
    };
  },
  methods: {
    cancleCom(row) {
      this.$emit("cancleCompound", row);
    },
    clearCom() {
      this.$emit("clearCom");
    },
    submitClass() {
      // if (!this.radio) {
      //   this.$message.error("请选择一节主课");
      //   return;
      // }
      // let arr = []
      let idList = [];
      this.dataList.forEach((com) => {
        // arr.push(com.type)
        idList.push(com.id);
      });
      // 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.$emit("getList");
    },
    removeCourse() {
      this.$emit("removeCourse");
    },
  },
  watch: {
    compoundList(val) {
      console.log(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>