|
|
|
|
@ -1,287 +0,0 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="student-page">
|
|
|
|
|
<h2>{{ currentTitle }}</h2>
|
|
|
|
|
|
|
|
|
|
<!-- 筛选区 + 批量删除按钮 -->
|
|
|
|
|
<div class="filter-bar">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="selectedClassId"
|
|
|
|
|
placeholder="选择班级"
|
|
|
|
|
style="width: 200px; margin-right: 10px"
|
|
|
|
|
@change="loadStudentList"
|
|
|
|
|
>
|
|
|
|
|
<el-option label="全部班级" value="" />
|
|
|
|
|
<!-- 修正：循环绑定 classList 并确保每个班级有 id 和 name 属性 -->
|
|
|
|
|
<el-option v-for="cls in classList" :key="cls.id" :label="cls.name" :value="cls.id" />
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchName"
|
|
|
|
|
placeholder="搜索学生姓名"
|
|
|
|
|
style="width: 300px; margin-right: 10px"
|
|
|
|
|
clearable
|
|
|
|
|
@clear="loadStudentList"
|
|
|
|
|
>
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button @click="loadStudentList" icon="Search" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
|
|
|
|
|
<!-- 批量删除按钮 -->
|
|
|
|
|
<el-button
|
|
|
|
|
type="danger"
|
|
|
|
|
@click="handleBatchDelete"
|
|
|
|
|
:disabled="selectedIds.length === 0"
|
|
|
|
|
icon="Delete"
|
|
|
|
|
style="margin-right: 10px"
|
|
|
|
|
>
|
|
|
|
|
批量删除
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<el-button type="primary" @click="handleAdd">新增学生</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 学生表格（带复选框） -->
|
|
|
|
|
<el-table
|
|
|
|
|
:data="studentList"
|
|
|
|
|
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="120" />
|
|
|
|
|
<el-table-column prop="age" label="年龄" width="80" />
|
|
|
|
|
<el-table-column prop="gender" label="性别" width="80">
|
|
|
|
|
<template #default="scope">{{ scope.row.gender === 1 ? '男' : '女' }}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="className" label="班级" width="150" />
|
|
|
|
|
<el-table-column prop="address" label="家庭住址" />
|
|
|
|
|
<el-table-column label="操作" width="180">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
|
|
<el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
v-model:current-page="currentPage"
|
|
|
|
|
v-model:page-size="pageSize"
|
|
|
|
|
:total="total"
|
|
|
|
|
style="margin-top: 10px; text-align: right"
|
|
|
|
|
@current-change="loadStudentList"
|
|
|
|
|
@size-change="loadStudentList"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- 新增/编辑弹窗 -->
|
|
|
|
|
<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="age"
|
|
|
|
|
:rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }]"
|
|
|
|
|
>
|
|
|
|
|
<el-input v-model.number="form.age" type="number" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="性别">
|
|
|
|
|
<el-radio-group v-model="form.gender">
|
|
|
|
|
<el-radio :label="1">男</el-radio>
|
|
|
|
|
<el-radio :label="2">女</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="班级"
|
|
|
|
|
prop="classId"
|
|
|
|
|
:rules="[{ required: true, message: '请选择班级', trigger: 'change' }]"
|
|
|
|
|
>
|
|
|
|
|
<el-select v-model="form.classId" placeholder="选择班级">
|
|
|
|
|
<el-option v-for="cls in classList" :key="cls.id" :label="cls.name" :value="cls.id" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="家庭住址" prop="address">
|
|
|
|
|
<el-input v-model="form.address" type="textarea" rows="3" />
|
|
|
|
|
</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 { getStudentList, addStudent, editStudent, deleteStudent } from '@/api/student'
|
|
|
|
|
import { getClassList } from '@/api/class'
|
|
|
|
|
|
|
|
|
|
// 路由相关 - 新增部分
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const currentGrade = ref(1)
|
|
|
|
|
const currentTitle = ref('一年级学生')
|
|
|
|
|
|
|
|
|
|
// 班级列表
|
|
|
|
|
const classList = ref([])
|
|
|
|
|
// 学生列表
|
|
|
|
|
const studentList = ref([])
|
|
|
|
|
const total = ref(0)
|
|
|
|
|
const currentPage = ref(1)
|
|
|
|
|
const pageSize = ref(10)
|
|
|
|
|
// 筛选条件
|
|
|
|
|
const searchName = ref('')
|
|
|
|
|
const selectedClassId = ref('')
|
|
|
|
|
// 批量删除相关
|
|
|
|
|
const selectedIds = ref([])
|
|
|
|
|
// 弹窗相关
|
|
|
|
|
const dialogVisible = ref(false)
|
|
|
|
|
const dialogTitle = ref('新增学生')
|
|
|
|
|
const formRef = ref(null)
|
|
|
|
|
const form = reactive({
|
|
|
|
|
id: '',
|
|
|
|
|
name: '',
|
|
|
|
|
age: null,
|
|
|
|
|
gender: 1,
|
|
|
|
|
classId: '',
|
|
|
|
|
address: '',
|
|
|
|
|
grade: currentGrade.value // 改为动态年级
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 监听表格勾选
|
|
|
|
|
const handleSelectionChange = (selection) => {
|
|
|
|
|
selectedIds.value = selection.map((row) => row.id)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 批量删除
|
|
|
|
|
const handleBatchDelete = async () => {
|
|
|
|
|
if (selectedIds.value.length === 0) return
|
|
|
|
|
|
|
|
|
|
const confirm = await ElMessageBox.confirm(
|
|
|
|
|
`确定删除选中的 ${selectedIds.value.length} 名学生？`,
|
|
|
|
|
'确认删除',
|
|
|
|
|
{ type: 'warning' }
|
|
|
|
|
).catch(() => false)
|
|
|
|
|
|
|
|
|
|
if (confirm) {
|
|
|
|
|
try {
|
|
|
|
|
await deleteStudent(selectedIds.value.join(','))
|
|
|
|
|
ElMessage.success('删除成功')
|
|
|
|
|
loadStudentList()
|
|
|
|
|
selectedIds.value = []
|
|
|
|
|
} catch (err) {
|
|
|
|
|
ElMessage.error('删除失败')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 加载班级列表 - 改为动态年级
|
|
|
|
|
const loadClassList = async () => {
|
|
|
|
|
const res = await getClassList({ grade: currentGrade.value })
|
|
|
|
|
// 关键修正：确保classList是数组且包含id和name属性
|
|
|
|
|
classList.value = res?.data || []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 加载学生列表 - 改为动态年级
|
|
|
|
|
const loadStudentList = async () => {
|
|
|
|
|
// 页码校验
|
|
|
|
|
const page = Math.max(currentPage.value, 1)
|
|
|
|
|
const size = Math.min(Math.max(pageSize.value, 1), 100)
|
|
|
|
|
|
|
|
|
|
const res = await getStudentList({
|
|
|
|
|
page,
|
|
|
|
|
size,
|
|
|
|
|
grade: currentGrade.value, // 使用路由获取的年级
|
|
|
|
|
classId: selectedClassId.value,
|
|
|
|
|
name: searchName.value
|
|
|
|
|
})
|
|
|
|
|
studentList.value = res?.list || [] // 确保数组类型
|
|
|
|
|
total.value = res?.total || 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 新增学生
|
|
|
|
|
const handleAdd = () => {
|
|
|
|
|
dialogTitle.value = '新增学生'
|
|
|
|
|
Object.assign(form, {
|
|
|
|
|
id: '',
|
|
|
|
|
name: '',
|
|
|
|
|
age: null,
|
|
|
|
|
classId: '',
|
|
|
|
|
address: '',
|
|
|
|
|
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 editStudent(form) : await addStudent(form)
|
|
|
|
|
dialogVisible.value = false
|
|
|
|
|
loadStudentList()
|
|
|
|
|
ElMessage.success('操作成功')
|
|
|
|
|
} catch (err) {
|
|
|
|
|
ElMessage.error('操作失败')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 单个删除
|
|
|
|
|
const handleDelete = async (id) => {
|
|
|
|
|
if (await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' }).catch(() => false)) {
|
|
|
|
|
try {
|
|
|
|
|
await deleteStudent(id)
|
|
|
|
|
loadStudentList()
|
|
|
|
|
ElMessage.success('删除成功')
|
|
|
|
|
} catch (err) {
|
|
|
|
|
ElMessage.error('删除失败')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 路由监听 - 新增部分
|
|
|
|
|
watch(
|
|
|
|
|
() => route.meta,
|
|
|
|
|
(meta) => {
|
|
|
|
|
currentGrade.value = meta.grade || 1 // 从路由元信息获取年级
|
|
|
|
|
currentTitle.value = meta.title || '学生管理' // 从路由元信息获取标题
|
|
|
|
|
form.grade = currentGrade.value // 更新表单年级
|
|
|
|
|
currentPage.value = 1 // 重置页码
|
|
|
|
|
selectedClassId.value = '' // 重置班级筛选
|
|
|
|
|
loadClassList() // 重新加载对应年级班级
|
|
|
|
|
loadStudentList() // 重新加载对应年级学生
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true }
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
await loadClassList()
|
|
|
|
|
await loadStudentList()
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.filter-bar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|