baoman / Ezquiz_Platform

  <template>

    <div class="main" ref="main">
      <div class="sel-dia">
        <p class="tit">
          <span>报表数据配置</span>
          <i class="el-icon-close" @click="goHome"></i>
        </p>
        <div class="select-box">
          <div class="sel-item sel-item2">
            <span class="sel-label">班级：</span>
            <div class="sel-d">
              <p class="p-all">
                <el-checkbox :indeterminate="isIndeterminateClass" v-model="allClass"
                  @change="handleCheckAllChangeClass">全选</el-checkbox>
              </p>
              <p class="sel-p">
                <el-checkbox-group v-model="query.classId" @change="changeclass">
                  <el-checkbox v-for="item in classList" :label="item.value" :key="item.value">{{ item.label
                  }}</el-checkbox>
                </el-checkbox-group>
              </p>
            </div>

          </div>

          <div class="sel-item sel-item2">
            <span class="sel-label">科目：</span>
            <div class="sel-d">
              <p class="p-all">
                <el-checkbox :indeterminate="isIndeterminateSub" v-model="allSubject"
                  @change="handleCheckAllChangeSub">全选</el-checkbox>
              </p>
              <p class="sel-p">
                <el-checkbox-group v-model="query.subjectNames" @change="CheckedSub">
                  <el-checkbox v-for="item in subjectList" :label="item" :key="item">{{ item
                  }}</el-checkbox>
                </el-checkbox-group>
              </p>
            </div>

          </div>

          <div class="sel-item">
            <span class="sel-label">日期：</span>
            <div class="d1">
              <el-date-picker v-model="query.startDay" type="date" @change="handleChangeTimeStart" placeholder="选择日期时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
              ~
              <el-date-picker v-model="query.endDay" type="date" placeholder="选择日期时间" @change="handleChangeTimeEnd"
                value-format="yyyy-MM-dd">
              </el-date-picker>

            </div>

            <p class="p1">
              <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']">本周</span>
              <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']">本月</span>
              <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']">本季度</span>

            </p>

          </div>
        </div>
        <div class="foot-box">
          <el-button type="primary" round @click="goList">确定</el-button>
          <el-button type="danger" round @click="goHome">取消</el-button>

        </div>

      </div>

    </div>
  </template>
  
  <script>

  import { formatDate } from "utils";

  export default {

    data() {
      return {

        code: "",

        role: "",

        date: "", //今天-昨天-本周
        query: {
          //搜索条件

          classId: [],
          subjectNames: [],

          startDay: "",
          endDay: "",

        },

        classList: [], //班级
        subjectList: [], //科目

  
        isIndeterminateClass: true,//全选样式
        allClass: false,//全选状态
        isIndeterminateSub: true,//全选样式
        allSubject: false,//全选状态

      };
    },
    async created() {

      this.code = localStorage.getItem("csCode") || "";

      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;

      this.query.subjectNames = [];

      await this._QueryClassList();

      if (!this.query.classId) {
        return;
      }

      await this._QuerySubjectList();

      await this.setDate(1);

      let startDay = this.query?.startDay;
      if (!startDay) {
        this.query.startDay = new Date();
        this.query.endDay = new Date();
      }
    },

    methods: {

      handleCheckAllChangeClass(val) {
        this.isIndeterminateClass = false
        this.query.classId = val ? this.classList.map(item => item.value) : [];

      },

      changeclass(value) {
        console.log(value)
        let checkedCount = value.length;
        this.allClass = checkedCount === this.classList.length;
        this.isIndeterminateClass = checkedCount > 0 && checkedCount < this.classList.length;

      },

      handleCheckAllChangeSub(val) {
        this.isIndeterminate = false
        this.query.subjectNames = val ? this.subjectList : [];

      },

      CheckedSub(value) {
        console.log(value)
        let checkedCount = value.length;
        this.allSubject = checkedCount === this.subjectList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.subjectList.length;

      },

      setDate(index) {
        const that = this;
        this.date = index == this.date ? "" : index;
        let aYear = new Date().getFullYear();
        let aMonth = new Date().getMonth() + 1;

        that.query.startDay = "";
        that.query.endDay = "";
        switch (index) {
          case 1:

            let day = new Date().getDay();
            if (day == 0) {
              //中国式星期天是一周的最后一天
              day = 7;
            }

            day--;

            let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
            that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;

          case 2:

            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;

          case 3:

            if (aMonth > 0 && aMonth < 4) {

              aMonth = "1";

            } else if (aMonth > 3 && aMonth < 7) {

              aMonth = "4";

            } else if (aMonth > 6 && aMonth < 10) {

              aMonth = "7";

            } else {
              aMonth = "10";
            }
  
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
        }
        this.page = 1;

      },
      handleChangeTimeStart(val) {

        this.date = "";
        if (this.query.endDay) {
          if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.startDay = "";
          }
        }
      },
      handleChangeTimeEnd(val) {

        this.date = "";

        if (this.query.startDay && val) {

          if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
            this.query.endDay = "";
          }
        }
      },

      async _QueryClassList() {

        const fetchClassList =
          this.role == "ROLE_BANZHUREN"

            ? this.$request.cTClassList :
            this.role == "ROLE_PERSONAL"
              ? this.$request.pClassList
              : this.$request.tClassList;

        const { data, status, info } = await fetchClassList();

        if (status === 0) {
          this.classList = data.list.map((item) => {
            return {
              value: item.classId,

              label: item.className,

            };
          });

          this.classList.length ? this.query.classId.push(this.classList[0].value) : "";

        } else {
          this.$message.error(info);
        }
      },
      async _QuerySubjectList() {

        const fetchSubjectList =
          this.role == "ROLE_BANZHUREN"

            ? this.$request.cTSubjectList :
            this.role == "ROLE_PERSONAL"
              ? this.$request.pSubjectList
              : this.$request.tSubjectList;

        const classIds = this.classList.map(item => item.value) || []

        const { data, status, info } = await fetchSubjectList({

          classIds: classIds,

        });
        if (status === 0) {

          this.subjectList = data.subjectNames || [];
          // if (this.role == "ROLE_BANZHUREN") {
          //   this.query.subjectNames = this.subjectList
          // } else {
          this.subjectList.length ? this.query.subjectNames.push(this.subjectList[0]) : "";
          // }

        } else {
          this.$message.error(info);
        }
      },

  
      //回主页
      goHome() {
        this.$router.push({
          path: '/index'
        })

      },

      //去列表
      goList() {
        this.$router.push({
          path: '/testList',
          query: {
            params: JSON.stringify(this.query)

          }

        })
      }

    },
  };

  </script>

  <style>
  div::-webkit-scrollbar {
    width: 3px;
    height: 10px;
  }

  div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
  }
  </style>

  <style lang="scss" scoped>

  .main {

    height: 100%;

    background: rgba($color: #000000, $alpha: .3);
    display: flex;
    justify-content: center;

  }

  
  .sel-dia {
    margin-top: 100px;
    width: 750px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 460px;
    display: flex;
    flex-direction: column;
  
    .tit {
      text-align: center;
      position: relative;
      padding: 20px 0 12px;
      font-size: 18px;
      font-weight: 500;
      flex-shrink: 0;
  
      .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        background: #e2e2e2;
        border-radius: 0 0 0 24px;
        box-sizing: border-box;
        padding-left: 6px;
        font-size: 18px;
        cursor: pointer;
  
        &:hover {
          color: #f30;
        }
      }

    }

  
    .select-box {
      flex: 1;
      overflow-y: auto;
      padding: 0 30px;
  
      .sel-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
  
        .sel-label {
          width: 60px;
          margin-right: 10px;
          flex-shrink: 0;
          font-size: 15px;
          font-weight: 500;
        }
  
        :deep(.el-input__inner) {
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
        }
  
        :deep(.el-input__suffix) {
          .el-input__icon {
            line-height: 36px;
          }
        }
  
        :deep(.el-input__inner) {
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
  
          .el-input__icon {
            line-height: 36px;
          }
        }
  
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 160px;
          height: 36px;
          line-height: 36px;
  
          :deep(.el-input__icon) {
            line-height: 36px;
          }
        }
      }
  
      .sel-item2 {
        align-items: flex-start;
        line-height: 20px;
        padding-top: 10px;
  
        .p-all {
          padding-bottom: 6px;
        }
      }
  
      .p1 {
        .s1 {
          margin-left: 20px;
          cursor: pointer;
          color: #7f7f7f;
  
          &:hover {
            color: #409eff;
          }
  
          &.active {
            color: #667ffd;
          }
        }
      }
    }
  
    .foot-box {
      flex-shrink: 0;
      padding: 12px 0 20px;
      display: flex;
      justify-content: center;
  
      .el-button {
        margin: 0 30px;
      }

    }

  }

  </style>