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

<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 5px;
      "
    >
      <div class="pb_head top">
      <span>班级管理</span>
      <div class="student_button">
        <el-button type="primary" class="bgColor" @click="dialogVisible = true"
          >添加班级</el-button
        >
      </div>
    </div>
          <div class="student_head">
        <div class="student_search">
          <span>
            <el-input
              placeholder="请输入班级名称"
              v-model="sClassName"
              clearable
            >
            </el-input>
          </span>
          <el-button type="primary" @click="searchClass">查询</el-button>
        </div>
      </div>
    </div>
    <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%; height: 60%"
          :header-cell-style="{ background: '#f1f1f1' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="name"
            label="班级名称"
            min-width="40%"
            align="center"
          >
          </el-table-column>
		  <el-table-column
            prop="pnum"
            label="人数"
            min-width="40%"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" min-width="20%">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="deleteClass(scope.row.id)"
                >删除</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"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="添加学生"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <el-form>
        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-input
            v-model="className"
            auto-complete="off"
            placeholder="请输入班级..."
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertClass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      sClassName: "",
      className: "",
      dialogVisible: false,
      tableData: [],
      page: 1,
      total: 0,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
    };
  },
  created() {
    this.page = 1;
    this.getClass();
  },
  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: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleClose(done) {
      done();
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    searchClass() {
      this.page = 1;
      this.getClass();
    },
    //新增班级
    insertClass() {
      let params = {
        name: this.className,
        oid: this.oid,
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "insertClass", params)
        .then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.sClassName = "";
          this.getClass();
          this.className = "";
        })
        .catch((err) => {
          this.$message({
            message: "新增失败",
            type: "error",
          });
          console.error(err);
        });
    },
    //获取班级列表
    getClass() {
      this.isLoading = true;
      let params = {
        // username: this.$store.state.userInfo.userid,
        cu: "",
        oid: this.oid,
        cn: this.sClassName,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectClass", 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);
        });
    },
    //删除班级
    deleteClass(id) {
      let params = {
        id: id,
      };
      if (this.time()) {
        this.$confirm("确定删除此课程吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ajax
              .get(this.$store.state.api + "deleteClass", params)
              .then((res) => {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                if (this.page != 1 && this.tableData.length == 1) {
                  this.page - 1;
                }
                this.getClass();
              })
              .catch((err) => {
                this.$message.error("删除失败");
                console.error(err);
              });
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.student_head >>> .el-button--primary {
  background-color: #2268bc;
}
.xls_button {
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  color: rgb(34, 104, 188);
}
.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;
  width: 300px;
}
.student_search span {
  margin: 0 10px 0 0;
}
.student_button {
  display: flex;
  overflow: hidden;
  height: 40px;
}
.student_button .el-button--primary {
  /* margin-right: 10px; */
}
.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: end;
  /* position: relative; */
  width: 100px;
  overflow: hidden;
}
.student_table {
  margin: 20px 0;
}

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

.top {
  display: flex;
  justify-content: space-between;
}

.bgColor {
  background: #2167bc;
}
</style>