feat: 整合学生管理系统核心功能
赵亚鹏
2 months ago
parent
9f525a5277
commit
f0f4467bea
@ -0,0 +1,26 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取年级下的班级列表
|
||||||
|
export const getClassList = (params) => {
|
||||||
|
return request.get('/class/list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增班级
|
||||||
|
export const addClass = (data) => {
|
||||||
|
return request.post('/class/add', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑班级
|
||||||
|
export const editClass = (data) => {
|
||||||
|
return request.put('/class/edit', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除班级
|
||||||
|
export const deleteClass = (id) => {
|
||||||
|
return request.delete(`/class/delete/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查班级是否有学生
|
||||||
|
export const checkClassHasStudent = (classId) => {
|
||||||
|
return request.get('/class/check', { params: { classId } })
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取学生列表（支持班级筛选）
|
||||||
|
export const getStudentList = (params) => {
|
||||||
|
return request.get('/student/list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增学生
|
||||||
|
export const addStudent = (data) => {
|
||||||
|
return request.post('/student/add', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑学生
|
||||||
|
export const editStudent = (data) => {
|
||||||
|
return request.put('/student/edit', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除学生
|
||||||
|
export const deleteStudent = (id) => {
|
||||||
|
return request.delete(`/student/delete/${id}`)
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: '/api', // 后端接口基础路径
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
request.interceptors.request.use((config) => {
|
||||||
|
return config
|
||||||
|
})
|
||||||
|
|
||||||
|
// 响应拦截器（处理错误）
|
||||||
|
request.interceptors.response.use(
|
||||||
|
(response) => response.data,
|
||||||
|
(error) => {
|
||||||
|
console.error('请求错误', error)
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default request
|
||||||
@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<div class="class-page">
|
||||||
|
<h2>{{ currentTitle }}</h2>
|
||||||
|
|
||||||
|
<!-- 搜索区 + 批量删除按钮 -->
|
||||||
|
<div class="operate-bar">
|
||||||
|
<el-input
|
||||||
|
v-model="searchName"
|
||||||
|
placeholder="搜索班级名称"
|
||||||
|
style="width: 300px"
|
||||||
|
clearable
|
||||||
|
@clear="loadClassList"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="loadClassList" icon="Search" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
:disabled="selectedIds.length === 0"
|
||||||
|
icon="Delete"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<el-button type="primary" @click="handleAdd" style="margin-left: 10px">新增班级</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 班级表格 -->
|
||||||
|
<el-table
|
||||||
|
:data="classList"
|
||||||
|
border
|
||||||
|
style="margin-top: 10px"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="name" label="班级名称" width="200" />
|
||||||
|
<el-table-column prop="headTeacher" label="班主任" width="200" />
|
||||||
|
<el-table-column label="操作" width="200">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="dialogTitle">
|
||||||
|
<el-form :model="form" ref="formRef" label-width="100px">
|
||||||
|
<el-form-item
|
||||||
|
label="班级名称"
|
||||||
|
prop="name"
|
||||||
|
:rules="[{ required: true, message: '请输入班级名称', trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="班主任"
|
||||||
|
prop="headTeacher"
|
||||||
|
:rules="[{ required: true, message: '请输入班主任', trigger: 'blur' }]"
|
||||||
|
>
|
||||||
|
<el-input v-model="form.headTeacher" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { getClassList, addClass, editClass, deleteClass, checkClassHasStudent } from '@/api/class'
|
||||||
|
|
||||||
|
// 路由相关
|
||||||
|
const route = useRoute()
|
||||||
|
const currentGrade = ref(1)
|
||||||
|
const currentTitle = ref('一年级班级')
|
||||||
|
|
||||||
|
// 班级列表
|
||||||
|
const classList = ref([])
|
||||||
|
// 筛选条件
|
||||||
|
const searchName = ref('')
|
||||||
|
// 批量删除相关
|
||||||
|
const selectedIds = ref([])
|
||||||
|
// 弹窗相关
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogTitle = ref('新增班级')
|
||||||
|
const formRef = ref(null)
|
||||||
|
const form = reactive({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
headTeacher: '',
|
||||||
|
grade: currentGrade.value
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听表格勾选
|
||||||
|
const handleSelectionChange = (selection) => {
|
||||||
|
selectedIds.value = selection.map((row) => row.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
const handleBatchDelete = async () => {
|
||||||
|
if (selectedIds.value.length === 0) return
|
||||||
|
|
||||||
|
// 检查选中班级是否有学生
|
||||||
|
const hasStudentClass = []
|
||||||
|
for (const id of selectedIds.value) {
|
||||||
|
const res = await checkClassHasStudent(id)
|
||||||
|
if (res.data.hasStudent) {
|
||||||
|
const cls = classList.value.find((c) => c.id === id)
|
||||||
|
hasStudentClass.push(cls.name)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasStudentClass.length > 0) {
|
||||||
|
ElMessage.error(`以下班级有学生，无法删除：${hasStudentClass.join('、')}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirm = await ElMessageBox.confirm(
|
||||||
|
`确定删除选中的 ${selectedIds.value.length} 个班级？`,
|
||||||
|
'确认删除',
|
||||||
|
{ type: 'warning' }
|
||||||
|
).catch(() => false)
|
||||||
|
|
||||||
|
if (confirm) {
|
||||||
|
try {
|
||||||
|
await deleteClass(selectedIds.value.join(','))
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
loadClassList()
|
||||||
|
selectedIds.value = []
|
||||||
|
} catch (err) {
|
||||||
|
ElMessage.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载班级列表
|
||||||
|
const loadClassList = async () => {
|
||||||
|
const res = await getClassList({
|
||||||
|
grade: currentGrade.value, // 使用路由获取的年级
|
||||||
|
name: searchName.value
|
||||||
|
})
|
||||||
|
classList.value = res.data || [] // 确保数组类型
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增班级
|
||||||
|
const handleAdd = () => {
|
||||||
|
dialogTitle.value = '新增班级'
|
||||||
|
Object.assign(form, {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
headTeacher: '',
|
||||||
|
grade: currentGrade.value // 动态设置年级
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑班级
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
dialogTitle.value = '编辑班级'
|
||||||
|
Object.assign(form, row)
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存班级
|
||||||
|
const handleSave = async () => {
|
||||||
|
await formRef.value.validate()
|
||||||
|
try {
|
||||||
|
form.id ? await editClass(form) : await addClass(form)
|
||||||
|
dialogVisible.value = false
|
||||||
|
loadClassList()
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
} catch (err) {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个删除
|
||||||
|
const handleDelete = async (row) => {
|
||||||
|
const res = await checkClassHasStudent(row.id)
|
||||||
|
if (res.data.hasStudent) {
|
||||||
|
ElMessage.error('班级有学生，无法删除')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
await ElMessageBox.confirm(`确定删除【${row.name}】？`, '确认', { type: 'warning' }).catch(
|
||||||
|
() => false
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
await deleteClass(row.id)
|
||||||
|
loadClassList()
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
} catch (err) {
|
||||||
|
ElMessage.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路由监听
|
||||||
|
watch(
|
||||||
|
() => route.meta,
|
||||||
|
(meta) => {
|
||||||
|
currentGrade.value = meta.grade || 1 // 从路由元信息获取年级
|
||||||
|
currentTitle.value = meta.title || '班级管理' // 从路由元信息获取标题
|
||||||
|
form.grade = currentGrade.value // 更新表单年级
|
||||||
|
loadClassList() // 重新加载对应年级数据
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
onMounted(loadClassList)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.operate-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue