WanZai_School/src/views/grade/grade.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">成绩管理</span>
    </div>
    <div class="scrollId">
      <div class="middle">
        <div class="filter">
          <div class="condition">
            <el-input
              :clearable="true"
              @blur="searchBtn"
              @clear="searchBtn"
              v-model.trim="searchInput.keyWord"
              class="sel"
              placeholder="请输入学生姓名或学号"
            />
          </div>
          <el-button
            color="rgba(0, 97, 255, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
          >
            <!-- <el-icon>
              <Search />
            </el-icon> -->
            查询</el-button
          >
          <div class="condition">
            <span class="title">学期 : </span>
            <el-select
              v-model="searchInput.semester"
              class="sel"
              placeholder="请选择学期"
              style="width: 250px"
              @change="searchBtn"
              :clearable="true"
            >
              <el-option
                :label="i.name"
                :value="i.name"
                v-for="i in semesterData"
              />
            </el-select>
          </div>
          <div class="condition">
            <span class="title">年级 : </span>
            <el-select
              v-model="searchInput.grade"
              placeholder="请选择年级"
              style="width: 160px"
              @change="searchBtn"
              :clearable="true"
            >
              <el-option
                v-for="i in gradeData"
                :label="i.name"
                :value="`${i.name}-${i.id}`"
              >
              </el-option>
            </el-select>
          </div>
          <div class="condition">
            <span class="title">班级 : </span>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="请先选择年级"
              placement="top"
            >
              <el-select
                v-model="searchInput.class"
                placeholder="请选择班级"
                style="width: 160px"
                @change="searchBtn"
                :clearable="true"
              >
                <el-option
                  v-for="i in classsData"
                  :label="i.name"
                  :value="i.name"
                />
              </el-select>
            </el-tooltip>
          </div>
          <div class="condition">
            <span class="title">学科 : </span>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="请先选择年级"
              placement="top"
            >
              <el-select
                v-model="searchInput.subject"
                class="sel"
                placeholder="请选择学科"
                style="width: 160px"
                @change="searchBtn"
                :clearable="true"
              >
                <el-option
                  v-for="i in subjectData"
                  :label="i.name"
                  :value="i.name"
                />
              </el-select>
            </el-tooltip>
          </div>
          <div class="condition">
            <span class="title">考试类型 : </span>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="请先选择年级"
              placement="top"
            >
              <el-select
                v-model="searchInput.examType"
                class="sel"
                placeholder="请选择考试类型"
                style="width: 160px"
                @change="searchBtn"
                :clearable="true"
              >
                <el-option
                  v-for="i in examTypeData"
                  :label="i.name"
                  :value="i.name"
                /> </el-select
            ></el-tooltip>
          </div>
          <div class="condition grade">
            <span class="title">成绩 : </span>
            <el-input
              @clear="searchBtn"
              v-model.trim="searchInput.gradeLow"
              class="grade_left"
              placeholder="最低成绩"
              style="width: 90px"
              @blur="gradeNumWatch"
            />
            <span class="line">-</span>
            <el-input
              :clearable="true"
              @clear="gradeClear"
              v-model.trim="searchInput.gradeHigh"
              class="grade_right"
              placeholder="最高成绩"
              style="width: 90px"
              @blur="gradeNumWatch"
            />
          </div>
        </div>
        <!-- 按钮列表 -->
        <div class="gongneng">
          <el-button
            type="primary"
            color="rgba(0, 97, 255, 1)"
            plain
            @click="importFile"
            >成绩导入</el-button
          >
          <el-tooltip
            class="box-item"
            effect="dark"
            content="根据上面的筛选条件导出内容"
            placement="top-start"
          >
            <el-button
              type="primary"
              color="rgba(0, 97, 255, 1)"
              plain
              @click="importExcel"
              >成绩导出</el-button
            >
          </el-tooltip>

          <el-button
            type="primary"
            color="rgba(0, 97, 255, 1)"
            plain
            @click="addClick"
            >新增成绩</el-button
          >
          <el-button type="danger" @click="delClick" plain>勾选删除</el-button>
        </div>
      </div>
      <div class="footer" v-loading="loading">
        <el-table
          :row-class-name="tableRowClassName"
          :data="tableData.list"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <el-table-column align="center" type="selection" width="80" />
          <el-table-column
            align="center"
            prop="semester"
            width="200"
            label="学期"
          />
          <el-table-column align="center" prop="grade" label="年级" />
          <el-table-column align="center" prop="schoolClass" label="班级" />
          <el-table-column align="center" prop="subjectStr" label="学科" />
          <el-table-column align="center" prop="examTypeStr" label="考试类型" />
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column align="center" prop="cardNo" label="学号" />
          <el-table-column align="center" prop="score" label="成绩" />
          <el-table-column align="center" prop="status" label="操作">
            <template #default="scope">
              <div class="look" @click="editClick(scope.row)">编辑</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper, slot"
          :total="total"
          @update:current-page="handleCurrentChange"
        />
      </div>

      <!-- 编辑按钮 -->
      <el-dialog
        class="editDialog"
        v-model="editVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="titleDialog"
        align-center
        width="650"
        :before-close="cancelEdit"
      >
        <el-form
          ref="editRef"
          :model="editRuleForm"
          :rules="editRules"
          label-width="100px"
          class="demo-ruleForm"
          :size="formSize"
          label-position="right"
          status-icon
        >
          <el-form-item label="学期 :" prop="semester">
            <!-- <el-input
              v-model.trim="editRuleForm.semester"
              placeholder="请输入学期"
              style="width: 400px"
            /> -->
            <el-select
              v-model="editRuleForm.semester"
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请选择学期"
              style="width: 400px"
            >
              <el-option
                :label="i.name"
                :value="`${i.name}-${i.id}`"
                v-for="i in semesterData"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名 :" prop="name">
            <el-select
              v-model="editRuleForm.name"
              popper-class="gradeSelect"
              filterable
              remote
              :remote-method="studentMethod"
              placeholder="请选择姓名"
              style="width: 400px"
              @change="changeName"
              clearable
            >
              <el-option
                v-for="item in studentData"
                :label="`${item.name}·${item.id}`"
                :value="`${item.name}·${item.id}`"
                :key="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.id }}</span
                >
              </el-option>
              <template #footer>
                <div class="addStudentMore">
                  <el-button
                    v-if="
                      studentCurrentPage < studentTotalPage &&
                      studentTotalPage != 0
                    "
                    @click="addStudentMore"
                    >加载更多+</el-button
                  >
                </div>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="年级 :" prop="yearClass">
            <el-select
              v-model="editRuleForm.yearClass"
              placeholder="请选择年级"
              disabled
              style="width: 400px"
              @change="yearClassChange"
            >
              <el-option
                v-for="i in gradeData"
                :label="i.name"
                :value="`${i.name}-${i.id}`"
              >
                <!-- <span style="float: left">{{ i.name }}</span> -->
                <!-- <span
                  style="color: var(--el-text-color-secondary); font-size: 13px"
                  >{{ i.id }}</span
                > -->
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级 :" prop="class">
            <el-select
              v-model="editRuleForm.class"
              placeholder="请选择班级"
              disabled
              style="width: 400px"
            >
              <el-option
                v-for="i in classsData"
                :label="i.name"
                :value="`${i.name}-${i.id}`"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="学号 :" prop="schoolNum">
            <el-input
              disabled
              v-model.trim="editRuleForm.schoolNum"
              placeholder="请输入学号"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="学科 :" prop="subject">
            <el-select
              v-model="editRuleForm.subject"
              placeholder="请选择学科"
              style="width: 400px"
            >
              <el-option
                v-for="i in studentSubDatas"
                :label="i.name"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考试类型 :" prop="examType">
            <el-select
              v-model="editRuleForm.examType"
              placeholder="请选择考试类型"
              style="width: 400px"
            >
              <el-option
                v-for="i in studentExamTypeDatas"
                :label="i.name"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="成绩 :" prop="grade">
            <el-input
              v-model.trim="editRuleForm.grade"
              placeholder="请输入成绩"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              class="queding"
              type="primary"
              @click="confirmEdit(editRef)"
            >
              确认
            </el-button>
            <el-button @click="cancelEdit(editRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 勾选删除 -->
      <el-dialog
        class="closeAccount"
        v-model="selDelVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="勾选删除"
        align-center
        width="500"
        :before-close="cancelSelDel"
      >
        <div class="content">
          <img src="@/assets/images/warning.png" alt="" />
          <span>确定对选中的成绩进行删除吗？删除后将无法恢复。</span>
        </div>
        <div class="option">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmSelDel"
          >
            确认
          </el-button>
          <el-button @click="cancelSelDel">取消</el-button>
        </div>
      </el-dialog>

      <!-- 导入弹窗 -->
      <el-dialog
        class="importXlsx"
        v-model="importXlsx"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="导入文件"
        align-center
        width="409"
        :before-close="closeXlsx"
      >
        <div class="btn">
          <el-button
            color="rgba(0, 97, 255,1)"
            @click="importTemp"
            plain
            class="importTemp"
          >
            模板下载</el-button
          >
          <el-upload
            class="avatar-uploader"
            action=""
            ref="upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="handleUpload"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <template #trigger>
              <el-button color="rgba(0, 97, 255, 1)" @click="updateImg" plain>
                导入文件</el-button
              >
            </template>
            <!-- <template #tip>
              <div class="el-upload__tip">
                （注：图片大小不超过10M，建议按3:2比例）
              </div>
            </template> -->
          </el-upload>
        </div>
        <div class="options">
          <el-button
            color="rgba(0, 97, 255, 1)"
            class="queding"
            type="primary"
            @click="importSuc()"
          >
            确定
          </el-button>
          <el-button class="congzhi" @click="closeXlsx()">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="bgImg" v-if="bgImg">
      <el-carousel
        @click="bgImg = false"
        ref="bgImgs"
        indicator-position
        arrow="always"
        :autoplay="false"
        trigger
      >
        <el-carousel-item v-for="item in bgImgList" :key="item.id">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div v-for="item in msgList">
    <div v-for="i in item.list">
      {{ i.name }}
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import eds from "@/utils/eds.js";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [
    {
      xq: "2019-2020秋季学期（下学期）",
      nj: "七年级",
      bj: "一班",
      xk: "语文",
      ks: "期中考试",
      xm: "张三",
      xh: "000001",
      cj: "85",
    },
  ],
});
const semesterData = ref(); //学期下拉数据
const gradeData = ref(); //年级下拉数据
const classsData = ref(); //班级下拉数据
const subjectData = ref(); //学科下拉数据
const examTypeData = ref(); //考试类型数据

