baoman / Ezquiz_Platform

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>教师管理</span>
      </template>
      <template slot="btns">
        <el-tooltip effect="dark" content="添加学生" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            plain
            circle
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="page-content">
      <div class="stu-box">
        <div class="stu-list">
          <div class="h-title">
            <el-select
              class="sel"
              v-model="query.gradeName"
              placeholder="选择年级"
              @change="changeGrade"
            >
              <el-option
                v-for="item in gradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <ul class="stu-ul">
            <li
              class="stu-item"
              v-for="item in classList"
              :key="item.classCode"
              :class="query.classId == item.classCode ? 'avtive' : ''"
              @click="classDetail(item.classCode)"
            >
              <i class="el-icon-edit-outline"></i>
              {{ item.className }}（{{ item.studentCount }}）
            </li>
          </ul>
        </div>
        <div class="stu-detail">
          <div class="answer-header">
            <div class="sel-box">
              <el-input
                placeholder="请输入学生姓名"
                v-model="query.studentName"
                class="input-with-select"
                @keyup.enter.native="_QueryData(1)"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="_QueryData(1)"
                ></el-button>
              </el-input>
              <el-input
                placeholder="请输入学生学号"
                v-model="query.studentCode"
                class="input-with-select"
                @keyup.enter.native="_QueryData(2)"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="_QueryData(2)"
                ></el-button>
              </el-input>
            </div>
          </div>
          <ul class="s-ul" v-loading="loading">
            <li class="s-li" v-for="item in studentList" :key="item.id">
              <i class="el-icon-delete"></i>
              <p class="name">{{ item.studentName }}</p>
              <p class="p1">
                答题器：{{ (item.clickerList.length && item.clickerList[0].clickerSn) || "--" }}
              </p>
              <p class="p1">长学号：{{ item.studentCode }}</p>
              <p class="p1">短学号：{{ item.shortNumber || "--" }}</p>
            </li>
          </ul>
          <el-empty
            :image-size="100"
            v-if="!studentList.length && loading == false"
            description="没有更多数据"
          ></el-empty>
        </div>
      </div>
    </div>
    <el-dialog title="导入学校名单" :visible.sync="diaUp" width="400">
      <up-load id="downTeacher" :url="url" fileName="教师名单">
        <p class="down-txt" slot="down">
          通过Excel名单导入教师名单，点击
          <el-link type="danger" @click="downExcel">模板下载</el-link> 。
        </p>
      </up-load>
      <div class="dialog-footer" slot="footer">
        <el-button @click="diaUp = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloadFile } from "@/utils";
export default {
  data() {
    return {
      url: "",
      diaUp: false,
      query: {
        gradeName: "",
        classId: "",
        studentCode: "",
        studentName: "",
      },
      gradeName: "",
      gradeList: [],
      classList: [],
      studentList: [],
      teacherDetail: {
        teacherName: "",
        loginName: "",
        sex: "",
        available: "",
        managerList: [],
        teacherCourseList: [],
        teacherGradeList: [],
      },
    };
  },
  async created() {
    await this._QueryDataGrade();
    this._QueryClass();
    this._QueryData(3);
  },
  methods: {
    changeGrade(val) {
      this.query.classId = "";
      this._QueryClass(val);
      this._QueryData(3);
    },
    classDetail(id) {
      this.query.classId = id;
      this._QueryData(3);
    },
    async _QueryData(type) {
      let query = {};
      query.gradeName = this.query.gradeName;
      query.classId = this.query.classId;
      if (type == 1) {
        query.studentName = this.query.studentName;
        this.query.studentCode = "";
      } else if (type == 2) {
        query.studentCode = this.query.studentCode;
        this.query.studentName = "";
      } else if (type == 3) {
        this.query.studentName = "";
        this.query.studentCode = "";
      }
      this.loading = true;
      const { data, status, info } = await this.$request.studentList({
        ...query,
      });
      this.loading = false;
      console.log(status);
      if (status === 0) {
        this.studentList = data.list || [];
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDataGrade() {
      this.loading = true;
      const { data, status, info } = await this.$request.gradeList();
      if (status === 0) {
        this.gradeList =
          data.list?.map((item) => {
            return {
              value: item.gradeName,
              label: item.gradeName,
            };
          }) || [];
        this.query.gradeName = this.gradeList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryClass(value) {
      const { data, status, info } = await this.$request.schoolClassList({
        gradeName: value || this.query.gradeName,
      });
      if (status === 0) {
        this.classList = [...data.list] || [];
      } else {
        this.$message.error(info);
      }
    },
    async downExcel() {
      let data = await this.$request.downDevice({
        id: this.id,
      });
      if (data && !data.code) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`设备信息.xlsx`, blob);
      } else {
        this.$message.error(data.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px;
}
.stu-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  .stu-list {
    max-height: 80vh;
    .h-title {
      height: 40px;
      overflow-y: scroll;
      line-height: 40px;
      background: #eee;
    }
    .stu-item {
      font-size: 16px;
      color: #7f7f7f;
      line-height: 36px;
      cursor: pointer;
      padding-left: 12px;
      position: relative;
      .el-icon-edit-outline {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 20px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      &:hover {
        background: #eee;
        .el-icon-edit-outline {
          display: block;
        }
      }
      &.active {
        color: #667ffd;
      }
    }
    .sel {
      width: 180px;
      :deep(.el-input__inner) {
        font-size: 16px;
        padding-left: 0;
        border: none;
        background: transparent;
      }
      :deep(.el-icon-arrow-up:before) {
        content: "\e78f";
      }
    }
  }
  .stu-detail {
    flex: 1;
    border-left: 0.5px solid #eee;
    .s-ul {
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      .s-li {
        width: 180px;
        height: 120px;
        box-shadow: 2px 2px 5px #7f7f7f;
        border-radius: 10px;
        margin: 0 20px 20px 0;
        padding: 0 12px 5px;
        position: relative;
        .el-icon-delete {
          position: absolute;
          top: 8px;
          right: 8px;
          font-size: 18px;
          padding: 2px;
          display: none;
          cursor: pointer;
          &:hover {
            color: #667ffd;
          }
        }
        &:hover {
          .el-icon-delete {
            display: block;
          }
        }
        .name {
          text-align: center;
          font-size: 16px;
          line-height: 18px;
          padding: 10px 0;
        }
        .p1 {
          color: #7f7f7f;
          line-height: 20px;
          padding-bottom: 5px;
        }
      }
    }
  }
}
</style>