合并页面，通过路由传递参数实现跳转
赵亚鹏
2 weeks ago
commit
77b0180790
@ -0,0 +1,36 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
# my-vue-app
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Recommended Browser Setup
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "my-vue-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"axios": "^1.13.2",
|
||||
"element-plus": "^2.11.7",
|
||||
"less": "^4.4.2",
|
||||
"unplugin-auto-import": "^20.2.0",
|
||||
"unplugin-vue-components": "^30.0.0",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"vite": "^7.1.11",
|
||||
"vite-plugin-vue-devtools": "^8.0.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<RouterView></RouterView>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app{
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -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,56 @@
|
||||
<template>
|
||||
<el-menu
|
||||
default-active="/student/grade1"
|
||||
router
|
||||
background-color="#545c64"
|
||||
text-color="white"
|
||||
active-text-color="#ffd04b"
|
||||
>
|
||||
<!-- 学生管理分组 -->
|
||||
<el-sub-menu index="student">
|
||||
<template #title>
|
||||
<el-icon><User /></el-icon>
|
||||
<span>学生管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/student/grade1">一年级</el-menu-item>
|
||||
<el-menu-item index="/student/grade2">二年级</el-menu-item>
|
||||
<el-menu-item index="/student/grade3">三年级</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 班级管理分组 -->
|
||||
<el-sub-menu index="class">
|
||||
<template #title>
|
||||
<el-icon><School /></el-icon>
|
||||
<span>班级管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/class/grade1">一年级班级</el-menu-item>
|
||||
<el-menu-item index="/class/grade2">二年级班级</el-menu-item>
|
||||
<el-menu-item index="/class/grade3">三年级班级</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { User, School } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.icons{
|
||||
width:18px;
|
||||
height:18px;
|
||||
margin-right:5px;
|
||||
|
||||
}
|
||||
.el-menu{
|
||||
border-right:none;
|
||||
h3{
|
||||
line-height: 48px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.el-aside{
|
||||
height:100%;
|
||||
background-color: #545c64;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import "@/assets/less/index.less"
|
||||
import router from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 1. 先注册 Element Plus
|
||||
app.use(ElementPlus)
|
||||
// 2. 再注册所有图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
// 3. 最后挂载应用和路由
|
||||
app.use(router).mount('#app')
|
||||
@ -0,0 +1,63 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Main from '@/views/Main.vue';
|
||||
import ClassManagement from '@/views/class/ClassGrade.vue';
|
||||
import StudentManagement from '@/views/student/StudentManagement.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: Main,
|
||||
children: [
|
||||
// 班级管理路由
|
||||
{
|
||||
path: 'class/grade1',
|
||||
name: 'ClassGrade1',
|
||||
component: ClassManagement,
|
||||
meta: { title: '一年级班级', grade: 1 }
|
||||
},
|
||||
{
|
||||
path: 'class/grade2',
|
||||
name: 'ClassGrade2',
|
||||
component: ClassManagement,
|
||||
meta: { title: '二年级班级', grade: 2 }
|
||||
},
|
||||
{
|
||||
path: 'class/grade3',
|
||||
name: 'ClassGrade3',
|
||||
component: ClassManagement,
|
||||
meta: { title: '三年级班级', grade: 3 }
|
||||
},
|
||||
|
||||
// 学生管理路由
|
||||
{
|
||||
path: 'student/grade1',
|
||||
name: 'StudentGrade1',
|
||||
component: StudentManagement,
|
||||
meta: { title: '一年级学生', grade: 1 }
|
||||
},
|
||||
{
|
||||
path: 'student/grade2',
|
||||
name: 'StudentGrade2',
|
||||
component: StudentManagement,
|
||||
meta: { title: '二年级学生', grade: 2 }
|
||||
},
|
||||
{
|
||||
path: 'student/grade3',
|
||||
name: 'StudentGrade3',
|
||||
component: StudentManagement,
|
||||
meta: { title: '三年级学生', grade: 3 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/class/grade1'
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -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,40 @@
|
||||
<template>
|
||||
<el-container class="layout-container">
|
||||
<!-- 左侧导航 -->
|
||||
<el-aside width="200px" class="aside">
|
||||
<CommonAside />
|
||||
</el-aside>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<el-container>
|
||||
<el-header class="header">
|
||||
<h1>{{ $route.meta.title || '学生班级管理系统' }}</h1>
|
||||
</el-header>
|
||||
<el-main class="main">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CommonAside from '@/components/CommonAside.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
}
|
||||
.aside {
|
||||
background-color: #545c64;
|
||||
color: white;
|
||||
}
|
||||
.header {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.main {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,220 @@
|
||||
<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"></el-button>
|
||||
</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>
|
||||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||
<el-table-column prop="name" label="班级名称" width="200"></el-table-column>
|
||||
<el-table-column prop="headTeacher" label="班主任" width="200"></el-table-column>
|
||||
<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-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="班主任" prop="headTeacher" :rules="[{ required: true, message: '请输入班主任', trigger: 'blur' }]">
|
||||
<el-input v-model="form.headTeacher"></el-input>
|
||||
</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>
|
||||
@ -0,0 +1,37 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
// import AutoImport from 'unplugin-auto-import/vite'
|
||||
// import Components from 'unplugin-vue-components/vite'
|
||||
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
// 匹配所有以 '/api' 开头的请求，转发到后端
|
||||
'/api': {
|
||||
target: 'http://localhost:8080', // 后端接口地址
|
||||
changeOrigin: true, // 允许跨域
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
// AutoImport({
|
||||
// resolvers: [ElementPlusResolver()],
|
||||
// }),
|
||||
// Components({
|
||||
// resolvers: [ElementPlusResolver()],
|
||||
// }),
|
||||
],
|
||||
//添加的别名
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue