pbl-teacher-table/src/components/pages/works.vue

<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>评价管理</span>
      <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
    </div>
    <div class="pb_content_body">
      <div class="student_head">
        <div class="student_search">
          <div>项目筛选</div>
          <el-select v-model="groupA" @change="search">
            <el-option value="0" label="我的课程"></el-option>
            <el-option value="1" label="他人课程"></el-option>
          </el-select>
          <el-input
            v-model="cn"
            placeholder="筛选项目名称"
            @input="search"
          ></el-input>
        </div>
      </div>
      <div class="student_table">
        <el-table
          ref="table"
          :data="tableData1"
          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="title"
            label="项目"
            min-width="30"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="uname"
            label="创建人"
            min-width="30"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            min-width="20"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" min-width="30">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="goTo('/worksDetail?cid=' + scope.row.courseId + '&userid=' + userid + '&oid=' + oid)"
                >查看学生</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-if="!isLoading && page"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      tableData1: [],
      subject: "",
      sClass: "",
      subjectJuri: [],
      projectJuri: [],
      grade: [],
      projectchoose: "",
      page: 1,
      total: 0,
      groupA: "0",
      cn: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    //获取班级列表
    getClass() {
      this.isLoading = true;
      let params = {
        cu: "",
        cn: this.sClass,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectClass", params)
        .then((res) => {
          this.isLoading = false;
          this.grade = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getProject() {
      this.isLoading = true;
      let params = {
        type: this.groupA,
        uid: this.userid,
        oid: this.oid,
        cn: this.cn,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getProject", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    search() {
      this.page = 1;
      this.getProject();
    },
  },
  created() {
    this.page = 1;
    // this.getClass();
    // this.getGroup();
    this.getProject();
  },
};
</script>

<style scoped>
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.student_head {
  margin-bottom: 20px;
}
.student_search {
  display: flex;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
  min-width: 60px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}

.student_page {
  margin-top: 10px;
}

.student_table >>> .el-table{
  height: 635px !important;
}

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