pbl-teacher-table/src/components/pages/sassPlatform/view/examine/index.vue

<template>
  <div class="testExamine">
    <div class="testTit">
      <div class="teaLis">
        <div
          class="teal"
          v-if="bArray.length"
          @click="cutPage(2)"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          专任教师
        </div>
        <div
          class="teal"
          v-if="aArray.length"
          @click="cutPage(1)"
          :class="[pType == 1 ? 'Tbor' : '']"
        >
          班主任
        </div>
      </div>
      <div class="operate">
        <el-input
          v-if="cutTable == 1"
          v-model="teacherName"
          @change="selectTeaName"
          placeholder="请输入教师姓名"
        ></el-input>

        <div style="margin: 0 20px;" v-if="timeListA.length>0 && pType == 1 && cutTable!=1">
          <el-select v-model="timeA" placeholder="请选择">
            <el-option
              v-for="item in timeListA"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div style="margin: 0 20px;" v-if="timeListB.length>0 && pType == 2 && cutTable!=1">
          <el-select v-model="timeB" placeholder="请选择">
            <el-option
              v-for="item in timeListB"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div style="margin: 0 20px;">
          <el-select v-model="cutTable" placeholder="请选择">
            <el-option
              v-for="item in cutTabOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div
          v-if="cutTable == 1"
          class="remindBtn"
          style="margin-right: 20px;"
          @click="excelBtn"
        >
          导出
        </div>
        <div v-if="cutTable == 1" class="remindBtn" @click="personBtn">
          提醒
        </div>
      </div>
    </div>
    <div class="testCon">
      <targetPage :pType="pType" :timeA="timeA" :timeB="timeB" v-if="cutTable == 0"></targetPage>
      <personPage
        ref="child"
        :pType="pType"
        :teacherName="teacherName"
        v-if="cutTable == 1"
      ></personPage>
    </div>
  </div>
</template>

<script>
import personPage from "./conpoments/personPage.vue";
import targetPage from "./conpoments/targetPage";

export default {
  components: {
    personPage,
    targetPage
  },
  data() {
    return {
      aArray: [],
      bArray: [],
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      timeListA:[],
      timeListB:[],
      timeA:"",
      timeB:"",
      pType: 2,
      cutTable: 0,
      teacherName: "",
      cutTabOpts: [
        {
          value: 0,
          label: "按指标"
        },
        {
          value: 1,
          label: "按人员"
        }
      ]
    };
  },
  mounted () {
      this.getPageBase2(1)
      this.getPageBase2(2)
  },
  methods: {
    getPageBase2(type) {
      let params = {
        typ: type,
        org: this.org,
        oid: this.oid,
        time:""
      };
      this.ajax
        .get(this.$store.state.api + "selectTestExamineBase2", params)
        .then(res => {
          console.log('1111111111111111111111', res.data);

          if(type == 1){
            this.aArray = res.data[0];
            this.timeListA = this.aArray.map(i=>{return {value:i.time,label:i.timeLabel}})
            if(this.timeListA.length>0)this.timeA = this.timeListA[0].value;
          }else {
            this.bArray = res.data[0];
            this.timeListB = this.bArray.map(i=>{return {value:i.time,label:i.timeLabel}})
            if(this.timeListB.length>0)this.timeB = this.timeListB[0].value;
            if(!this.bArray.length){
              this.pType = 1
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // getPageBase2(type) {
    //   let params = {
    //     typ: type,
    //     org: this.org,
    //     oid: this.oid
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "selectTestExamineBase", params)
    //     .then(res => {
    //       console.log('1111111111111111111111', res.data);

    //       if(type == 1){
    //         this.aArray = res.data[0];
    //       }else {
    //         this.bArray = res.data[0];
    //         if(!this.bArray.length){
    //           this.pType = 1
    //         }
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    cutPage(e) {
      this.pType = e;
    },
    selectTeaName() {
      this.$refs.child.getData();
    },
    excelBtn() {
      this.$refs.child.getExcel();
    },
    personBtn() {
      this.$refs.child.remindExamine();
    }
  }
};
</script>

<style scoped>
.testExamine {
  width: 100%;
  /* min-width: calc(150px * 10); */
  min-height: 100%;
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
  background-color: #fff;
}
.testExamine > .testTit {
  height: 70px;
  display: flex;
  box-sizing: border-box;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
}
.teaLis {
  display: flex;
}
.teal {
  padding: 10px 20px;
  cursor: pointer;
}
.Tbor {
  border-bottom: 2px rgba(54, 129, 252, 1) solid;
  font-weight: 600;
}
.testCon {
  box-sizing: border-box;
  padding: 20px;
}
.operate {
  display: flex;
}
.operate >>> .el-input {
  width: 200px !important;
}
.operate > .remindBtn {
  background: #409eff;
  padding: 10px 15px;
  box-sizing: border-box;
  width: 90px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
</style>