src/views/personal/setUp/student.vue

<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-upload2"
            size="mini"
            plain
            circle
            @click="diaUp = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="添加班级" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            plain
            circle
            @click="addClass"
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="page-content">
      <div class="stu-box">
        <div class="stu-list">
          <p class="h-title">班级列表</p>
          <ul class="stu-ul">
            <li
              class="stu-item"
              v-for="item in classList"
              :key="item.id"
              :class="query.classId == item.id ? 'active' : ''"
              @click="classDetail(item)"
            >
              <i class="el-icon-edit-outline" @click.stop="setClass(item)"></i>
              {{ item.className }}（{{ item.studentCount }}）
            </li>
          </ul>
        </div>
        <div class="stu-detail">
          <p class="stu-head">
            {{ formStu.className }}所有学生（{{ studentList.length }}）
            <i
              v-if="query.classId"
              class="el-icon-circle-plus-outline"
              @click="openAddDia"
            ></i>
          </p>
          <ul class="s-ul" v-loading="loading">
            <li
              class="s-li"
              v-for="(item, index) in studentList"
              :key="item.id"
            >
              <el-popconfirm
                title="确定删除吗？"
                @confirm="removeStu(item, index)"
              >
                <i class="el-icon-delete" slot="reference"></i>
              </el-popconfirm>
              <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="diaStu" width="400">
      <el-form
        ref="formBox"
        :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="formClass.classId ? '修改班级' : '添加班级'"
      :visible.sync="diaClass"
      width="400"
    >
      <el-form
        class="form-box"
        ref="formClass"
        :model="formClass"
        :rules="rulesClass"
        label-width="160px"
      >
        <el-form-item label="班级名称：" prop="className">
          <el-col :span="10">
            <el-input maxlength="30" v-model.trim="formClass.className" />
          </el-col>
        </el-form-item>
        <el-form-item label="科目：" prop="subjectNames">
          <div class="subject-box" :class="showAll ? 'active' : ''">
            <span class="showAll" @click="showAll = !showAll">{{
              showAll ? "收起" : "更多..."
            }}</span>
            <el-checkbox-group v-model="formClass.subjectNames">
              <el-checkbox
                v-for="item in subjectList"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <el-col :span="8">
            <el-input
              placeholder="添加科目"
              v-model.trim="subjectName"
              maxlength="30"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-plus"
                @click="addSubjectName"
              ></i>
            </el-input>
          </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>
        <el-button v-if="formClass.classId" @click="removeClass"
          >删 除</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 { downloadFile, getBlob } from "@/utils";
