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

<template>
  <div class="aggregate">
    <el-table :data="tableData" border style="width: 100%" v-loading="tabLoading" @header-click="handleHeaderClick">
      <el-table-column fixed align="center" type="index" width="50">
      </el-table-column>

      <el-table-column fixed align="center" prop="username" label="教师姓名" width="150">
      </el-table-column>
      <el-table-column fixed align="center" 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"
              :cell-style="{ color: '#000' }" width="130">
              <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"></div>
                <div v-else-if="scope.row.works.indexOf(e.courseId) !== -1" class="yuan blacky"></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>
  </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
    };
  },

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

  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;
    },
    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);
              }
            });
          });
          this.tableData = data;
          this.tabLoading = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleHeaderClick(column, event) {
      // console.log("表头被点击", column, event);
      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;
}

.greyy {
  background-color: #eee;
  border: 1px solid #eee;
}
</style>