pbl-teacher-table/src/components/pages/GM/school.vue

<template>
  <div
    class="pb_content"
    style="
      overflow: auto;
      margin: 0px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    "
  >
    <div>
      <div
        class="pb_content_body"
        style="
          background: #fff;
          padding: 0px 25px;
          box-sizing: border-box;
          border-radius: 5px;
        "
      >
        <div class="pb_head">
          <span>学校管理</span>
          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
        </div>
        <div class="student_head">
          <div class="student_search">
            <el-button
              size="small"
              type="primary"
              @click="dialogVisible = true"
              v-if="step == 0"
              >添加学校</el-button
            >
          </div>
        </div>

        <div class="student_table">
          <el-table
            ref="table"
            :data="tableData"
            stripe
            border
            :header-cell-style="{
              background: '#f1f1f1',
              'text-align': 'center',
            }"
            :cell-style="{ 'text-align': 'center' }"
            style="width: 100%"
            :height="tableHeight"
            v-loading="isLoading"
          >
            <el-table-column prop="name" label="学校名称" min-width="70">
            </el-table-column>
            <el-table-column prop="date" label="操作" min-width="30">
              <template slot-scope="scope">
                <div class="pb_buttonBox">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="updateS(scope.row.id, scope.row.name)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="deleteSchool(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </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>
    <el-dialog
      title="添加学校"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">学校名称</span>
        <el-input
          v-model="schoolName"
          style="width: 250px; margin: 15px 0px"
          placeholder="请输入学校名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSchool">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改学校"
      :visible.sync="dialogVisible1"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">学校名称</span>
        <el-input
          v-model="schoolName"
          style="width: 250px; margin: 15px 0px"
          placeholder="请输入学校名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateSchool">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      tableData: [],
      tableData1: [],
      tableData2: [],
      fileList: [],
      schoolName: "",
      typeName: "",
      bannerCourse: "",
      sTypeName: "",
      searchClassName: "",
      checkBannerCourse: "",
      noneBtnImg: false,
      isBanner: false,
      page: 1,
      total: 0,
      page1: 1,
      total1: 0,
      page2: 1,
      total2: 0,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      updateOid: "",
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      step: 0,
      pid: "",
      imgVisible: false,
      dialogImageUrl: "",
      uploadLoading: false,
      checkList: [],
      courseList: [],
    };
  },
  mounted() {
    this.$nextTick(function () {
      //   this.tableHeight =
      //     window.innerHeight - this.$refs.table.$el.offsetTop;
      //   if (this.tableHeight <= 530) {
      //     this.tableHeight = 530;
      //   }
      //   // 监听窗口大小变化
      //   let self = this;
      //   window.onresize = function () {
      //     self.tableHeight =
      //       window.innerHeight - self.$refs.table.$el.offsetTop;
      //     if (self.tableHeight <= 530) {
      //       self.tableHeight = 530;
      //     }
      //   };
    });
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    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;
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleClose(done) {
      done();
    },
    imgChange(file, fileList) {
      var _tmp = this.fileList;
      this.noneBtnImg = _tmp.length >= 1;
    },
    handleRemove(file) {
      var _tmp = this.fileList;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.fileList = _tmp;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = this.fileList[0].url;
      this.imgVisible = true;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.selectSchool();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.selectType();
    },
    handleCurrentChange2(val) {
      this.page2 = val;
      this.selectSType();
    },
    beforeUpload(data) {
      this.$refs.upload.uploadFiles;
      this.uploadLoading = true;
      var file = data.file;
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            _this.uploadLoading = false;
            if (err) {
              var a = _this.$refs.upload.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              //上传成功处理
              _this.fileList.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              console.log(data.Location);
              _this.imgChange();
            }
          });
      }
    },
    addBanner() {
      if (this.isBanner == true) {
        this.$confirm(
          "您已经添加过Banner了，如果您再提交将覆盖上次提交的Banner！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            var list = this.fileList;
            if (list.length == 0) {
              this.$message.error("请上传需要添加的banner");
              return;
            }
            if (this.time()) {
              let params = [
                {
                  p: list[0].url,
                  url: "",
                  uid: this.userid,
                  oid: this.updateOid,
                },
              ];
              this.ajax
                .post(this.$store.state.api + "addBanner", params)
                .then((res) => {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.dialogVisible6 = false;
                  this.init();
                })
                .catch((err) => {
                  this.$message.error("添加失败");
                  console.error(err);
                });
            }
          })
          .catch(() => {});
      } else {
        var list = this.fileList;
        if (list.length == 0) {
          this.$message.error("请上传需要添加的banner");
          return;
        }
        if (this.time()) {
          let params = [
            {
              p: list[0].url,
              url: "",
              uid: this.userid,
              oid: this.updateOid,
            },
          ];
          this.ajax
            .post(this.$store.state.api + "addBanner", params)
            .then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.dialogVisible6 = false;
              this.init();
            })
            .catch((err) => {
              this.$message.error("添加失败");
              console.error(err);
            });
        }
      }
    },
    setBannerUrl() {
      if (this.checkBannerCourse == "") {
        this.$message.error("请选择作为banner链接的课程");
        return;
      }
      this.bannerCourse = this.checkBannerCourse;
      this.dialogVisible7 = false;
    },
    selectSchool() {
      this.isLoading = true;
      let params = {
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectSchoolName", 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);
        });
    },
    addSchool() {
      let params = [
        {
          n: this.schoolName,
          cuid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addSchoolAdmin", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.schoolName = "";
          this.selectSchool();
        })
        .catch((err) => {
          this.$message.error("添加失败");
          console.error(err);
        });
    },
    updateS(id, name) {
      this.dialogVisible1 = true;
      this.schoolName = name;
      this.updateId = id;
    },
    updateP(id, name) {
      this.dialogVisible3 = true;
      this.typeName = name;
      this.updateId = id;
    },
    updateSPType(id, name) {
      this.dialogVisible5 = true;
      this.sTypeName = name;
      this.updateId = id;
    },
    updateSchool() {
      let params = {
        oid: this.updateId,
        n: this.schoolName,
      };
      this.ajax
        .get(this.$store.state.api + "updateSN", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible1 = false;
          this.updateId = "";
          this.schoolName = "";
          this.selectSchool();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    deleteSchool(id) {
      let params = [
        {
          id: id,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "deleteSchoolAdmin", params)
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.updateId = "";
          this.schoolName = "";
          this.selectSchool();
        })
        .catch((err) => {
          this.$message.error("删除成功");
          console.error(err);
        });
    },
    selectType(id) {
      this.tableData1 = [];
      this.tableData2 = [];
      this.step = 1;
      this.updateOid = id;
      let params = {
        page: this.page1,
      };
      this.ajax
        .get(this.$store.state.api + "selectPtype", params)
        .then((res) => {
          this.total1 = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
          this.selectBanner();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectBanner() {
      let params = {
        oid: this.updateOid,
      };
      this.ajax
        .get(this.$store.state.api + "selectBannerByOid", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.isBanner = true;
          } else {
            this.isBanner = false;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectSType(pid) {
      this.step = 2;
      if (pid != undefined) {
        this.pid = pid;
      }
      let params = {
        pid: pid != undefined ? pid : this.pid,
        oid: this.updateOid,
        page: this.page2,
      };
      this.ajax
        .get(this.$store.state.api + "selectStype", params)
        .then((res) => {
          this.total2 = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData2 = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addType() {
      let params = {
        n: this.typeName,
        uid: this.userid,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "addPtype", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible2 = false;
          this.typeName = "";
          this.selectType();
        })
        .catch((err) => {
          this.$message.error("添加失败");
          console.error(err);
        });
    },
    updatePtype() {
      let params = {
        n: this.typeName,
        tid: this.updateId,
      };
      this.ajax
        .get(this.$store.state.api + "updatePtype", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible3 = false;
          this.updateId = "";
          this.typeName = "";
          this.selectType();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    deletePtype(id) {
      let params = {
        tid: id,
      };
      this.ajax
        .get(this.$store.state.api + "deletePtype", params)
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.updateId = "";
          this.typeName = "";
          this.selectType();
        })
        .catch((err) => {
          this.$message.error("删除失败");
          console.error(err);
        });
    },
    addStype() {
      let params = {
        n: this.sTypeName,
        pid: this.pid,
        uid: this.userid,
        oid: this.updateOid,
      };
      this.ajax
        .get(this.$store.state.api + "addStype", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible4 = false;
          this.sTypeName = "";
          this.selectSType();
        })
        .catch((err) => {
          this.$message.error("添加成功");
          console.error(err);
        });
    },
    updateStype() {
      let params = {
        n: this.sTypeName,
        tid: this.updateId,
      };
      this.ajax
        .get(this.$store.state.api + "updatePtype", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible5 = false;
          this.updateId = "";
          this.sTypeName = "";
          this.selectSType();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    //打开添加弹窗
    addBannerUrlPop() {
      this.dialogVisible7 = true;
      this.searchClassName = "";
      this.Search();
    },
    init() {
      this.searchClassName = "";
      this.checkList = [];
      this.courseList = [];
      this.fileList = [];
      this.$refs.upload ? (this.$refs.upload.uploadFiles.length = 0) : "";
      this.noneBtnImg = false;
      this.dialogImageUrl = "";
      this.bannerCourse = "";
      this.checkBannerCourse = "";
    },
    Search() {
      this.checkList = [];
      let params = { t: this.searchClassName, oid: this.updateOid };
      this.ajax
        .get(this.$store.state.api + "getSearchCourseByoid", params)
        .then((res) => {
          this.courseList = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    deleteStype(id) {
      let params = {
        tid: id,
      };
      this.ajax
        .get(this.$store.state.api + "deletePtype", params)
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.updateId = "";
          this.sTypeName = "";
          this.selectSType();
        })
        .catch((err) => {
          this.$message.error("删除失败");
          console.error(err);
        });
    },
  },
  created() {
    this.page = 1;
    this.selectSchool();
  },
};
</script>
  
  <style scoped>
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.addBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tian1 {
  /* font-size: 16px; */
  margin-right: 10px;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_page {
  margin: 10px 0 0 45px;
}
.disUoloadSty >>> .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
.dialogBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogBox span {
  margin: 0 20px;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.student_search,
.student_search1 {
  display: flex;
  width: 100%;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.student_search1 {
  justify-content: space-between;
}

.student_table >>> .el-table--border td {
  border-right: 0px !important;
}

.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}

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

.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;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.r_diy >>> .el-dialog__footer {
  padding: 0;
}
.a_addBox {
  height: 570px;
  overflow: auto;
}

.workdates {
  height: 100%;
  position: absolute;
  top: 0;
  background: #fff;
  overflow: auto;
  z-index: 1;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  box-sizing: border-box;
}
.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  padding: 0 90px 0px 0px;
  box-sizing: border-box;
}
.cardList {
  font-size: 14px;
  height: 360px;
  overflow: auto;
}
.cardList div {
  margin-bottom: 18px;
}
.cardList div:last-child {
  margin-bottom: 0;
}
.cardHead {
  display: flex;
}
</style>