src/views/basic/test/index.vue

<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 = this.$store.getters.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);
      if (this.role == "ROLE_BANZHUREN") {
        this._QuerySubjectList();
      } else {
        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,
          };
        });
        // if (this.role == "ROLE_BANZHUREN") {
        //   this.query.classId = this.classList.length
        //     ? this.classList[0].value
        //     : "";
        // } else {
        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;
      let classIds = this.query.classId;
      const { data, status, info } = await fetchSubjectList({
        classIds: classIds,
      });
      if (status === 0) {
        this.subjectList = data.subjectNames || [];
        this.subjectList.length
          ? this.query.subjectNames.push(this.subjectList[0])
          : "";
      } else {
        this.$message.error(info);
      }
    },
    //回主页
    goHome() {
      this.$router.push({
        path: "/index",
      });
    },
    //去列表
    goList() {
      if (this.query.classId.length == 0) {
        this.$message.warning("请选择班级！");
        return;
      }
      if (this.query.subjectNames.length == 0) {
        this.$message.warning("请选择科目！");
        return;
      }
      let query = { ...this.query };
      this.$router.push({
        path: "/testList",
        query: {
          params: JSON.stringify(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: 0.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>