src/views/standard/setUp/student.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>学生管理</span>
      </template>
      <template slot="btns" v-if="role == 'ROLE_XUEXIAO'">
        <el-tooltip effect="dark" content="设置答题器" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            plain
            circle
            @click="diaUp = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          v-if="!code"
          effect="dark"
          content="添加学生"
          placement="bottom"
        >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            plain
            circle
            @click="openAddDia"
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="page-content">
      <template v-if="!code && role !== 'ROLE_PERSONAL'">
        <p class="tips" v-show="archivedTotal">
          <span>另有{{ archivedTotal }}个班级已经归档,</span>
          <router-link to="/archivedClazz">点击查看&gt;&gt;</router-link>
        </p>
      </template>
      <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, index) in classList"
              :key="item.id"
              :class="query.classId == item.id ? 'active' : ''"
              @click="classDetail(item)"
            >
              <template v-if="!code && role !== 'ROLE_PERSONAL'">
                <div class="popconfirm-box">
                  <el-popconfirm
                    title="确定要将该班级归档吗？"
                    @confirm="archivingClass(item, index)"
                  >
                    <i slot="reference" class="fa fa-file-archive-o"></i>
                  </el-popconfirm>
                </div>
                <i
                  class="el-icon-edit-outline"
                  @click.stop="setClass(item)"
                ></i>
              </template>
              {{ item.className }}（{{ item.studentCount }}）
            </li>
          </ul>
        </div>
        <div class="stu-detail">
          <div class="clazz-detail" v-if="clazzDetail.stationSn">
            <p>基站SN：{{ clazzDetail.stationSn }}</p>
            <p>配对码：{{ clazzDetail.pairingCode }}</p>
            <p>频点：{{ clazzDetail.frequency }}</p>
          </div>
          <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, index) in studentList"
              :key="item.id"
            >
              <el-popconfirm
                v-if="!code"
                title="确定删除吗？"
                @confirm="removeStu(item, index)"
              >
                <i class="el-icon-delete" slot="reference"></i>
              </el-popconfirm>
              <i class="el-icon-user-solid" @click="openChangeClazz(item)"></i>
              <p class="name">{{ item.studentName }}</p>
              <p class="p1">答题器：{{ item.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="diaChangeClass" width="400">
      <el-form
        class="form-box"
        ref="formStuCla"
        :model="formStuCla"
        :rules="rulesStuCla"
        label-width="160px"
      >
        <el-form-item label="学生姓名：">
          <span>{{ formStuCla.studentName }}</span>
        </el-form-item>
        <el-form-item label="当前班级：">
          <span>{{ formStuCla.className }}</span>
        </el-form-item>
        <el-form-item label="调到班级：">
          <el-col :span="10">
            <el-select
              class="sel"
              v-model="formStuCla.classId"
              placeholder="选择年级"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="长学号：" prop="studentCode">
          <el-col :span="10">
            <el-input
              maxlength="12"
              placeholder="输入学生长学号"
              v-model.trim="formStuCla.studentCode"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="changeStu">确 定</el-button>
        <el-button @click="diaChangeClass = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加学生" :visible.sync="diaStu" width="400">
      <el-form
        ref="formBox"
        class="form-box"
        :model="formStu"
        :rules="rulesStu"
        label-width="160px"
      >
        <el-form-item label="所在班级：">
          <span>{{ formStu.className }}</span>
        </el-form-item>
        <el-form-item label="学生姓名：" prop="studentName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              placeholder="输入学生姓名"
              v-model.trim="formStu.studentName"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="长学号：" prop="studentCode">
          <el-col :span="10">
            <el-input
              maxlength="12"
              placeholder="输入学生长学号"
              v-model.trim="formStu.studentCode"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="短学号：">
          <el-col :span="10">
            <el-input maxlength="12" v-model.trim="formStu.shortNumber" />
          </el-col>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="formStu.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="答题器编码：">
          <el-col :span="10">
            <el-input v-model.trim="formStu.clickerSn" />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="addStu">确 定</el-button>
        <el-button @click="diaStu = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改班级" :visible.sync="diaClass" width="400">
      <el-form
        class="form-box"
        ref="formClass"
        :model="formClass"
        :rules="rulesClass"
        label-width="160px"
      >
        <el-form-item label="所在年级：">
          <span>{{ formClass.gradeName }}</span>
        </el-form-item>
        <el-form-item label="班级名称：" prop="studentName">
          <el-col :span="10">
            <el-input maxlength="30" v-model.trim="formClass.className" />
          </el-col>
        </el-form-item>
        <el-form-item label="入学年份：" prop="studentCode">
          <el-col :span="10">
            <el-date-picker
              v-model="formClass.intoSchoolYear"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="saveClass">确 定</el-button>
        <el-button @click="diaClass = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="学生答题器绑定" :visible.sync="diaUp" width="600">
      <up-load
        id="downTeacher"
        :url="url"
        @upSuccess="upSuccess"
        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 _ from "lodash";
export default {
  data() {
    return {
      code: "",
      role: "",
      diaUp: false,
      url: "/api_html/school/manager/importStudentClicker",
      diaStu: false,
      diaClass: false,
      diaChangeClass: false,
      clazzDetail: { stationSn: "", pairingCode: "", frequency: "" },
      query: {
        gradeName: "",
        classId: "",
        studentCode: "",
        studentName: "",
      },
      formStu: {
        className: "",
        studentName: "",
        studentCode: "",
        shortNumber: "",
        sex: 1,
        clickerSn: "",
      },
      rulesStu: {
        studentName: [
          { required: true, message: "请输入学生名称", trigger: "blur" },
        ],
        studentCode: [
          { required: true, message: "请输入学生长学号", trigger: "blur" },
        ],
      },
      formClass: {
        gradeName: "",
        className: "",
        intoSchoolYear: "",
      },
      rulesClass: {
        className: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
      },
      formStuCla: {
        studentName: "",
        studentId: "",
        oldClassId: "",
        className: "",
        classId: "",
        studentCode: "",
      },
      rulesStuCla: {
        className: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
        studentCode: [
          { required: true, message: "请输入学生号", trigger: "blur" },
        ],
      },
      gradeName: "",
      gradeList: [],
      classList: [],
      studentList: [],
      teacherDetail: {
        teacherName: "",
        loginName: "",
        sex: "",
        available: "",
        managerList: [],
        teacherCourseList: [],
        teacherGradeList: [],
      },
      archivedTotal: 0, //已归档班级
    };
  },
  async created() {
    this.code = localStorage.getItem("csCode") || "";
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this._QueryArchivedNum();
    await this._QueryDataGrade();
    await this._QueryClass();
    this._QueryData(3);
  },
  methods: {
    openAddDia() {
      this.formStu.studentName = "";
      this.formStu.studentCode = "";
      this.formStu.shortNumber = "";
      this.formStu.sex = 1;
      this.formStu.clickerSn = "";
      this.diaStu = true;
    },
    classDetail(obj) {
      this.clazzDetail.stationSn = obj.stationSn;
      this.clazzDetail.pairingCode = obj.pairingCode;
      this.clazzDetail.frequency = obj.frequency;
      this.query.classId = obj.id;
      this.formStu.className = obj.className;
      this.formStuCla.className = obj.className;
      this._QueryData(3);
    },
    setClass(obj) {
      this.formClass.gradeName = obj.gradeName;
      this.formClass.classId = obj.id;
      this.formClass.className = obj.className;
      this.formClass.intoSchoolYear = obj.intoSchoolYear + "";
      this.diaClass = true;
    },
    saveClass() {
      this.$refs.formClass.validate(async (valid) => {
        if (valid) {
          const { data, status, info } = await this.$request.updateClass({
            classId: this.formClass.classId,
            className: this.formClass.className,
            intoSchoolYear: this.formClass.intoSchoolYear,
          });
          if (status === 0) {
            this.$message.success("修改成功");
            this.diaClass = false;
            this._QueryClass();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.warning("输入有误请检查！");
          return false;
        }
      });
    },
    upSuccess(res) {
      this.$message.closeAll();
      this.$message({
        showClose: true,
        message: `成功（${res.data.success}）`,
        type: "success",
        duration: 5000,
      });
      //导入成功
      this.diaUp = false;
      this._QueryData(3);
    },
    //添加学生
    addStu() {
      let query = {};
      for (let key in this.formStu) {
        if (key != "className" && this.formStu[key]) {
          query[key] = this.formStu[key];
        }
      }
      this.loading = true;
      this.$refs.formBox.validate(async (valid) => {
        if (valid) {
          let hasName = this.studentList.find((item) => {
            return item.studentName == this.formStu.studentName;
          });
          console.log(hasName);
          if (hasName) {
            this.$message.warning("学生姓名已存在");
            return;
          }
          const { data, status, info } = await this.$request.addStudent({
            classId: this.query.classId,
            ...query,
          });
          this.loading = false;
          console.log(status);
          if (status === 0) {
            this.$message.success(info);
            this.diaStu = false;
            this._QueryClass();
            this._QueryData();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.error("数据有误，请检查！");
        }
      });
    },
    //学生调班弹窗
    openChangeClazz(obj) {
      this.formStuCla.studentId = obj.id;
      this.formStuCla.studentName = obj.studentName;
      this.formStuCla.studentCode = obj.studentCode;
      this.formStuCla.classId = this.query.classId;
      this.formStuCla.oldClassId = this.query.classId;
      this.diaChangeClass = true;
    },
    //学生调班
    changeStu: _.throttle(
      function () {
        this.$refs.formStuCla.validate(async (valid) => {
          if (valid) {
            const { data, status, info } =
              await this.$request.studentChangeClass({
                studentId: this.formStuCla.studentId,
                oldClassId: this.formStuCla.oldClassId,
                classId: this.formStuCla.classId,
                studentCode: this.formStuCla.studentCode,
              });
            if (status == 0) {
              this.diaChangeClass = false;
              this.$message.success(info);
              this._QueryData();
            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.error("数据有误请检查！");
          }
        });
      },
      2000,
      { leading: true, trailing: false }
    ),
    //班级归档
    async archivingClass(obj, index) {
      const { data, status, info } = await this.$request.classArchiving({
        classId: obj.id,
      });
      if (status === 0) {
        this.$message.success("归档成功");
        this.classList.splice(index, 1);
        this.setClass(this.classList[index]);
        this.diaClass = false;
      } else {
        this.$message.error(info);
      }
    },
    async removeStu(obj, index) {
      const { data, status, info } = await this.$request.delStudent({
        studentId: obj.id,
      });
      if (status === 0) {
        this.$message.success("删除成功");
        this.studentList.splice(index, 1);
        this._QueryClass();
      } else {
        this.$message.error(info);
      }
    },
    async changeGrade(val) {
      this.query.classId = "";
      await this._QueryClass(val);
      this._QueryData(3);
    },
    async _QueryArchivedNum() {
      const { data, status, info } = await this.$request.archivingClassList();
      if (status === 0) {
        this.archivedTotal = data?.count || 0;
      } else {
        this.$message.error(info);
      }
    },
    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 = "";
      } else {
        query = this.query;
      }
      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] || [];
        this.query.classId = this.classList[0]?.id;
        this.formStu.className = this.classList[0]?.className;
        this.formStuCla.className = this.classList[0]?.className;
        this.clazzDetail.stationSn = this.classList[0]?.stationSn;
        this.clazzDetail.pairingCode = this.classList[0]?.pairingCode;
        this.clazzDetail.frequency = this.classList[0]?.frequency;
      } else {
        this.$message.error(info);
      }
    },
    async downExcel() {
      this.loadingDown = true;
      let { data, info, status } =
        await this.$request.studentClickerTemplateUrl();
      this.loadingDown = false;
      if (status == 0) {
        const a = document.createElement("a");
        a.href = data.downloadUrl;
        document.body.appendChild(a);
        a.click();
        a.remove();
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 20px;
}
.tips {
  display: flex;
  line-height: 16px;
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}
.stu-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  .answer-header {
    padding-top: 10px;
  }
  .stu-list {
    max-height: 80vh;
    .h-title {
      height: 40px;
      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: 4px;
        font-size: 20px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      .popconfirm-box {
        position: absolute;
        top: 6px;
        right: 31px;
        font-size: 17px;
        line-height: 24px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      &:hover {
        background: #eee;
        .el-icon-edit-outline {
          display: block;
        }
        .popconfirm-box {
          display: block;
        }
      }
      &.active {
        color: #667ffd;
        background: #eee;
      }
    }
    .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-user-solid {
          position: absolute;
          top: 8px;
          left: 8px;
          font-size: 18px;
          color: #666;
          padding: 2px;
          display: none;
          cursor: pointer;
          &:hover {
            color: #667ffd;
          }
        }
        .el-icon-delete {
          position: absolute;
          top: 8px;
          right: 8px;
          font-size: 18px;
          padding: 2px;
          display: none;
          cursor: pointer;
          &:hover {
            color: #667ffd;
          }
        }
        &:hover {
          .el-icon-user-solid {
            display: block;
          }
          .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;
        }
      }
    }
  }
  .clazz-detail {
    display: flex;
    padding: 12px 12px 0 20px;
    p {
      margin-right: 16px;
      color: #666;
    }
  }
}
</style>