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

<template>
  <div class="testExamine" :style="{padding: gotype ? '0 90px' : '10px'}">
    <backPage style="padding: 40px 0 0;" v-if="gotype" :tit="gotype == '/topTalent' ? '人才评估' : '考核审核'"></backPage>

    <div class="testTit">
      <div class="teaLis">
        <div
          class="teal"
          v-if="bArray.length"
          @click="cutPage(2)"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          {{ editname ? '人才标准' : '专任教师' }}
        </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="`请输入${editname ? '' : '教师'}姓名`"
        ></el-input>
        <div style="margin: 0 20px;" v-if="timeListA.length>1 && pType == 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">
          <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 && false"
          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
        :editname="editname"
        ref="child"
        :pType="pType"
        :teacherName="teacherName"
        :timeA="timeA"
        :timeB="timeB"
        v-if="cutTable == 1"
      ></personPage>
    </div>
  </div>
</template>

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

export default {
  components: {
    personPage,
    targetPage,
    backPage
  },
  data() {
    return {
      gotype:(window.topU && window.topU.gotype) ?  window.topU.gotype : '',
      aArray: [],
      bArray: [],
      timeListA:[],
      timeListB:[],
      timeA:"",
      timeB:"",
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      editname: this.$route.query.editName,
      pType: 2,
      cutTable: 1,
      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);
        });
    },
    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>