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-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-download"
              size="mini"
              plain
              circle
              @click="exportStudentExl"
            ></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 :close-on-click-modal="false" 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 :close-on-click-modal="false"

        :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" v-if="subjectList.length>6" @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 :close-on-click-modal="false" title="学生导入" :visible.sync="diaUp" width="600">

        <upload :url="url" @upSuccess="upSuccess" fileName="学生模板">

          <p class="down-txt" slot="down">
            通过Excel名单导入学生模板，点击
            <el-link type="danger" @click="downExcel">模板下载</el-link> 。
          </p>

        </upload>

        <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/personal/importStudent",
        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" },
          ],

          subjectNames: [
            { 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.pSaveClass({

              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.pDelClass({

          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._QueryClass()

        this._QueryData();
      },

      async _QuerySubject() {
        const { data, status, info } = await this.$request.pSubjectList();
        if (status === 0) {

          this.subjectList =
            data?.subjectNames.map((item) => {
              return item.subjectName;
            }) || [];

        } else {
          this.$message.error(info);
        }
      },

      async removeStu(obj, index) {

        const { data, status, info } = await this.$request.pDelStudent({

          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.pAddStudent({

              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.pStudentList({

          ...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.pClassList({

          needStudentCount: 1,

        });

        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);
        }
      },

      async downExcel() {
        this.loadingDown = true;
        let { data, info, status } = await this.$request.studentTemplateUrl();
        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);
        }
      },
      async exportStudentExl() {
        this.loadingDown = true;
        let data = await this.$request.exportStudent();
        this.loadingDown = false;
        if (data) {

          let blob = new Blob([data], {

            type: "application/vnd.ms-excel;charset=utf-8",
          });
          downloadFile(`学生名单.xlsx`, blob);
        } else {
          this.$message.error("下载失败");
        }
      },

    },
  };
  </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>