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

<template>
  <div style="padding-bottom: 20px">
    <div class="search">
      <div class="student_search">
        <div>班级筛选</div>
        <el-select v-model="classChoose" @change="searchStudent">
          <el-option label="全部" value="">全部</el-option>
          <el-option
            v-for="(c, cIndex) in classJuri"
            :key="cIndex"
            :value="c.id"
            :label="c.name"
          ></el-option>
        </el-select>
      </div>
      <div class="rightSearch">
        <div class="searchImg">
          <img src="../../../assets/icon/search.png" alt="" />
        </div>
        <el-input v-model="sName" placeholder="请输入课程名称"></el-input>
        <el-button size="mini" type="primary" @click="searchStudent"
          >查询</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      :fit="true"
      v-loading="isLoading"
      style="width: 100%"
      :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="cName" align="center" label="班级" min-width="25%">
      </el-table-column>
      <el-table-column
        prop="course"
        align="center"
        label="课程"
        min-width="40%"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="25%">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="lookEvaCourse(scope.row.id, scope.row.courseid)"
            >报告</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <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>
    <el-dialog
      title="选择学生"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div v-if="!isLoading1">
        <div v-if="studentJuri.length == 0">暂无数据</div>
        <el-table
          v-else
          :data="studentJuri"
          border
          v-loading="isLoading1"
          style="width: 100%; margin-top: 10px"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="sName"
            align="center"
            label="姓名"
            min-width="25%"
          >
          </el-table-column>
          <el-table-column label="选择" align="center" min-width="25%">
            <template slot-scope="scope">
              <input
                type="checkbox"
                :id="scope.row.userid"
                :value="scope.row.sName"
                @change="isChooseS(scope.row.userid)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>正在加载数据中...</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCStudentReport">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["ooid","checkid"],
  data() {
    return {
      sName: "",
      classChoose: "",
      isChooseClass: "",
      page: 1,
      total: 0,
      classJuri: [],
      tableData: [],
      dialogVisible: false,
      isLoading: false,
      isLoading1: false,
      isChooseList: [],
      studentJuri: [],
    };
  },
  watch: {
    ooid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.getClass();
        this.getCData();
        this.$forceUpdate();
      },
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    getCStudentReport() {
      if (this.isChooseList.length > 0) {
        this.$emit("getCStReport", this.isChooseList, this.isChooseCourseid);
        this.dialogVisible = false;
      } else {
        this.$message.error("请选择至少一项课程！");
      }
    },
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCData();
    },
    searchStudent() {
      this.page = 1;
      this.getCData();
    },
    lookEvaCourse(id, courseid) {
      this.isChooseClass = id;
      this.isChooseCourseid = courseid;
      this.getSData();
      this.dialogVisible = true;
    },
    isChooseS(uid) {
      if (this.isChooseList.length > 0) {
        if (this.isChooseList.indexOf(uid) == -1) {
          this.isChooseList.push(uid);
        } else {
          this.isChooseList.splice(this.isChooseList.indexOf(uid), 1);
        }
      } else {
        this.isChooseList.push(uid);
      }
      this.$forceUpdate();
    },
    getClass() {
      let params = {
        oid: this.ooid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.classJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getSData() {
      this.isLoading1 = true;
      let params = {
        cid: this.isChooseClass,
        courseid: this.isChooseCourseid,
      };
      this.ajax
        .get(this.$store.state.api + "selectCStudent", params)
        .then((res) => {
          this.isLoading1 = false;
          this.studentJuri = [];
          for (var i = 0; i < res.data[0].length; i++) {
            this.studentJuri.push(res.data[0][i]);
          }
        })
        .catch((err) => {
          this.isLoading1 = false;
          console.error(err);
        });
    },
    getCData() {
      this.isLoading = true;
      let params = {
        cu: this.sName,
        cn: this.classChoose,
        oid: this.ooid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectCr", 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() {
    if(this.checkid){
          this.classChoose = this.checkid
        }
    this.getClass();
    this.getCData();
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.check_diy >>> .el-dialog__body {
  padding-bottom: 0;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px 0;
}
.search > div:nth-child(2) {
  position: relative;
}
.searchImg {
  width: 25px;
  height: 25px;
  position: absolute;
  z-index: 9;
  top: 8px;
  left: 5px;
}
.searchImg > img {
  width: 100%;
  height: 100%;
}
.search > div:nth-child(2) >>> .el-input__inner {
  width: 250px;
  text-indent: 20px;
}
.el-table >>> .even_row {
  background-color: #f1f1f1;
}
.student_search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.student_search > div:nth-child(1) {
  margin-right: 10px;
}
.rightSearch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightSearch >>> .el-button {
  margin-left: 5px;
  height: 35px;
  width: 80px;
  font-size: 14px;
}
.student_page {
  margin-top: 10px;
}
</style>