refactor(class): 优化班级页面布局与删除功能

- 调整学生查询区域样式,使其占用两行空间
- 移除年级和单元列表中的删除按钮及新增操作相关代码
- 新增删除学生与班级前的确认弹窗提示,防止误操作
- 捕获删除确认框的取消或关闭事件,避免错误提示
- 主动导入 Element Plus 组件库样式文件,保证样式完整
- 修正角色同步代码中 Redis 写入方式,避免二次序列化问题
This commit is contained in:
lbw
2025-12-29 15:55:36 +08:00
parent 5858bf2ecc
commit 5ebf40101d
3 changed files with 16 additions and 45 deletions

View File

@@ -48,6 +48,7 @@ public class RoleServiceImpl implements RoleService {
List<RoleDO> roleDOs = roleIds.stream().map(roleId2RoleDO::get).toList();
List<String> user2RoleKeys = roleDOs.stream().map(RoleDO::getRoleKey).toList();
log.info("将用户 {} 的角色同步到 redis 中, {}", userId, roleKeys);
// 不要使用 JsonUtils.toJsonString(user2RoleKeys); 会造成二次序列化
redisTemplate.opsForValue().set(RoleConstants.buildUserRoleKey(userId), user2RoleKeys);
});
}

View File

@@ -1,5 +1,6 @@
import '@/assets/main.css'
import 'nprogress/nprogress.css'
import 'element-plus/dist/index.css'
// 导入路由
import router from '@/router'
// 导入全局路由守卫

View File

@@ -35,7 +35,7 @@
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
<div class="text-lg font-semibold mb-4">学生查询</div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<el-input v-model="studentName" placeholder="按姓名查询" clearable style="max-width: 220px" />
@@ -96,56 +96,12 @@
row-key="id" :current-row-key="selectedGradeId" @row-click="onGradeRowClick">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="年级名称" min-width="160" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="danger" size="small"
@click.stop="onDeleteGrade(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background layout="prev, pager, next, sizes, total" :total="gradeTotalCount"
:page-size="gradePageSize" :current-page="gradePageNo"
@current-change="handleGradePageChange" @size-change="handleGradeSizeChange" />
</div>
<div class="mt-3 flex justify-end">
<el-button type="primary" @click="showAddGradeDialog = true">新增年级</el-button>
</div>
<AddGradeDialog v-model="showAddGradeDialog" @success="fetchGrades" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="unitLoading">
<div class="text-lg font-semibold mb-4">单元列表</div>
<el-table ref="unitTableRef" :data="units" border class="w-full">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="单元名称" min-width="200" />
<el-table-column prop="version" label="版本" min-width="120" />
<el-table-column prop="createAt" label="创建时间" min-width="160" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="danger" size="small" @click.stop="onDeleteUnit(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination
background
layout="prev, pager, next, sizes, total"
:total="unitTotalCount"
:page-size="unitPageSize"
:current-page="unitPageNo"
@current-change="handleUnitPageChange"
@size-change="handleUnitSizeChange"
/>
</div>
<div class="mt-3 flex justify-end">
<el-button type="primary" :disabled="!selectedGradeId" @click="showAddUnitDialog = true">新增单元</el-button>
</div>
<AddUnitDialog
v-model="showAddUnitDialog"
:default-grade-id="selectedGradeId"
@success="fetchUnits"
/>
</div>
</div>
@@ -169,6 +125,7 @@ import LessonPlanDialog from '@/layouts/components/LessonPlanDialog.vue'
import { getUnitList, deleteUnit } from '@/api/unit'
import AddUnitDialog from '@/layouts/components/AddUnitDialog.vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
const classes = ref([])
const pageNo = ref(1)
@@ -311,6 +268,11 @@ function onGradeRowClick(row) {
}
async function onDeleteStudent(row) {
try {
await ElMessageBox.confirm('确认删除该学生?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await deleteStudent(row.id)
ElMessage.success('删除成功')
if (selectedStudentIds.value?.length) {
@@ -319,11 +281,17 @@ async function onDeleteStudent(row) {
}
await fetchStudents()
} catch (e) {
if (e === 'cancel' || e === 'close') return
ElMessage.error('删除失败')
}
}
async function onDeleteClass(row) {
try {
await ElMessageBox.confirm('确认删除该班级?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await deleteClass(row.id)
ElMessage.success('删除成功')
if (selectedClassId.value === row.id) {
@@ -333,6 +301,7 @@ async function onDeleteClass(row) {
}
await fetchClasses()
} catch (e) {
if (e === 'cancel' || e === 'close') return
ElMessage.error('删除失败')
}
}