const searchInput = reactive({
  keyWord: "",
  semester: "", // 学期
  grade: "", // 年级
  class: "", // 班级
  subject: "", // 学科
  examType: "", // 考试类型
  gradeLow: "", // 最低成绩
  gradeHigh: "", // 最高成绩
}); // 搜索按钮数据

// 失去焦点时成绩最低和最高判定
const gradeNumWatch = () => {
  let reg = /^[0-9]*[1-9][0-9]*$/;
  // 最低成绩和最高成绩判定
  if (searchInput.gradeLow != "" && searchInput.gradeHigh != "") {
    if (reg.test(searchInput.gradeLow) && reg.test(searchInput.gradeHigh)) {
      if (Number(searchInput.gradeLow) < Number(searchInput.gradeHigh)) {
        getList();
      } else {
        ElMessage({
          type: "warning",
          showClose: true,
          message: "最低成绩不能大于最高成绩",
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "warning",
        showClose: true,
        message: "请输入正确的成绩",
        center: true,
      });
    }
  }
};

const currentPage = ref(1); // 当前页
const pageSize = ref(8);
const total = ref(5); // 当前总数
const selectData = reactive({ list: [] }); // 表格勾选的数据

// 新增成绩中的学生分页列表
const studentData = ref();
const studentCurrentPage = ref(1);
const studentPageSize = ref(50);
const studentTotalPage = ref(); // 学生分页总共多少页，判断滚动到底是否还要加载
const studentInput = ref(); // 学生分页下拉框中的搜索字段
const studentExamTypeDatas = ref(); // 编辑中的考试类型数据
const studentSubDatas = ref(); // 编辑中的学科数据

// 编辑功能
const titleDialog = ref("");
const editVisible = ref(false);
const editRef = ref();
const editRuleForm = reactive({
  semester: "", // 学期
  yearClass: "", // 年级
  class: "", // 班级
  name: "", // 姓名
  schoolNum: "", // 学号
  subject: "", // 学科
  examType: "", // 考试类型
  grade: "", // 成绩
  id: "",
});
// 成绩验证
const validateGrade = (rule, value, callback) => {
  if (/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的成绩"));
  }
};
// 表单验证
const editRules = reactive({
  semester: [{ required: true, message: "学期不能为空", trigger: "blur" }],
  yearClass: [
    {
      required: true,
      message: "年级不能为空",
      trigger: "blur",
    },
  ],
  class: [
    {
      required: true,
      message: "班级不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "姓名不能为空",
      trigger: "blur",
    },
  ],
  schoolNum: [
    {
      required: true,
      message: "学号不能为空",
      trigger: "blur",
    },
  ],
  subject: [
    {
      required: true,
      message: "学科不能为空",
      trigger: "blur",
    },
  ],
  examType: [
    {
      required: true,
      message: "考试类型不能为空",
      trigger: "blur",
    },
  ],
  grade: [
    {
      required: true,
      message: "成绩不能为空",
      trigger: "blur",
    },
    { validator: validateGrade, trigger: "blur" },
  ],
});

// 删除弹窗
const selDelVisible = ref(false);

// 导入按钮
const upload = ref(); // 导入按钮ref
const fileXlsx = ref(); // 导入的文件file
const importXlsx = ref(false); // 导入弹窗

// 获取学期下拉
const semesterList = async () => {
  let semester = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySmartSemesters",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(
    semester,
    JSON.parse(eds.decryptDes(semester.data.data)),
    "学期下拉数据"
  );
  semesterData.value = JSON.parse(eds.decryptDes(semester.data.data));
};

