feat: 整合学生管理系统核心功能
赵亚鹏
2 weeks 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