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

<template>
  <div class="testExamine">
    <div class="testTit">
      <div class="teaLis">
        <div
          class="teal"
          @click="cutPage(2)"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          专任教师
        </div>
        <div
          class="teal"
          @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;">
          <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" 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 {
      pType: 2,
      cutTable: 0,
      teacherName: "",
      cutTabOpts: [
        {
          value: 0,
          label: "按指标"
        },
        {
          value: 1,
          label: "按人员"
        }
      ]
    };
  },
  methods: {
    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>