// 年级数据下拉
const classDataList = async () => {
  semesterList();
  let grade = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartGrade/querySmartGrades",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // params: data,
  });
  console.log(
    grade,
    JSON.parse(eds.decryptDes(grade.data.data)),
    "年级下拉数据"
  );
  gradeData.value = JSON.parse(eds.decryptDes(grade.data.data));
  // classInfoList()// 班级下拉数据
};
// 改变年级选择
const yearClassChange = async (value) => {
  console.log(value);
  editRuleForm.class = "";
  let arr = value.split("-");
  classInfoList(arr[1]);
};
// 班级数据下拉
const classInfoList = async (value) => {
  let data = {
    gradeId: value,
  };
  let classs = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartClass/querySmartClasss",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });

  if (classs.data.code == 200) {
    console.log(
      classs,
      JSON.parse(eds.decryptDes(classs.data.data)),
      "班级下拉数据"
    );
    classsData.value = JSON.parse(eds.decryptDes(classs.data.data));
  } else {
    classsData.value = [];
  }
};
// 考试类型数据
const examTypeList = async (value) => {
  if (searchInput.grade) {
    let examType = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/queryExamTypes",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: {
        gradeId: value,
      },
    });
    console.log(value);

    console.log(
      examType,
      JSON.parse(eds.decryptDes(examType.data.data)),
      "考试类型下拉数据"
    );
    if (examType.data.code == 200) {
      examTypeData.value = JSON.parse(eds.decryptDes(examType.data.data));
    }
  } else {
    examTypeData.value = [];
  }
};
// 学科数据
const subjectList = async (value) => {
  if (searchInput.grade) {
    let subject = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/querySubjects",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: {
        gradeId: value,
      },
    });
    console.log(
      subject,
      JSON.parse(eds.decryptDes(subject.data.data)),
      "学科下拉数据"
    );

    subjectData.value = JSON.parse(eds.decryptDes(subject.data.data));
  } else {
    subjectData.value = [];
  }
};

