zc_saas_admin/src/views/education/classManageMent/classHoursReview/studyTimes.vue

<template>
  <div id="studyTimes">
    <StudentInfo
      :userData="userData"
      :totalTime="totalTime"
      :numTotal="numTotal"
    ></StudentInfo>
    <Study-tables
      class="box"
      ref="study"
      v-if="tablesData"
      :tablesData="tablesData"
      :userData="userData"
      :setData="setData"
      :getUserInfo="getUserInfo"
    ></Study-tables>
  </div>
</template>

<script>
import StudyTables from "./component/StudyTables.vue";
import StudentInfo from "@/components/Study/StudentInfo.vue";
export default {
  props: ["setData"],
  data() {
    return {
      loading: false,
      userData: {},
      setTimeDOM: null, //定时器
      totalTime: [],
      numTotal:0,
      tablesData: undefined,
    };
  },
  created() {
    this.$api
      .inquireGradegradelockPeriodStatus({
        gradeId: Number(this.setData.id),
        userId: Number(this.setData.userId),
        goodsId: Number(this.setData.goodsId),
      })
      .then((res) => {
        if (res.msg) {
          this.$alert(`${res.msg}正在操作该页面,请关闭当前页`, "提示", {
            dangerouslyUseHTMLString: true,
            showClose: false,
          }).then((result) => {
            const SESSION = sessionStorage.getItem("hoursAudit");
            let parseSession = {};
            if (SESSION) {
              parseSession = JSON.parse(SESSION);
            }
            if (parseSession.options.length > 1) {
              this.$emit("removeTab", this.setData.keyId);
            } else {
              this.$store
                .dispatch("tagsView/delView", this.$route)
                .then((results) => {
                  this.$router.go(-1);
                });
            }
          });
        } else {
          this.getSetTime();
          // 每10秒调用一次 锁定页面
          this.setTimeDOM = setInterval(() => {
            this.getSetTime();
          }, 10000);
        }
      });
  },
  mounted() {
    this.getUserInfo(true);
  },
  methods: {
    /**
     * 每10秒调用一次 锁定页面
     */
    getSetTime() {
      this.$api
        .inquireGradegradelockPeriod({
          gradeId: Number(this.setData.id),
          userId: Number(this.setData.userId),
          goodsId: Number(this.setData.goodsId),
        })
        .then((res) => {});
    },
    /**
     *
     * @param {Number} index 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 节
     */
    getNewList(index, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(this.listData.tableData3, index, res.data);
        this.getUserInfo();
      });
    },
    /**
     *
     * @param {Number} a 章索引
     * @param {Number} b 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 章 节
     */
    getNewListchapt(a, b, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData2[a].classPeriodSectionList,
          b,
          res.data
        );
        this.getUserInfo();
      });
    },
    /**
     *
     * @param {Number} a 模块索引
     * @param {Number} b 章索引
     * @param {Number} c 节索引
     * @param {Number} int 节记录索引
     * @param {Object} item 节完整数据
     * @remards 模块 章 节
     */
    getNewListMores(a, b, c, int, item) {
      let data = {
        courseId: item.courseId,
        moduleId: item.moduleId,
        chapterId: item.chapterId,
        numIndex: int,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
        gradeId: this.setData.id,
      };
      if (item.type === 3) {
        data.sectionId = item.id;
      }
      if (item.type === 4) {
        data.examId = item.id;
      }
      this.$api.inquireGradegradelistPeriodAuditStatus(data).then((res) => {
        this.$set(
          this.listData.tableData1[a].classPeriods[b].classPeriodSectionList,
          c,
          res.data
        );
        this.getUserInfo();
      });
    },
    //获取用户信息
    getUserInfo(isS = false) {
      this.$api
        .inquireGradegradelistUserlistPeriod({
          gradeId: this.setData.id,
          userId: this.setData.userId,
          goodsId: this.setData.goodsId,
        })
        .then((res) => {
          this.userData = res.rows[0];
          isS && this.search();
        });
    },
    changeData(data) {
      let obj = {};
      data.forEach((e) => {
        if (e.type == 5) {
          e.classPeriodSectionList = [JSON.parse(JSON.stringify(e))];
        }
        // 区分章和模块卷
        if (e.type == 1) {
          e.classPeriods &&
            e.classPeriods.forEach((ele, i) => {
              if (ele.type == 5) {
                ele.classPeriodSectionList = [JSON.parse(JSON.stringify(ele))];
                e.arr = [ele];
                e.classPeriods.splice(i, 1);
              }
            });
        }
        (obj[e.type] || (obj[e.type] = [])).push(e);
      });
      if (obj["3"]) {
        obj["6"] = obj["3"];
        delete obj["3"];
      }
      return obj;
    },
    //获取学时审核数据
    search() {
      let data = {
        gradeId: this.setData.id,
        userId: this.setData.userId,
        goodsId: this.setData.goodsId,
      };
      this.loading = true;
      this.$api
        .inquireGradegradelistPeriodAudit(data)
        .then((res) => {
          this.tablesData = this.changeData(res.rows);
          if (res.rows.length > 0) {
            this.totalTime = [
              res.rows[0].startTotalTime,
              res.rows[0].endTotalTime,
            ];
            this.numTotal = res.rows[0].secTotalTime
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  components: {
    StudyTables,
    StudentInfo,
  },
  /**
   * 离开页面前销毁定时器
   */
  beforeDestroy() {
    if (this.setTimeDOM) {
      clearInterval(this.setTimeDOM);
    }
  },
};
</script>
<style lang="less" scoped>
.top_style {
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
  & > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    line-height: 48px;
    & > .left {
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 2px;
        height: 18px;
        background: #0c5dfb;
        margin-right: 8px;
      }
      span {
        color: #666;
        font-weight: bold;
      }
    }

    & > span {
      font-size: 14px;
    }
  }
  & > .info_img {
    display: flex;
    height: 210px;
    ul {
      width: 320px;
      li {
        margin-bottom: 12px;
        font-size: 14px;
      }
    }
    .img_by {
      flex: 1;
      display: flex;
      align-items: center;
      .pos_bottom {
        position: absolute;
        z-index: 1;
        bottom: 0px;
        width: 100%;
        height: 32px;
        background-color: rgba(53, 53, 53, 0.6);
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 32px;
      }
      & > .photoSty1 {
        width: 152px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 106px;
          height: 150px;
          margin: 29px auto 0px;
          display: block;
        }
      }
      & > .photoSty2 {
        width: 328px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 243px;
          height: 154px;
          margin: 27px auto 0px;
          display: block;
        }
        &:last-of-type {
          margin-right: 0px;
        }
      }
    }
  }
}
/deep/ .el-table__expanded-cell {
  background: #f5f5f5;
}
/deep/ .el-table__expanded-cell {
  padding: 0px !important;
}

#studyTimes {
  display: flex;
  flex-direction: column;
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.box {
  flex: 1;
  overflow: hidden;
}
</style>