pbl-teacher-table/src/components/pages/test/aggregate/index.vue

<template>
  <div class="aggregate">
    <el-table
      :data="tableData"
      border
      max-height="750px"
      v-loading="tabLoading"
      @header-click="handleHeaderClick"
    >
      <el-table-column
        fixed
        align="center"
        label="序号"
        type="index"
        width="50"
      >
      </el-table-column>

      <el-table-column
        align="center"
        prop="username"
        label="教师姓名"
        fixed
        width="150"
      >
      </el-table-column>
      <el-table-column
        :filters="TeachingOptions"
        :filter-method="filterTea"
        align="center"
        prop="tea"
        fixed
        label="教研室"
        width="130"
      >
        <template slot-scope="scope">
          <div class="TabBtn" v-if="!scope.row.tea">/</div>
          <div class="TabBtn" v-else>{{ scope.row.tea }}</div>
        </template>
      </el-table-column>

      <div v-for="item in titList" :key="item.id">
        <el-table-column align="center" :label="item.name">
          <div v-for="e in allFrom" :key="e.courseId">
            
            <el-table-column
              v-if="e.typeid == item.id"
              align="center"
              :prop="e.courseId"
              :label="e.title"
              show-overflow-tooltip
              width="130"
              :resizable="false"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    e.juri2 &&
                      arrayToArray(
                        scope.row.teaId ? scope.row.teaId.split(',') : [],
                        e.juri2 ? e.juri2.split(',') : []
                      ).length &&
                      scope.row.works.indexOf(e.courseId) !== -1
                  "
                  class="yuan blacky"
                  @click="gotoFrom(e.courseId, scope.row.userid)"
                ></div>
                <div
                  v-else-if="scope.row.works.indexOf(e.courseId) !== -1"
                  class="yuan blacky"
                  @click="gotoFrom(e.courseId, scope.row.userid)"
                ></div>
                <div
                  v-else-if="
                    e.juri2 &&
                      arrayToArray(
                        scope.row.teaId ? scope.row.teaId.split(',') : [],
                        e.juri2 ? e.juri2.split(',') : []
                      ).length == 0
                  "
                  class="yuan greyy"
                ></div>
                <div v-else class="yuan"></div>
              </template>
            </el-table-column>
          </div>
        </el-table-column>
      </div>
    </el-table>

    <!-- 查看数据来源 -->
    <el-dialog
      title=""
      :visible.sync="diaIframe"
      :append-to-body="true"
      width="95%"
      :before-close="handleClose2"
      class="dialog_diy"
    >
      <div style="height: 100%;">
        <iframe
          ref="viframe"
          style="width: 100%; height: 99%; border: none"
          :src="ifmUrl"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      tableData: [],
      titList: [],
      allFrom: [],
      tabLoading: false,
      TeachingOptions: [],
      diaIframe: false,
      ifmUrl: ""
    };
  },

  mounted() {
    this.getData();
    this.getTeaList();
  },

  methods: {
    // 处理数据
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    gotoFrom(val, uid) {
      // return console.log(val, uid);
      this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/checkToTest?cid=${val}&oid=${this.oid}&org=${this.org}&type=2&role=0&peopleId=${uid}`;
      // this.ifmUrl = `https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/test?userid=${this.userid}&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=&role=0`;
      this.diaIframe = true;
    },
    // 教研室筛选
    filterTea(value, row, column) {
      // console.log(value, row, column);
      const property = column["property"];
      return row[property].includes(value);
    },
    // 获取教研室
    getTeaList() {
      let params = {
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
        .then(res => {
          // return console.log("this.TeachingOptions", res.data[0]);
          let data = res.data[0];
          let dataCopy = [];

          data.forEach(e => {
            let a = {};
            a.value = e.name;
            a.text = e.name;
            dataCopy.push(a);
          });

          this.TeachingOptions = dataCopy;
          // console.log("this.TeachingOptions", this.TeachingOptions);
        })
        .catch(err => {
          console.error(err);
        });
    },
    getData() {
      this.tabLoading = true;

      let params = {
        oid: this.oid,
        org: this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectTestWorksAggregate", params)
        .then(res => {
          let data = res.data[0]; //所有老师
          this.titList = res.data[1]; // 所有分类
          this.allFrom = res.data[2]; //所有表单
          let data3 = res.data[3]; //所有老师填写表单
          data.forEach(e => {
            e.works = [];
            data3.forEach(k => {
              if (e.userid == k.userid) {
                e.works.push(k.courseid);
              }
            });
          });
          data.forEach(e => {
            if (!e.tea) {
              e.tea = "";
            }
          });
          this.tableData = data;
          this.tabLoading = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 数据来源关闭弹框
    handleClose2(done) {
      done();
    },
    // 点击表头跳转
    handleHeaderClick(column, event) {
      console.log("表头被点击", column, event);

      let titData = this.titList.map(e => {
        return e.name;
      });

      if (
        column.label == "教研室" ||
        column.label == "教师姓名" ||
        column.label == "序号" ||
        titData.includes(column.label)
      ) {
      } else {
        this.$router.push(
          "/checkToTest?cid=" +
            column.property +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&type=" +
            2 +
            "&role=" +
            this.role
        );
      }

      // 在这里处理点击事件
    }
  }
};
</script>

<style scoped>
.yuan {
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  border-radius: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.blacky {
  background-color: #000;
  cursor: pointer;
}

.greyy {
  background-color: #eee;
  border: 1px solid #eee;
}
.dialog_diy >>> .el-dialog {
  height: 95%;
  margin: 0 auto !important;
  margin-top: 20px !important;
  overflow: hidden;
  min-width: 800px !important;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 25px 20px;
}

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 50px);
  box-sizing: border-box;
  padding: 0px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

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

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}

.aggregate >>> .el-table th > .cell {
  /* -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px !important; */
}

</style>