pbl-teacher-table/src/components/pages/tencent/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;
          margin: 10px auto 0;
        "
      >
        <div class="pb_head">
          <span>学校管理</span>
          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
        </div>
      </div>
      <div class="allBox">
        <div class="halfBox" style="width: 58%">
          <div class="student_head">
            <div>参与校</div>
            <div>
              <el-button size="small" type="primary" @click="openAddSchool(1)">
                添加学校</el-button
              >
            </div>
          </div>
          <div style="margin: 0 auto 10px">
            <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="30">
                </el-table-column>
                <el-table-column label="联结学校" min-width="10" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.cname ? scope.row.cname : "暂无" }}
                    </div>
                  </template>
                </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="openNoCSchool(scope.row.id, scope.row.cname)"
                        >联结</el-button
                      >
                      <el-button
                        size="mini"
                        type="primary"
                        @click="
                          updateS(
                            scope.row.id,
                            scope.row.name,
                            scope.row.dest,
                            1
                          )
                        "
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="primary"
                        @click="deleteSchool(scope.row.id, 1)"
                        >删除
                      </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>
        <div class="halfBox" style="width: 40%">
          <div class="student_head">
            <div>协同校</div>
            <div>
              <el-button size="small" type="primary" @click="openAddSchool(2)">
                添加学校</el-button
              >
            </div>
          </div>
          <div style="margin: 0 auto 10px">
            <div class="student_table">
              <el-table
                ref="table"
                :data="tableData1"
                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="30">
                  <template slot-scope="scope">
                    <div class="ljBox">
                      <div :class="scope.row.oid ? 'isLj' : ''">
                        {{
                          scope.row.oid
                            ? scope.row.name + "(已联结)"
                            : scope.row.name
                        }}
                      </div>
                      <div class="isLjImg" v-if="scope.row.oid">
                        <img src="../../../assets/icon/isLj.png" alt="" />
                      </div>
                    </div>
                  </template>
                </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,
                            scope.row.dest,
                            2
                          )
                        "
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="primary"
                        @click="deleteSchool(scope.row.id, 2)"
                        >删除
                      </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="total1"
              v-if="page1"
              @current-change="handleCurrentChange1"
            ></el-pagination>
          </div>
        </div>
      </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>
      <div class="addBox">
        <span class="tian1">所属地区</span>
        <el-cascader
          size="large"
          style="width: 250px"
          clearable
          :options="region"
          v-model="selectedOptions"
          @change="handleChange"
          placeholder="请选择市区"
        >
        </el-cascader>
      </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>
      <div class="addBox">
        <span class="tian1">所属地区</span>
        <el-cascader
          size="large"
          style="width: 250px"
          clearable
          :options="region"
          v-model="selectedOptions"
          @change="handleChange"
          placeholder="请选择市区"
        >
        </el-cascader>
      </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>
    <el-dialog
      title="添加联结"
      :visible.sync="dialogVisible2"
      width="500px"
      :before-close="handleClose1"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">协同校</span>
        <el-select v-model="isCSchool" placeholder="请选择联结学校">
          <el-option label="取消联结" value="''"> </el-option>
          <el-option
            v-for="item in cShool"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addNoSchool">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import { regionData, CodeToText } from "element-china-area-data";
