pbl-teacher-table/src/components/pages/test/check/index.vue

<template>
  <div class="pb_content" style="background: #fff" v-loading="loading">
    <div class="pb_content_body" style="position: relative; margin: 0">
      <div class="right">
        <div class="courseTop">
          <div class="stepsNav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                :to="{
                  path:
                    '/test?userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&org=' +
                    org +
                    '&role=' +
                    role,
                }"
                >评测管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>
                <span style="color: rgb(15, 126, 255)">查看评测</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
        </div>
        <div class="step_box" ref="stepBox">
          <div class="pb_content_body">
            <div class="student_table">
              <el-table
                ref="table"
                :data="tableData"
                border
                :height="tableHeight"
                :fit="true"
                v-loading="isLoading"
                style="width: 100%"
                :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  prop="username"
                  label="提交人"
                  min-width="15"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="提交时间"
                  min-width="15"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="是否批改"
                  min-width="15"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.type == 3 ? '是' : '否' }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                    <el-button
                      @click="getTest(scope.row)"
                      type="primary"
                      size="small"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="student_page">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: this.$route.query.cid,
      title: "",
      testType: [],
      see: false,
      cJson: [],
      loading: false,
      look: "",
      tableHeight: 500,
      isLoading: false,
      pageSize: 10,
      total: 0,
      page: 1,
      tableData: [],
    };
  },
  watch: {},
  methods: {
    retrunCourse() {
      this.goTo(
        "/test?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
      );
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    changeHeight() {
      this.tableHeight = this.$refs.stepBox.offsetHeight - 100;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight = this.$refs.stepBox.offsetHeight - 100;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    getTest(row) {
      this.$router.push(
        "/checkTest2?cid=" +
        row.courseid +
          "&userid=" +
          this.userid +
          "&userid2=" +
          row.userid +
          "&tid=" +
          row.id +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&type=2" +
          "&role=" +
          this.role
      );
    },
    getData() {
      this.isLoading = true;
      let params = {
        cid: this.cid,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorksPage", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.page = 1;
      this.changeHeight();
      this.getData();
    });
  },
};
</script>

<style scoped>
.pb_content {
  height: 100% !important;
  /* margin: 0 20px 0 20px; */
}

.pb_content_body {
  width: 100% !important;
  height: 100%;
}

.right {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}

.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 0;
}

.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.step_box {
  width: calc(100% - 40px);
  margin: 0 auto;
  height: calc(100% - 38px);
  overflow: auto;
}

.el-table >>> .even_row {
  background-color: #f1f1f1 !important;
}

.student_page {
  margin-top: 10px;
}
</style>