|
|
|
|
@ -0,0 +1,507 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-container style="min-height: 100vh; background-color: #f5f7fa;">
|
|
|
|
|
<!-- 侧边栏 -->
|
|
|
|
|
<el-aside :width="sideWidth+'px'" style="background-color: #f1f3f5; box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1); transition: all 0.3s;">
|
|
|
|
|
<Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
|
|
|
|
|
</el-aside>
|
|
|
|
|
|
|
|
|
|
<el-container>
|
|
|
|
|
<!-- Header -->
|
|
|
|
|
<el-header style="border-bottom: 1px solid #e0e0e0; background-color: #fff;">
|
|
|
|
|
<Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
|
|
|
|
|
</el-header>
|
|
|
|
|
|
|
|
|
|
<el-main style="padding: 20px; background-color: #fff; border-radius: 8px;">
|
|
|
|
|
<!-- 搜索框 -->
|
|
|
|
|
<el-row style="margin-bottom: 20px;" :gutter="20">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-input v-model="nameSearch" placeholder="搜索名字" clearable />
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-input v-model="gradeSearch" placeholder="搜索年级" clearable />
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-button type="primary" @click="fetchClasses">搜索</el-button>
|
|
|
|
|
<el-button @click="resetSearch" type="primary" style="margin-left: 10px;">重置</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!-- 班级管理 -->
|
|
|
|
|
<el-button type="primary" @click="openCreateClassDialog">新建班级</el-button>
|
|
|
|
|
<el-table :data="classes" style="width: 100%; margin-top: 20px;">
|
|
|
|
|
<el-table-column prop="name" label="班级名称" width="180"></el-table-column>
|
|
|
|
|
<el-table-column prop="grade" label="年级" width="100"></el-table-column>
|
|
|
|
|
<el-table-column prop="class1" label="班级" width="100"></el-table-column>
|
|
|
|
|
<el-table-column prop="command" label="备注" width="150"></el-table-column>
|
|
|
|
|
<el-table-column label="学生列表">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="viewStudents(scope.row)" type="success">查看学生</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="250">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="deleteClass(scope.row)" type="danger" size="small">删除班级</el-button>
|
|
|
|
|
<el-button @click="updateClass(scope.row)" type="primary" size="small" style="margin-left: 10px;">修改信息</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 查看学生弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="studentsDialogVisible" title="学生列表" width="500px">
|
|
|
|
|
<!-- 工具栏 -->
|
|
|
|
|
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="studentSearch"
|
|
|
|
|
placeholder="搜索学生"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 70%;"
|
|
|
|
|
@input="handleSearch"
|
|
|
|
|
/>
|
|
|
|
|
<el-button type="primary" @click="openAddStudentDialog">添加学生</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 学生表格 -->
|
|
|
|
|
<el-table :data="filteredStudents" style="width: 100%;">
|
|
|
|
|
<el-table-column prop="id" label="学号" width="120"></el-table-column>
|
|
|
|
|
<el-table-column prop="name" label="学生姓名" width="180"></el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
|
<el-table-column label="操作" width="150">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="deleteStudent(scope.row)" type="danger" size="small" style="margin-right: 10px;">
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="studentsDialogVisible = false">关闭</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 修改信息的弹窗 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
:visible.sync="updateDialogVisible"
|
|
|
|
|
title="修改班级信息"
|
|
|
|
|
width="50%">
|
|
|
|
|
<el-form :model="currentClass" ref="form" label-width="80px">
|
|
|
|
|
<el-form-item label="班级名称" prop="name">
|
|
|
|
|
<el-input v-model="currentClass.name" placeholder="请输入班级名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="年级" prop="grade">
|
|
|
|
|
<el-input v-model="currentClass.grade" placeholder="请输入年级"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="班级" prop="grade">
|
|
|
|
|
<el-input v-model="currentClass.class1" placeholder="请输入班级"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="grade">
|
|
|
|
|
<el-input v-model="currentClass.command" placeholder="请输入备注"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="updateDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="saveClass">保存</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 新建班级弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="createClassDialogVisible" title="新建班级" width="400px">
|
|
|
|
|
<el-form :model="newClass" ref="createClassForm">
|
|
|
|
|
<el-form-item label="班级名称" prop="name" :rules="[{ required: true, message: '请输入班级名称', trigger: 'blur' }]">
|
|
|
|
|
<el-input v-model="newClass.name" placeholder="请输入班级名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="年级" prop="grade" :rules="[{ required: true, message: '请选择年级', trigger: 'change' }]">
|
|
|
|
|
<el-input v-model="newClass.grade" placeholder="请输入班级名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="班级" prop="class1" :rules="[{ required: true, message: '请选择班级', trigger: 'change' }]">
|
|
|
|
|
<el-input v-model="newClass.class1" placeholder="请输入班级名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注" prop="command" :rules="[{ message: '请选择班级', trigger: 'change' }]">
|
|
|
|
|
<el-input v-model="newClass.class1" placeholder="请输入班级名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="createClassDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="createClass">确定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 添加学生弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="addStudentDialogVisible" title="批量添加学生" width="600px">
|
|
|
|
|
<!-- 学生列表 -->
|
|
|
|
|
<el-table
|
|
|
|
|
ref="table"
|
|
|
|
|
:data="availableStudents"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="selection" width="55"></el-table-column> <!-- 单选框 -->
|
|
|
|
|
<el-table-column prop="name" label="学生名称"></el-table-column>
|
|
|
|
|
<el-table-column prop="grade" label="年级"></el-table-column>
|
|
|
|
|
<el-table-column prop="class1" label="班级"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 底部按钮 -->
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="addStudentDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="addStudents">确定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</el-main>
|
|
|
|
|
|
|
|
|
|
</el-container>
|
|
|
|
|
</el-container>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Header from "@/components/gl/Header.vue";
|
|
|
|
|
import Aside from "@/components/gl/Aside.vue";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "ClassManage",
|
|
|
|
|
components: {Aside, Header},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
collapseBtnClass: "el-icon-s-fold",
|
|
|
|
|
isCollapse: false,
|
|
|
|
|
sideWidth: 200,
|
|
|
|
|
logoTextShow: true,
|
|
|
|
|
nameSearch: null, // 班级搜索框的绑定
|
|
|
|
|
gradeSearch: null, // 年级搜索框的绑定
|
|
|
|
|
classes: [], // 班级列表
|
|
|
|
|
students: [], // 学生列表
|
|
|
|
|
filteredStudents: [], //过滤后的学生列表
|
|
|
|
|
studentSearch: "",// 搜索关键字
|
|
|
|
|
newClass: [], // 新建班级数据
|
|
|
|
|
searchQuery: '', // 存储搜索框输入的内容
|
|
|
|
|
availableStudents: [], //所有学生列表
|
|
|
|
|
selectedStudents: [{ id: 1, name: 'Student 1', grade: null, class1: null },], // 选中的学生
|
|
|
|
|
selectedClass: "", // 当前选中的班级
|
|
|
|
|
currentClass: [], //修改班级数据
|
|
|
|
|
createClassDialogVisible: false, // 新建班级弹窗显示状态
|
|
|
|
|
addStudentsDialogVisible: false, // 添加学生弹窗显示状态
|
|
|
|
|
studentsDialogVisible: false, // 控制查看学生弹窗的显示与隐藏
|
|
|
|
|
addStudentDialogVisible: false, // 控制添加学生弹窗显示
|
|
|
|
|
updateDialogVisible: false, // 控制修改班级弹窗的显示与隐藏
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
collapse() {
|
|
|
|
|
this.isCollapse = !this.isCollapse;
|
|
|
|
|
if (this.isCollapse) {
|
|
|
|
|
this.sideWidth = 64;
|
|
|
|
|
this.collapseBtnClass = "el-icon-s-unfold";
|
|
|
|
|
this.logoTextShow = false;
|
|
|
|
|
} else {
|
|
|
|
|
this.sideWidth = 200;
|
|
|
|
|
this.collapseBtnClass = "el-icon-s-fold";
|
|
|
|
|
this.logoTextShow = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//修改班级信息
|
|
|
|
|
async saveClass() {
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.post("http://localhost:8080/gl/classManage/updateClass",
|
|
|
|
|
this.currentClass,
|
|
|
|
|
{
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`, // Bearer token
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (response.data.code === 200 && response.data.data > 0) {
|
|
|
|
|
this.$message.success("修改成功");
|
|
|
|
|
this.updateDialogVisible = false;
|
|
|
|
|
await this.fetchClasses();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("数据异常");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$message.error("接口异常！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 监听选中变化，获取选中的学生
|
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
|
this.selectedStudents = val; // `val` 是当前选中的学生数据
|
|
|
|
|
},
|
|
|
|
|
// 防抖处理的搜索方法
|
|
|
|
|
handleSearch: debounce(function () {
|
|
|
|
|
if (this.studentSearch.trim()) {
|
|
|
|
|
this.filterStudents(); // 只有输入非空时才进行过滤
|
|
|
|
|
} else {
|
|
|
|
|
this.filteredStudents = this.students; // 如果没有输入，恢复所有学生
|
|
|
|
|
}
|
|
|
|
|
}, 300), // 设置防抖的时间为300ms
|
|
|
|
|
|
|
|
|
|
// 过滤学生的方法
|
|
|
|
|
filterStudents() {
|
|
|
|
|
if (!this.students.length) return;
|
|
|
|
|
|
|
|
|
|
this.filteredStudents = this.students.filter(student => {
|
|
|
|
|
// 将 id 转换为字符串后再进行包含判断
|
|
|
|
|
return student.name.includes(this.studentSearch) ||
|
|
|
|
|
student.id.toString().includes(this.studentSearch); // 强制转换 id 为字符串
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 打开添加学生弹窗
|
|
|
|
|
async openAddStudentDialog(){
|
|
|
|
|
this.addStudentDialogVisible = true;
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.get("http://localhost:8080/system/role/selectUserByStudentKey", {
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`,
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if(response.data.code === 200){
|
|
|
|
|
this.availableStudents = response.data.data;
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("数据异常");
|
|
|
|
|
}
|
|
|
|
|
}catch (error){
|
|
|
|
|
this.$message.error("接口异常！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//删除学生
|
|
|
|
|
async deleteStudent(row) {
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.delete("http://localhost:8080/gl/classManage/deleteStudent", {
|
|
|
|
|
params: {
|
|
|
|
|
id: row.id, // 学生的 id
|
|
|
|
|
grade: this.selectedClass.grade, // 年级
|
|
|
|
|
Class1: this.selectedClass.class1 // 班级
|
|
|
|
|
},
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}` // Bearer token
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (response.data.code === 200 && response.data.data > 0) {
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
await this.viewStudents(this.selectedClass);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("数据异常");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$message.error("接口异常！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 打开新建班级弹窗
|
|
|
|
|
openCreateClassDialog() {
|
|
|
|
|
this.createClassDialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 新建班级
|
|
|
|
|
async createClass() {
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.post("http://localhost:8080/gl/classManage/addClass1",
|
|
|
|
|
{
|
|
|
|
|
name: this.newClass.name,
|
|
|
|
|
grade: this.newClass.grade,
|
|
|
|
|
class1: this.newClass.class1,
|
|
|
|
|
command: this.newClass.command
|
|
|
|
|
},{
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`,
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if(response.data.code === 200 && response.data.data > 0){
|
|
|
|
|
this.$message.success("班级添加成功！");
|
|
|
|
|
await this.fetchClasses();
|
|
|
|
|
this.createClassDialogVisible = false;
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("班级添加失败！");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$message.error("接口异常！");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 修改班级
|
|
|
|
|
updateClass(row){
|
|
|
|
|
// 将当前行的数据复制到 currentClass 中
|
|
|
|
|
this.currentClass = { ...row };
|
|
|
|
|
// 显示弹窗
|
|
|
|
|
this.updateDialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 删除班级
|
|
|
|
|
deleteClass(classItem) {
|
|
|
|
|
this.$confirm('确定删除该班级吗?', '删除班级', {
|
|
|
|
|
confirmButtonText: '删除',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
const index = this.classes.indexOf(classItem);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.classes.splice(index, 1);
|
|
|
|
|
this.$message.success('班级删除成功');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 添加学生到班级
|
|
|
|
|
addStudents() {
|
|
|
|
|
// 检查所有选中的学生，是否有 grade 或 class1 已填写
|
|
|
|
|
const studentsWithFilledInfo = this.selectedStudents.filter(student => student.grade || student.class1);
|
|
|
|
|
|
|
|
|
|
// 如果有学生的 grade 或 class1 已填写，弹出确认框
|
|
|
|
|
if (studentsWithFilledInfo.length > 0) {
|
|
|
|
|
const studentNames = studentsWithFilledInfo.map(student => student.name).join(', ');
|
|
|
|
|
|
|
|
|
|
this.$confirm(
|
|
|
|
|
`学生 ${studentNames} 的年级或班级已经填写，是否继续添加新班级？\n\n 注：加入新班级会退出原来的班级，一个学生只能有一个班级。`,
|
|
|
|
|
'确认添加班级',
|
|
|
|
|
{
|
|
|
|
|
confirmButtonText: '继续',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}
|
|
|
|
|
).then(() => {
|
|
|
|
|
// 用户点击“继续”按钮时，执行批量更新操作
|
|
|
|
|
this.updateAllStudents();
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 如果没有学生需要确认，直接执行批量添加操作
|
|
|
|
|
this.updateAllStudents();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async updateAllStudents() {
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const requestData = JSON.parse(JSON.stringify({
|
|
|
|
|
studentList: this.selectedStudents,
|
|
|
|
|
grade: this.selectedClass.grade,
|
|
|
|
|
class1: this.selectedClass.class1
|
|
|
|
|
}));
|
|
|
|
|
const response = await axios.post("http://localhost:8080/gl/classManage/insertClassByStudentList",
|
|
|
|
|
requestData,
|
|
|
|
|
{
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`,
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
console.log(response);
|
|
|
|
|
if(response.data.code === 200 && response.data.data > 0){
|
|
|
|
|
this.$message.success("学生添加成功");
|
|
|
|
|
await this.viewStudents(this.selectedClass);
|
|
|
|
|
this.addStudentDialogVisible = false;
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("学生添加失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$message.error("接口异常");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查看班级中的学生
|
|
|
|
|
async viewStudents(classItem) {
|
|
|
|
|
this.studentsDialogVisible = true;
|
|
|
|
|
this.selectedClass = classItem;
|
|
|
|
|
try {
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if (!token) {
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.get("http://localhost:8080/gl/classManage/studentListByGradeAndClass1", {
|
|
|
|
|
params: {
|
|
|
|
|
grade: classItem.grade,
|
|
|
|
|
Class1: classItem.class1
|
|
|
|
|
},
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`,
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if(response.data.code === 200){
|
|
|
|
|
this.students = response.data.data;
|
|
|
|
|
this.filteredStudents = this.students;
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("获取数据失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$message.error("接口异常");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取班级列表
|
|
|
|
|
async fetchClasses(){
|
|
|
|
|
try{
|
|
|
|
|
const token = this.$store.state.tokens[this.userId];
|
|
|
|
|
if(!token){
|
|
|
|
|
alert("用户未登录，请重新登录！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const response = await axios.get("http://localhost:8080/gl/classManage/selectClass", {
|
|
|
|
|
params: {
|
|
|
|
|
name: this.nameSearch,
|
|
|
|
|
grade: this.gradeSearch
|
|
|
|
|
},
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${token}`,
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
if(response.data.code === 200){
|
|
|
|
|
this.classes = response.data.data;
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("获取班级列表失败");
|
|
|
|
|
}
|
|
|
|
|
}catch (error){
|
|
|
|
|
this.$message.error("接口异常");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
resetSearch() {
|
|
|
|
|
// 清空搜索框内容
|
|
|
|
|
this.nameSearch = null;
|
|
|
|
|
this.gradeSearch = null;
|
|
|
|
|
this.fetchClasses();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 在创建时获取学生列表
|
|
|
|
|
created() {
|
|
|
|
|
this.userId = this.$route.query.userId; // 从路由获取用户ID
|
|
|
|
|
this.fetchClasses();
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.el-button {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