export default {
  data() {
    return {
      loading: false,
      diaUp: false,//导入弹窗
      url: "/api_html/school/manager/importStudentClicker",
      diaStu: false,//添加学生
      diaClass: false,//添加-修改班级
      showAll: false, //修改年级科目显示
      query: {
        classId: "",
      },
      formStu: {//添加学生信息
        className: "",
        studentName: "",
        studentCode: "",
        shortNumber: "",
        sex: 1,
        clickerSn: "",
      },
      rulesStu: {
        studentName: [
          { required: true, message: "请输入学生名称", trigger: "blur" },
        ],
        studentCode: [
          { required: true, message: "请输入学生长学号", trigger: "blur" },
        ],
      },
      formClass: {//添加班级信息
        classId: "",
        className: "",
        subjectNames: [],
      },
      rulesClass: {
        className: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
      },
      classList: [],//班级列表
      studentList: [],//学生列表
      subjectList: [],//科目列表
      subjectName: "",//添加科目名称
    };
  },
  async created() {
    // await this._QueryClass();
    // this._QuerySubject();
    // this._QueryData();
  },
  methods: {
    addClass() {
      this.formClass.classId = "";
      this.formClass.className = "";
      this.formClass.subjectNames = [];
      this.diaClass = true;
    },
    openAddDia() {
      this.formStu.studentName = "";
      this.formStu.studentCode = "";
      this.formStu.shortNumber = "";
      this.formStu.sex = 1;
      this.formStu.clickerSn = "";
      this.diaStu = true;
    },
    classDetail(obj) {
      this.query.classId = obj.id;
      this.formStu.className = obj.className;
      this._QueryData();
    },
    setClass(obj) {
      this.formClass.classId = obj.id;
      this.formClass.className = obj.className;
      this.formClass.subjectNames = obj.subjectNames;
      this.diaClass = true;
    },
    addSubjectName() {
      if (!this.subjectName) {
        this.$message.warning("请填写科目名称");
        return;
      } else if (this.subjectList.includes(this.subjectName)) {
        this.$message.warning("科目已存在，请重新填写～");
        return;
      }
      this.subjectList.push(this.subjectName);
      this.formClass.subjectNames.push(this.subjectName);
      this.subjectName = "";
    },
    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,
            subjectNames: this.formClass.subjectNames,
          });
          if (status === 0) {
            this.$message.success("修改成功");
            this.diaClass = false;
            this._QueryClass();
          } else {
            this.$message.error(info);
          }
        } else {
          this.$message.warning("输入有误请检查！");
          return false;
        }
      });
    },
    async removeClass() {
      let stuNum = 0;
      this.classList.map((item) => {
        if (item.classId == this.formClass.classId) {
          stuNum = item.studentCount;
        }
      });
      if (stuNum) {
        this.$message.warning("有学生的班级不能删除！");
        return;
      }
      const { data, status, info } = await this.$request.updateClass({
        classId: this.formClass.classId,
      });
      if (status === 0) {
        this.$message.success("删除成功");
        this.diaClass = false;
        this._QueryClass();
      } else {
        this.$message.error(info);
      }
    },
    upSuccess(res) {
      this.$message.closeAll();
      this.$message({
        showClose: true,
        message: `成功（${res.data.success}）`,
        type: "success",
        duration: 5000,
      });
      //导入成功
      this.diaUp = false;
      this._QueryData();
    },
    async _QuerySubject() {
      const { data, status, info } = await this.$request.pSubjectList();
      if (status === 0) {
        this.subjectList = [...data.subjectNames] || [];
      } else {
        this.$message.error(info);
      }
    },
    async downExcel() {
      this.loadingDown = true;
      let { data, info, status } =
        await this.$request.studentClickerTemplateUrl();
      this.loadingDown = false;
      if (status == 0) {
        getBlob(data.downloadUrl).then((res) => {
          downloadFile("学生模板", res);
        });
      } 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);
      }
    },
    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("数据有误，请检查！");
        }
      });
    },
    async _QueryData() {
      this.loading = true;
      const { data, status, info } = await this.$request.studentList({
        ...this.query,
      });
      this.loading = false;
      console.log(status);
      if (status === 0) {
        this.studentList = data.list || [];
      } else {
        this.$message.error(info);
      }
    },
    async _QueryClass() {
      const { data, status, info } = await this.$request.schoolClassList();
      if (status === 0) {
        this.classList = [...data.list] || [];
        this.query.classId = this.classList[0]?.id;
        this.formStu.className = this.classList[0]?.className;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 20px;
}
.stu-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  .stu-list {
    min-width: 200px;
    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: 12px;
        font-size: 20px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      &:hover {
        background: #eee;
        .el-icon-edit-outline {
          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;
    .stu-head {
      padding: 12px 20px;
      color: #7f7f7f;
      position: relative;
      .el-icon-circle-plus-outline {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 24px;
        color: #7f7f7f;
        cursor: pointer;
      }
    }
    .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;
        }
      }
    }
  }
}
.form-box {
  .subject-box {
    padding-right:50px;
    max-height: 90px;
    overflow: hidden;
    position: relative;
    &.active {
      max-height: auto;
      overflow: auto;
    }
    .showAll {
      position: absolute;
      bottom: 0;
      right: 10px;
      font-size: 12px;
      color: #7f7f7f;
      cursor: pointer;
      padding: 2px;
      &:hover {
        color: #667ffd;
      }
    }
  }
  .el-icon-plus {
    cursor: pointer;
    &:hover {
      color: #667ffd;
    }
  }
}
</style>