const Data = regionData;
export default {
  data() {
    return {
      region: Data,
      selectedOptions: [], //"440000","440100"
      place: [],
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      tableData: [],
      tableData1: [],
      schoolName: "",
      page: 1,
      total: 0,
      page1: 1,
      total1: 0,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      sType: 0,
      isCSchool: "",
      cShool: [],
    };
  },
  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: {
    handleChange() {
      if (!this.selectedOptions) {
        return;
      }
      var loc = "";
      this.place = [];
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
        this.place.push(this.selectedOptions[i]);
      }
      console.log(this.region);
    },
    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) {
      this.schoolName = "";
      this.place = [];
      done();
    },
    handleClose1(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.selectSchool();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.selectSchool1();
    },
    selectSchool() {
      this.isLoading = true;
      let params = {
        t: 1,
        org: this.org,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrgType", 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);
        });
    },
    selectSchool1() {
      this.isLoading = true;
      let params = {
        t: 2,
        org: this.org,
        page: this.page1,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrgType", params)
        .then((res) => {
          this.isLoading = false;
          this.total1 = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    addSchool() {
      let params = [
        {
          n: this.schoolName,
          org: this.org,
          d: this.place.join("/"),
          t: this.sType,
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertSchoolByOrg", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.schoolName = "";
          this.place = [];
          this.selectSchool();
          this.selectSchool1();
          this.sType = 0;
        })
        .catch((err) => {
          this.$message.error("添加失败");
          console.error(err);
        });
    },
    updateS(id, name, d, t) {
      this.dialogVisible1 = true;
      this.schoolName = name;
      this.place = [];
      if (d != null) {
        this.selectedOptions = d.split("/");
      } else {
        this.selectedOptions = [];
      }
      this.updateId = id;
      this.sType = t;
    },
    updateSchool() {
      let params = {
        n: this.schoolName,
        d: this.place.join("/"),
        id: this.updateId,
      };
      this.ajax
        .get(this.$store.state.api + "updateSchoolByOrg", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible1 = false;
          this.updateId = "";
          this.schoolName = "";
          this.place = [];
          this.selectSchool();
          this.selectSchool1();
          this.sType = 0;
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    deleteSchool(id, t) {
      this.sType = t;
      let params = [
        {
          id: id,
        },
      ];
      let _this = this;
      _this
        .$confirm("确定删除此学校吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.ajax
            .post(this.$store.state.api + "deleteSchoolAdmin", params)
            .then((res) => {
              _this.$message({
                message: "删除成功",
                type: "success",
              });
              _this.updateId = "";
              _this.schoolName = "";
              _this.selectSchool();
              _this.selectSchool1();
              _this.sType = 0;
            })
            .catch((err) => {
              _this.$message.error("删除成功");
              console.error(err);
            });
        })
        .catch(() => {
          return;
        });
    },
    selectNoSChool() {
      this.ajax
        .get(this.$store.state.api + "selectNoCSchool")
        .then((res) => {
          this.cShool = res.data[0];
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    openAddSchool(t) {
      this.dialogVisible = true;
      this.place = [];
      this.selectedOptions = [];
      this.sType = t;
    },
    openNoCSchool(id, oname) {
      this.dialogVisible2 = true;
      this.updateId = id;
      if (oname != null || oname != "") {
        this.isCSchool = oname;
      }
      this.selectNoSChool();
    },
    addNoSchool() {
      let params = {
        id: this.updateId,
        coid: this.isCSchool,
      };
      this.ajax
        .get(this.$store.state.api + "addNoSchool", params)
        .then((res) => {
          this.$message({
            message: "联结成功",
            type: "success",
          });
          this.dialogVisible2 = false;
          this.updateId = "";
          this.isCSchool = "";
          this.selectSchool();
          this.selectSchool1();
        })
        .catch((err) => {
          this.$message.error("联结失败");
          console.error(err);
        });
    },
  },
  created() {
    this.page = 1;
    this.selectSchool();
    this.selectSchool1();
  },
};
</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 0;
}

.disUoloadSty >>> .el-upload--picture-card {
  display: none;
  /* 上传按钮隐藏 */
}

.dialogBox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialogBox span {
  margin: 0 20px;
}

.student_head {
  width: 100%;
  /* margin-left: 25px; */
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #fff;
}

.student_head > div:nth-child(1) {
  padding: 0 0 0 30px;
  font-size: 18px;
}
.student_head > div:nth-child(2) {
  margin-right: 10px;
}

.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;
}

.allBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 94%;
  margin: 0 auto;
  justify-content: space-between;
}
.halfBox {
  /* width: 50%; */
  margin-top: 10px;
}
.ljBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.isLj {
  color: #4679ab;
  font-weight: bold;
}
.isLjImg {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
.isLjImg > img {
  width: 100%;
  height: 100%;
}
</style>