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

<template>
  <div
    class="pb_content"
    style="
      background: unset;
      overflow: auto;
      padding: 20px;
      margin: 0;
      box-sizing: border-box;
    "
  >
    <div
      style="
        position: absolute;
        width: 95%;
        top: 0;
        height: 100%;
        overflow: auto;
        left: 50%;
        transform: translateX(-50%);
      "
    >
      <div
        class="pb_content_body"
        style="
          background: #fff;
          padding: 0px 25px;
          box-sizing: border-box;
          border-radius: 5px;
        "
      >
        <div>
          <div
            class="pb_head"
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span class="sub_head">学生评价管理</span>
            <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
            <div
              class="returnWorks"
              @click="
                goTo('/works?userid=' + userid + '&oid=' + oid + '&org=' + org)
              "
            >
              <el-button>返回</el-button>
            </div>
          </div>
          <div class="student_head">
            <div class="student_search">
              <div>学生筛选</div>
              <el-select v-model="className" @change="search">
                <el-option label="所有班级" value="">所有班级</el-option>
                <el-option
                  v-for="item in classJuri"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="cn"
                placeholder="筛选学生名称"
                @input="search"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="pb_content_body">
        <div>
          <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="name"
                label="学生名称"
                min-width="30"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="className"
                label="班级"
                min-width="40"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" min-width="30">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="getWorkData(scope.row)"
                    >查看课程</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="page"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="sdetailBox" v-if="dialogVisibleS">
          <StudentWorksDetail
            :uid="dataJson.userid"
            :ooid="oid"
            :oorg="org"
          ></StudentWorksDetail>
          <div class="cancelbox" v-if="dialogVisibleS">
            <el-button @click="cancel" type="primary" size="small"
              >返回</el-button
            >
          </div>
        </div>
  </div>
</template>

<script>
import StudentWorksDetail from "./components/studentWorksDetail.vue";
export default {
  components: {
    StudentWorksDetail,
  },
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      page: 1,
      total: 0,
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      type: this.$route.query.type,
      dialogVisibleS: false,
      className: "",
      cn: "",
      classJuri: [],
      tableData: [],
      dataJson: [],
      pageType: 1,
    };
  },
  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;
      this.getAllStudent();
    },
    search() {
      this.page = 1;
      this.getAllStudent();
    },
    cancel() {
      this.dataJson = [];
      this.dialogVisibleS = false;
    },
    getWorkData(row) {
      this.dataJson = row;
      this.dialogVisibleS = true;
    },
    //获取班级列表
    getClass() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.classJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getAllStudent() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
        cn: this.cn,
        cid: this.className,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectAllStudent", 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) => {
          this.isLoading = false;
          console.error(err);
        });
    },
  },
  created() {
    this.page = 1;
    this.getClass();
    this.getAllStudent();
  },
};
</script>

<style scoped>

.pb_head > span:nth-child(2) {
  /* font-size: 16px; */
  font-size: 26px;
  cursor: pointer;
  margin-left: 10px;
  /* color: #ab582f; */
  /* color: #409eff; */
  color: #999;
}
.pb_head > span:nth-child(2):hover {
  color: #000;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_page {
  margin-top: 10px;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.student_search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
  min-width: 60px;
}
.student_search > div:nth-child(4) {
  min-width: 100px;
  margin-left: 10px;
  cursor: pointer;
}
.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,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}

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

.returnWorks >>> .el-button {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.sdetailBox {
  height: 100%;
  position: absolute;
  top: 0;
  background: #fff;
  overflow: auto;
  z-index: 1;
  width: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 7%;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  padding: 0 90px 0px 0px;
  box-sizing: border-box;
}
</style>