pbl-student-table/src/components/dialog/addClassDialog.vue

<template>
  <div>
    <el-dialog
      :title="lang.ssSelectClass"
      :visible.sync="show"
      :append-to-body="true"
      width="800px"
      height="80%"
      class="addNewPP2"
    >
      <div class="check_classBox" v-loading="isLoading">
        <div class="check_class_right">
          <span>{{ lang.ssGrade }}</span>
          <div
            class="check_class"
            :class="{ activeX: gradeId == '' }"
            @click="(gradeId = ''), getClass()"
          >
            {{ lang.ssAllGrades }}
          </div>
          <el-tooltip
            placement="top"
            :content="item.name"
            v-for="(item, index) in gradeList"
            :key="index"
          >
            <div
              class="check_class"
              :class="{ activeX: gradeId == item.id }"
              @click="(gradeId = item.id), getClass()"
            >
              {{ item.name }}
            </div>
          </el-tooltip>
        </div>
        <div class="check_class_left">
          <div class="check_class_all_box">
            <div class="check_class_left_title">{{ lang.ssClass }}</div>
            <!-- <div style="display:flex;align-items:center;margin-left:auto;">
              <el-checkbox
                v-model="checkAll"
                @change="handleCheckAllChange"
                class="all_check"
                >全选</el-checkbox
              >
            </div> -->
          </div>
          <!-- <div class="class_item" style="position:absolute; margin:0" v-if="grade2.length">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          </div> -->
          <!-- <el-checkbox-group
            v-model="checkboxList2"
            class="check_class_item"
            @change="InviteChange"
            v-if="grade2.length"
          >
            <div v-for="item in grade2" :key="item.id" class="class_item">
              <el-checkbox :label="item.id">
                {{ item.name }}
              </el-checkbox>
            </div>
          </el-checkbox-group> -->
          <div class="classItem" @click="classItemClick(item)" :class="{classActiveItem:checkboxList2.map(i=>i.id).includes(item.id)}" v-for="item in grade2" :key="item.id">
            <div class="ci_left">
              <div>{{ item.name }}</div>
              <span v-if="item.studentNum>=0">{{ lang.ssStudentNum.replace(/\*/g, item.studentNum) }}</span>
            </div>
            <div class="ci_right">

              <svg v-show="checkboxList2.map(i=>i.id).includes(item.id)" t="1756864121172" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4441" width="200" height="200"><path d="M476.808045 0.000043C213.401753 0.106685-0.031993 213.68973 0 477.074693S213.551052 953.98938 476.94668 954.021373s476.957344-213.412417 477.085315-476.808045A477.010665 477.010665 0 0 0 476.808045 0.000043z m273.761252 353.369671L441.861388 661.853674a43.1901 43.1901 0 0 1-62.023117 0L202.214984 484.251715a43.864079 43.864079 0 1 1 62.033781-62.033782l147.21959 147.21959 277.89897-276.86454a43.861946 43.861946 0 1 1 62.023117 62.033781z m0 0" p-id="4442" fill="#4CAF51"></path></svg>
            </div>
          </div>
          <div v-if="!grade2.length">{{ lang.ssNoData }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="b_bottom">
					<div @click="close()">{{ lang.ssCancel }}</div>
          <div class="b_b_submit" @click="submit()">{{ lang.ssConfirm }}</div>
				</div>
        <!-- <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { myMixin } from "@/mixins/mixin.js";
  export default {
    mixins: [myMixin],
    props: {
      courseDetail: {
        type: Object,
        default: () => {}
      }
    },
    data(){
      return {
        show:false,
        gradeId:"",
        gradeList:[],
        checkAll:false,
        checkboxList2:[],
        grade2:[],
        grade:[],
        oid:this.$route.query.oid,
        classJuri:[],
        classSearch:"",
        isLoading:false,
      }
    },
    methods:{
      open(data){
        let _classList = data.classList?JSON.parse(JSON.stringify(data.classList)):[];
        this.checkboxList2 = _classList;
        this.getClass();
        this.selectGrage();
        this.show = true;

      },
      close(){
        this.show = false;
      },
      init(){
        this.gradeId = "";
        this.classSearch = "";
      },
      getClass(){
        let params = {
          oid: this.oid,
          gid: this.gradeId,
          cn: this.classSearch
        };
        this.isLoading = true;
        this.ajax
        .get(this.$store.state.api + "selectClassBySchoolSearch2", params)
        .then(res => {
          this.isLoading = false;
          if (!this.grade.length) {
            this.grade = res.data[0];
          }
          this.grade2 = res.data[0];
          this.classJuri = res.data[0];
          let _check = [];
          let _check2 = [];
          for (var i = 0; i < this.grade2.length; i++) {
            var gid = this.grade2[i].id;
            _check.push(gid);
          }
          for (var i = 0; i < this.checkboxList2.length; i++) {
            var _id = this.checkboxList2[i];
            if (_check.indexOf(_id) !== -1) {
              _check2.push(_id);
            }
          }
          this.checkAll = _check2.length === _check.length;
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
      },
      selectGrage() {
      let params = {
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectGrageBySchool", params)
        .then(res => {
          this.gradeList = res.data[0];
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
      submit() {
        if (
          this.courseDetail.userid == this.$route.query.userid &&
          this.checkboxList2.length &&
          this.$route.query.org == '16ace517-b5c7-4168-a9bb-a9e0035df840' &&
          this.courseDetail.state == '7'
        ) {

          // 获取endTime为现在
          let endDate = new Date();
          let endTime = endDate.toLocaleString("zh-CN", {
            hour12: false,
            timeZone: "Asia/Shanghai"
          }).replace(/\//g, "-");

          // 随机20~50分钟
          let randomMinutes = Math.floor(Math.random() * 31) + 20;
          let startDate = new Date(endDate.getTime() - randomMinutes * 60 * 1000);
          let startTime = startDate.toLocaleString("zh-CN", {
            hour12: false,
            timeZone: "Asia/Shanghai"
          }).replace(/\//g, "-");

          let courseTime = randomMinutes;
          this.syncClassData2({
            courseId: this.courseDetail.courseId,
            title: this.courseDetail.title,
            courseGrade: this.checkboxList2[0].id,
            courseTime: courseTime,
            startTime: startTime,
            endTime: endTime,
          });

          let params = [
            {
              uid: this.courseDetail.userid,
              cid: this.courseDetail.courseId,
              type: "5",
              time: randomMinutes * 60,
            },
          ];
          this.ajax
          .post(this.$store.state.api + "addOperationTimeT2", params)
          .then((res) => {})
          .catch((err) => {
            console.error(err);
          });
        }
        let data = JSON.parse(JSON.stringify(this.checkboxList2));

        this.$emit("success", data);
      },
      classItemClick(item){
        if(this.checkboxList2.map(i=>i.id).includes(item.id)){
          this.checkboxList2 = this.checkboxList2.filter(i => i.id != item.id);
        }else{
          this.checkboxList2.push(item)
        }
      }
    }

  }
</script>

<style  scoped>
.addNewPP2 >>> .el-dialog__body {
  padding: 5px 0;
}

.addNewPP2 >>> .el-dialog {
  margin-top: 5vh !important;
  border-radius: 10px !important;
}

.check_classBox {
  height: 400px;
  display: flex;
  border-top: 1.5px solid #e7ebf1;
  border-bottom: 1.5px solid #e7ebf1;
}

.check_class_right {
  width: 200px;
  border-right: 1px solid #e7ebf1;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding: 15px 0;
  box-sizing: border-box;
  padding-top: 40px;
  position: relative;
}

.check_class_right>span{
  font-size: 14px;
  text-align: left;
  position: absolute;
  left: 10px;
  top: 10px;
  font-weight: 700;
}

.check_class {
  width: 85%;
  border-radius: 5px;
  height: 50px;
  min-height: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  border: solid 1px #E2E9EE;
}

.check_class.activeX {
  background: #E8F5E8;
  color: #4CAF51;
  font-weight: 700;
  border-color: #4CAF51;
}

.check_class + .check_class {
  margin-top: 15px;
}

.check_class_left {
  background: #fafafa;
  width: calc(100% - 130px);
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.check_class_all_box {
  display: flex;
  margin-bottom: 10px;
}

.all_check {
  display: flex;
  align-items: center;
  padding: 2px 0 0;
  margin-left: 10px;
}

.all_check >>> .el-checkbox__label {
  line-height: 18px;
}

.check_class_left_title {
  font-size: 14px;
  font-weight: 700;
}

.check_class_item {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 45px);
  overflow: auto;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.class_item:first-child {
  /* margin: 0 15px 15px 67px; */
}
.class_item {
  margin: 0 15px 15px 0;
}

.class_item:hover >>> .el-checkbox__label {
  color: #409eff;
}

.class_item >>> .el-checkbox__label {
  color: #0e1e33;
}

.class_item:hover >>> .el-checkbox__inner {
  border-color: #409eff;
}

.class_item >>> .el-checkbox,
.class_item >>> .el-checkbox__input {
  display: flex;
  align-items: center;
}

.classItem{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  border: solid 1px #E1E8ED;
  border-radius: 10px;
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
}

.classItem::after{
  content: "";
  height: 100%;
  width: 8px;
  background: #E1E8ED;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
}

.ci_left{
  width: calc(100% - 70px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ci_left>div{
  color: #000;
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 700;
}

.ci_left>span{
  font-size: 14px;
  color: #8F8F8F;
}

.ci_right{
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.ci_right>svg{
  width: 20px;
  height: 20px;
}

.classActiveItem{
  border: solid 1px #4CAF51;
}

.classActiveItem::after{
  background: #4CAF51;
}

.b_bottom {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 0 20px;
}

.b_bottom>div{
  padding: 10px 25px;
  background: #fff;
  color: #000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #EEEEEE;
  margin-left: 15px;
  cursor: pointer;
}

.b_bottom>.b_b_submit{
  background: #1A1A1A;
  color: #D4D4D4;
  border-color: #1A1A1A;
}

</style>