// 获取成绩分页数据 （----------------------------------------------------------------）
const getList = async () => {
  loading.value = true;
  if (searchInput.grade) {
    classInfoList(searchInput.grade.split("-")[1]);
    examTypeList(searchInput.grade.split("-")[1]);
    subjectList(searchInput.grade.split("-")[1]);
  } else {
    searchInput.class = "";
    searchInput.subject = "";
    searchInput.examType = "";
    subjectData.value = [];
    classsData.value = [];
    examTypeData.value = [];
  }
  let data = {
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    name: searchInput.keyWord, // 用户名称
    semester: searchInput.semester,
    // grade: searchInput.grade,
    schoolClass: searchInput.class,
    subject: searchInput.subject,
    examType: searchInput.examType,
    MinScore: searchInput.gradeLow,
    MaxScore: searchInput.gradeHigh,
  };
  if (searchInput.grade) {
    data.grade = searchInput.grade.split("-")[0];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySmartScorePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "成绩分页数据");
  if (res.data.code == 200) {
    loading.value = false;
    tableData.list = JSON.parse(eds.decryptDes(res.data.data)).list;
    total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);
// 搜索 清除年级数据时
const nianJiClear = () => {
  if (searchInput.grade) {
    classInfoList(searchInput.grade.split("-")[1]);
    examTypeList(searchInput.grade.split("-")[1]);
    subjectList(searchInput.grade.split("-")[1]);

    getList();
  } else {
    subjectData.value = [];
    classsData.value = [];
    examTypeData.value = [];
  }
};
// 成绩查询
const gradeClear = () => {
  searchInput.gradeLow = "";
  searchInput.gradeHigh = "";
  getList();
};

// 添加按钮 （-------------------------------------------）
const addClick = async () => {
  titleDialog.value = "新增成绩";
  editVisible.value = true;
  studentCurrentPage.value = 1;
  studentList();
  // studentListScroll();
  editRuleForm.semester = "";
  editRuleForm.yearClass = "";
  editRuleForm.class = "";
  editRuleForm.name = "";
  editRuleForm.schoolNum = "";
  editRuleForm.subject = "";
  editRuleForm.examType = "";
  editRuleForm.grade = "";
  editRuleForm.id = "";
  classsData.value = []; // 新增时将班级下拉数据置为空
};
// 获取学生分页列表
const studentList = async () => {
  let data = {
    currentPage: studentCurrentPage.value,
    pageCount: studentPageSize.value,
    name: studentInput.value, // 用户名称
  };
  let student = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(
    student,
    JSON.parse(eds.decryptDes(student.data.data)),
    "学生分页数据"
  );
  studentData.value = JSON.parse(eds.decryptDes(student.data.data)).list;
  studentTotalPage.value = JSON.parse(
    eds.decryptDes(student.data.data)
  ).totalPage;
};
// 联系人下拉框搜索时加载
const studentMethod = (query) => {
  console.log(query);
  studentInput.value = query;
  studentCurrentPage.value = 1;
  studentList(); // 调用学生分页接口
};
// 学生分页触底加载更多
const studentListScroll = () => {
  nextTick(() => {
    const domElementNode = document.querySelector(
      ".gradeSelect .el-select-dropdown__wrap"
    );
    console.log(domElementNode);

    // 注册下拉滚动事件
    domElementNode.addEventListener("scroll", async () => {
      const isBottom =
        domElementNode.scrollHeight - domElementNode.scrollTop <=
        domElementNode.clientHeight;
      if (isBottom) {
        if (studentCurrentPage.value < studentTotalPage.value) {
          studentCurrentPage.value++;
          console.log(studentCurrentPage.value, "滚动里面");
          let data = {
            currentPage: studentCurrentPage.value,
            pageCount: studentPageSize.value,
            name: studentInput.value,
          };
          let res = await axios({
            method: "get",
            url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
            headers: {
              token: sessionStorage.getItem("token"),
              user_head: sessionStorage.getItem("userhead"),
            },
            params: data,
          });
          console.log(
            res,
            JSON.parse(eds.decryptDes(res.data.data)),
            "联系人数据"
          );
          studentData.value = [
            ...studentData.value,
            ...JSON.parse(eds.decryptDes(res.data.data)).list,
          ];
        } else {
          console.log("数据全部加载完成");
        }
      }
    });
  });
};
// 学生列表点击 加载更多
const addStudentMore = async () => {
  if (studentCurrentPage.value < studentTotalPage.value) {
    studentCurrentPage.value++;
    console.log(studentCurrentPage.value, "滚动里面");
    let data = {
      currentPage: studentCurrentPage.value,
      pageCount: studentPageSize.value,
      name: studentInput.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "联系人数据");
    studentData.value = [
      ...studentData.value,
      ...JSON.parse(eds.decryptDes(res.data.data)).list,
    ];
  }
};

//编辑按钮  （-------------------------------------------）
const editClick = async (row) => {
  editVisible.value = true;
  console.log(row, "编辑信息");
  titleDialog.value = "编辑成绩";
  studentCurrentPage.value = 1;
  studentList(); // 学生分页
  // studentListScroll(); // 学生分页触底加载更多
  classInfoList(row.gradeId); // 班级下拉
  // 考试类型
  let examType = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/queryExamTypes",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      gradeId: row.gradeId,
    },
  });
  if (examType.data.code == 200) {
    studentExamTypeDatas.value = JSON.parse(eds.decryptDes(examType.data.data));
  } else {
    studentExamTypeDatas.value = [];
  }
  // 学科数据
  let subject = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/querySubjects",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      gradeId: row.gradeId,
    },
  });
  console.log(
    subject,
    JSON.parse(eds.decryptDes(subject.data.data)),
    "学科下拉数据"
  );
  if (subject.data.code == 200) {
    studentSubDatas.value = JSON.parse(eds.decryptDes(subject.data.data));
  } else {
    studentSubDatas.value = [];
  }
  editRuleForm.semester = `${row.semester}-${row.semesterId}`;
  editRuleForm.yearClass = `${row.grade}-${row.gradeId}`;
  editRuleForm.class = `${row.schoolClass}-${row.schoolClassId}`;
  editRuleForm.name = `${row.name}·${row.userId}`;
  editRuleForm.schoolNum = row.cardNo;
  editRuleForm.subject = row.subject;
  editRuleForm.examType = row.examType;
  editRuleForm.grade = row.score;
  editRuleForm.id = row.id;
};
// 取消编辑按钮
const cancelEdit = () => {
  editVisible.value = false;
  editRef.value.resetFields();
};
// 编辑中选择了姓名学号 默认填写
const changeName = async (value) => {
  console.log(value);
  editRuleForm.subject = "";
  editRuleForm.examType = "";
  editRuleForm.grade = "";
  editRuleForm.yearClass = "";
  editRuleForm.class = "";
  editRuleForm.schoolNum = "";
  if (value) {
    let data = { id: value.split("·")[1] };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartUser/queryUserData",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    if (res.data.code == 200) {
      console.log(
        JSON.parse(eds.decryptDes(res.data.data)),
        "切换id获取学生信息"
      );
      let data = JSON.parse(eds.decryptDes(res.data.data));
      editRuleForm.yearClass = data.grade + "-" + data.gradeId;
      classInfoList(data.gradeId);
      editRuleForm.class = data.schoolClass + "-" + data.schoolClassId;
      editRuleForm.schoolNum = data.cardNo;
    }

    let examType = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/queryExamTypes",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: {
        gradeId: editRuleForm.yearClass.split("-")[1],
      },
    });
    if (examType.data.code == 200) {
      studentExamTypeDatas.value = JSON.parse(
        eds.decryptDes(examType.data.data)
      );
    } else {
      studentExamTypeDatas.value = [];
    }

    let subject = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartScore/querySubjects",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: {
        gradeId: editRuleForm.yearClass.split("-")[1],
      },
    });
    console.log(
      subject,
      JSON.parse(eds.decryptDes(subject.data.data)),
      "学科下拉数据"
    );
    if (subject.data.code == 200) {
      studentSubDatas.value = JSON.parse(eds.decryptDes(subject.data.data));
    } else {
      studentSubDatas.value = [];
    }
  }
};
// 确定编辑
const confirmEdit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      if (titleDialog.value == "新增成绩") {
        let data = {
          semester: editRuleForm.semester.split("-")[0], //  学期
          semesterId: editRuleForm.semester.split("-")[1], //  学期id
          grade: editRuleForm.yearClass.split("-")[0], // 年级
          gradeId: editRuleForm.yearClass.split("-")[1], // 年级
          schoolClass: editRuleForm.class.split("-")[0], // 班级
          schoolClassId: editRuleForm.class.split("-")[1], // 班级
          cardNo: editRuleForm.schoolNum, // 学号
          userId: editRuleForm.name.split("·")[1], // 用户ID
          subjectId: editRuleForm.subject, // 学科ID
          examType: editRuleForm.examType, // 考试类型
          score: editRuleForm.grade, // 成绩
        };
        let res = await axios({
          method: "post",
          url: api.value + "/wanzai/api/smartScore/insertSmartScore",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "新增成绩");
        if (res.data.code == 200) {
          getList();
          semesterList();
          editVisible.value = false;
          editRef.value.resetFields();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else if (titleDialog.value == "编辑成绩") {
        let data = {
          semester: editRuleForm.semester.split("-")[0], //  学期
          semesterId: editRuleForm.semester.split("-")[1], //  学期id
          grade: editRuleForm.yearClass.split("-")[0], // 年级
          gradeId: editRuleForm.yearClass.split("-")[1], // 年级
          schoolClass: editRuleForm.class.split("-")[0], // 班级
          schoolClassId: editRuleForm.class.split("-")[1], // 班级
          cardNo: editRuleForm.schoolNum, // 学号
          userId: editRuleForm.name.split("·")[1], // 用户ID
          subjectId: editRuleForm.subject, // 学科ID
          examType: editRuleForm.examType, // 考试类型
          score: editRuleForm.grade, // 成绩
          id: editRuleForm.id,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/wanzai/api/smartScore/updateSmartScoreById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "编辑成绩");
        if (res.data.code == 200) {
          getList();
          semesterList();
          editVisible.value = false;
          editRef.value.resetFields();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    }
  });
};

//删除按钮 （-------------------------------------------------------）
const delClick = async () => {
  if (selectData.list.length >= 1) {
    selDelVisible.value = true;
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "请先选定所需要删除的成绩!",
      center: true,
    });
  }
};
// 确定删除
const confirmSelDel = async () => {
  let userId = [];
  selectData.list.forEach((i) => {
    userId.push(i.id);
  });
  let data = {
    ids: userId,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartScore/deleteSmartScoreByIds",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "删除成功");
  if (res.data.code == 200) {
    selDelVisible.value = false;
    if (
      selectData.list.length == tableData.list.length &&
      currentPage.value != 1
    ) {
      currentPage.value = currentPage.value - 1;
    }
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelSelDel = () => {
  selDelVisible.value = false;
};
// 表格勾选删除成绩
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};

//导出功能 (-----------------------------------------------------------------)
const importExcel = async () => {
  let data = {
    name: searchInput.keyWord,
    semester: searchInput.semester,
    grade: searchInput.grade,
    schoolClass: searchInput.class,
    subject: searchInput.subject,
    examType: searchInput.examType,
    MinScore: searchInput.gradeLow,
    MaxScore: searchInput.gradeHigh,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/smartUserExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
    responseType: "blob",
  });
  console.log(res, "导出用户");
  if (res.status == 200) {
    let name = `成绩表信息`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};

// 添导入文件功能 （--------------------------------------------------------------------）
const importFile = () => {
  importXlsx.value = true;
};
const closeXlsx = () => {
  importXlsx.value = false;
  fileXlsx.value = "";
  upload.value.clearFiles();
};
// 导出模板
const importTemp = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartScore/downloadScoreExcel",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    // responseType: "blob",
  });
  console.log(res, "导出模板");
  if (res.status == 200) {
    var downloadPath = JSON.parse(eds.decryptDes(res.data.data));
    window.location.href = downloadPath;
    var downloadLink = document.createElement("a");
    downloadLink.style.display = "none"; // 使其隐藏
    downloadLink.href = downloadPath;
    downloadLink.download = "";
    downloadLink.click();
    document.body.appendChild(downloadLink);
    document.body.removeChild(downloadLink);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
};
// upload  http-request
const handleChange = (file, fileLists) => {
  console.log(file, "file11111");
  // let formData = new FormData(); //声明一个FormDate对象
  // formData.append("formFile", file.raw);
  // fileXlsx.value = formData;
  fileXlsx.value = file.raw;
};
// 可以获取文件参数(封面图上传图片)
const handleUpload = (file) => {
  console.log(file, "file22222");
};
// 移出文件
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  fileXlsx.value = "";
};
// 限制上传图片的大小类型
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile.type);
  if (
    rawFile.type !==
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  ) {
    ElMessage.error("文件必须为xlsx格式!");
    return false;
  }
  // else if (rawFile.size / 1024 / 1024 > 10) {
  //   ElMessage.error("图片的大小不能超过10MB!");
  //   return false;
  // }
  return true;
};
// 上传文件时多次上传会替换前一个文件
const handleExceed = (files) => {
  console.log(files, "替换文件");

  upload.value.clearFiles();
  const file = files[0];
  upload.value.handleStart(file);

  // let formData = new FormData(); //声明一个FormDate对象
  // formData.append("formFile", files.raw);
  // fileXlsx.value = formData;
  fileXlsx.value = files.raw;
};
// 确定导入文件
const importSuc = async () => {
  console.log("确定导入");
  let data = {
    file: fileXlsx.value,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartScore/importSmartScoreExcel",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
      "Content-Type": "multipart/form-data;charset=UTF-8",
    },
    data: data,
  });
  console.log(res);
  if (res.data.code == 200) {
    importXlsx.value = false;
    upload.value.clearFiles();
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  getList();
  classDataList();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 500px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      height: 60px;
      display: block;
      line-height: 60px;
      margin-right: 20px;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }
  .scrollId {
    overflow: auto;
    height: calc(100% - 61px);
  }
  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0 0 0;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 20px 10px 0;

        :deep(.el-input .el-input__inner) {
          font-size: 14px;
        }
        .title {
          padding: 0 25px 0 0;
        }
      }
      .grade {
        .el-input {
          :deep(.el-input__wrapper) {
            box-shadow: none;
          }
        }
        .grade_left {
          border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          border-left: 1px solid #dcdfe6;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        .line {
          display: block;
          height: 32px;
          line-height: 32px;
          padding: 0 8px;
          border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
        .grade_right {
          border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          border-right: 1px solid #dcdfe6;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
      .search {
        margin-right: 20px;
      }
    }

    .gongneng {
      margin: 10px 0 20px 0;

      span {
        color: #fff;
      }
      .el-button {
        margin-right: 10px;
      }
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }

    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }

  .footer {
    width: 96%;
    height: calc(100% - 270px);
    min-height: 300px;
    margin: 10px auto 30px;

    .el-table--fit {
      height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 14px;

        tr {
          // color: #000;
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 14px;
        // color: #000;

        &:hover {
          td {
            background-color: rgba(223, 236, 254, 1);
          }
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
        .normal {
          background-color: rgba(139, 195, 74, 1);
          color: #fff;
          padding: 4px;
        }
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.edit) {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(111, 182, 184, 1);
      }

      :deep(.look) {
        padding: 0 10px;
        cursor: pointer;
        color: rgba(30, 125, 251, 1);
      }

      .del {
        padding: 0 10px;
        color: rgba(212, 48, 48, 1);
        cursor: pointer;
      }

      // :deep(.look):hover {
      //   color: red;
      // }
      // :deep(.del):hover {
      //   color: red;
      // }
    }
  }
  // 编辑按钮
  :deep(.editDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 30px 10px 30px;
      .el-form-item__content {
        width: 200px;
        .el-input-group__append {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
          cursor: pointer;
          user-select: none;
        }
      }
      .el-form {
        .typeTitle {
          display: block;
          color: red;
          margin: 0 0 6px 100px;
        }
        .account {
          display: flex;
          justify-content: space-between;
          .el-form-item {
            .el-form-item__content {
              width: 300px;
            }
            .el-input {
              width: 300px;
            }
          }
        }
      }

      .options {
        margin: 50px 20px 20px 0;
        width: 100%;
        .el-form-item__content {
          display: flex;
          flex-direction: row-reverse;
        }

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  // 删除成绩
  :deep(.closeAccount) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // display: flex;
      // flex-direction: column-reverse;
      .content {
        height: 80px;
        font-size: 16px;
        padding: 20px 30px;
        display: flex;
        img {
          width: 25px;
          height: 25px;
          margin: 0 8px 0 0;
        }
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
  // 导入弹窗样式
  :deep(.importXlsx) {
    //   height: 420px;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 20px 20px 10px 20px;
      .btn {
        display: flex;
        .importTemp {
          margin-right: 15px;
        }
        .avatar-uploader {
          flex: 1;
        }
      }

      .options {
        margin: 15px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }

        display: flex;
        flex-direction: row-reverse;
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
<style lang="scss">
//添加成员 联系人下拉框样式
.gradeSelect {
  // border: 1px solid red;
  .el-select-dropdown__wrap {
    height: 200px;
    // border: 1px solid red;
  }
}
.el-popper {
  .addStudentMore {
    text-align: center;
  }
}
</style>