🎉 initial commit
This commit is contained in:
10
.env.development
Normal file
10
.env.development
Normal file
@@ -0,0 +1,10 @@
|
||||
# 开发环境配置
|
||||
VITE_NODE_ENV='development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API='/api'
|
||||
|
||||
# 网络请求公用地址
|
||||
VITE_API_BASE_URL=''
|
||||
|
||||
|
||||
10
.env.production
Normal file
10
.env.production
Normal file
@@ -0,0 +1,10 @@
|
||||
# 开发环境配置
|
||||
VITE_NODE_ENV='production'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API='/api'
|
||||
|
||||
# 网络请求公用地址
|
||||
VITE_API_BASE_URL=''
|
||||
|
||||
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
109
components.d.ts
vendored
Normal file
109
components.d.ts
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AAlert: typeof import('ant-design-vue/es')['Alert']
|
||||
AAvatar: typeof import('ant-design-vue/es')['Avatar']
|
||||
ABadge: typeof import('ant-design-vue/es')['Badge']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup']
|
||||
ACard: typeof import('ant-design-vue/es')['Card']
|
||||
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
|
||||
ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
|
||||
ACol: typeof import('ant-design-vue/es')['Col']
|
||||
ACollapse: typeof import('ant-design-vue/es')['Collapse']
|
||||
ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
|
||||
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
|
||||
ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
|
||||
ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
|
||||
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||
AdminHeader: typeof import('./src/components/layout/AdminHeader.vue')['default']
|
||||
AdminLayout: typeof import('./src/components/layout/AdminLayout.vue')['default']
|
||||
AdminSidebar: typeof import('./src/components/layout/AdminSidebar.vue')['default']
|
||||
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
|
||||
AEmpty: typeof import('ant-design-vue/es')['Empty']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AFormItemRest: typeof import('ant-design-vue/es')['FormItemRest']
|
||||
AImage: typeof import('ant-design-vue/es')['Image']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
|
||||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||
AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
|
||||
ALayout: typeof import('ant-design-vue/es')['Layout']
|
||||
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
|
||||
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
|
||||
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
|
||||
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||
AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
|
||||
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APageHeader: typeof import('ant-design-vue/es')['PageHeader']
|
||||
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
|
||||
AProgress: typeof import('ant-design-vue/es')['Progress']
|
||||
ARadio: typeof import('ant-design-vue/es')['Radio']
|
||||
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
||||
ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
|
||||
AResult: typeof import('ant-design-vue/es')['Result']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
AStatistic: typeof import('ant-design-vue/es')['Statistic']
|
||||
AStep: typeof import('ant-design-vue/es')['Step']
|
||||
ASteps: typeof import('ant-design-vue/es')['Steps']
|
||||
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
|
||||
ASwitch: typeof import('ant-design-vue/es')['Switch']
|
||||
ATable: typeof import('ant-design-vue/es')['Table']
|
||||
ATabPane: typeof import('ant-design-vue/es')['TabPane']
|
||||
ATabs: typeof import('ant-design-vue/es')['Tabs']
|
||||
ATag: typeof import('ant-design-vue/es')['Tag']
|
||||
ATextarea: typeof import('ant-design-vue/es')['Textarea']
|
||||
ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
|
||||
AUpload: typeof import('ant-design-vue/es')['Upload']
|
||||
AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
|
||||
BannerForm: typeof import('./src/views/banners/components/BannerForm.vue')['default']
|
||||
BannerList: typeof import('./src/views/banners/components/BannerList.vue')['default']
|
||||
BannerPage: typeof import('./src/views/banners/BannerPage.vue')['default']
|
||||
BatchImport: typeof import('./src/views/schools/components/BatchImport.vue')['default']
|
||||
BatchOperations: typeof import('./src/views/questions/components/BatchOperations.vue')['default']
|
||||
ClassBatchImport: typeof import('./src/views/classes/components/ClassBatchImport.vue')['default']
|
||||
ClassForm: typeof import('./src/views/schools/components/ClassForm.vue')['default']
|
||||
ClassFormModal: typeof import('./src/views/classes/components/ClassFormModal.vue')['default']
|
||||
ClassPage: typeof import('./src/views/classes/ClassPage.vue')['default']
|
||||
ClassStudentsModal: typeof import('./src/views/classes/components/ClassStudentsModal.vue')['default']
|
||||
DashboardPage: typeof import('./src/views/dashboard/DashboardPage.vue')['default']
|
||||
GradeForm: typeof import('./src/views/schools/components/GradeForm.vue')['default']
|
||||
GradeFormModal: typeof import('./src/views/grades/components/GradeFormModal.vue')['default']
|
||||
GradePage: typeof import('./src/views/grades/GradePage.vue')['default']
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
ImportExport: typeof import('./src/views/questions/components/ImportExport.vue')['default']
|
||||
LoginPage: typeof import('./src/views/auth/LoginPage.vue')['default']
|
||||
PasswordPage: typeof import('./src/views/profile/PasswordPage.vue')['default']
|
||||
ProfilePage: typeof import('./src/views/profile/ProfilePage.vue')['default']
|
||||
QuestionForm: typeof import('./src/views/questions/components/QuestionForm.vue')['default']
|
||||
QuestionList: typeof import('./src/views/questions/components/QuestionList.vue')['default']
|
||||
QuestionPage: typeof import('./src/views/questions/QuestionPage.vue')['default']
|
||||
RecordDetailModal: typeof import('./src/views/records/components/RecordDetailModal.vue')['default']
|
||||
RecordList: typeof import('./src/views/records/components/RecordList.vue')['default']
|
||||
RecordPage: typeof import('./src/views/records/RecordPage.vue')['default']
|
||||
RichEditor: typeof import('./src/components/RichEditor.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SchoolForm: typeof import('./src/views/schools/components/SchoolForm.vue')['default']
|
||||
SchoolPage: typeof import('./src/views/schools/SchoolPage.vue')['default']
|
||||
SchoolTree: typeof import('./src/views/schools/components/SchoolTree.vue')['default']
|
||||
StatisticsCards: typeof import('./src/views/records/components/StatisticsCards.vue')['default']
|
||||
StudentFormModal: typeof import('./src/views/classes/components/StudentFormModal.vue')['default']
|
||||
UserDetailModal: typeof import('./src/views/users/components/UserDetailModal.vue')['default']
|
||||
UserList: typeof import('./src/views/users/components/UserList.vue')['default']
|
||||
UserPage: typeof import('./src/views/users/UserPage.vue')['default']
|
||||
}
|
||||
}
|
||||
59
eslint.config.ts
Normal file
59
eslint.config.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import js from "@eslint/js";
|
||||
import globals from "globals";
|
||||
import tseslint from "typescript-eslint";
|
||||
import pluginVue from "eslint-plugin-vue";
|
||||
import {defineConfig} from "eslint/config";
|
||||
|
||||
export default defineConfig([
|
||||
{
|
||||
files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
|
||||
plugins: {js},
|
||||
extends: ["js/recommended"],
|
||||
languageOptions: {globals: {...globals.browser, ...globals.node}}
|
||||
},
|
||||
tseslint.configs.recommended,
|
||||
pluginVue.configs["flat/essential"],
|
||||
{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
|
||||
{
|
||||
rules: {
|
||||
semi: "error",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
"args": "all",
|
||||
"argsIgnorePattern": "^_",
|
||||
"caughtErrors": "all",
|
||||
"caughtErrorsIgnorePattern": "^_",
|
||||
"destructuredArrayIgnorePattern": "^_",
|
||||
"varsIgnorePattern": "^_",
|
||||
"ignoreRestSiblings": true
|
||||
}
|
||||
],
|
||||
}
|
||||
}, {
|
||||
ignores: [
|
||||
'**/dist',
|
||||
'./src/main.ts',
|
||||
'.vscode',
|
||||
'.idea',
|
||||
'*.sh',
|
||||
'**/node_modules',
|
||||
'*.md',
|
||||
'*.woff',
|
||||
'*.woff',
|
||||
'*.ttf',
|
||||
'yarn.lock',
|
||||
'package-lock.json',
|
||||
'/public',
|
||||
'/docs',
|
||||
'**/output',
|
||||
'.husky',
|
||||
'.local',
|
||||
'/bin',
|
||||
'Dockerfile',
|
||||
'**/bindings/'
|
||||
],
|
||||
}
|
||||
]);
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
5267
package-lock.json
generated
Normal file
5267
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
Normal file
43
package.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "zhuzi-admin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alova/adapter-axios": "^2.0.16",
|
||||
"@alova/mock": "^2.0.17",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"alova": "^3.3.4",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.12.2",
|
||||
"date-fns": "^4.1.0",
|
||||
"localforage": "^1.10.0",
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.5.0",
|
||||
"sass": "^1.92.1",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.35.0",
|
||||
"@types/node": "^24.4.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-plugin-vue": "^10.4.0",
|
||||
"globals": "^16.4.0",
|
||||
"jiti": "^2.5.1",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"unplugin-vue-components": "^29.0.0",
|
||||
"vite": "^7.1.2",
|
||||
"vue-eslint-parser": "^10.2.0",
|
||||
"vue-tsc": "^3.0.5"
|
||||
}
|
||||
}
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
78
src/App.vue
Normal file
78
src/App.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 朱子文化管理后台主应用组件
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Ant Design Vue 样式补充 */
|
||||
.ant-layout {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
</style>
|
||||
64
src/apis/auth.ts
Normal file
64
src/apis/auth.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 登录请求参数
|
||||
*/
|
||||
export interface LoginParams {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录响应数据
|
||||
*/
|
||||
export interface LoginResponse {
|
||||
token: string;
|
||||
refreshToken: string;
|
||||
userInfo: {
|
||||
id: string;
|
||||
username: string;
|
||||
nickname: string;
|
||||
avatar?: string;
|
||||
role: 'admin' | 'operator';
|
||||
createTime: string;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 管理员登录
|
||||
*/
|
||||
export const adminLogin = (params: LoginParams) => {
|
||||
return request.Post<LoginResponse>('/admin/auth/login', params, {
|
||||
meta: {
|
||||
ignoreToken: true,
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前用户信息
|
||||
*/
|
||||
export const getCurrentUser = () => {
|
||||
return request.Get<LoginResponse['userInfo']>('/admin/auth/profile');
|
||||
};
|
||||
|
||||
/**
|
||||
* 管理员退出登录
|
||||
*/
|
||||
export const adminLogout = () => {
|
||||
return request.Post('/admin/auth/logout');
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新token
|
||||
*/
|
||||
export const refreshAdminToken = () => {
|
||||
return request.Post('/admin/auth/refresh-token', {}, {
|
||||
meta: {
|
||||
authRole: 'refreshToken',
|
||||
ignoreToken: false,
|
||||
}
|
||||
});
|
||||
};
|
||||
116
src/apis/banners.ts
Normal file
116
src/apis/banners.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 轮播图链接类型
|
||||
*/
|
||||
export type BannerLinkType = 'url' | 'article';
|
||||
|
||||
/**
|
||||
* 轮播图数据
|
||||
*/
|
||||
export interface Banner {
|
||||
id: string;
|
||||
title: string;
|
||||
image: string;
|
||||
linkType: BannerLinkType;
|
||||
linkUrl?: string;
|
||||
articleContent?: string;
|
||||
sort: number;
|
||||
status: 'enabled' | 'disabled';
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 轮播图列表查询参数
|
||||
*/
|
||||
export interface BannerQueryParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
status?: 'enabled' | 'disabled';
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 轮播图列表响应
|
||||
*/
|
||||
export interface BannerListResponse {
|
||||
list: Banner[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建轮播图参数
|
||||
*/
|
||||
export interface CreateBannerParams {
|
||||
title: string;
|
||||
image: string;
|
||||
linkType: BannerLinkType;
|
||||
linkUrl?: string;
|
||||
articleContent?: string;
|
||||
sort: number;
|
||||
status: 'enabled' | 'disabled';
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取轮播图列表
|
||||
*/
|
||||
export const getBannerList = (params?: BannerQueryParams) => {
|
||||
return request.Get<BannerListResponse>('/admin/banners', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取轮播图详情
|
||||
*/
|
||||
export const getBannerDetail = (id: string) => {
|
||||
return request.Get<Banner>(`/admin/banners/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建轮播图
|
||||
*/
|
||||
export const createBanner = (params: CreateBannerParams) => {
|
||||
return request.Post<{ message: string; id: string }>('/admin/banners', params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新轮播图
|
||||
*/
|
||||
export const updateBanner = (id: string, params: CreateBannerParams) => {
|
||||
return request.Put<{ message: string }>(`/admin/banners/${id}`, params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除轮播图
|
||||
*/
|
||||
export const deleteBanner = (id: string) => {
|
||||
return request.Delete<{ message: string }>(`/admin/banners/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新轮播图状态
|
||||
*/
|
||||
export const updateBannerStatus = (id: string, status: 'enabled' | 'disabled') => {
|
||||
return request.Put<{ message: string }>(`/admin/banners/${id}/status`, { status });
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新轮播图排序
|
||||
*/
|
||||
export const updateBannerSort = (id: string, sort: number) => {
|
||||
return request.Put<{ message: string }>(`/admin/banners/${id}/sort`, { sort });
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传轮播图图片
|
||||
*/
|
||||
export const uploadBannerImage = (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append('image', file);
|
||||
|
||||
return request.Post<{ url: string }>('/admin/upload/banner', formData);
|
||||
};
|
||||
108
src/apis/classes.ts
Normal file
108
src/apis/classes.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { request } from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 获取班级列表
|
||||
*/
|
||||
export const getClasses = (params: {
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string;
|
||||
}) => {
|
||||
return request.Get('/admin/classes', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建班级
|
||||
*/
|
||||
export const createClass = (data: {
|
||||
name: string;
|
||||
code: string;
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
teacherName?: string;
|
||||
teacherPhone?: string;
|
||||
classroom?: string;
|
||||
sort?: number;
|
||||
maxStudents?: number;
|
||||
enrollmentYear?: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) => {
|
||||
return request.Post('/admin/classes', data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新班级
|
||||
*/
|
||||
export const updateClass = (id: string, data: {
|
||||
name?: string;
|
||||
code?: string;
|
||||
teacherName?: string;
|
||||
teacherPhone?: string;
|
||||
classroom?: string;
|
||||
sort?: number;
|
||||
maxStudents?: number;
|
||||
enrollmentYear?: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) => {
|
||||
return request.Put(`/admin/classes/${id}`, data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除班级
|
||||
*/
|
||||
export const deleteClass = (id: string) => {
|
||||
return request.Delete(`/admin/classes/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换班级状态
|
||||
*/
|
||||
export const toggleClassStatus = (id: string) => {
|
||||
return request.Patch(`/admin/classes/${id}/toggle-status`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取班级详情
|
||||
*/
|
||||
export const getClassDetail = (id: string) => {
|
||||
return request.Get(`/admin/classes/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取班级学生列表
|
||||
*/
|
||||
export const getClassStudents = (classId: string, params?: {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string;
|
||||
}) => {
|
||||
return request.Get(`/admin/classes/${classId}/students`, {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量导入班级
|
||||
*/
|
||||
export const importClasses = (data: {
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
file: File;
|
||||
}) => {
|
||||
const formData = new FormData();
|
||||
formData.append('schoolId', data.schoolId);
|
||||
formData.append('gradeId', data.gradeId);
|
||||
formData.append('file', data.file);
|
||||
|
||||
return request.Post('/admin/classes/import', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
};
|
||||
65
src/apis/grades.ts
Normal file
65
src/apis/grades.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
import { request } from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 获取年级列表
|
||||
*/
|
||||
export const getGrades = (params: {
|
||||
schoolId: string;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string;
|
||||
}) => {
|
||||
return request.Get('/admin/grades', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建年级
|
||||
*/
|
||||
export const createGrade = (data: {
|
||||
name: string;
|
||||
code: string;
|
||||
schoolId: string;
|
||||
duration?: number;
|
||||
sort?: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) => {
|
||||
return request.Post('/admin/grades', data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新年级
|
||||
*/
|
||||
export const updateGrade = (id: string, data: {
|
||||
name?: string;
|
||||
code?: string;
|
||||
duration?: number;
|
||||
sort?: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) => {
|
||||
return request.Put(`/admin/grades/${id}`, data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除年级
|
||||
*/
|
||||
export const deleteGrade = (id: string) => {
|
||||
return request.Delete(`/admin/grades/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换年级状态
|
||||
*/
|
||||
export const toggleGradeStatus = (id: string) => {
|
||||
return request.Patch(`/admin/grades/${id}/toggle-status`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取年级详情
|
||||
*/
|
||||
export const getGradeDetail = (id: string) => {
|
||||
return request.Get(`/admin/grades/${id}`);
|
||||
};
|
||||
51
src/apis/login.ts
Normal file
51
src/apis/login.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import {request} from "@/utils/request";
|
||||
/**
|
||||
* 刷新token post演示接口
|
||||
*/
|
||||
export const refreshToken = () => {
|
||||
return request.Post('/api/auth/token/refresh', {}, {
|
||||
meta: {
|
||||
authRole: 'refreshToken',
|
||||
ignoreToken: false,
|
||||
signature: true
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取Gitee登录链接 get演示接口
|
||||
*/
|
||||
export const getGiteeUrl = () => {
|
||||
return request.Get('/api/oauth/gitee/url',
|
||||
{
|
||||
meta: {
|
||||
ignoreToken: true,
|
||||
},
|
||||
cacheFor: {
|
||||
mode: "restore",
|
||||
expire: 1000 * 60 * 60 * 24
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 使用方式：
|
||||
* 请注意，useRequest只能用于组件内发送请求，在组件外，你可以通过 method 实例直接发送请求，并且 useRequest 的使用需要符合 use hook 使用规则，即只能在函数最外层调用。
|
||||
*
|
||||
* ❌❌❌ 不推荐在在循环、条件判断或者子函数中调用，例如以下在 click 回调中的使用示例，在回调函数中使用时，虽然可以正常发起请求，但 use hook 返回的响应式数据无法在视图中使用，循环和条件判断中使用也是如此。
|
||||
*
|
||||
* // ❌ bad
|
||||
* const handleClick = () => {
|
||||
* const { loading, data } = useRequest(getter);
|
||||
* };
|
||||
*
|
||||
* // -------
|
||||
* // ✅ good
|
||||
* const { loading, data, send } = useRequest(getter, {
|
||||
* immediate: false
|
||||
* });
|
||||
* const handleClick = () => {
|
||||
* send();
|
||||
* };
|
||||
*/
|
||||
43
src/apis/profile.ts
Normal file
43
src/apis/profile.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { request } from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 获取用户资料
|
||||
*/
|
||||
export const getUserProfile = () => {
|
||||
return request.Get('/admin/profile');
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新用户资料
|
||||
*/
|
||||
export const updateUserProfile = (data: {
|
||||
realName?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
gender?: string;
|
||||
birthday?: string;
|
||||
bio?: string;
|
||||
}) => {
|
||||
return request.Put('/admin/profile', data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
export const uploadAvatar = (formData: FormData) => {
|
||||
return request.Post('/admin/profile/avatar', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
export const changePassword = (data: {
|
||||
oldPassword: string;
|
||||
newPassword: string;
|
||||
}) => {
|
||||
return request.Post('/admin/profile/password', data);
|
||||
};
|
||||
151
src/apis/questions.ts
Normal file
151
src/apis/questions.ts
Normal file
@@ -0,0 +1,151 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 题目类型
|
||||
*/
|
||||
export type QuestionType = 'single' | 'multiple';
|
||||
|
||||
/**
|
||||
* 题目选项
|
||||
*/
|
||||
export interface QuestionOption {
|
||||
key: string;
|
||||
value: string;
|
||||
isCorrect?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 题目数据
|
||||
*/
|
||||
export interface Question {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
image?: string;
|
||||
type: QuestionType;
|
||||
options: QuestionOption[];
|
||||
correctAnswer: string[];
|
||||
score: number;
|
||||
difficulty: 'easy' | 'medium' | 'hard';
|
||||
category: string;
|
||||
tags: string[];
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 题目列表查询参数
|
||||
*/
|
||||
export interface QuestionQueryParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string;
|
||||
type?: QuestionType;
|
||||
difficulty?: 'easy' | 'medium' | 'hard';
|
||||
category?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 题目列表响应
|
||||
*/
|
||||
export interface QuestionListResponse {
|
||||
list: Question[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建题目参数
|
||||
*/
|
||||
export interface CreateQuestionParams {
|
||||
title: string;
|
||||
content: string;
|
||||
image?: string;
|
||||
type: QuestionType;
|
||||
options: QuestionOption[];
|
||||
correctAnswer: string[];
|
||||
score: number;
|
||||
difficulty: 'easy' | 'medium' | 'hard';
|
||||
category: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量导入题目参数
|
||||
*/
|
||||
export interface ImportQuestionsParams {
|
||||
file: File;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取题目列表
|
||||
*/
|
||||
export const getQuestionList = (params?: QuestionQueryParams) => {
|
||||
return request.Get<QuestionListResponse>('/admin/questions', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取题目详情
|
||||
*/
|
||||
export const getQuestionDetail = (id: string) => {
|
||||
return request.Get<Question>(`/admin/questions/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建题目
|
||||
*/
|
||||
export const createQuestion = (params: CreateQuestionParams) => {
|
||||
return request.Post<{ message: string; id: string }>('/admin/questions', params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新题目
|
||||
*/
|
||||
export const updateQuestion = (id: string, params: CreateQuestionParams) => {
|
||||
return request.Put<{ message: string }>(`/admin/questions/${id}`, params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除题目
|
||||
*/
|
||||
export const deleteQuestion = (id: string) => {
|
||||
return request.Delete<{ message: string }>(`/admin/questions/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量删除题目
|
||||
*/
|
||||
export const batchDeleteQuestions = (ids: string[]) => {
|
||||
return request.Delete<{ message: string }>('/admin/questions/batch', {
|
||||
data: { ids }
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量导入题目
|
||||
*/
|
||||
export const importQuestions = (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
return request.Post<{ message: string; successCount: number; failCount: number }>('/admin/questions/import', formData);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出题目模板
|
||||
*/
|
||||
export const exportQuestionTemplate = () => {
|
||||
return request.Get('/admin/questions/template', {
|
||||
responseType: 'blob'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取题目分类列表
|
||||
*/
|
||||
export const getQuestionCategories = () => {
|
||||
return request.Get<{ name: string; count: number }[]>('/admin/questions/categories');
|
||||
};
|
||||
120
src/apis/records.ts
Normal file
120
src/apis/records.ts
Normal file
@@ -0,0 +1,120 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 答题人类型
|
||||
*/
|
||||
export type AnswererType = 'student' | 'parent';
|
||||
|
||||
/**
|
||||
* 答题记录数据
|
||||
*/
|
||||
export interface AnswerRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
studentName: string;
|
||||
parentPhone: string;
|
||||
schoolName: string;
|
||||
gradeName: string;
|
||||
className: string;
|
||||
answererType: AnswererType;
|
||||
totalQuestions: number;
|
||||
correctCount: number;
|
||||
totalScore: number;
|
||||
answerTime: number; // 答题用时（秒）
|
||||
questionDetails: {
|
||||
questionId: string;
|
||||
questionTitle: string;
|
||||
userAnswer: string[];
|
||||
correctAnswer: string[];
|
||||
isCorrect: boolean;
|
||||
score: number;
|
||||
timeSpent: number;
|
||||
}[];
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 答题记录列表查询参数
|
||||
*/
|
||||
export interface RecordQueryParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string; // 学生姓名关键词
|
||||
schoolName?: string;
|
||||
gradeName?: string;
|
||||
className?: string;
|
||||
answererType?: AnswererType;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 答题记录列表响应
|
||||
*/
|
||||
export interface RecordListResponse {
|
||||
list: AnswerRecord[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 答题统计数据
|
||||
*/
|
||||
export interface AnswerStatistics {
|
||||
totalRecords: number;
|
||||
totalUsers: number;
|
||||
avgScore: number;
|
||||
avgCorrectRate: number;
|
||||
popularQuestions: {
|
||||
questionId: string;
|
||||
questionTitle: string;
|
||||
answerCount: number;
|
||||
correctRate: number;
|
||||
}[];
|
||||
rankingData: {
|
||||
schoolRanking: { name: string; avgScore: number }[];
|
||||
gradeRanking: { name: string; avgScore: number }[];
|
||||
classRanking: { name: string; avgScore: number }[];
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取答题记录列表
|
||||
*/
|
||||
export const getRecordList = (params?: RecordQueryParams) => {
|
||||
return request.Get<RecordListResponse>('/admin/records', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取答题记录详情
|
||||
*/
|
||||
export const getRecordDetail = (id: string) => {
|
||||
return request.Get<AnswerRecord>(`/admin/records/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取答题统计数据
|
||||
*/
|
||||
export const getAnswerStatistics = (params?: {
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
schoolName?: string;
|
||||
gradeName?: string;
|
||||
}) => {
|
||||
return request.Get<AnswerStatistics>('/admin/records/statistics', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出答题记录
|
||||
*/
|
||||
export const exportRecords = (params?: RecordQueryParams) => {
|
||||
return request.Get('/admin/records/export', {
|
||||
params,
|
||||
responseType: 'blob'
|
||||
});
|
||||
};
|
||||
237
src/apis/schools.ts
Normal file
237
src/apis/schools.ts
Normal file
@@ -0,0 +1,237 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 学校数据
|
||||
*/
|
||||
export interface School {
|
||||
id: string;
|
||||
name: string;
|
||||
address?: string;
|
||||
principal?: string;
|
||||
phone?: string;
|
||||
district: string; // 区县
|
||||
type: 'primary' | 'junior' | 'senior' | 'vocational'; // 学校类型
|
||||
studentCount?: number;
|
||||
grades?: Grade[];
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 年级数据
|
||||
*/
|
||||
export interface Grade {
|
||||
id: string;
|
||||
schoolId: string;
|
||||
name: string;
|
||||
level: number; // 年级层级：1-6年级，7-9初中，10-12高中
|
||||
classes?: Class[];
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 班级数据
|
||||
*/
|
||||
export interface Class {
|
||||
id: string;
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
name: string;
|
||||
teacherName?: string;
|
||||
studentCount?: number;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 学校列表查询参数
|
||||
*/
|
||||
export interface SchoolQueryParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string;
|
||||
district?: string;
|
||||
type?: 'primary' | 'junior' | 'senior' | 'vocational';
|
||||
}
|
||||
|
||||
/**
|
||||
* 学校列表响应
|
||||
*/
|
||||
export interface SchoolListResponse {
|
||||
list: School[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建学校参数
|
||||
*/
|
||||
export interface CreateSchoolParams {
|
||||
name: string;
|
||||
address?: string;
|
||||
principal?: string;
|
||||
phone?: string;
|
||||
district: string;
|
||||
type: 'primary' | 'junior' | 'senior' | 'vocational';
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建年级参数
|
||||
*/
|
||||
export interface CreateGradeParams {
|
||||
schoolId: string;
|
||||
name: string;
|
||||
level: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建班级参数
|
||||
*/
|
||||
export interface CreateClassParams {
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
name: string;
|
||||
teacherName?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量导入学校数据参数
|
||||
*/
|
||||
export interface ImportSchoolData {
|
||||
schools: {
|
||||
name: string;
|
||||
district: string;
|
||||
type: 'primary' | 'junior' | 'senior' | 'vocational';
|
||||
grades: {
|
||||
name: string;
|
||||
level: number;
|
||||
classes: {
|
||||
name: string;
|
||||
teacherName?: string;
|
||||
}[];
|
||||
}[];
|
||||
}[];
|
||||
}
|
||||
|
||||
// 学校相关接口
|
||||
/**
|
||||
* 获取学校列表
|
||||
*/
|
||||
export const getSchoolList = (params?: SchoolQueryParams) => {
|
||||
return request.Get<SchoolListResponse>('/admin/schools', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取学校详情（包含年级班级）
|
||||
*/
|
||||
export const getSchoolDetail = (id: string) => {
|
||||
return request.Get<School>(`/admin/schools/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建学校
|
||||
*/
|
||||
export const createSchool = (params: CreateSchoolParams) => {
|
||||
return request.Post<{ message: string; id: string }>('/admin/schools', params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新学校
|
||||
*/
|
||||
export const updateSchool = (id: string, params: CreateSchoolParams) => {
|
||||
return request.Put<{ message: string }>(`/admin/schools/${id}`, params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除学校
|
||||
*/
|
||||
export const deleteSchool = (id: string) => {
|
||||
return request.Delete<{ message: string }>(`/admin/schools/${id}`);
|
||||
};
|
||||
|
||||
// 年级相关接口
|
||||
/**
|
||||
* 获取年级列表
|
||||
*/
|
||||
export const getGradeList = (schoolId: string) => {
|
||||
return request.Get<Grade[]>(`/admin/schools/${schoolId}/grades`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建年级
|
||||
*/
|
||||
export const createGrade = (params: CreateGradeParams) => {
|
||||
return request.Post<{ message: string; id: string }>('/admin/grades', params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新年级
|
||||
*/
|
||||
export const updateGrade = (id: string, params: CreateGradeParams) => {
|
||||
return request.Put<{ message: string }>(`/admin/grades/${id}`, params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除年级
|
||||
*/
|
||||
export const deleteGrade = (id: string) => {
|
||||
return request.Delete<{ message: string }>(`/admin/grades/${id}`);
|
||||
};
|
||||
|
||||
// 班级相关接口
|
||||
/**
|
||||
* 获取班级列表
|
||||
*/
|
||||
export const getClassList = (gradeId: string) => {
|
||||
return request.Get<Class[]>(`/admin/grades/${gradeId}/classes`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建班级
|
||||
*/
|
||||
export const createClass = (params: CreateClassParams) => {
|
||||
return request.Post<{ message: string; id: string }>('/admin/classes', params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新班级
|
||||
*/
|
||||
export const updateClass = (id: string, params: CreateClassParams) => {
|
||||
return request.Put<{ message: string }>(`/admin/classes/${id}`, params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除班级
|
||||
*/
|
||||
export const deleteClass = (id: string) => {
|
||||
return request.Delete<{ message: string }>(`/admin/classes/${id}`);
|
||||
};
|
||||
|
||||
// 批量操作接口
|
||||
/**
|
||||
* 批量导入学校数据
|
||||
*/
|
||||
export const importSchoolData = (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
return request.Post<{ message: string; successCount: number; failCount: number }>('/admin/schools/import', formData);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出学校数据模板
|
||||
*/
|
||||
export const exportSchoolTemplate = () => {
|
||||
return request.Get('/admin/schools/template', {
|
||||
responseType: 'blob'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取区县列表
|
||||
*/
|
||||
export const getDistrictList = () => {
|
||||
return request.Get<{ name: string; count: number }[]>('/admin/schools/districts');
|
||||
};
|
||||
85
src/apis/users.ts
Normal file
85
src/apis/users.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 小程序用户数据
|
||||
*/
|
||||
export interface AppUser {
|
||||
id: string;
|
||||
openid: string;
|
||||
phone: string;
|
||||
avatar?: string;
|
||||
nickname?: string;
|
||||
studentId?: string;
|
||||
studentName?: string;
|
||||
schoolId: string;
|
||||
schoolName: string;
|
||||
gradeId: string;
|
||||
gradeName: string;
|
||||
classId: string;
|
||||
className: string;
|
||||
studentSeatNumber?: number;
|
||||
totalScore: number;
|
||||
answerCount: number;
|
||||
lastAnswerTime?: string;
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表查询参数
|
||||
*/
|
||||
export interface UserQueryParams {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
keyword?: string; // 学生姓名或家长手机号
|
||||
schoolId?: string;
|
||||
gradeId?: string;
|
||||
classId?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表响应
|
||||
*/
|
||||
export interface UserListResponse {
|
||||
list: AppUser[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户列表
|
||||
*/
|
||||
export const getUserList = (params?: UserQueryParams) => {
|
||||
return request.Get<UserListResponse>('/admin/users', {
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取用户详情
|
||||
*/
|
||||
export const getUserDetail = (id: string) => {
|
||||
return request.Get<AppUser>(`/admin/users/${id}`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 解绑家长与学生关系
|
||||
*/
|
||||
export const unbindParentStudent = (userId: string) => {
|
||||
return request.Put<{ message: string }>(`/admin/users/${userId}/unbind`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 禁用用户
|
||||
*/
|
||||
export const disableUser = (userId: string) => {
|
||||
return request.Put<{ message: string }>(`/admin/users/${userId}/disable`);
|
||||
};
|
||||
|
||||
/**
|
||||
* 启用用户
|
||||
*/
|
||||
export const enableUser = (userId: string) => {
|
||||
return request.Put<{ message: string }>(`/admin/users/${userId}/enable`);
|
||||
};
|
||||
1
src/assets/styles/index.scss
Normal file
1
src/assets/styles/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
334
src/components/RichEditor.vue
Normal file
334
src/components/RichEditor.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="rich-editor">
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
:style="`height: ${height}px; overflow-y: hidden;`"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange"
|
||||
@onDestroyed="handleDestroyed"
|
||||
@onFocus="handleFocus"
|
||||
@onBlur="handleBlur"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
||||
|
||||
import { onBeforeUnmount, ref, shallowRef, watch, computed } from 'vue'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string
|
||||
height?: number
|
||||
placeholder?: string
|
||||
mode?: 'default' | 'simple'
|
||||
disabled?: boolean
|
||||
maxlength?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
(e: 'focus'): void
|
||||
(e: 'blur'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: '',
|
||||
height: 400,
|
||||
placeholder: '请输入内容...',
|
||||
mode: 'default',
|
||||
disabled: false,
|
||||
maxlength: 5000
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef<IDomEditor>()
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref(props.modelValue)
|
||||
|
||||
// 工具栏配置
|
||||
const toolbarConfig: Partial<IToolbarConfig> = {
|
||||
toolbarKeys: [
|
||||
// 菜单 key
|
||||
'headerSelect',
|
||||
'blockquote',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'through',
|
||||
'code',
|
||||
'sup',
|
||||
'sub',
|
||||
'clearStyle',
|
||||
'|',
|
||||
'color',
|
||||
'bgColor',
|
||||
'|',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'lineHeight',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'todo',
|
||||
{
|
||||
key: 'group-justify',
|
||||
title: '对齐',
|
||||
iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z"></path></svg>',
|
||||
menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
|
||||
},
|
||||
'|',
|
||||
'emotion',
|
||||
'insertLink',
|
||||
'insertTable',
|
||||
'codeBlock',
|
||||
'divider',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'fullScreen'
|
||||
]
|
||||
}
|
||||
|
||||
// 编辑器配置
|
||||
const editorConfig: Partial<IEditorConfig> = computed(() => ({
|
||||
placeholder: props.placeholder,
|
||||
readOnly: props.disabled,
|
||||
maxLength: props.maxlength,
|
||||
// 配置上传图片
|
||||
MENU_CONF: {
|
||||
// 配置上传图片
|
||||
uploadImage: {
|
||||
server: '/api/upload/image',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 2 * 1024 * 1024, // 2M
|
||||
allowedFileTypes: ['image/*'],
|
||||
headers: {
|
||||
// Authorization: 'Bearer ' + getToken()
|
||||
},
|
||||
// 上传错误的回调函数
|
||||
onError(file: File, err: any, res: any) {
|
||||
console.error(`${file.name} 上传出错`, err, res)
|
||||
},
|
||||
// 上传成功的回调函数
|
||||
onSuccess(file: File, res: any) {
|
||||
console.log(`${file.name} 上传成功`, res)
|
||||
},
|
||||
// 上传进度的回调函数
|
||||
onProgress(file: File, progress: number) {
|
||||
console.log(`${file.name} 上传进度 ${progress}%`)
|
||||
},
|
||||
},
|
||||
}
|
||||
}))
|
||||
|
||||
// 监听外部值变化
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (newValue !== valueHtml.value) {
|
||||
valueHtml.value = newValue || ''
|
||||
}
|
||||
})
|
||||
|
||||
// 监听编辑器内容变化
|
||||
watch(valueHtml, (newValue) => {
|
||||
emit('update:modelValue', newValue)
|
||||
})
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
|
||||
const handleCreated = (editor: IDomEditor) => {
|
||||
editorRef.value = editor // 记录 editor 实例，重要！
|
||||
}
|
||||
|
||||
const handleChange = (editor: IDomEditor) => {
|
||||
const html = editor.getHtml()
|
||||
valueHtml.value = html
|
||||
emit('change', html)
|
||||
}
|
||||
|
||||
const handleDestroyed = (editor: IDomEditor) => {
|
||||
console.log('destroyed', editor)
|
||||
}
|
||||
|
||||
const handleFocus = (editor: IDomEditor) => {
|
||||
emit('focus')
|
||||
}
|
||||
|
||||
const handleBlur = (editor: IDomEditor) => {
|
||||
emit('blur')
|
||||
}
|
||||
|
||||
// 获取编辑器实例（供父组件调用）
|
||||
const getEditor = () => {
|
||||
return editorRef.value
|
||||
}
|
||||
|
||||
// 获取文本内容（去除HTML标签）
|
||||
const getText = () => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return ''
|
||||
return editor.getText()
|
||||
}
|
||||
|
||||
// 获取HTML内容
|
||||
const getHtml = () => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return ''
|
||||
return editor.getHtml()
|
||||
}
|
||||
|
||||
// 设置HTML内容
|
||||
const setHtml = (html: string) => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.setHtml(html)
|
||||
}
|
||||
|
||||
// 插入文本
|
||||
const insertText = (text: string) => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.insertText(text)
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
getEditor,
|
||||
getText,
|
||||
getHtml,
|
||||
setHtml,
|
||||
insertText
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rich-editor {
|
||||
:deep(.w-e-toolbar) {
|
||||
background-color: #fafafa;
|
||||
border-color: #d9d9d9;
|
||||
|
||||
.w-e-toolbar-item {
|
||||
&:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: #fff;
|
||||
border-color: #d9d9d9;
|
||||
|
||||
.w-e-text-placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.w-e-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 16px 0 8px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #1890ff;
|
||||
background-color: #f0f9ff;
|
||||
padding: 8px 16px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: Consolas, Monaco, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #d9d9d9;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态样式
|
||||
&.disabled {
|
||||
:deep(.w-e-toolbar) {
|
||||
background-color: #f5f5f5;
|
||||
pointer-events: none;
|
||||
|
||||
.w-e-toolbar-item {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.w-e-text {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
src/components/layout/AdminHeader.vue
Normal file
177
src/components/layout/AdminHeader.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="admin-header">
|
||||
<!-- 左侧：折叠按钮 -->
|
||||
<div class="header-left">
|
||||
<a-button
|
||||
type="text"
|
||||
@click="$emit('toggle')"
|
||||
class="collapse-btn"
|
||||
>
|
||||
<MenuUnfoldOutlined v-if="collapsed" />
|
||||
<MenuFoldOutlined v-else />
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：用户信息和操作 -->
|
||||
<div class="header-right">
|
||||
<!-- 用户信息下拉菜单 -->
|
||||
<a-dropdown placement="bottomRight">
|
||||
<div class="user-info">
|
||||
<a-avatar :src="userInfo?.avatar" :size="32">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span class="user-name">{{ userInfo?.nickname || '管理员' }}</span>
|
||||
<DownOutlined class="dropdown-icon" />
|
||||
</div>
|
||||
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="profile">
|
||||
<UserOutlined />
|
||||
<span>个人信息</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="password">
|
||||
<LockOutlined />
|
||||
<span>修改密码</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">
|
||||
<LogoutOutlined />
|
||||
<span>退出登录</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
UserOutlined,
|
||||
DownOutlined,
|
||||
LockOutlined,
|
||||
LogoutOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
interface Props {
|
||||
collapsed: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
// 定义事件
|
||||
defineEmits<{
|
||||
toggle: [];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 用户信息
|
||||
const userInfo = computed(() => authStore.userInfo);
|
||||
|
||||
// 菜单点击处理
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
switch (key) {
|
||||
case 'profile':
|
||||
router.push('/admin/profile');
|
||||
break;
|
||||
case 'password':
|
||||
router.push('/admin/password');
|
||||
break;
|
||||
case 'logout':
|
||||
handleLogout();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
Modal.confirm({
|
||||
title: '确认退出',
|
||||
content: '您确定要退出登录吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
authStore.clearAuth();
|
||||
router.push('/login');
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
.collapse-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin: 0 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-dropdown-menu) {
|
||||
min-width: 140px;
|
||||
|
||||
.ant-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
|
||||
.anticon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
src/components/layout/AdminLayout.vue
Normal file
130
src/components/layout/AdminLayout.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="admin-layout">
|
||||
<!-- 固定侧边栏 -->
|
||||
<div
|
||||
class="sidebar"
|
||||
:class="{ 'sidebar-collapsed': collapsed }"
|
||||
>
|
||||
<div class="logo">
|
||||
<img src="/vite.svg" alt="朱子管理后台" />
|
||||
<span v-if="!collapsed">朱子管理后台</span>
|
||||
</div>
|
||||
<AdminSidebar :collapsed="collapsed" />
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div
|
||||
class="main-content"
|
||||
:class="{ 'main-content-collapsed': collapsed }"
|
||||
>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="layout-header">
|
||||
<AdminHeader :collapsed="collapsed" @toggle="toggleCollapsed" />
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="layout-content">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import AdminSidebar from './AdminSidebar.vue';
|
||||
import AdminHeader from './AdminHeader.vue';
|
||||
|
||||
// 侧边栏折叠状态
|
||||
const collapsed = ref(false);
|
||||
|
||||
// 切换侧边栏折叠状态
|
||||
const toggleCollapsed = () => {
|
||||
collapsed.value = !collapsed.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 全局容器
|
||||
.admin-layout {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 固定侧边栏
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 240px;
|
||||
background: #001529;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transition: width 0.2s;
|
||||
|
||||
&.sidebar-collapsed {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区域
|
||||
.main-content {
|
||||
margin-left: 240px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: margin-left 0.2s;
|
||||
|
||||
&.main-content-collapsed {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// Logo区域
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部导航
|
||||
.layout-header {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.layout-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
// 内容包装器
|
||||
.content-wrapper {
|
||||
padding: 16px 24px;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
191
src/components/layout/AdminSidebar.vue
Normal file
191
src/components/layout/AdminSidebar.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:openKeys="openKeys"
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
:inline-collapsed="collapsed"
|
||||
@click="handleMenuClick"
|
||||
>
|
||||
<!-- 题库管理 -->
|
||||
<a-menu-item key="questions">
|
||||
<template #icon>
|
||||
<FileTextOutlined />
|
||||
</template>
|
||||
<span>题库管理</span>
|
||||
</a-menu-item>
|
||||
|
||||
<!-- 轮播图管理 -->
|
||||
<a-menu-item key="banners">
|
||||
<template #icon>
|
||||
<PictureOutlined />
|
||||
</template>
|
||||
<span>轮播图管理</span>
|
||||
</a-menu-item>
|
||||
|
||||
<!-- 答题记录 -->
|
||||
<a-menu-item key="records">
|
||||
<template #icon>
|
||||
<BarChartOutlined />
|
||||
</template>
|
||||
<span>答题记录</span>
|
||||
</a-menu-item>
|
||||
|
||||
<!-- 用户管理 -->
|
||||
<a-menu-item key="users">
|
||||
<template #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
<span>用户管理</span>
|
||||
</a-menu-item>
|
||||
|
||||
<!-- 学校管理 -->
|
||||
<a-sub-menu key="school">
|
||||
<template #icon>
|
||||
<BankOutlined />
|
||||
</template>
|
||||
<template #title>学校管理</template>
|
||||
<a-menu-item key="schools">学校列表</a-menu-item>
|
||||
<a-menu-item key="grades">年级管理</a-menu-item>
|
||||
<a-menu-item key="classes">班级管理</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<!-- 系统设置 -->
|
||||
<a-sub-menu key="system">
|
||||
<template #icon>
|
||||
<SettingOutlined />
|
||||
</template>
|
||||
<template #title>系统设置</template>
|
||||
<a-menu-item key="profile">个人信息</a-menu-item>
|
||||
<a-menu-item key="password">修改密码</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import {
|
||||
FileTextOutlined,
|
||||
PictureOutlined,
|
||||
BarChartOutlined,
|
||||
UserOutlined,
|
||||
BankOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
interface Props {
|
||||
collapsed: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 选中的菜单项
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
// 展开的菜单项
|
||||
const openKeys = ref<string[]>(['school']);
|
||||
|
||||
// 根据当前路由设置选中的菜单
|
||||
const updateSelectedKeys = () => {
|
||||
const path = route.path;
|
||||
if (path.includes('/questions')) {
|
||||
selectedKeys.value = ['questions'];
|
||||
} else if (path.includes('/banners')) {
|
||||
selectedKeys.value = ['banners'];
|
||||
} else if (path.includes('/records')) {
|
||||
selectedKeys.value = ['records'];
|
||||
} else if (path.includes('/users')) {
|
||||
selectedKeys.value = ['users'];
|
||||
} else if (path.includes('/schools')) {
|
||||
selectedKeys.value = ['schools'];
|
||||
openKeys.value = ['school'];
|
||||
} else if (path.includes('/grades')) {
|
||||
selectedKeys.value = ['grades'];
|
||||
openKeys.value = ['school'];
|
||||
} else if (path.includes('/classes')) {
|
||||
selectedKeys.value = ['classes'];
|
||||
openKeys.value = ['school'];
|
||||
} else if (path.includes('/profile')) {
|
||||
selectedKeys.value = ['profile'];
|
||||
openKeys.value = ['system'];
|
||||
} else if (path.includes('/password')) {
|
||||
selectedKeys.value = ['password'];
|
||||
openKeys.value = ['system'];
|
||||
}
|
||||
};
|
||||
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
updateSelectedKeys();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 菜单点击事件
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
const routeMap: Record<string, string> = {
|
||||
questions: '/admin/questions',
|
||||
banners: '/admin/banners',
|
||||
records: '/admin/records',
|
||||
users: '/admin/users',
|
||||
schools: '/admin/schools',
|
||||
grades: '/admin/grades',
|
||||
classes: '/admin/classes',
|
||||
profile: '/admin/profile',
|
||||
password: '/admin/password'
|
||||
};
|
||||
|
||||
if (routeMap[key]) {
|
||||
router.push(routeMap[key]);
|
||||
}
|
||||
};
|
||||
|
||||
// 侧边栏折叠时只保留顶级菜单展开
|
||||
watch(
|
||||
() => props.collapsed,
|
||||
(collapsed) => {
|
||||
if (collapsed) {
|
||||
openKeys.value = [];
|
||||
} else {
|
||||
// 根据当前选中项设置展开状态
|
||||
if (['schools', 'grades', 'classes'].includes(selectedKeys.value[0])) {
|
||||
openKeys.value = ['school'];
|
||||
} else if (['profile', 'password'].includes(selectedKeys.value[0])) {
|
||||
openKeys.value = ['system'];
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.ant-menu-dark) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item),
|
||||
:deep(.ant-menu-submenu-title) {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 0;
|
||||
padding: 0 24px !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item-selected) {
|
||||
background: #1890ff !important;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-submenu-selected) {
|
||||
.ant-menu-submenu-title {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/main.ts
Normal file
13
src/main.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import {createApp} from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import router from './router';
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import {createPinia} from "pinia";
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
const app = createApp(App);
|
||||
app.use(pinia)
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
128
src/mocks/auth.mock.ts
Normal file
128
src/mocks/auth.mock.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 认证相关接口的mock数据
|
||||
export default defineMock({
|
||||
// 管理员登录
|
||||
'[POST]/admin/auth/login': ({ data }) => {
|
||||
const { username, password } = data;
|
||||
|
||||
// 模拟用户数据
|
||||
const mockAdmins = [
|
||||
{
|
||||
id: '1',
|
||||
username: 'admin',
|
||||
password: '123456',
|
||||
nickname: '系统管理员',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin',
|
||||
role: 'admin',
|
||||
createTime: '2023-01-01 00:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
username: 'operator',
|
||||
password: '123456',
|
||||
nickname: '运营人员',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=operator',
|
||||
role: 'operator',
|
||||
createTime: '2023-01-01 00:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
const admin = mockAdmins.find(user => user.username === username && user.password === password);
|
||||
|
||||
if (!admin) {
|
||||
return {
|
||||
status: 401,
|
||||
body: {
|
||||
code: 401,
|
||||
message: '用户名或密码错误',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
token: `mock_token_${admin.id}_${Date.now()}`,
|
||||
refreshToken: `mock_refresh_token_${admin.id}_${Date.now()}`,
|
||||
userInfo: {
|
||||
id: admin.id,
|
||||
username: admin.username,
|
||||
nickname: admin.nickname,
|
||||
avatar: admin.avatar,
|
||||
role: admin.role,
|
||||
createTime: admin.createTime
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取当前用户信息
|
||||
'[GET]/admin/auth/profile': ({ headers }) => {
|
||||
const token = headers.authorization?.replace('Bearer ', '');
|
||||
if (!token) {
|
||||
return {
|
||||
status: 401,
|
||||
body: {
|
||||
code: 401,
|
||||
message: '未提供访问令牌',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 简单的token验证逻辑
|
||||
const tokenParts = token.split('_');
|
||||
if (tokenParts.length < 3) {
|
||||
return {
|
||||
status: 401,
|
||||
body: {
|
||||
code: 401,
|
||||
message: '访问令牌无效',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const userId = tokenParts[2];
|
||||
const mockAdmins = [
|
||||
{
|
||||
id: '1',
|
||||
username: 'admin',
|
||||
nickname: '系统管理员',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin',
|
||||
role: 'admin',
|
||||
createTime: '2023-01-01 00:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
const admin = mockAdmins.find(user => user.id === userId);
|
||||
if (!admin) {
|
||||
return {
|
||||
status: 401,
|
||||
body: {
|
||||
code: 401,
|
||||
message: '访问令牌无效',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: admin
|
||||
};
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
'[POST]/admin/auth/logout': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '退出成功' }
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
246
src/mocks/banners.mock.ts
Normal file
246
src/mocks/banners.mock.ts
Normal file
@@ -0,0 +1,246 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 模拟轮播图数据
|
||||
const mockBanners = [
|
||||
{
|
||||
id: '1',
|
||||
title: '朱子文化传承千年',
|
||||
image: 'https://picsum.photos/800/400?random=1',
|
||||
linkType: 'article',
|
||||
articleContent: `
|
||||
<h1>朱子文化传承千年</h1>
|
||||
<p>朱子文化作为中华优秀传统文化的重要组成部分，传承至今已有千年历史。朱熹（1130-1200），字元晦、仲晦，号晦庵、晦翁，别号紫阳，谥号"文"，世称朱文公。</p>
|
||||
<h2>朱子理学的影响</h2>
|
||||
<p>朱子集南宋前儒学思想之大成，构建了"致广大，尽精微，综罗百代"的理学思想体系，影响了中国社会近千年。</p>
|
||||
<h2>教育贡献</h2>
|
||||
<p>朱子在教育方面的贡献同样卓著，提出了许多具有深远影响的教育理念和方法。</p>
|
||||
`,
|
||||
sort: 1,
|
||||
status: 'enabled',
|
||||
createTime: '2024-01-01 09:00:00',
|
||||
updateTime: '2024-01-01 09:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '学习朱子理学精神',
|
||||
image: 'https://picsum.photos/800/400?random=2',
|
||||
linkType: 'url',
|
||||
linkUrl: 'https://www.zhuzi.org',
|
||||
sort: 2,
|
||||
status: 'enabled',
|
||||
createTime: '2024-01-01 09:30:00',
|
||||
updateTime: '2024-01-01 09:30:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '朱子书院文化',
|
||||
image: 'https://picsum.photos/800/400?random=3',
|
||||
linkType: 'article',
|
||||
articleContent: `
|
||||
<h1>朱子书院文化</h1>
|
||||
<p>朱子创办的书院成为中国古代教育的重要形式，对后世产生了深远的影响。</p>
|
||||
<h2>白鹿洞书院</h2>
|
||||
<p>朱熹重新修复白鹿洞书院，制定了著名的《白鹿洞书院揭示》。</p>
|
||||
`,
|
||||
sort: 3,
|
||||
status: 'disabled',
|
||||
createTime: '2024-01-01 10:00:00',
|
||||
updateTime: '2024-01-01 10:00:00'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '朱子家训精神',
|
||||
image: 'https://picsum.photos/800/400?random=4',
|
||||
linkType: 'article',
|
||||
articleContent: `
|
||||
<h1>朱子家训精神</h1>
|
||||
<p>朱子的家训体现了深厚的儒家文化内涵，对家庭教育有重要指导意义。</p>
|
||||
`,
|
||||
sort: 4,
|
||||
status: 'enabled',
|
||||
createTime: '2024-01-01 10:30:00',
|
||||
updateTime: '2024-01-01 10:30:00'
|
||||
}
|
||||
];
|
||||
|
||||
// 轮播图管理接口的mock数据
|
||||
export default defineMock({
|
||||
// 获取轮播图列表
|
||||
'[GET]/admin/banners': ({ query }) => {
|
||||
let filteredBanners = [...mockBanners];
|
||||
|
||||
// 状态筛选
|
||||
if (query.status) {
|
||||
filteredBanners = filteredBanners.filter(b => b.status === query.status);
|
||||
}
|
||||
|
||||
// 关键词搜索
|
||||
if (query.keyword) {
|
||||
filteredBanners = filteredBanners.filter(b =>
|
||||
b.title.includes(query.keyword!)
|
||||
);
|
||||
}
|
||||
|
||||
// 按排序字段排序
|
||||
filteredBanners.sort((a, b) => a.sort - b.sort);
|
||||
|
||||
// 分页
|
||||
const page = parseInt(query.page) || 1;
|
||||
const pageSize = parseInt(query.pageSize) || 10;
|
||||
const total = filteredBanners.length;
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: filteredBanners.slice(start, end),
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取轮播图详情
|
||||
'[GET]/admin/banners/{id}': ({ params }) => {
|
||||
const banner = mockBanners.find(b => b.id === params.id);
|
||||
if (!banner) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '轮播图不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: banner
|
||||
};
|
||||
},
|
||||
|
||||
// 创建轮播图
|
||||
'[POST]/admin/banners': ({ data }) => {
|
||||
const newBanner = {
|
||||
...data,
|
||||
id: (mockBanners.length + 1).toString(),
|
||||
createTime: new Date().toLocaleString('zh-CN'),
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockBanners.push(newBanner);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '创建成功',
|
||||
id: newBanner.id
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 更新轮播图
|
||||
'[PUT]/admin/banners/{id}': ({ params, data }) => {
|
||||
const index = mockBanners.findIndex(b => b.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '轮播图不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockBanners[index] = {
|
||||
...data,
|
||||
id: params.id,
|
||||
createTime: mockBanners[index].createTime,
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 删除轮播图
|
||||
'[DELETE]/admin/banners/{id}': ({ params }) => {
|
||||
const index = mockBanners.findIndex(b => b.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '轮播图不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockBanners.splice(index, 1);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '删除成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 更新轮播图状态
|
||||
'[PUT]/admin/banners/{id}/status': ({ params, data }) => {
|
||||
const banner = mockBanners.find(b => b.id === params.id);
|
||||
if (!banner) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '轮播图不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
banner.status = data.status;
|
||||
banner.updateTime = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '状态更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 更新轮播图排序
|
||||
'[PUT]/admin/banners/{id}/sort': ({ params, data }) => {
|
||||
const banner = mockBanners.find(b => b.id === params.id);
|
||||
if (!banner) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '轮播图不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
banner.sort = data.sort;
|
||||
banner.updateTime = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '排序更新成功' }
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
336
src/mocks/classes.mock.ts
Normal file
336
src/mocks/classes.mock.ts
Normal file
@@ -0,0 +1,336 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// Mock数据
|
||||
const mockClasses = [
|
||||
// 朱熹小学一年级班级
|
||||
{
|
||||
id: '1',
|
||||
name: '一年级1班',
|
||||
code: 'CLASS_1_1',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
gradeId: '1',
|
||||
gradeName: '一年级',
|
||||
teacherName: '张老师',
|
||||
teacherPhone: '13800138001',
|
||||
classroom: '教学楼A101',
|
||||
sort: 1,
|
||||
maxStudents: 40,
|
||||
studentCount: 38,
|
||||
enrollmentYear: 2024,
|
||||
description: '一年级1班，班风优良',
|
||||
status: 'active',
|
||||
createdAt: '2024-09-01 08:00:00',
|
||||
updatedAt: '2024-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '一年级2班',
|
||||
code: 'CLASS_1_2',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
gradeId: '1',
|
||||
gradeName: '一年级',
|
||||
teacherName: '李老师',
|
||||
teacherPhone: '13800138002',
|
||||
classroom: '教学楼A102',
|
||||
sort: 2,
|
||||
maxStudents: 40,
|
||||
studentCount: 39,
|
||||
enrollmentYear: 2024,
|
||||
description: '一年级2班，活泼可爱',
|
||||
status: 'active',
|
||||
createdAt: '2024-09-01 08:00:00',
|
||||
updatedAt: '2024-09-01 08:00:00'
|
||||
},
|
||||
// 朱熹小学二年级班级
|
||||
{
|
||||
id: '3',
|
||||
name: '二年级1班',
|
||||
code: 'CLASS_2_1',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
gradeId: '2',
|
||||
gradeName: '二年级',
|
||||
teacherName: '王老师',
|
||||
teacherPhone: '13800138003',
|
||||
classroom: '教学楼A201',
|
||||
sort: 1,
|
||||
maxStudents: 40,
|
||||
studentCount: 37,
|
||||
enrollmentYear: 2023,
|
||||
description: '二年级1班，学习认真',
|
||||
status: 'active',
|
||||
createdAt: '2024-09-01 08:00:00',
|
||||
updatedAt: '2024-09-01 08:00:00'
|
||||
},
|
||||
// 朱熹中学初一班级
|
||||
{
|
||||
id: '4',
|
||||
name: '初一1班',
|
||||
code: 'CLASS_7_1',
|
||||
schoolId: '2',
|
||||
schoolName: '朱熹中学',
|
||||
gradeId: '4',
|
||||
gradeName: '初一',
|
||||
teacherName: '陈老师',
|
||||
teacherPhone: '13800138004',
|
||||
classroom: '教学楼B301',
|
||||
sort: 1,
|
||||
maxStudents: 45,
|
||||
studentCount: 44,
|
||||
enrollmentYear: 2024,
|
||||
description: '初一1班，团结向上',
|
||||
status: 'active',
|
||||
createdAt: '2024-09-01 08:00:00',
|
||||
updatedAt: '2024-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '初一2班',
|
||||
code: 'CLASS_7_2',
|
||||
schoolId: '2',
|
||||
schoolName: '朱熹中学',
|
||||
gradeId: '4',
|
||||
gradeName: '初一',
|
||||
teacherName: '刘老师',
|
||||
teacherPhone: '13800138005',
|
||||
classroom: '教学楼B302',
|
||||
sort: 2,
|
||||
maxStudents: 45,
|
||||
studentCount: 43,
|
||||
enrollmentYear: 2024,
|
||||
description: '初一2班，积极进取',
|
||||
status: 'active',
|
||||
createdAt: '2024-09-01 08:00:00',
|
||||
updatedAt: '2024-09-01 08:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
// Mock学生数据
|
||||
const mockStudents = [
|
||||
{
|
||||
id: '1',
|
||||
name: '张小明',
|
||||
studentNumber: '2024001',
|
||||
gender: 'male',
|
||||
phone: '13900139001',
|
||||
parentName: '张大明',
|
||||
parentPhone: '13800138001',
|
||||
classId: '1',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李小红',
|
||||
studentNumber: '2024002',
|
||||
gender: 'female',
|
||||
phone: '13900139002',
|
||||
parentName: '李大红',
|
||||
parentPhone: '13800138002',
|
||||
classId: '1',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王小华',
|
||||
studentNumber: '2024003',
|
||||
gender: 'male',
|
||||
phone: '13900139003',
|
||||
parentName: '王大华',
|
||||
parentPhone: '13800138003',
|
||||
classId: '2',
|
||||
status: 'active'
|
||||
}
|
||||
];
|
||||
|
||||
let classIdCounter = 6;
|
||||
let studentIdCounter = 4;
|
||||
|
||||
export default defineMock({
|
||||
// 获取班级列表
|
||||
'/admin/classes': ({ query }) => {
|
||||
const { schoolId, gradeId, page = 1, pageSize = 10, keyword = '' } = query;
|
||||
|
||||
// 根据学校ID和年级ID过滤
|
||||
let filteredClasses = mockClasses.filter(cls =>
|
||||
cls.schoolId === schoolId && cls.gradeId === gradeId
|
||||
);
|
||||
|
||||
// 根据关键字搜索
|
||||
if (keyword) {
|
||||
filteredClasses = filteredClasses.filter(cls =>
|
||||
cls.name.includes(keyword) ||
|
||||
cls.code.includes(keyword) ||
|
||||
cls.teacherName.includes(keyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const list = filteredClasses.slice(start, end);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list,
|
||||
page: Number(page),
|
||||
pageSize: Number(pageSize),
|
||||
total: filteredClasses.length
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 创建班级
|
||||
'[POST]/admin/classes': ({ data }) => {
|
||||
const newClass = {
|
||||
id: String(classIdCounter++),
|
||||
...data,
|
||||
schoolName: mockClasses.find(c => c.schoolId === data.schoolId)?.schoolName || '未知学校',
|
||||
gradeName: mockClasses.find(c => c.gradeId === data.gradeId)?.gradeName || '未知年级',
|
||||
studentCount: 0,
|
||||
createdAt: new Date().toLocaleString('zh-CN'),
|
||||
updatedAt: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockClasses.push(newClass);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '创建成功',
|
||||
data: newClass
|
||||
};
|
||||
},
|
||||
|
||||
// 更新班级
|
||||
'[PUT]/admin/classes/{id}': ({ params, data }) => {
|
||||
const index = mockClasses.findIndex(cls => cls.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '班级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
mockClasses[index] = {
|
||||
...mockClasses[index],
|
||||
...data,
|
||||
updatedAt: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '更新成功',
|
||||
data: mockClasses[index]
|
||||
};
|
||||
},
|
||||
|
||||
// 删除班级
|
||||
'[DELETE]/admin/classes/{id}': ({ params }) => {
|
||||
const index = mockClasses.findIndex(cls => cls.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '班级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
mockClasses.splice(index, 1);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '删除成功'
|
||||
};
|
||||
},
|
||||
|
||||
// 切换班级状态
|
||||
'[PATCH]/admin/classes/{id}/toggle-status': ({ params }) => {
|
||||
const cls = mockClasses.find(c => c.id === params.id);
|
||||
if (!cls) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '班级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
cls.status = cls.status === 'active' ? 'inactive' : 'active';
|
||||
cls.updatedAt = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '状态切换成功',
|
||||
data: cls
|
||||
};
|
||||
},
|
||||
|
||||
// 获取班级详情
|
||||
'/admin/classes/{id}': ({ params }) => {
|
||||
const cls = mockClasses.find(c => c.id === params.id);
|
||||
if (!cls) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '班级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: cls
|
||||
};
|
||||
},
|
||||
|
||||
// 获取班级学生列表
|
||||
'/admin/classes/{classId}/students': ({ params, query }) => {
|
||||
const { page = 1, pageSize = 10, keyword = '' } = query;
|
||||
|
||||
// 根据班级ID过滤学生
|
||||
let filteredStudents = mockStudents.filter(student => student.classId === params.classId);
|
||||
|
||||
// 根据关键字搜索
|
||||
if (keyword) {
|
||||
filteredStudents = filteredStudents.filter(student =>
|
||||
student.name.includes(keyword) ||
|
||||
student.studentNumber.includes(keyword) ||
|
||||
student.parentName.includes(keyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const list = filteredStudents.slice(start, end);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list,
|
||||
page: Number(page),
|
||||
pageSize: Number(pageSize),
|
||||
total: filteredStudents.length
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 批量导入班级
|
||||
'[POST]/admin/classes/import': ({ data }) => {
|
||||
// 模拟导入结果
|
||||
const importResult = {
|
||||
total: 10,
|
||||
success: 9,
|
||||
failed: 1,
|
||||
errors: [
|
||||
{ row: 5, message: '班级代码重复' }
|
||||
]
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '导入完成',
|
||||
data: importResult
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
26
src/mocks/common.mock.ts
Normal file
26
src/mocks/common.mock.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 通用接口的mock数据
|
||||
export default defineMock({
|
||||
// 上传轮播图图片
|
||||
'[POST]/admin/upload/banner': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
url: `https://picsum.photos/800/400?random=${Date.now()}`
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 文件上传通用接口
|
||||
'[POST]/admin/upload/file': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
url: `https://picsum.photos/400/300?random=${Date.now()}`
|
||||
}
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
214
src/mocks/grades.mock.ts
Normal file
214
src/mocks/grades.mock.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// Mock数据
|
||||
const mockGrades = [
|
||||
{
|
||||
id: '1',
|
||||
name: '一年级',
|
||||
code: 'GRADE_1',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
duration: 1,
|
||||
sort: 1,
|
||||
description: '小学一年级',
|
||||
status: 'active',
|
||||
classCount: 8,
|
||||
studentCount: 320,
|
||||
createdAt: '2023-09-01 08:00:00',
|
||||
updatedAt: '2023-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '二年级',
|
||||
code: 'GRADE_2',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
duration: 2,
|
||||
sort: 2,
|
||||
description: '小学二年级',
|
||||
status: 'active',
|
||||
classCount: 7,
|
||||
studentCount: 280,
|
||||
createdAt: '2023-09-01 08:00:00',
|
||||
updatedAt: '2023-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '三年级',
|
||||
code: 'GRADE_3',
|
||||
schoolId: '1',
|
||||
schoolName: '朱熹小学',
|
||||
duration: 3,
|
||||
sort: 3,
|
||||
description: '小学三年级',
|
||||
status: 'active',
|
||||
classCount: 6,
|
||||
studentCount: 240,
|
||||
createdAt: '2023-09-01 08:00:00',
|
||||
updatedAt: '2023-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '初一',
|
||||
code: 'GRADE_7',
|
||||
schoolId: '2',
|
||||
schoolName: '朱熹中学',
|
||||
duration: 1,
|
||||
sort: 7,
|
||||
description: '初中一年级',
|
||||
status: 'active',
|
||||
classCount: 10,
|
||||
studentCount: 450,
|
||||
createdAt: '2023-09-01 08:00:00',
|
||||
updatedAt: '2023-09-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '初二',
|
||||
code: 'GRADE_8',
|
||||
schoolId: '2',
|
||||
schoolName: '朱熹中学',
|
||||
duration: 2,
|
||||
sort: 8,
|
||||
description: '初中二年级',
|
||||
status: 'active',
|
||||
classCount: 9,
|
||||
studentCount: 405,
|
||||
createdAt: '2023-09-01 08:00:00',
|
||||
updatedAt: '2023-09-01 08:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
let gradeIdCounter = 6;
|
||||
|
||||
export default defineMock({
|
||||
// 获取年级列表
|
||||
'/admin/grades': ({ query }) => {
|
||||
const { schoolId, page = 1, pageSize = 10, keyword = '' } = query;
|
||||
|
||||
// 根据学校ID过滤
|
||||
let filteredGrades = mockGrades.filter(grade => grade.schoolId === schoolId);
|
||||
|
||||
// 根据关键字搜索
|
||||
if (keyword) {
|
||||
filteredGrades = filteredGrades.filter(grade =>
|
||||
grade.name.includes(keyword) || grade.code.includes(keyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
const list = filteredGrades.slice(start, end);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list,
|
||||
page: Number(page),
|
||||
pageSize: Number(pageSize),
|
||||
total: filteredGrades.length
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 创建年级
|
||||
'[POST]/admin/grades': ({ data }) => {
|
||||
const newGrade = {
|
||||
id: String(gradeIdCounter++),
|
||||
...data,
|
||||
schoolName: mockGrades.find(g => g.schoolId === data.schoolId)?.schoolName || '未知学校',
|
||||
classCount: 0,
|
||||
studentCount: 0,
|
||||
createdAt: new Date().toLocaleString('zh-CN'),
|
||||
updatedAt: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockGrades.push(newGrade);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '创建成功',
|
||||
data: newGrade
|
||||
};
|
||||
},
|
||||
|
||||
// 更新年级
|
||||
'[PUT]/admin/grades/{id}': ({ params, data }) => {
|
||||
const index = mockGrades.findIndex(grade => grade.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '年级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
mockGrades[index] = {
|
||||
...mockGrades[index],
|
||||
...data,
|
||||
updatedAt: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '更新成功',
|
||||
data: mockGrades[index]
|
||||
};
|
||||
},
|
||||
|
||||
// 删除年级
|
||||
'[DELETE]/admin/grades/{id}': ({ params }) => {
|
||||
const index = mockGrades.findIndex(grade => grade.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '年级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
mockGrades.splice(index, 1);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '删除成功'
|
||||
};
|
||||
},
|
||||
|
||||
// 切换年级状态
|
||||
'[PATCH]/admin/grades/{id}/toggle-status': ({ params }) => {
|
||||
const grade = mockGrades.find(g => g.id === params.id);
|
||||
if (!grade) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '年级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
grade.status = grade.status === 'active' ? 'inactive' : 'active';
|
||||
grade.updatedAt = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '状态切换成功',
|
||||
data: grade
|
||||
};
|
||||
},
|
||||
|
||||
// 获取年级详情
|
||||
'/admin/grades/{id}': ({ params }) => {
|
||||
const grade = mockGrades.find(g => g.id === params.id);
|
||||
if (!grade) {
|
||||
return {
|
||||
code: 404,
|
||||
message: '年级不存在'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: grade
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
42
src/mocks/index.mock.ts
Normal file
42
src/mocks/index.mock.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Mock数据统一管理 - 使用alova官方@alova/mock
|
||||
*/
|
||||
|
||||
// 导入所有mock模块
|
||||
import authMock from './auth.mock';
|
||||
import questionsMock from './questions.mock';
|
||||
import bannersMock from './banners.mock';
|
||||
import recordsMock from './records.mock';
|
||||
import usersMock from './users.mock';
|
||||
import schoolsMock from './schools.mock';
|
||||
import gradesMock from './grades.mock';
|
||||
import classesMock from './classes.mock';
|
||||
import profileMock from './profile.mock';
|
||||
import commonMock from './common.mock';
|
||||
|
||||
// 导出所有mock定义
|
||||
export const mockGroups = [
|
||||
authMock,
|
||||
questionsMock,
|
||||
bannersMock,
|
||||
recordsMock,
|
||||
usersMock,
|
||||
schoolsMock,
|
||||
gradesMock,
|
||||
classesMock,
|
||||
profileMock,
|
||||
commonMock
|
||||
];
|
||||
|
||||
export {
|
||||
authMock,
|
||||
questionsMock,
|
||||
bannersMock,
|
||||
recordsMock,
|
||||
usersMock,
|
||||
schoolsMock,
|
||||
gradesMock,
|
||||
classesMock,
|
||||
profileMock,
|
||||
commonMock
|
||||
};
|
||||
104
src/mocks/profile.mock.ts
Normal file
104
src/mocks/profile.mock.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// Mock用户资料数据
|
||||
let mockProfile = {
|
||||
id: 'admin001',
|
||||
username: 'admin',
|
||||
realName: '管理员',
|
||||
phone: '13800138000',
|
||||
email: 'admin@zhuzi.edu.cn',
|
||||
gender: 'male',
|
||||
birthday: '1985-06-15',
|
||||
bio: '朱子文化管理系统管理员，负责系统维护和用户管理工作。',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=admin',
|
||||
role: 'admin',
|
||||
status: 'active',
|
||||
createdAt: '2023-01-01 08:00:00',
|
||||
lastLoginAt: '2024-12-16 14:30:00',
|
||||
loginCount: 256,
|
||||
updatedAt: '2024-12-16 14:30:00'
|
||||
};
|
||||
|
||||
export default defineMock({
|
||||
// 获取用户资料
|
||||
'/admin/profile': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: mockProfile
|
||||
};
|
||||
},
|
||||
|
||||
// 更新用户资料
|
||||
'[PUT]/admin/profile': ({ data }) => {
|
||||
// 更新用户资料
|
||||
mockProfile = {
|
||||
...mockProfile,
|
||||
...data,
|
||||
updatedAt: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '更新成功',
|
||||
data: mockProfile
|
||||
};
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
'[POST]/admin/profile/avatar': () => {
|
||||
// 模拟生成头像URL
|
||||
const avatarUrl = `https://api.dicebear.com/7.x/avataaars/svg?seed=${Date.now()}`;
|
||||
|
||||
// 更新用户头像
|
||||
mockProfile.avatar = avatarUrl;
|
||||
mockProfile.updatedAt = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: '头像上传成功',
|
||||
data: {
|
||||
url: avatarUrl
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 修改密码
|
||||
'[POST]/admin/profile/password': ({ data }) => {
|
||||
const { oldPassword, newPassword } = data;
|
||||
|
||||
// 模拟验证旧密码（这里简单判断不为空即可）
|
||||
if (!oldPassword) {
|
||||
return {
|
||||
code: 400,
|
||||
message: '当前密码不能为空'
|
||||
};
|
||||
}
|
||||
|
||||
// 模拟验证旧密码是否正确（实际项目中应该加密验证）
|
||||
if (oldPassword !== '123456' && oldPassword !== 'admin123') {
|
||||
return {
|
||||
status: 400,
|
||||
statusText: 'Bad Request',
|
||||
body: {
|
||||
code: 400,
|
||||
message: 'Invalid old password'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 模拟验证新密码强度
|
||||
if (newPassword.length < 8) {
|
||||
return {
|
||||
code: 400,
|
||||
message: '新密码长度至少8位'
|
||||
};
|
||||
}
|
||||
|
||||
// 模拟密码修改成功
|
||||
return {
|
||||
code: 200,
|
||||
message: '密码修改成功'
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
297
src/mocks/questions.mock.ts
Normal file
297
src/mocks/questions.mock.ts
Normal file
@@ -0,0 +1,297 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 模拟题目数据
|
||||
const mockQuestions = [
|
||||
{
|
||||
id: '1',
|
||||
title: '朱熹的生卒年份',
|
||||
content: '朱熹（朱子）生于哪一年，卒于哪一年？',
|
||||
type: 'single',
|
||||
options: [
|
||||
{ key: 'A', value: '1130-1200', isCorrect: true },
|
||||
{ key: 'B', value: '1120-1190' },
|
||||
{ key: 'C', value: '1140-1210' },
|
||||
{ key: 'D', value: '1125-1195' }
|
||||
],
|
||||
correctAnswer: ['A'],
|
||||
score: 10,
|
||||
difficulty: 'easy',
|
||||
category: '朱子生平',
|
||||
tags: ['朱熹', '生平', '基础知识'],
|
||||
createTime: '2024-01-01 10:00:00',
|
||||
updateTime: '2024-01-01 10:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '朱子理学的核心思想',
|
||||
content: '朱子理学的核心思想包括哪些？（多选）',
|
||||
type: 'multiple',
|
||||
options: [
|
||||
{ key: 'A', value: '理气论', isCorrect: true },
|
||||
{ key: 'B', value: '心性论', isCorrect: true },
|
||||
{ key: 'C', value: '格物致知', isCorrect: true },
|
||||
{ key: 'D', value: '王道思想' }
|
||||
],
|
||||
correctAnswer: ['A', 'B', 'C'],
|
||||
score: 15,
|
||||
difficulty: 'medium',
|
||||
category: '朱子思想',
|
||||
tags: ['理学', '哲学', '思想'],
|
||||
createTime: '2024-01-01 11:00:00',
|
||||
updateTime: '2024-01-01 11:00:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '朱子的著作',
|
||||
content: '《四书章句集注》是朱子的代表作品吗？',
|
||||
type: 'single',
|
||||
options: [
|
||||
{ key: 'A', value: '是', isCorrect: true },
|
||||
{ key: 'B', value: '不是' }
|
||||
],
|
||||
correctAnswer: ['A'],
|
||||
score: 8,
|
||||
difficulty: 'easy',
|
||||
category: '朱子著作',
|
||||
tags: ['著作', '四书'],
|
||||
createTime: '2024-01-01 12:00:00',
|
||||
updateTime: '2024-01-01 12:00:00'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '朱子的家乡',
|
||||
content: '朱熹的出生地是哪里？',
|
||||
type: 'single',
|
||||
options: [
|
||||
{ key: 'A', value: '江西婺源' },
|
||||
{ key: 'B', value: '福建尤溪', isCorrect: true },
|
||||
{ key: 'C', value: '福建建阳' },
|
||||
{ key: 'D', value: '浙江金华' }
|
||||
],
|
||||
correctAnswer: ['B'],
|
||||
score: 12,
|
||||
difficulty: 'medium',
|
||||
category: '朱子生平',
|
||||
tags: ['家乡', '生平'],
|
||||
createTime: '2024-01-01 13:00:00',
|
||||
updateTime: '2024-01-01 13:00:00'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '朱子教育思想',
|
||||
content: '朱子在教育方面提出了哪些重要观点？（多选）',
|
||||
type: 'multiple',
|
||||
options: [
|
||||
{ key: 'A', value: '因材施教', isCorrect: true },
|
||||
{ key: 'B', value: '学思并重', isCorrect: true },
|
||||
{ key: 'C', value: '博学笃行', isCorrect: true },
|
||||
{ key: 'D', value: '死记硬背' }
|
||||
],
|
||||
correctAnswer: ['A', 'B', 'C'],
|
||||
score: 20,
|
||||
difficulty: 'hard',
|
||||
category: '朱子教育',
|
||||
tags: ['教育', '思想', '方法'],
|
||||
createTime: '2024-01-01 14:00:00',
|
||||
updateTime: '2024-01-01 14:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
// 题目分类
|
||||
const mockCategories = [
|
||||
{ name: '朱子生平', count: 2 },
|
||||
{ name: '朱子思想', count: 1 },
|
||||
{ name: '朱子著作', count: 1 },
|
||||
{ name: '朱子教育', count: 1 }
|
||||
];
|
||||
|
||||
// 题库管理接口的mock数据
|
||||
export default defineMock({
|
||||
// 获取题目列表
|
||||
'[GET]/admin/questions': ({ query }) => {
|
||||
let filteredQuestions = [...mockQuestions];
|
||||
|
||||
// 关键词搜索
|
||||
if (query.keyword) {
|
||||
filteredQuestions = filteredQuestions.filter(q =>
|
||||
q.title.includes(query.keyword!) ||
|
||||
q.content.includes(query.keyword!) ||
|
||||
q.category.includes(query.keyword!)
|
||||
);
|
||||
}
|
||||
|
||||
// 题型筛选
|
||||
if (query.type) {
|
||||
filteredQuestions = filteredQuestions.filter(q => q.type === query.type);
|
||||
}
|
||||
|
||||
// 难度筛选
|
||||
if (query.difficulty) {
|
||||
filteredQuestions = filteredQuestions.filter(q => q.difficulty === query.difficulty);
|
||||
}
|
||||
|
||||
// 分类筛选
|
||||
if (query.category) {
|
||||
filteredQuestions = filteredQuestions.filter(q => q.category === query.category);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const page = parseInt(query.page) || 1;
|
||||
const pageSize = parseInt(query.pageSize) || 10;
|
||||
const total = filteredQuestions.length;
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: filteredQuestions.slice(start, end),
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取题目详情
|
||||
'[GET]/admin/questions/{id}': ({ params }) => {
|
||||
const question = mockQuestions.find(q => q.id === params.id);
|
||||
if (!question) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '题目不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: question
|
||||
};
|
||||
},
|
||||
|
||||
// 创建题目
|
||||
'[POST]/admin/questions': ({ data }) => {
|
||||
const newQuestion = {
|
||||
...data,
|
||||
id: (mockQuestions.length + 1).toString(),
|
||||
createTime: new Date().toLocaleString('zh-CN'),
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockQuestions.push(newQuestion);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '创建成功',
|
||||
id: newQuestion.id
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 更新题目
|
||||
'[PUT]/admin/questions/{id}': ({ params, data }) => {
|
||||
const index = mockQuestions.findIndex(q => q.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '题目不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockQuestions[index] = {
|
||||
...data,
|
||||
id: params.id,
|
||||
createTime: mockQuestions[index].createTime,
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 删除题目
|
||||
'[DELETE]/admin/questions/{id}': ({ params }) => {
|
||||
const index = mockQuestions.findIndex(q => q.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '题目不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockQuestions.splice(index, 1);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '删除成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 批量删除题目
|
||||
'[DELETE]/admin/questions/batch': ({ data }) => {
|
||||
let deletedCount = 0;
|
||||
data.ids.forEach(id => {
|
||||
const index = mockQuestions.findIndex(q => q.id === id);
|
||||
if (index !== -1) {
|
||||
mockQuestions.splice(index, 1);
|
||||
deletedCount++;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: `成功删除${deletedCount}个题目`
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取题目分类列表
|
||||
'[GET]/admin/questions/categories': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: mockCategories
|
||||
};
|
||||
},
|
||||
|
||||
// 导出题目模板
|
||||
'[GET]/admin/questions/template': () => {
|
||||
const blob = new Blob(['模板内容'], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
return blob;
|
||||
},
|
||||
|
||||
// 批量导入题目
|
||||
'[POST]/admin/questions/import': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '导入成功',
|
||||
successCount: 5,
|
||||
failCount: 0
|
||||
}
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
421
src/mocks/records.mock.ts
Normal file
421
src/mocks/records.mock.ts
Normal file
@@ -0,0 +1,421 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 模拟答题记录数据
|
||||
const mockAnswerRecords = [
|
||||
{
|
||||
id: '1',
|
||||
userId: '1',
|
||||
studentName: '张小明',
|
||||
parentPhone: '13800138001',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeName: '一年级',
|
||||
className: '一年级1班',
|
||||
answererType: 'parent',
|
||||
totalQuestions: 5,
|
||||
correctCount: 4,
|
||||
totalScore: 43,
|
||||
answerTime: 120,
|
||||
questionDetails: [
|
||||
{
|
||||
questionId: '1',
|
||||
questionTitle: '朱熹的生卒年份',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 10,
|
||||
timeSpent: 25
|
||||
},
|
||||
{
|
||||
questionId: '2',
|
||||
questionTitle: '朱子理学的核心思想',
|
||||
userAnswer: ['A', 'B'],
|
||||
correctAnswer: ['A', 'B', 'C'],
|
||||
isCorrect: false,
|
||||
score: 0,
|
||||
timeSpent: 30
|
||||
},
|
||||
{
|
||||
questionId: '3',
|
||||
questionTitle: '朱子的著作',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 8,
|
||||
timeSpent: 20
|
||||
},
|
||||
{
|
||||
questionId: '4',
|
||||
questionTitle: '朱子的家乡',
|
||||
userAnswer: ['B'],
|
||||
correctAnswer: ['B'],
|
||||
isCorrect: true,
|
||||
score: 12,
|
||||
timeSpent: 28
|
||||
},
|
||||
{
|
||||
questionId: '5',
|
||||
questionTitle: '朱子教育思想',
|
||||
userAnswer: ['A', 'B', 'C'],
|
||||
correctAnswer: ['A', 'B', 'C'],
|
||||
isCorrect: true,
|
||||
score: 20,
|
||||
timeSpent: 17
|
||||
}
|
||||
],
|
||||
createTime: '2024-01-15 14:30:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
userId: '2',
|
||||
studentName: '李小红',
|
||||
parentPhone: '13800138002',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeName: '一年级',
|
||||
className: '一年级2班',
|
||||
answererType: 'student',
|
||||
totalQuestions: 10,
|
||||
correctCount: 8,
|
||||
totalScore: 76,
|
||||
answerTime: 280,
|
||||
questionDetails: [
|
||||
{
|
||||
questionId: '1',
|
||||
questionTitle: '朱熹的生卒年份',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 10,
|
||||
timeSpent: 22
|
||||
},
|
||||
{
|
||||
questionId: '2',
|
||||
questionTitle: '朱子理学的核心思想',
|
||||
userAnswer: ['A', 'B', 'C'],
|
||||
correctAnswer: ['A', 'B', 'C'],
|
||||
isCorrect: true,
|
||||
score: 15,
|
||||
timeSpent: 35
|
||||
}
|
||||
],
|
||||
createTime: '2024-01-14 16:20:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
userId: '3',
|
||||
studentName: '王小强',
|
||||
parentPhone: '13800138003',
|
||||
schoolName: '建阳区第一中学',
|
||||
gradeName: '七年级',
|
||||
className: '七年级1班',
|
||||
answererType: 'parent',
|
||||
totalQuestions: 5,
|
||||
correctCount: 3,
|
||||
totalScore: 30,
|
||||
answerTime: 145,
|
||||
questionDetails: [
|
||||
{
|
||||
questionId: '1',
|
||||
questionTitle: '朱熹的生卒年份',
|
||||
userAnswer: ['B'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: false,
|
||||
score: 0,
|
||||
timeSpent: 30
|
||||
},
|
||||
{
|
||||
questionId: '3',
|
||||
questionTitle: '朱子的著作',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 8,
|
||||
timeSpent: 25
|
||||
}
|
||||
],
|
||||
createTime: '2024-01-13 15:45:00'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
userId: '4',
|
||||
studentName: '刘小丽',
|
||||
parentPhone: '13800138004',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeName: '二年级',
|
||||
className: '二年级1班',
|
||||
answererType: 'student',
|
||||
totalQuestions: 10,
|
||||
correctCount: 9,
|
||||
totalScore: 88,
|
||||
answerTime: 250,
|
||||
questionDetails: [
|
||||
{
|
||||
questionId: '1',
|
||||
questionTitle: '朱熹的生卒年份',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 10,
|
||||
timeSpent: 20
|
||||
}
|
||||
],
|
||||
createTime: '2024-01-16 11:20:00'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
userId: '5',
|
||||
studentName: '陈小华',
|
||||
parentPhone: '13800138005',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeName: '一年级',
|
||||
className: '一年级1班',
|
||||
answererType: 'parent',
|
||||
totalQuestions: 5,
|
||||
correctCount: 2,
|
||||
totalScore: 18,
|
||||
answerTime: 110,
|
||||
questionDetails: [
|
||||
{
|
||||
questionId: '1',
|
||||
questionTitle: '朱熹的生卒年份',
|
||||
userAnswer: ['C'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: false,
|
||||
score: 0,
|
||||
timeSpent: 25
|
||||
},
|
||||
{
|
||||
questionId: '3',
|
||||
questionTitle: '朱子的著作',
|
||||
userAnswer: ['A'],
|
||||
correctAnswer: ['A'],
|
||||
isCorrect: true,
|
||||
score: 8,
|
||||
timeSpent: 20
|
||||
}
|
||||
],
|
||||
createTime: '2024-01-12 09:30:00'
|
||||
}
|
||||
];
|
||||
|
||||
// 答题记录管理接口的mock数据
|
||||
export default defineMock({
|
||||
// 获取答题记录列表
|
||||
'[GET]/admin/records': ({ query }) => {
|
||||
let filteredRecords = [...mockAnswerRecords];
|
||||
|
||||
// 关键词搜索（学生姓名）
|
||||
if (query.keyword) {
|
||||
filteredRecords = filteredRecords.filter(r =>
|
||||
r.studentName.includes(query.keyword!) ||
|
||||
r.parentPhone.includes(query.keyword!)
|
||||
);
|
||||
}
|
||||
|
||||
// 学校筛选
|
||||
if (query.schoolName) {
|
||||
filteredRecords = filteredRecords.filter(r => r.schoolName.includes(query.schoolName!));
|
||||
}
|
||||
|
||||
// 年级筛选
|
||||
if (query.gradeName) {
|
||||
filteredRecords = filteredRecords.filter(r => r.gradeName.includes(query.gradeName!));
|
||||
}
|
||||
|
||||
// 班级筛选
|
||||
if (query.className) {
|
||||
filteredRecords = filteredRecords.filter(r => r.className.includes(query.className!));
|
||||
}
|
||||
|
||||
// 答题人类型筛选
|
||||
if (query.answererType) {
|
||||
filteredRecords = filteredRecords.filter(r => r.answererType === query.answererType);
|
||||
}
|
||||
|
||||
// 时间范围筛选
|
||||
if (query.startTime) {
|
||||
filteredRecords = filteredRecords.filter(r => r.createTime >= query.startTime!);
|
||||
}
|
||||
if (query.endTime) {
|
||||
filteredRecords = filteredRecords.filter(r => r.createTime <= query.endTime!);
|
||||
}
|
||||
|
||||
// 按创建时间倒序排列
|
||||
filteredRecords.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime());
|
||||
|
||||
// 分页
|
||||
const page = parseInt(query.page) || 1;
|
||||
const pageSize = parseInt(query.pageSize) || 10;
|
||||
const total = filteredRecords.length;
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: filteredRecords.slice(start, end),
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取答题记录详情
|
||||
'[GET]/admin/records/{id}': ({ params }) => {
|
||||
const record = mockAnswerRecords.find(r => r.id === params.id);
|
||||
if (!record) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '记录不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: record
|
||||
};
|
||||
},
|
||||
|
||||
// 获取答题统计数据
|
||||
'[GET]/admin/records/statistics': ({ query }) => {
|
||||
let filteredRecords = [...mockAnswerRecords];
|
||||
|
||||
// 时间筛选
|
||||
if (query?.startTime) {
|
||||
filteredRecords = filteredRecords.filter(r => r.createTime >= query.startTime!);
|
||||
}
|
||||
if (query?.endTime) {
|
||||
filteredRecords = filteredRecords.filter(r => r.createTime <= query.endTime!);
|
||||
}
|
||||
|
||||
// 学校筛选
|
||||
if (query?.schoolName) {
|
||||
filteredRecords = filteredRecords.filter(r => r.schoolName.includes(query.schoolName!));
|
||||
}
|
||||
|
||||
// 年级筛选
|
||||
if (query?.gradeName) {
|
||||
filteredRecords = filteredRecords.filter(r => r.gradeName.includes(query.gradeName!));
|
||||
}
|
||||
|
||||
const totalRecords = filteredRecords.length;
|
||||
const totalUsers = new Set(filteredRecords.map(r => r.userId)).size;
|
||||
const avgScore = totalRecords > 0 ?
|
||||
filteredRecords.reduce((sum, r) => sum + r.totalScore, 0) / totalRecords : 0;
|
||||
const avgCorrectRate = totalRecords > 0 ?
|
||||
filteredRecords.reduce((sum, r) => sum + (r.correctCount / r.totalQuestions), 0) / totalRecords : 0;
|
||||
|
||||
// 统计热门题目
|
||||
const questionStats = new Map();
|
||||
filteredRecords.forEach(record => {
|
||||
record.questionDetails.forEach(detail => {
|
||||
if (!questionStats.has(detail.questionId)) {
|
||||
questionStats.set(detail.questionId, {
|
||||
title: detail.questionTitle,
|
||||
answerCount: 0,
|
||||
correctCount: 0
|
||||
});
|
||||
}
|
||||
const stat = questionStats.get(detail.questionId)!;
|
||||
stat.answerCount++;
|
||||
if (detail.isCorrect) {
|
||||
stat.correctCount++;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const popularQuestions = Array.from(questionStats.entries())
|
||||
.map(([questionId, stat]: any) => ({
|
||||
questionId,
|
||||
questionTitle: stat.title,
|
||||
answerCount: stat.answerCount,
|
||||
correctRate: stat.answerCount > 0 ? stat.correctCount / stat.answerCount : 0
|
||||
}))
|
||||
.sort((a, b) => b.answerCount - a.answerCount)
|
||||
.slice(0, 10);
|
||||
|
||||
// 统计排行榜数据
|
||||
const schoolStats = new Map();
|
||||
const gradeStats = new Map();
|
||||
const classStats = new Map();
|
||||
|
||||
filteredRecords.forEach(record => {
|
||||
// 学校统计
|
||||
if (!schoolStats.has(record.schoolName)) {
|
||||
schoolStats.set(record.schoolName, { totalScore: 0, count: 0 });
|
||||
}
|
||||
const schoolStat = schoolStats.get(record.schoolName)!;
|
||||
schoolStat.totalScore += record.totalScore;
|
||||
schoolStat.count++;
|
||||
|
||||
// 年级统计
|
||||
if (!gradeStats.has(record.gradeName)) {
|
||||
gradeStats.set(record.gradeName, { totalScore: 0, count: 0 });
|
||||
}
|
||||
const gradeStat = gradeStats.get(record.gradeName)!;
|
||||
gradeStat.totalScore += record.totalScore;
|
||||
gradeStat.count++;
|
||||
|
||||
// 班级统计
|
||||
if (!classStats.has(record.className)) {
|
||||
classStats.set(record.className, { totalScore: 0, count: 0 });
|
||||
}
|
||||
const classStat = classStats.get(record.className)!;
|
||||
classStat.totalScore += record.totalScore;
|
||||
classStat.count++;
|
||||
});
|
||||
|
||||
const schoolRanking = Array.from(schoolStats.entries())
|
||||
.map(([name, stat]: any) => ({
|
||||
name,
|
||||
avgScore: stat.count > 0 ? stat.totalScore / stat.count : 0
|
||||
}))
|
||||
.sort((a, b) => b.avgScore - a.avgScore)
|
||||
.slice(0, 10);
|
||||
|
||||
const gradeRanking = Array.from(gradeStats.entries())
|
||||
.map(([name, stat]: any) => ({
|
||||
name,
|
||||
avgScore: stat.count > 0 ? stat.totalScore / stat.count : 0
|
||||
}))
|
||||
.sort((a, b) => b.avgScore - a.avgScore)
|
||||
.slice(0, 10);
|
||||
|
||||
const classRanking = Array.from(classStats.entries())
|
||||
.map(([name, stat]: any) => ({
|
||||
name,
|
||||
avgScore: stat.count > 0 ? stat.totalScore / stat.count : 0
|
||||
}))
|
||||
.sort((a, b) => b.avgScore - a.avgScore)
|
||||
.slice(0, 10);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
totalRecords,
|
||||
totalUsers,
|
||||
avgScore: Math.round(avgScore * 100) / 100,
|
||||
avgCorrectRate: Math.round(avgCorrectRate * 10000) / 100,
|
||||
popularQuestions,
|
||||
rankingData: {
|
||||
schoolRanking,
|
||||
gradeRanking,
|
||||
classRanking
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 导出答题记录
|
||||
'[GET]/admin/records/export': () => {
|
||||
const blob = new Blob(['导出内容'], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
return blob;
|
||||
}
|
||||
}, true);
|
||||
462
src/mocks/schools.mock.ts
Normal file
462
src/mocks/schools.mock.ts
Normal file
@@ -0,0 +1,462 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 模拟学校数据
|
||||
const mockSchools = [
|
||||
{
|
||||
id: '1',
|
||||
name: '建阳区实验小学',
|
||||
address: '福建省南平市建阳区实验路123号',
|
||||
principal: '张三',
|
||||
phone: '0599-1234567',
|
||||
district: '建阳区',
|
||||
type: 'primary',
|
||||
studentCount: 1200,
|
||||
createTime: '2024-01-01 08:00:00',
|
||||
updateTime: '2024-01-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '建阳区第一中学',
|
||||
address: '福建省南平市建阳区中山路456号',
|
||||
principal: '李四',
|
||||
phone: '0599-1234568',
|
||||
district: '建阳区',
|
||||
type: 'junior',
|
||||
studentCount: 800,
|
||||
createTime: '2024-01-01 08:00:00',
|
||||
updateTime: '2024-01-01 08:00:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '建阳区第二小学',
|
||||
address: '福建省南平市建阳区朱熹路789号',
|
||||
principal: '王五',
|
||||
phone: '0599-1234569',
|
||||
district: '建阳区',
|
||||
type: 'primary',
|
||||
studentCount: 900,
|
||||
createTime: '2024-01-01 08:00:00',
|
||||
updateTime: '2024-01-01 08:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟年级数据
|
||||
const mockGrades = [
|
||||
// 建阳区实验小学
|
||||
{ id: '1', schoolId: '1', name: '一年级', level: 1, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '2', schoolId: '1', name: '二年级', level: 2, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '3', schoolId: '1', name: '三年级', level: 3, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '4', schoolId: '1', name: '四年级', level: 4, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '5', schoolId: '1', name: '五年级', level: 5, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '6', schoolId: '1', name: '六年级', level: 6, createTime: '2024-01-01 08:00:00' },
|
||||
|
||||
// 建阳区第一中学
|
||||
{ id: '7', schoolId: '2', name: '七年级', level: 7, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '8', schoolId: '2', name: '八年级', level: 8, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '9', schoolId: '2', name: '九年级', level: 9, createTime: '2024-01-01 08:00:00' },
|
||||
|
||||
// 建阳区第二小学
|
||||
{ id: '10', schoolId: '3', name: '一年级', level: 1, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '11', schoolId: '3', name: '二年级', level: 2, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '12', schoolId: '3', name: '三年级', level: 3, createTime: '2024-01-01 08:00:00' }
|
||||
];
|
||||
|
||||
// 模拟班级数据
|
||||
const mockClasses = [
|
||||
// 建阳区实验小学一年级
|
||||
{ id: '1', schoolId: '1', gradeId: '1', name: '一年级1班', teacherName: '王老师', studentCount: 30, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '2', schoolId: '1', gradeId: '1', name: '一年级2班', teacherName: '刘老师', studentCount: 28, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '3', schoolId: '1', gradeId: '1', name: '一年级3班', teacherName: '李老师', studentCount: 29, createTime: '2024-01-01 08:00:00' },
|
||||
|
||||
// 建阳区实验小学二年级
|
||||
{ id: '4', schoolId: '1', gradeId: '2', name: '二年级1班', teacherName: '张老师', studentCount: 32, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '5', schoolId: '1', gradeId: '2', name: '二年级2班', teacherName: '赵老师', studentCount: 31, createTime: '2024-01-01 08:00:00' },
|
||||
|
||||
// 建阳区第一中学七年级
|
||||
{ id: '6', schoolId: '2', gradeId: '7', name: '七年级1班', teacherName: '陈老师', studentCount: 40, createTime: '2024-01-01 08:00:00' },
|
||||
{ id: '7', schoolId: '2', gradeId: '7', name: '七年级2班', teacherName: '吴老师', studentCount: 38, createTime: '2024-01-01 08:00:00' },
|
||||
|
||||
// 建阳区第二小学
|
||||
{ id: '8', schoolId: '3', gradeId: '10', name: '一年级1班', teacherName: '周老师', studentCount: 35, createTime: '2024-01-01 08:00:00' }
|
||||
];
|
||||
|
||||
// 区县列表
|
||||
const mockDistricts = [
|
||||
{ name: '建阳区', count: 3 },
|
||||
{ name: '延平区', count: 0 },
|
||||
{ name: '顺昌县', count: 0 },
|
||||
{ name: '浦城县', count: 0 }
|
||||
];
|
||||
|
||||
// 学校管理接口的mock数据
|
||||
export default defineMock({
|
||||
// 获取学校列表
|
||||
'[GET]/admin/schools': ({ query }) => {
|
||||
let filteredSchools = [...mockSchools];
|
||||
|
||||
// 关键词搜索
|
||||
if (query.keyword) {
|
||||
filteredSchools = filteredSchools.filter(s =>
|
||||
s.name.includes(query.keyword!) ||
|
||||
s.address?.includes(query.keyword!) ||
|
||||
s.principal?.includes(query.keyword!)
|
||||
);
|
||||
}
|
||||
|
||||
// 区县筛选
|
||||
if (query.district) {
|
||||
filteredSchools = filteredSchools.filter(s => s.district === query.district);
|
||||
}
|
||||
|
||||
// 类型筛选
|
||||
if (query.type) {
|
||||
filteredSchools = filteredSchools.filter(s => s.type === query.type);
|
||||
}
|
||||
|
||||
// 为每个学校添加年级班级信息
|
||||
const schoolsWithGrades = filteredSchools.map(school => {
|
||||
const grades = mockGrades.filter(g => g.schoolId === school.id);
|
||||
const gradesWithClasses = grades.map(grade => ({
|
||||
...grade,
|
||||
classes: mockClasses.filter(c => c.gradeId === grade.id)
|
||||
}));
|
||||
|
||||
return {
|
||||
...school,
|
||||
grades: gradesWithClasses
|
||||
};
|
||||
});
|
||||
|
||||
// 分页
|
||||
const page = parseInt(query.page) || 1;
|
||||
const pageSize = parseInt(query.pageSize) || 10;
|
||||
const total = schoolsWithGrades.length;
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: schoolsWithGrades.slice(start, end),
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取学校详情（包含年级班级）
|
||||
'[GET]/admin/schools/{id}': ({ params }) => {
|
||||
const school = mockSchools.find(s => s.id === params.id);
|
||||
if (!school) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '学校不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 获取该学校的年级
|
||||
const grades = mockGrades.filter(g => g.schoolId === params.id);
|
||||
const gradesWithClasses = grades.map(grade => ({
|
||||
...grade,
|
||||
classes: mockClasses.filter(c => c.gradeId === grade.id)
|
||||
}));
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
...school,
|
||||
grades: gradesWithClasses
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 创建学校
|
||||
'[POST]/admin/schools': ({ data }) => {
|
||||
const newSchool = {
|
||||
...data,
|
||||
id: (mockSchools.length + 1).toString(),
|
||||
createTime: new Date().toLocaleString('zh-CN'),
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockSchools.push(newSchool);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '创建成功',
|
||||
id: newSchool.id
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 更新学校
|
||||
'[PUT]/admin/schools/{id}': ({ params, data }) => {
|
||||
const index = mockSchools.findIndex(s => s.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '学校不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockSchools[index] = {
|
||||
...data,
|
||||
id: params.id,
|
||||
createTime: mockSchools[index].createTime,
|
||||
updateTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 删除学校
|
||||
'[DELETE]/admin/schools/{id}': ({ params }) => {
|
||||
const schoolIndex = mockSchools.findIndex(s => s.id === params.id);
|
||||
if (schoolIndex === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '学校不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 删除学校
|
||||
mockSchools.splice(schoolIndex, 1);
|
||||
|
||||
// 删除相关年级
|
||||
const gradeIds = mockGrades.filter(g => g.schoolId === params.id).map(g => g.id);
|
||||
for (let i = mockGrades.length - 1; i >= 0; i--) {
|
||||
if (mockGrades[i].schoolId === params.id) {
|
||||
mockGrades.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除相关班级
|
||||
for (let i = mockClasses.length - 1; i >= 0; i--) {
|
||||
if (gradeIds.includes(mockClasses[i].gradeId)) {
|
||||
mockClasses.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '删除成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 获取年级列表
|
||||
'[GET]/admin/schools/{schoolId}/grades': ({ params }) => {
|
||||
const grades = mockGrades.filter(g => g.schoolId === params.schoolId);
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: grades
|
||||
};
|
||||
},
|
||||
|
||||
// 创建年级
|
||||
'[POST]/admin/grades': ({ data }) => {
|
||||
const newGrade = {
|
||||
...data,
|
||||
id: (mockGrades.length + 1).toString(),
|
||||
createTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockGrades.push(newGrade);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '创建成功',
|
||||
id: newGrade.id
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 更新年级
|
||||
'[PUT]/admin/grades/{id}': ({ params, data }) => {
|
||||
const index = mockGrades.findIndex(g => g.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '年级不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockGrades[index] = {
|
||||
...data,
|
||||
id: params.id,
|
||||
createTime: mockGrades[index].createTime
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 删除年级
|
||||
'[DELETE]/admin/grades/{id}': ({ params }) => {
|
||||
const index = mockGrades.findIndex(g => g.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '年级不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockGrades.splice(index, 1);
|
||||
|
||||
// 删除相关班级
|
||||
for (let i = mockClasses.length - 1; i >= 0; i--) {
|
||||
if (mockClasses[i].gradeId === params.id) {
|
||||
mockClasses.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '删除成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 获取班级列表
|
||||
'[GET]/admin/grades/{gradeId}/classes': ({ params }) => {
|
||||
const classes = mockClasses.filter(c => c.gradeId === params.gradeId);
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: classes
|
||||
};
|
||||
},
|
||||
|
||||
// 创建班级
|
||||
'[POST]/admin/classes': ({ data }) => {
|
||||
const newClass = {
|
||||
...data,
|
||||
id: (mockClasses.length + 1).toString(),
|
||||
createTime: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
|
||||
mockClasses.push(newClass);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '创建成功',
|
||||
id: newClass.id
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 更新班级
|
||||
'[PUT]/admin/classes/{id}': ({ params, data }) => {
|
||||
const index = mockClasses.findIndex(c => c.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '班级不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockClasses[index] = {
|
||||
...data,
|
||||
id: params.id,
|
||||
createTime: mockClasses[index].createTime
|
||||
};
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '更新成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 删除班级
|
||||
'[DELETE]/admin/classes/{id}': ({ params }) => {
|
||||
const index = mockClasses.findIndex(c => c.id === params.id);
|
||||
if (index === -1) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '班级不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
mockClasses.splice(index, 1);
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '删除成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 获取区县列表
|
||||
'[GET]/admin/schools/districts': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: mockDistricts
|
||||
};
|
||||
},
|
||||
|
||||
// 导出学校数据模板
|
||||
'[GET]/admin/schools/template': () => {
|
||||
const blob = new Blob(['模板内容'], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
||||
return blob;
|
||||
},
|
||||
|
||||
// 批量导入学校数据
|
||||
'[POST]/admin/schools/import': () => {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
message: '导入成功',
|
||||
successCount: 3,
|
||||
failCount: 0
|
||||
}
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
266
src/mocks/users.mock.ts
Normal file
266
src/mocks/users.mock.ts
Normal file
@@ -0,0 +1,266 @@
|
||||
import { defineMock } from '@alova/mock';
|
||||
|
||||
// 模拟小程序用户数据
|
||||
const mockAppUsers = [
|
||||
{
|
||||
id: '1',
|
||||
openid: 'oABC123def456',
|
||||
phone: '13800138001',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user1',
|
||||
nickname: '张家长',
|
||||
studentId: 'student1',
|
||||
studentName: '张小明',
|
||||
schoolId: '1',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeId: '1',
|
||||
gradeName: '一年级',
|
||||
classId: '1',
|
||||
className: '一年级1班',
|
||||
studentSeatNumber: 15,
|
||||
totalScore: 85,
|
||||
answerCount: 10,
|
||||
lastAnswerTime: '2024-01-15 14:30:00',
|
||||
createTime: '2024-01-01 10:00:00',
|
||||
updateTime: '2024-01-15 14:30:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
openid: 'oABC789ghi012',
|
||||
phone: '13800138002',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user2',
|
||||
nickname: '李家长',
|
||||
studentId: 'student2',
|
||||
studentName: '李小红',
|
||||
schoolId: '1',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeId: '1',
|
||||
gradeName: '一年级',
|
||||
classId: '2',
|
||||
className: '一年级2班',
|
||||
studentSeatNumber: 8,
|
||||
totalScore: 92,
|
||||
answerCount: 12,
|
||||
lastAnswerTime: '2024-01-14 16:20:00',
|
||||
createTime: '2024-01-01 11:00:00',
|
||||
updateTime: '2024-01-14 16:20:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
openid: 'oABC345jkl678',
|
||||
phone: '13800138003',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user3',
|
||||
nickname: '王家长',
|
||||
studentId: 'student3',
|
||||
studentName: '王小强',
|
||||
schoolId: '2',
|
||||
schoolName: '建阳区第一中学',
|
||||
gradeId: '3',
|
||||
gradeName: '七年级',
|
||||
classId: '3',
|
||||
className: '七年级1班',
|
||||
studentSeatNumber: 12,
|
||||
totalScore: 78,
|
||||
answerCount: 8,
|
||||
lastAnswerTime: '2024-01-13 15:45:00',
|
||||
createTime: '2024-01-01 12:00:00',
|
||||
updateTime: '2024-01-13 15:45:00'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
openid: 'oABC901mno234',
|
||||
phone: '13800138004',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user4',
|
||||
nickname: '刘家长',
|
||||
studentId: 'student4',
|
||||
studentName: '刘小丽',
|
||||
schoolId: '1',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeId: '2',
|
||||
gradeName: '二年级',
|
||||
classId: '4',
|
||||
className: '二年级1班',
|
||||
studentSeatNumber: 5,
|
||||
totalScore: 95,
|
||||
answerCount: 15,
|
||||
lastAnswerTime: '2024-01-16 11:20:00',
|
||||
createTime: '2024-01-01 13:00:00',
|
||||
updateTime: '2024-01-16 11:20:00'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
openid: 'oABC567pqr890',
|
||||
phone: '13800138005',
|
||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=user5',
|
||||
nickname: '陈家长',
|
||||
studentId: 'student5',
|
||||
studentName: '陈小华',
|
||||
schoolId: '1',
|
||||
schoolName: '建阳区实验小学',
|
||||
gradeId: '1',
|
||||
gradeName: '一年级',
|
||||
classId: '1',
|
||||
className: '一年级1班',
|
||||
studentSeatNumber: 20,
|
||||
totalScore: 67,
|
||||
answerCount: 6,
|
||||
lastAnswerTime: '2024-01-12 09:30:00',
|
||||
createTime: '2024-01-01 14:00:00',
|
||||
updateTime: '2024-01-12 09:30:00'
|
||||
}
|
||||
];
|
||||
|
||||
// 用户管理接口的mock数据
|
||||
export default defineMock({
|
||||
// 获取用户列表
|
||||
'[GET]/admin/users': ({ query }) => {
|
||||
let filteredUsers = [...mockAppUsers];
|
||||
|
||||
// 关键词搜索（学生姓名或家长手机号）
|
||||
if (query.keyword) {
|
||||
filteredUsers = filteredUsers.filter(u =>
|
||||
u.studentName?.includes(query.keyword!) ||
|
||||
u.phone.includes(query.keyword!) ||
|
||||
u.nickname?.includes(query.keyword!)
|
||||
);
|
||||
}
|
||||
|
||||
// 学校筛选
|
||||
if (query.schoolId) {
|
||||
filteredUsers = filteredUsers.filter(u => u.schoolId === query.schoolId);
|
||||
}
|
||||
|
||||
// 年级筛选
|
||||
if (query.gradeId) {
|
||||
filteredUsers = filteredUsers.filter(u => u.gradeId === query.gradeId);
|
||||
}
|
||||
|
||||
// 班级筛选
|
||||
if (query.classId) {
|
||||
filteredUsers = filteredUsers.filter(u => u.classId === query.classId);
|
||||
}
|
||||
|
||||
// 按创建时间倒序排列
|
||||
filteredUsers.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime());
|
||||
|
||||
// 分页
|
||||
const page = parseInt(query.page) || 1;
|
||||
const pageSize = parseInt(query.pageSize) || 10;
|
||||
const total = filteredUsers.length;
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize;
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
list: filteredUsers.slice(start, end),
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 获取用户详情
|
||||
'[GET]/admin/users/{id}': ({ params }) => {
|
||||
const user = mockAppUsers.find(u => u.id === params.id);
|
||||
if (!user) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '用户不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: user
|
||||
};
|
||||
},
|
||||
|
||||
// 解绑家长与学生关系
|
||||
'[PUT]/admin/users/{id}/unbind': ({ params }) => {
|
||||
const user = mockAppUsers.find(u => u.id === params.id);
|
||||
if (!user) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '用户不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 清空学生信息
|
||||
user.studentId = undefined;
|
||||
user.studentName = undefined;
|
||||
user.schoolId = '';
|
||||
user.schoolName = '';
|
||||
user.gradeId = '';
|
||||
user.gradeName = '';
|
||||
user.classId = '';
|
||||
user.className = '';
|
||||
user.studentSeatNumber = undefined;
|
||||
user.totalScore = 0;
|
||||
user.answerCount = 0;
|
||||
user.lastAnswerTime = undefined;
|
||||
user.updateTime = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '解绑成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 禁用用户
|
||||
'[PUT]/admin/users/{id}/disable': ({ params }) => {
|
||||
const user = mockAppUsers.find(u => u.id === params.id);
|
||||
if (!user) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '用户不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
user.updateTime = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '禁用成功' }
|
||||
};
|
||||
},
|
||||
|
||||
// 启用用户
|
||||
'[PUT]/admin/users/{id}/enable': ({ params }) => {
|
||||
const user = mockAppUsers.find(u => u.id === params.id);
|
||||
if (!user) {
|
||||
return {
|
||||
status: 404,
|
||||
body: {
|
||||
code: 404,
|
||||
message: '用户不存在',
|
||||
data: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
user.updateTime = new Date().toLocaleString('zh-CN');
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: { message: '启用成功' }
|
||||
};
|
||||
}
|
||||
}, true);
|
||||
151
src/router/index.ts
Normal file
151
src/router/index.ts
Normal file
@@ -0,0 +1,151 @@
|
||||
import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/admin'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/auth/LoginPage.vue'),
|
||||
meta: {
|
||||
title: '登录',
|
||||
requiresGuest: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
component: () => import('@/components/layout/AdminLayout.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/dashboard/DashboardPage.vue'),
|
||||
meta: {
|
||||
title: '仪表盘'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'questions',
|
||||
name: 'Questions',
|
||||
component: () => import('@/views/questions/QuestionPage.vue'),
|
||||
meta: {
|
||||
title: '题库管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'banners',
|
||||
name: 'Banners',
|
||||
component: () => import('@/views/banners/BannerPage.vue'),
|
||||
meta: {
|
||||
title: '轮播图管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'records',
|
||||
name: 'Records',
|
||||
component: () => import('@/views/records/RecordPage.vue'),
|
||||
meta: {
|
||||
title: '答题记录'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'users',
|
||||
name: 'Users',
|
||||
component: () => import('@/views/users/UserPage.vue'),
|
||||
meta: {
|
||||
title: '用户管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'schools',
|
||||
name: 'Schools',
|
||||
component: () => import('@/views/schools/SchoolPage.vue'),
|
||||
meta: {
|
||||
title: '学校管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'grades',
|
||||
name: 'Grades',
|
||||
component: () => import('@/views/grades/GradePage.vue'),
|
||||
meta: {
|
||||
title: '年级管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'classes',
|
||||
name: 'Classes',
|
||||
component: () => import('@/views/classes/ClassPage.vue'),
|
||||
meta: {
|
||||
title: '班级管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
name: 'Profile',
|
||||
component: () => import('@/views/profile/ProfilePage.vue'),
|
||||
meta: {
|
||||
title: '个人信息'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'password',
|
||||
name: 'Password',
|
||||
component: () => import('@/views/profile/PasswordPage.vue'),
|
||||
meta: {
|
||||
title: '修改密码'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/auth/LoginPage.vue'),
|
||||
meta: {
|
||||
title: '页面未找到'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
|
||||
// 设置页面标题
|
||||
if (to.meta.title) {
|
||||
document.title = `${to.meta.title} - 朱子文化管理后台`;
|
||||
}
|
||||
|
||||
// 需要认证的页面
|
||||
if (to.meta.requiresAuth) {
|
||||
if (!authStore.isLoggedIn) {
|
||||
next('/login');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 需要游客身份的页面（如登录页）
|
||||
if (to.meta.requiresGuest) {
|
||||
if (authStore.isLoggedIn) {
|
||||
next('/admin');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
71
src/stores/auth.ts
Normal file
71
src/stores/auth.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref, computed } from 'vue';
|
||||
import type { LoginResponse } from '@/apis/auth';
|
||||
|
||||
/**
|
||||
* 用户认证状态管理
|
||||
*/
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
// 状态
|
||||
const token = ref<string>('');
|
||||
const refreshToken = ref<string>('');
|
||||
const userInfo = ref<LoginResponse['userInfo'] | null>(null);
|
||||
const isLoggedIn = computed(() => !!token.value && !!userInfo.value);
|
||||
|
||||
// 设置登录信息
|
||||
const setAuth = (loginData: LoginResponse) => {
|
||||
token.value = loginData.token;
|
||||
refreshToken.value = loginData.refreshToken;
|
||||
userInfo.value = loginData.userInfo;
|
||||
};
|
||||
|
||||
// 设置用户信息
|
||||
const setUserInfo = (user: LoginResponse['userInfo']) => {
|
||||
userInfo.value = user;
|
||||
};
|
||||
|
||||
// 更新token
|
||||
const updateToken = (newToken: string, newRefreshToken?: string) => {
|
||||
token.value = newToken;
|
||||
if (newRefreshToken) {
|
||||
refreshToken.value = newRefreshToken;
|
||||
}
|
||||
};
|
||||
|
||||
// 清除登录信息
|
||||
const clearAuth = () => {
|
||||
token.value = '';
|
||||
refreshToken.value = '';
|
||||
userInfo.value = null;
|
||||
};
|
||||
|
||||
// 检查是否为管理员
|
||||
const isAdmin = computed(() => userInfo.value?.role === 'admin');
|
||||
|
||||
// 检查是否为操作员
|
||||
const isOperator = computed(() => userInfo.value?.role === 'operator');
|
||||
|
||||
return {
|
||||
// 状态
|
||||
token,
|
||||
refreshToken,
|
||||
userInfo,
|
||||
isLoggedIn,
|
||||
|
||||
// 计算属性
|
||||
isAdmin,
|
||||
isOperator,
|
||||
|
||||
// 方法
|
||||
setAuth,
|
||||
setUserInfo,
|
||||
updateToken,
|
||||
clearAuth,
|
||||
};
|
||||
}, {
|
||||
persist: {
|
||||
key: 'zhuzi-admin-auth',
|
||||
storage: localStorage,
|
||||
pick: ['token', 'refreshToken', 'userInfo']
|
||||
}
|
||||
});
|
||||
17
src/utils/request/adapter/localforageStorageAdapter.ts
Normal file
17
src/utils/request/adapter/localforageStorageAdapter.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import localforage from "localforage";
|
||||
|
||||
|
||||
export const localforageStorageAdapter = {
|
||||
async set(key: string, value: any) {
|
||||
await localforage.setItem(key, value);
|
||||
},
|
||||
async get(key: string) {
|
||||
return await localforage.getItem(key);
|
||||
},
|
||||
async remove(key: any) {
|
||||
await localforage.removeItem(key);
|
||||
},
|
||||
async clear() {
|
||||
await localforage.clear();
|
||||
}
|
||||
};
|
||||
133
src/utils/request/index.ts
Normal file
133
src/utils/request/index.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import {createAlova} from 'alova';
|
||||
import VueHook from 'alova/vue';
|
||||
import {localforageStorageAdapter} from "@/utils/request/adapter/localforageStorageAdapter.ts";
|
||||
import {createServerTokenAuthentication} from "alova/client";
|
||||
import type {AxiosResponse, AxiosResponseHeaders} from "axios";
|
||||
import type {AlovaAxiosRequestConfig} from "@alova/adapter-axios";
|
||||
|
||||
import {axiosRequestAdapter} from "@alova/adapter-axios";
|
||||
import {createAlovaMockAdapter} from '@alova/mock';
|
||||
import {mockGroups} from '@/mocks/index.mock';
|
||||
|
||||
|
||||
// 创建axios适配器
|
||||
const httpAdapter = axiosRequestAdapter();
|
||||
|
||||
// 创建mock适配器
|
||||
const mockAdapter = createAlovaMockAdapter<AlovaAxiosRequestConfig, AxiosResponse, AxiosResponseHeaders>(mockGroups, {
|
||||
// 全局控制是否启用mock接口，默认为true
|
||||
enable: import.meta.env.VITE_NODE_ENV === 'development',
|
||||
|
||||
// 非模拟请求适配器，用于未匹配mock接口时发送请求
|
||||
httpAdapter,
|
||||
|
||||
// mock接口响应延迟，单位毫秒
|
||||
delay: 500,
|
||||
|
||||
matchMode: "methodurl",
|
||||
|
||||
// 是否打印mock接口请求信息
|
||||
mockRequestLogger: import.meta.env.DEV,
|
||||
|
||||
// 模拟接口回调，适配axios响应格式
|
||||
onMockResponse: (response, _request, currentMethod) => {
|
||||
if (import.meta.env.DEV) {
|
||||
console.log('🚀 Mock响应:', {
|
||||
url: currentMethod.url,
|
||||
method: currentMethod.type,
|
||||
response: response.body || response
|
||||
});
|
||||
}
|
||||
|
||||
// 创建AxiosResponse格式的响应
|
||||
const axiosResponse: AxiosResponse = {
|
||||
data: response.body || response,
|
||||
status: response.status || 200,
|
||||
statusText: response.statusText || 'OK',
|
||||
headers: response.responseHeaders || {},
|
||||
config: {} as any,
|
||||
request: {} as any
|
||||
};
|
||||
|
||||
// 转换headers格式以兼容AxiosResponseHeaders
|
||||
const headers: AxiosResponseHeaders = {} as AxiosResponseHeaders;
|
||||
if (response.responseHeaders) {
|
||||
Object.assign(headers, response.responseHeaders);
|
||||
}
|
||||
|
||||
return {
|
||||
response: axiosResponse,
|
||||
headers
|
||||
};
|
||||
},
|
||||
|
||||
// 模拟错误回调
|
||||
onMockError: (error, currentMethod) => {
|
||||
console.error('❌ Mock错误:', error, currentMethod?.url);
|
||||
return {
|
||||
name: error.name,
|
||||
message: error.message,
|
||||
stack: error.stack
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication<typeof VueHook,
|
||||
typeof mockAdapter>({
|
||||
refreshTokenOnSuccess: {
|
||||
// 在请求前触发，将接收到method参数，并返回boolean表示token是否过期
|
||||
isExpired: (_response: any, _method: any) => {
|
||||
return false
|
||||
},
|
||||
|
||||
// 当token过期时触发，在此函数中触发刷新token
|
||||
handler: async () => {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const request = createAlova({
|
||||
timeout: 10000,
|
||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||
statesHook: VueHook,
|
||||
// 使用mock适配器，在生产环境自动切换到http适配器
|
||||
requestAdapter: import.meta.env.VITE_NODE_ENV === 'development' ? mockAdapter : httpAdapter,
|
||||
l2Cache: localforageStorageAdapter,
|
||||
cacheLogger: import.meta.env.VITE_NODE_ENV === 'development',
|
||||
cacheFor: null,
|
||||
// 设置全局的请求拦截器
|
||||
beforeRequest: onAuthRequired(async (method: any) => {
|
||||
// 从localStorage获取token并设置到请求头
|
||||
const token = localStorage.getItem('auth-token');
|
||||
if (token) {
|
||||
method.config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
}),
|
||||
// 响应拦截器
|
||||
responded: onResponseRefreshToken({
|
||||
onSuccess: async (response: any, _method: any) => {
|
||||
if (response.data instanceof Blob) {
|
||||
return response;
|
||||
}
|
||||
|
||||
// 处理标准API响应格式 { code, message, data }
|
||||
if (response.data && typeof response.data === 'object' && 'code' in response.data) {
|
||||
if (response.data.code === 200) {
|
||||
return response.data.data;
|
||||
} else {
|
||||
// 抛出业务错误
|
||||
throw new Error(response.data.message || '请求失败');
|
||||
}
|
||||
}
|
||||
|
||||
return response.data;
|
||||
},
|
||||
onError:
|
||||
(error: any, _method: any) => {
|
||||
return Promise.reject(error);
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
373
src/views/auth/LoginPage.vue
Normal file
373
src/views/auth/LoginPage.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="decoration-item decoration-1"></div>
|
||||
<div class="decoration-item decoration-2"></div>
|
||||
<div class="decoration-item decoration-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="login-container">
|
||||
<!-- 登录表头 -->
|
||||
<div class="login-header">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo-bg">
|
||||
<img src="/vite.svg" alt="朱子文化" class="logo" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title">朱子文化管理后台</h1>
|
||||
<p class="subtitle">传承千年文化，弘扬朱子精神</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<div class="login-form-wrapper">
|
||||
<a-form
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
@finish="handleLogin"
|
||||
layout="vertical"
|
||||
size="large"
|
||||
:colon="false"
|
||||
>
|
||||
<a-form-item name="username">
|
||||
<template #label>
|
||||
<span class="form-label">用户名</span>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="loginForm.username"
|
||||
placeholder="请输入用户名"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password">
|
||||
<template #label>
|
||||
<span class="form-label">密码</span>
|
||||
</template>
|
||||
<a-input-password
|
||||
v-model:value="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
class="form-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="submit-item">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
block
|
||||
:loading="loginLoading"
|
||||
class="login-btn"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { adminLogin } from '@/apis/auth';
|
||||
import type { LoginParams } from '@/apis/auth';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 登录表单
|
||||
const loginForm = reactive<LoginParams>({
|
||||
username: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
// 登录表单验证规则
|
||||
const loginRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 登录请求
|
||||
const { loading: loginLoading, send: sendLogin } = useRequest(() => adminLogin(loginForm), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 处理登录
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const response = await sendLogin();
|
||||
|
||||
// alova通常会包装响应，我们需要获取data字段
|
||||
const result = response?.data || response;
|
||||
|
||||
if (!result || !result.token) {
|
||||
throw new Error('登录响应数据格式错误');
|
||||
}
|
||||
|
||||
// 保存登录信息
|
||||
authStore.setAuth(result);
|
||||
|
||||
message.success('登录成功！');
|
||||
|
||||
// 等待下一个tick确保状态完全更新
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
|
||||
// 跳转到管理后台
|
||||
await router.push('/admin');
|
||||
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '登录失败，请检查用户名和密码');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
.decoration-item {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50%;
|
||||
|
||||
&.decoration-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: -150px;
|
||||
right: -150px;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.decoration-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
animation: float 8s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
&.decoration-3 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
padding: 48px 40px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.logo-wrapper {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.logo-bg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: 0 0 8px 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-wrapper {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 50px !important;
|
||||
border-radius: 12px !important;
|
||||
border: 2px solid #e8e8e8 !important;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s ease;
|
||||
background: #fafafa;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-input-focused {
|
||||
border-color: #667eea !important;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 8px;
|
||||
|
||||
label {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-control-input {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.ant-input-password {
|
||||
height: 50px !important;
|
||||
border-radius: 12px !important;
|
||||
border: 2px solid #e8e8e8 !important;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s ease;
|
||||
background: #fafafa;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea !important;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.submit-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 50px !important;
|
||||
border-radius: 12px !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.ant-btn-loading {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
margin: 20px;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.login-header .title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
242
src/views/banners/BannerPage.vue
Normal file
242
src/views/banners/BannerPage.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="banner-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">轮播图管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索轮播图标题"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="filterStatus"
|
||||
placeholder="状态"
|
||||
style="width: 100px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="enabled">启用</a-select-option>
|
||||
<a-select-option value="disabled">禁用</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<a-button type="primary" @click="showCreateModal">
|
||||
<PlusOutlined />
|
||||
新增轮播图
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 轮播图列表 -->
|
||||
<BannerList
|
||||
:loading="loading"
|
||||
:data-source="banners"
|
||||
:pagination="pagination"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
@status-change="handleStatusChange"
|
||||
@sort-change="handleSortChange"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑轮播图弹窗 -->
|
||||
<BannerForm
|
||||
v-model:visible="formVisible"
|
||||
:form-data="currentBanner"
|
||||
:is-edit="isEditMode"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { getBannerList, deleteBanner, updateBannerStatus, updateBannerSort } from '@/apis/banners';
|
||||
import type { Banner, BannerQueryParams } from '@/apis/banners';
|
||||
|
||||
// 导入子组件
|
||||
import BannerList from './components/BannerList.vue';
|
||||
import BannerForm from './components/BannerForm.vue';
|
||||
|
||||
// 搜索筛选参数
|
||||
const searchKeyword = ref('');
|
||||
const filterStatus = ref<string>();
|
||||
|
||||
// 列表数据
|
||||
const banners = ref<Banner[]>([]);
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 表单相关
|
||||
const formVisible = ref(false);
|
||||
const isEditMode = ref(false);
|
||||
const currentBanner = ref<Partial<Banner>>({});
|
||||
|
||||
// 获取轮播图列表
|
||||
const { loading, send: fetchBanners } = useRequest((params: BannerQueryParams) => getBannerList(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
loadBanners();
|
||||
};
|
||||
|
||||
// 加载轮播图列表
|
||||
const loadBanners = async () => {
|
||||
try {
|
||||
const params: BannerQueryParams = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value || undefined,
|
||||
status: filterStatus.value as any
|
||||
};
|
||||
|
||||
const result = await fetchBanners(params);
|
||||
banners.value = result.list;
|
||||
pagination.total = result.total;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取轮播图列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 新增轮播图
|
||||
const showCreateModal = () => {
|
||||
currentBanner.value = {};
|
||||
isEditMode.value = false;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑轮播图
|
||||
const handleEdit = (record: Banner) => {
|
||||
currentBanner.value = { ...record };
|
||||
isEditMode.value = true;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除轮播图
|
||||
const handleDelete = (record: Banner) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除轮播图"${record.title}"吗？此操作不可恢复。`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await deleteBanner(record.id);
|
||||
message.success('删除成功');
|
||||
loadBanners();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 状态变更
|
||||
const handleStatusChange = async (record: Banner, status: 'enabled' | 'disabled') => {
|
||||
try {
|
||||
await updateBannerStatus(record.id, status);
|
||||
message.success(`${status === 'enabled' ? '启用' : '禁用'}成功`);
|
||||
loadBanners();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '状态更新失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 排序变更
|
||||
const handleSortChange = async (record: Banner, sort: number) => {
|
||||
try {
|
||||
await updateBannerSort(record.id, sort);
|
||||
message.success('排序更新成功');
|
||||
loadBanners();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '排序更新失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 表单成功回调
|
||||
const handleFormSuccess = () => {
|
||||
formVisible.value = false;
|
||||
loadBanners();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
loadBanners();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadBanners();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
416
src/views/banners/components/BannerForm.vue
Normal file
416
src/views/banners/components/BannerForm.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
:title="isEdit ? '编辑轮播图' : '新增轮播图'"
|
||||
:width="900"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 24 }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="16">
|
||||
<a-form-item label="轮播图标题" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入轮播图标题"
|
||||
:maxlength="50"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number
|
||||
v-model:value="form.sort"
|
||||
:min="1"
|
||||
:max="999"
|
||||
placeholder="排序"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="4">
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-select
|
||||
v-model:value="form.status"
|
||||
placeholder="选择状态"
|
||||
>
|
||||
<a-select-option value="enabled">启用</a-select-option>
|
||||
<a-select-option value="disabled">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 轮播图图片上传 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="轮播图图片" name="image">
|
||||
<div class="image-upload-section">
|
||||
<a-upload
|
||||
v-model:file-list="imageFileList"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeImageUpload"
|
||||
:on-remove="handleImageRemove"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
class="banner-upload"
|
||||
>
|
||||
<div v-if="!form.image" class="upload-placeholder">
|
||||
<PlusOutlined />
|
||||
<div style="margin-top: 8px">上传轮播图</div>
|
||||
<div class="upload-tips">建议尺寸: 800x400</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<div v-if="form.image" class="image-preview">
|
||||
<a-image
|
||||
:src="form.image"
|
||||
:alt="form.title"
|
||||
:width="160"
|
||||
:height="90"
|
||||
:preview="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 链接类型选择 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="链接类型" name="linkType">
|
||||
<a-radio-group
|
||||
v-model:value="form.linkType"
|
||||
@change="handleLinkTypeChange"
|
||||
>
|
||||
<a-radio value="url">外部链接</a-radio>
|
||||
<a-radio value="article">文章内容</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 外部链接 -->
|
||||
<a-row v-if="form.linkType === 'url'" :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="跳转链接" name="linkUrl">
|
||||
<a-input
|
||||
v-model:value="form.linkUrl"
|
||||
placeholder="请输入完整的URL地址，如：https://www.example.com"
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<a-row v-if="form.linkType === 'article'" :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="文章内容" name="articleContent">
|
||||
<RichEditor
|
||||
v-model="form.articleContent"
|
||||
placeholder="请输入文章内容，支持富文本格式"
|
||||
:height="400"
|
||||
:maxlength="5000"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, nextTick } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { createBanner, updateBanner, uploadBannerImage } from '@/apis/banners';
|
||||
import type { Banner, CreateBannerParams } from '@/apis/banners';
|
||||
import RichEditor from '@/components/RichEditor.vue';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
formData: Partial<Banner>;
|
||||
isEdit: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const formRef = ref();
|
||||
const imageFileList = ref<any[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<CreateBannerParams>({
|
||||
title: '',
|
||||
image: '',
|
||||
linkType: 'url',
|
||||
linkUrl: '',
|
||||
articleContent: '',
|
||||
sort: 1,
|
||||
status: 'enabled'
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入轮播图标题', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '标题长度应为2-50个字符', trigger: 'blur' }
|
||||
],
|
||||
image: [
|
||||
{ required: true, message: '请上传轮播图图片', trigger: 'change' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, max: 999, message: '排序应为1-999之间的数字', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
],
|
||||
linkType: [
|
||||
{ required: true, message: '请选择链接类型', trigger: 'change' }
|
||||
],
|
||||
linkUrl: [
|
||||
{
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (form.linkType === 'url') {
|
||||
if (!value) {
|
||||
return Promise.reject(new Error('请输入跳转链接'));
|
||||
}
|
||||
if (!/^https?:\/\/.+/.test(value)) {
|
||||
return Promise.reject(new Error('请输入有效的URL地址'));
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
articleContent: [
|
||||
{
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (form.linkType === 'article') {
|
||||
if (!value || value.trim() === '') {
|
||||
return Promise.reject(new Error('请输入文章内容'));
|
||||
}
|
||||
if (value.length < 20) {
|
||||
return Promise.reject(new Error('文章内容至少需要20个字符'));
|
||||
}
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 提交请求
|
||||
const { loading, send: submitForm } = useRequest(
|
||||
() => {
|
||||
const api = props.isEdit && props.formData.id
|
||||
? updateBanner(props.formData.id, form)
|
||||
: createBanner(form);
|
||||
return api;
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
// 监听表单数据变化
|
||||
watch(() => props.formData, (newData) => {
|
||||
if (newData && Object.keys(newData).length > 0) {
|
||||
Object.assign(form, {
|
||||
title: newData.title || '',
|
||||
image: newData.image || '',
|
||||
linkType: newData.linkType || 'url',
|
||||
linkUrl: newData.linkUrl || '',
|
||||
articleContent: newData.articleContent || '',
|
||||
sort: newData.sort || 1,
|
||||
status: newData.status || 'enabled'
|
||||
});
|
||||
|
||||
// 设置图片列表
|
||||
if (newData.image) {
|
||||
imageFileList.value = [{
|
||||
uid: '-1',
|
||||
name: 'banner.jpg',
|
||||
status: 'done',
|
||||
url: newData.image
|
||||
}];
|
||||
} else {
|
||||
imageFileList.value = [];
|
||||
}
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
// 监听可见性变化
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (!visible) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
// 链接类型变化处理
|
||||
const handleLinkTypeChange = () => {
|
||||
// 清空对应字段的验证状态
|
||||
nextTick(() => {
|
||||
if (form.linkType === 'url') {
|
||||
formRef.value?.clearValidate(['linkUrl']);
|
||||
form.articleContent = '';
|
||||
} else {
|
||||
formRef.value?.clearValidate(['articleContent']);
|
||||
form.linkUrl = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 图片上传前检查
|
||||
const beforeImageUpload = async (file: File) => {
|
||||
const isImage = file.type.startsWith('image/');
|
||||
if (!isImage) {
|
||||
message.error('只能上传图片文件！');
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
message.error('图片大小不能超过5MB！');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// 模拟上传到服务器
|
||||
const response = await uploadBannerImage(file);
|
||||
form.image = response.url;
|
||||
message.success('图片上传成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '图片上传失败');
|
||||
return false;
|
||||
}
|
||||
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
// 移除图片
|
||||
const handleImageRemove = () => {
|
||||
form.image = '';
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
title: '',
|
||||
image: '',
|
||||
linkType: 'url',
|
||||
linkUrl: '',
|
||||
articleContent: '',
|
||||
sort: 1,
|
||||
status: 'enabled'
|
||||
});
|
||||
imageFileList.value = [];
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value.validateFields();
|
||||
|
||||
await submitForm();
|
||||
|
||||
message.success(props.isEdit ? '编辑成功' : '创建成功');
|
||||
emit('success');
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
message.error(error.message || (props.isEdit ? '编辑失败' : '创建失败'));
|
||||
}
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.image-upload-section {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
.banner-upload {
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.upload-tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
:deep(.ant-image) {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 增强富文本编辑器样式 */
|
||||
:deep(.ant-input) {
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 768px) {
|
||||
.image-upload-section {
|
||||
flex-direction: column;
|
||||
|
||||
.banner-upload {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
444
src/views/banners/components/BannerList.vue
Normal file
444
src/views/banners/components/BannerList.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<a-card class="banner-list-card">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="paginationConfig"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 轮播图预览 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<div class="banner-preview">
|
||||
<a-image
|
||||
:src="record.image"
|
||||
:alt="record.title"
|
||||
:width="80"
|
||||
:height="45"
|
||||
:preview="{ mask: true }"
|
||||
placeholder
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3Ik1RnG4W+2C1r/IAtoyYRdOQN4A0hOJPYQsB9H5HFI4XBnYnkJwKuwJNd7AiF3PF+F5uKfhG9n/6gEtqo6c6Z7ut+3n19z4e2uU+8+r2u7n1lCIwAAAAAAAAAAABaEXy5eUjI2NjbAR4CcRQo4CTCKyiLZSAAngDbhiEjgGwEi0C7uVKOiWKPQOJPIzOk/rO0T8B8E3r2EZNJGEFpXIp3+CXYrImuqXXAA4HVOgghcxd3l/cgTnRJgpnvWQ9n8+BX8j4DbBNzNWvKqCwD+z/vF+0HEhb6RjeFf+5y7u6eBvfA58KAAu9Ff74Wl0r1T69/A/9YT4wHxPuDbKuFP9N9vAPgb/vcdCCNuWMsAAAAASUVORK5CYII="
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'title'">
|
||||
<div class="banner-info">
|
||||
<h4>{{ record.title }}</h4>
|
||||
<div class="banner-meta">
|
||||
<a-tag :color="getLinkTypeColor(record.linkType)">
|
||||
{{ getLinkTypeText(record.linkType) }}
|
||||
</a-tag>
|
||||
<span v-if="record.linkType === 'url'" class="link-url">
|
||||
{{ record.linkUrl }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'sort'">
|
||||
<a-input-number
|
||||
:value="record.sort"
|
||||
:min="1"
|
||||
:max="999"
|
||||
size="small"
|
||||
@change="(value: number) => handleSortChange(record, value)"
|
||||
@blur="handleSortBlur"
|
||||
style="width: 80px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
:checked="record.status === 'enabled'"
|
||||
:loading="statusChanging === record.id"
|
||||
@change="(checked: boolean) => handleStatusChange(record, checked)"
|
||||
>
|
||||
<template #checkedChildren>启用</template>
|
||||
<template #unCheckedChildren>禁用</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'createTime'">
|
||||
<div class="time-info">
|
||||
{{ formatTime(record.createTime) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="action-buttons">
|
||||
<a-button type="link" size="small" @click="handlePreview(record)">
|
||||
<EyeOutlined />
|
||||
预览
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="$emit('edit', record)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button type="link" size="small" danger @click="$emit('delete', record)">
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 预览弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="previewVisible"
|
||||
:title="`预览: ${previewBanner?.title}`"
|
||||
:width="900"
|
||||
:footer="null"
|
||||
>
|
||||
<div v-if="previewBanner" class="banner-preview-modal">
|
||||
<div class="preview-image">
|
||||
<a-image
|
||||
:src="previewBanner.image"
|
||||
:alt="previewBanner.title"
|
||||
width="100%"
|
||||
style="max-height: 400px; object-fit: cover; border-radius: 8px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="preview-info">
|
||||
<h3>{{ previewBanner.title }}</h3>
|
||||
|
||||
<div class="info-row">
|
||||
<strong>链接类型:</strong>
|
||||
<a-tag :color="getLinkTypeColor(previewBanner.linkType)">
|
||||
{{ getLinkTypeText(previewBanner.linkType) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
|
||||
<div v-if="previewBanner.linkType === 'url'" class="info-row">
|
||||
<strong>跳转链接:</strong>
|
||||
<a :href="previewBanner.linkUrl" target="_blank" rel="noopener noreferrer">
|
||||
{{ previewBanner.linkUrl }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="previewBanner.linkType === 'article'" class="info-row">
|
||||
<strong>文章内容:</strong>
|
||||
<div class="article-content" v-html="previewBanner.articleContent"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<strong>排序:</strong>
|
||||
<span>{{ previewBanner.sort }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<strong>状态:</strong>
|
||||
<a-tag :color="previewBanner.status === 'enabled' ? 'green' : 'red'">
|
||||
{{ previewBanner.status === 'enabled' ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import type { Banner } from '@/apis/banners';
|
||||
import type { TableColumnsType } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
loading?: boolean;
|
||||
dataSource: Banner[];
|
||||
pagination: {
|
||||
current: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
showSizeChanger?: boolean;
|
||||
showQuickJumper?: boolean;
|
||||
showTotal?: (total: number) => string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'edit', record: Banner): void;
|
||||
(e: 'delete', record: Banner): void;
|
||||
(e: 'status-change', record: Banner, status: 'enabled' | 'disabled'): void;
|
||||
(e: 'sort-change', record: Banner, sort: number): void;
|
||||
(e: 'page-change', page: number, pageSize: number): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 状态变更loading
|
||||
const statusChanging = ref<string>();
|
||||
|
||||
// 预览相关
|
||||
const previewVisible = ref(false);
|
||||
const previewBanner = ref<Banner>();
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: '轮播图',
|
||||
key: 'image',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '标题和链接',
|
||||
key: 'title',
|
||||
width: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
key: 'sort',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 分页配置
|
||||
const paginationConfig = computed(() => ({
|
||||
...props.pagination,
|
||||
onChange: (page: number, pageSize: number) => emit('page-change', page, pageSize),
|
||||
onShowSizeChange: (current: number, size: number) => emit('page-change', current, size)
|
||||
}));
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pagination: any) => {
|
||||
emit('page-change', pagination.current, pagination.pageSize);
|
||||
};
|
||||
|
||||
// 状态变更处理
|
||||
const handleStatusChange = async (record: Banner, checked: boolean) => {
|
||||
statusChanging.value = record.id;
|
||||
try {
|
||||
const status = checked ? 'enabled' : 'disabled';
|
||||
emit('status-change', record, status);
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
statusChanging.value = undefined;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
// 排序变更处理
|
||||
const handleSortChange = (record: Banner, value: number | null) => {
|
||||
if (value && value !== record.sort) {
|
||||
emit('sort-change', record, value);
|
||||
}
|
||||
};
|
||||
|
||||
// 排序失焦处理
|
||||
const handleSortBlur = () => {
|
||||
// 可以添加一些失焦后的处理逻辑
|
||||
};
|
||||
|
||||
// 预览处理
|
||||
const handlePreview = (record: Banner) => {
|
||||
previewBanner.value = record;
|
||||
previewVisible.value = true;
|
||||
};
|
||||
|
||||
// 链接类型颜色映射
|
||||
const getLinkTypeColor = (linkType: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
url: 'blue',
|
||||
article: 'green'
|
||||
};
|
||||
return colorMap[linkType] || 'default';
|
||||
};
|
||||
|
||||
// 链接类型文本映射
|
||||
const getLinkTypeText = (linkType: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
url: '外部链接',
|
||||
article: '文章内容'
|
||||
};
|
||||
return textMap[linkType] || linkType;
|
||||
};
|
||||
|
||||
// 时间格式化
|
||||
const formatTime = (time: string) => {
|
||||
return new Date(time).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner-list-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-preview {
|
||||
:deep(.ant-image) {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-info {
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.banner-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.link-url {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-info {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
|
||||
.ant-btn-link {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
|
||||
&.ant-btn-dangerous {
|
||||
color: #ff4d4f;
|
||||
|
||||
&:hover {
|
||||
color: #ff7875;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览弹窗样式
|
||||
.banner-preview-modal {
|
||||
.preview-image {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.preview-info {
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
strong {
|
||||
min-width: 80px;
|
||||
margin-right: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner-list-card {
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
438
src/views/classes/ClassPage.vue
Normal file
438
src/views/classes/ClassPage.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<div class="class-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">班级管理</h1>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-select
|
||||
v-model:value="selectedSchoolId"
|
||||
placeholder="选择学校"
|
||||
style="width: 180px"
|
||||
show-search
|
||||
allow-clear
|
||||
@change="handleSchoolChange"
|
||||
>
|
||||
<a-select-option v-for="school in schools" :key="school.id" :value="school.id">
|
||||
{{ school.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="selectedGradeId"
|
||||
placeholder="选择年级"
|
||||
style="width: 150px; margin-left: 8px"
|
||||
allow-clear
|
||||
:disabled="!selectedSchoolId"
|
||||
@change="handleGradeChange"
|
||||
>
|
||||
<a-select-option v-for="grade in grades" :key="grade.id" :value="grade.id">
|
||||
{{ grade.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索班级名称"
|
||||
style="width: 300px; margin-left: 8px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="action-section">
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
:disabled="!selectedSchoolId || !selectedGradeId"
|
||||
>
|
||||
<PlusOutlined />
|
||||
添加班级
|
||||
</a-button>
|
||||
<a-button @click="showBatchImport" :disabled="!selectedSchoolId || !selectedGradeId">
|
||||
<ImportOutlined />
|
||||
批量导入
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="class-list">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="classes"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'active' ? 'green' : 'red'">
|
||||
{{ record.status === 'active' ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button size="small" @click="handleViewStudents(record)">
|
||||
<TeamOutlined />
|
||||
学生
|
||||
</a-button>
|
||||
<a-button size="small" @click="handleEdit(record)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
:type="record.status === 'active' ? 'default' : 'primary'"
|
||||
@click="handleToggleStatus(record)"
|
||||
>
|
||||
{{ record.status === 'active' ? '禁用' : '启用' }}
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定删除此班级吗？"
|
||||
@confirm="handleDelete(record)"
|
||||
>
|
||||
<a-button size="small" danger>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 班级表单弹窗 -->
|
||||
<ClassFormModal
|
||||
v-model:open="formVisible"
|
||||
:class-data="currentClass"
|
||||
:school-id="selectedSchoolId"
|
||||
:grade-id="selectedGradeId"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
|
||||
<!-- 学生列表弹窗 -->
|
||||
<ClassStudentsModal
|
||||
v-model:open="studentsVisible"
|
||||
:class-data="currentClass"
|
||||
/>
|
||||
|
||||
<!-- 批量导入弹窗 -->
|
||||
<ClassBatchImport
|
||||
v-model:open="importVisible"
|
||||
:school-id="selectedSchoolId"
|
||||
:grade-id="selectedGradeId"
|
||||
@success="handleImportSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
TeamOutlined,
|
||||
ImportOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getClasses, deleteClass, toggleClassStatus } from '@/apis/classes';
|
||||
import { getSchoolList } from '@/apis/schools';
|
||||
import { getGrades } from '@/apis/grades';
|
||||
import ClassFormModal from './components/ClassFormModal.vue';
|
||||
import ClassStudentsModal from './components/ClassStudentsModal.vue';
|
||||
import ClassBatchImport from './components/ClassBatchImport.vue';
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const selectedSchoolId = ref<string>('');
|
||||
const selectedGradeId = ref<string>('');
|
||||
const searchKeyword = ref('');
|
||||
const classes = ref([]);
|
||||
const schools = ref([]);
|
||||
const grades = ref([]);
|
||||
const formVisible = ref(false);
|
||||
const studentsVisible = ref(false);
|
||||
const importVisible = ref(false);
|
||||
const currentClass = ref(null);
|
||||
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '班级名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '班级代码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '学校名称',
|
||||
dataIndex: 'schoolName',
|
||||
key: 'schoolName',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '年级名称',
|
||||
dataIndex: 'gradeName',
|
||||
key: 'gradeName',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '班主任',
|
||||
dataIndex: 'teacherName',
|
||||
key: 'teacherName',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '学生数量',
|
||||
dataIndex: 'studentCount',
|
||||
key: 'studentCount',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 250,
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 方法
|
||||
const loadSchools = async () => {
|
||||
try {
|
||||
const result = await getSchoolList({ page: 1, pageSize: 100 });
|
||||
schools.value = result.list || [];
|
||||
} catch (error) {
|
||||
console.error('加载学校列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadGrades = async () => {
|
||||
if (!selectedSchoolId.value) {
|
||||
grades.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await getGrades({
|
||||
schoolId: selectedSchoolId.value,
|
||||
page: 1,
|
||||
pageSize: 100
|
||||
});
|
||||
grades.value = result.list || [];
|
||||
} catch (error) {
|
||||
console.error('加载年级列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadClasses = async () => {
|
||||
if (!selectedSchoolId.value || !selectedGradeId.value) {
|
||||
classes.value = [];
|
||||
pagination.value.total = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
schoolId: selectedSchoolId.value,
|
||||
gradeId: selectedGradeId.value,
|
||||
page: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
keyword: searchKeyword.value
|
||||
};
|
||||
|
||||
const result = await getClasses(params);
|
||||
classes.value = result.list || [];
|
||||
pagination.value.total = result.total || 0;
|
||||
} catch (error) {
|
||||
console.error('加载班级列表失败:', error);
|
||||
message.error('加载班级列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSchoolChange = () => {
|
||||
selectedGradeId.value = '';
|
||||
grades.value = [];
|
||||
classes.value = [];
|
||||
pagination.value.current = 1;
|
||||
pagination.value.total = 0;
|
||||
if (selectedSchoolId.value) {
|
||||
loadGrades();
|
||||
}
|
||||
};
|
||||
|
||||
const handleGradeChange = () => {
|
||||
pagination.value.current = 1;
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1;
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
currentClass.value = null;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEdit = (classData: any) => {
|
||||
currentClass.value = classData;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleViewStudents = (classData: any) => {
|
||||
currentClass.value = classData;
|
||||
studentsVisible.value = true;
|
||||
};
|
||||
|
||||
const handleDelete = async (classData: any) => {
|
||||
try {
|
||||
await deleteClass(classData.id);
|
||||
message.success('删除成功');
|
||||
loadClasses();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleStatus = async (classData: any) => {
|
||||
try {
|
||||
await toggleClassStatus(classData.id);
|
||||
message.success(`${classData.status === 'active' ? '禁用' : '启用'}成功`);
|
||||
loadClasses();
|
||||
} catch (error) {
|
||||
console.error('状态切换失败:', error);
|
||||
message.error('状态切换失败');
|
||||
}
|
||||
};
|
||||
|
||||
const showBatchImport = () => {
|
||||
importVisible.value = true;
|
||||
};
|
||||
|
||||
const handleTableChange = (pag: any) => {
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
const handleFormSuccess = () => {
|
||||
formVisible.value = false;
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
const handleImportSuccess = () => {
|
||||
importVisible.value = false;
|
||||
loadClasses();
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => selectedGradeId.value, () => {
|
||||
if (selectedGradeId.value) {
|
||||
pagination.value.current = 1;
|
||||
loadClasses();
|
||||
} else {
|
||||
classes.value = [];
|
||||
pagination.value.total = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadSchools();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.class-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.class-list {
|
||||
.ant-table {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
367
src/views/classes/components/ClassBatchImport.vue
Normal file
367
src/views/classes/components/ClassBatchImport.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
title="批量导入班级"
|
||||
@ok="handleImport"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="600px"
|
||||
>
|
||||
<div class="batch-import">
|
||||
<a-steps :current="currentStep" size="small">
|
||||
<a-step title="下载模板" description="下载Excel导入模板" />
|
||||
<a-step title="上传文件" description="上传填写好的Excel文件" />
|
||||
<a-step title="确认导入" description="检查数据并确认导入" />
|
||||
</a-steps>
|
||||
|
||||
<div class="step-content">
|
||||
<!-- 步骤1: 下载模板 -->
|
||||
<div v-if="currentStep === 0" class="step-download">
|
||||
<a-alert
|
||||
message="请先下载导入模板"
|
||||
description="下载Excel模板文件，按照模板格式填写班级信息"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px"
|
||||
/>
|
||||
|
||||
<div class="template-info">
|
||||
<h4>模板说明：</h4>
|
||||
<ul>
|
||||
<li>班级名称：必填，如"一年级1班"</li>
|
||||
<li>班级代码：必填，如"CLASS_1_1"</li>
|
||||
<li>班主任姓名：选填</li>
|
||||
<li>班主任电话：选填，格式为11位手机号</li>
|
||||
<li>教室地址：选填</li>
|
||||
<li>最大学生数：选填，默认40人</li>
|
||||
<li>入学年份：选填，格式为YYYY</li>
|
||||
<li>班级描述：选填</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="template-actions">
|
||||
<a-button type="primary" @click="downloadTemplate">
|
||||
<DownloadOutlined />
|
||||
下载导入模板
|
||||
</a-button>
|
||||
<a-button @click="nextStep" style="margin-left: 8px">
|
||||
下一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2: 上传文件 -->
|
||||
<div v-if="currentStep === 1" class="step-upload">
|
||||
<a-alert
|
||||
message="上传Excel文件"
|
||||
description="请选择填写好的Excel文件进行上传"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px"
|
||||
/>
|
||||
|
||||
<a-upload-dragger
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:multiple="false"
|
||||
accept=".xlsx,.xls"
|
||||
:before-upload="handleBeforeUpload"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p class="ant-upload-hint">
|
||||
支持.xlsx、.xls格式，文件大小不超过10MB
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
|
||||
<div class="upload-actions">
|
||||
<a-button @click="prevStep">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="nextStep"
|
||||
:disabled="!uploadFile"
|
||||
style="margin-left: 8px"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3: 确认导入 -->
|
||||
<div v-if="currentStep === 2" class="step-confirm">
|
||||
<a-alert
|
||||
message="确认导入信息"
|
||||
description="请确认要导入的班级信息"
|
||||
type="warning"
|
||||
show-icon
|
||||
style="margin-bottom: 16px"
|
||||
/>
|
||||
|
||||
<div class="import-info">
|
||||
<div class="info-item">
|
||||
<span class="label">学校：</span>
|
||||
<span class="value">{{ schoolName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">年级：</span>
|
||||
<span class="value">{{ gradeName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">文件名：</span>
|
||||
<span class="value">{{ uploadFile?.name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">文件大小：</span>
|
||||
<span class="value">{{ formatFileSize(uploadFile?.size || 0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="confirm-actions">
|
||||
<a-button @click="prevStep">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleImport"
|
||||
:loading="loading"
|
||||
style="margin-left: 8px"
|
||||
>
|
||||
确认导入
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
InboxOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { importClasses } from '@/apis/classes';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:open', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const currentStep = ref(0);
|
||||
const fileList = ref([]);
|
||||
const uploadFile = ref<File | null>(null);
|
||||
|
||||
// 计算属性
|
||||
const schoolName = computed(() => '朱熹小学'); // 这里应该根据schoolId获取学校名称
|
||||
const gradeName = computed(() => '一年级'); // 这里应该根据gradeId获取年级名称
|
||||
|
||||
// 方法
|
||||
const downloadTemplate = () => {
|
||||
// 创建模板数据
|
||||
const templateData = [
|
||||
['班级名称', '班级代码', '班主任姓名', '班主任电话', '教室地址', '最大学生数', '入学年份', '班级描述'],
|
||||
['一年级1班', 'CLASS_1_1', '张老师', '13800138001', '教学楼A101', '40', '2024', '示例班级描述'],
|
||||
['一年级2班', 'CLASS_1_2', '李老师', '13800138002', '教学楼A102', '40', '2024', '示例班级描述']
|
||||
];
|
||||
|
||||
// 创建CSV内容
|
||||
const csvContent = templateData.map(row => row.join(',')).join('\n');
|
||||
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
|
||||
// 下载文件
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', '班级导入模板.csv');
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
message.success('模板下载成功');
|
||||
};
|
||||
|
||||
const handleBeforeUpload = (file: File) => {
|
||||
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
|
||||
file.type === 'application/vnd.ms-excel' ||
|
||||
file.name.endsWith('.xlsx') ||
|
||||
file.name.endsWith('.xls');
|
||||
|
||||
if (!isExcel) {
|
||||
message.error('只能上传Excel文件(.xlsx或.xls)');
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过10MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
uploadFile.value = file;
|
||||
return false; // 阻止自动上传
|
||||
};
|
||||
|
||||
const handleFileChange = (info: any) => {
|
||||
const { fileList: newFileList } = info;
|
||||
fileList.value = newFileList.slice(-1); // 只保留最新的一个文件
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!uploadFile.value) {
|
||||
message.error('请先上传文件');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!props.schoolId || !props.gradeId) {
|
||||
message.error('请先选择学校和年级');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const result: any = await importClasses({
|
||||
schoolId: props.schoolId,
|
||||
gradeId: props.gradeId,
|
||||
file: uploadFile.value
|
||||
});
|
||||
|
||||
if (result.success === result.total) {
|
||||
message.success(`导入成功，共导入 ${result.success} 个班级`);
|
||||
} else {
|
||||
message.warning(`导入完成，成功 ${result.success} 个，失败 ${result.failed} 个`);
|
||||
}
|
||||
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('批量导入失败:', error);
|
||||
message.error('批量导入失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep.value < 2) {
|
||||
currentStep.value++;
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep.value > 0) {
|
||||
currentStep.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:open', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
currentStep.value = 0;
|
||||
fileList.value = [];
|
||||
uploadFile.value = null;
|
||||
};
|
||||
|
||||
const formatFileSize = (size: number) => {
|
||||
if (size < 1024) {
|
||||
return size + ' B';
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + ' KB';
|
||||
} else {
|
||||
return (size / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.batch-import {
|
||||
.step-content {
|
||||
margin-top: 24px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.step-download {
|
||||
.template-info {
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
background: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.step-upload {
|
||||
.upload-actions {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.step-confirm {
|
||||
.import-info {
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
background: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
src/views/classes/components/ClassFormModal.vue
Normal file
266
src/views/classes/components/ClassFormModal.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="isEdit ? '编辑班级' : '添加班级'"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="700px"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="class-form"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="班级名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入班级名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="班级代码" name="code">
|
||||
<a-input v-model:value="formData.code" placeholder="请输入班级代码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="班主任姓名" name="teacherName">
|
||||
<a-input v-model:value="formData.teacherName" placeholder="请输入班主任姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="班主任电话" name="teacherPhone">
|
||||
<a-input v-model:value="formData.teacherPhone" placeholder="请输入班主任电话" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="教室地址" name="classroom">
|
||||
<a-input v-model:value="formData.classroom" placeholder="请输入教室地址" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number
|
||||
v-model:value="formData.sort"
|
||||
:min="0"
|
||||
placeholder="数字越小排序越前"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="最大学生数" name="maxStudents">
|
||||
<a-input-number
|
||||
v-model:value="formData.maxStudents"
|
||||
:min="1"
|
||||
:max="100"
|
||||
placeholder="班级最大学生数"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="入学年份" name="enrollmentYear">
|
||||
<a-date-picker
|
||||
v-model:value="formData.enrollmentYear"
|
||||
picker="year"
|
||||
placeholder="请选择入学年份"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="班级描述" name="description">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
placeholder="请输入班级描述"
|
||||
:rows="3"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio value="active">正常</a-radio>
|
||||
<a-radio value="inactive">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
import { createClass, updateClass } from '@/apis/classes';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
classData?: any;
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:open', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '',
|
||||
code: '',
|
||||
teacherName: '',
|
||||
teacherPhone: '',
|
||||
classroom: '',
|
||||
sort: 0,
|
||||
maxStudents: 50,
|
||||
enrollmentYear: null,
|
||||
description: '',
|
||||
status: 'active'
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const isEdit = computed(() => !!props.classData);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入班级名称', trigger: 'blur' },
|
||||
{ min: 2, max: 30, message: '班级名称长度在2-30个字符', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入班级代码', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_-]+$/, message: '班级代码只能包含字母、数字、下划线和中划线', trigger: 'blur' }
|
||||
],
|
||||
teacherName: [
|
||||
{ max: 20, message: '班主任姓名长度不能超过20个字符', trigger: 'blur' }
|
||||
],
|
||||
teacherPhone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
classroom: [
|
||||
{ max: 50, message: '教室地址长度不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序值', trigger: 'blur' }
|
||||
],
|
||||
maxStudents: [
|
||||
{ required: true, message: '请输入最大学生数', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
name: '',
|
||||
code: '',
|
||||
teacherName: '',
|
||||
teacherPhone: '',
|
||||
classroom: '',
|
||||
sort: 0,
|
||||
maxStudents: 50,
|
||||
enrollmentYear: null,
|
||||
description: '',
|
||||
status: 'active'
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
|
||||
if (!props.schoolId || !props.gradeId) {
|
||||
message.error('请先选择学校和年级');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
const submitData = {
|
||||
...formData.value,
|
||||
schoolId: props.schoolId,
|
||||
gradeId: props.gradeId,
|
||||
enrollmentYear: formData.value.enrollmentYear ? formData.value.enrollmentYear.year() : null
|
||||
};
|
||||
|
||||
if (isEdit.value) {
|
||||
await updateClass(props.classData.id, submitData);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await createClass(submitData);
|
||||
message.success('创建成功');
|
||||
}
|
||||
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
if (error?.errorFields) {
|
||||
console.log('表单验证失败:', error);
|
||||
} else {
|
||||
console.error('提交失败:', error);
|
||||
message.error(isEdit.value ? '更新失败' : '创建失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:open', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => props.open, (visible) => {
|
||||
if (visible) {
|
||||
if (isEdit.value && props.classData) {
|
||||
// 编辑模式，填充数据
|
||||
formData.value = {
|
||||
name: props.classData.name,
|
||||
code: props.classData.code,
|
||||
teacherName: props.classData.teacherName || '',
|
||||
teacherPhone: props.classData.teacherPhone || '',
|
||||
classroom: props.classData.classroom || '',
|
||||
sort: props.classData.sort || 0,
|
||||
maxStudents: props.classData.maxStudents || 50,
|
||||
enrollmentYear: props.classData.enrollmentYear ? dayjs().year(props.classData.enrollmentYear) : null,
|
||||
description: props.classData.description || '',
|
||||
status: props.classData.status || 'active'
|
||||
};
|
||||
} else {
|
||||
// 新增模式，重置表单
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.class-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
src/views/classes/components/ClassStudentsModal.vue
Normal file
287
src/views/classes/components/ClassStudentsModal.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="`${classData?.name} - 学生列表`"
|
||||
@cancel="handleCancel"
|
||||
width="900px"
|
||||
:footer="null"
|
||||
>
|
||||
<div class="students-modal">
|
||||
<div class="toolbar">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索学生姓名或学号"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<div class="actions">
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleAddStudent">
|
||||
<PlusOutlined />
|
||||
添加学生
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="students"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
size="small"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'gender'">
|
||||
<a-tag :color="record.gender === 'male' ? 'blue' : 'pink'">
|
||||
{{ record.gender === 'male' ? '男' : '女' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'active' ? 'green' : 'red'">
|
||||
{{ record.status === 'active' ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button size="small" @click="handleEditStudent(record)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
:type="record.status === 'active' ? 'default' : 'primary'"
|
||||
@click="handleToggleStudentStatus(record)"
|
||||
>
|
||||
{{ record.status === 'active' ? '禁用' : '启用' }}
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定将此学生移出班级吗？"
|
||||
@confirm="handleRemoveStudent(record)"
|
||||
>
|
||||
<a-button size="small" danger>
|
||||
<MinusOutlined />
|
||||
移出
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑学生弹窗 -->
|
||||
<StudentFormModal
|
||||
v-model:open="studentFormVisible"
|
||||
:student="currentStudent"
|
||||
:class-id="classData?.id"
|
||||
@success="handleStudentFormSuccess"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
MinusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getClassStudents } from '@/apis/classes';
|
||||
import StudentFormModal from './StudentFormModal.vue';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
classData?: any;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:open', value: boolean): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const students = ref([]);
|
||||
const studentFormVisible = ref(false);
|
||||
const currentStudent = ref(null);
|
||||
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 名学生`
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '学号',
|
||||
dataIndex: 'studentNumber',
|
||||
key: 'studentNumber',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
key: 'gender',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '学生电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
title: '家长姓名',
|
||||
dataIndex: 'parentName',
|
||||
key: 'parentName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '家长电话',
|
||||
dataIndex: 'parentPhone',
|
||||
key: 'parentPhone',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 方法
|
||||
const loadStudents = async () => {
|
||||
if (!props.classData?.id) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
keyword: searchKeyword.value
|
||||
};
|
||||
|
||||
const result = await getClassStudents(props.classData.id, params);
|
||||
students.value = result.list || [];
|
||||
pagination.value.total = result.total || 0;
|
||||
} catch (error) {
|
||||
console.error('加载学生列表失败:', error);
|
||||
message.error('加载学生列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1;
|
||||
loadStudents();
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadStudents();
|
||||
};
|
||||
|
||||
const handleAddStudent = () => {
|
||||
currentStudent.value = null;
|
||||
studentFormVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEditStudent = (student: any) => {
|
||||
currentStudent.value = student;
|
||||
studentFormVisible.value = true;
|
||||
};
|
||||
|
||||
const handleToggleStudentStatus = async (student: any) => {
|
||||
try {
|
||||
// 这里应该调用切换学生状态的API
|
||||
message.success(`${student.status === 'active' ? '禁用' : '启用'}成功`);
|
||||
loadStudents();
|
||||
} catch (error) {
|
||||
console.error('状态切换失败:', error);
|
||||
message.error('状态切换失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveStudent = async (student: any) => {
|
||||
try {
|
||||
// 这里应该调用移出学生的API
|
||||
message.success('学生移出成功');
|
||||
loadStudents();
|
||||
} catch (error) {
|
||||
console.error('移出学生失败:', error);
|
||||
message.error('移出学生失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableChange = (pag: any) => {
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
loadStudents();
|
||||
};
|
||||
|
||||
const handleStudentFormSuccess = () => {
|
||||
studentFormVisible.value = false;
|
||||
loadStudents();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:open', false);
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => props.open, (visible) => {
|
||||
if (visible && props.classData?.id) {
|
||||
pagination.value.current = 1;
|
||||
searchKeyword.value = '';
|
||||
loadStudents();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.students-modal {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
213
src/views/classes/components/StudentFormModal.vue
Normal file
213
src/views/classes/components/StudentFormModal.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="isEdit ? '编辑学生' : '添加学生'"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="600px"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="student-form"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学生姓名" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入学生姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学号" name="studentNumber">
|
||||
<a-input v-model:value="formData.studentNumber" placeholder="请输入学号" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="性别" name="gender">
|
||||
<a-radio-group v-model:value="formData.gender">
|
||||
<a-radio value="male">男</a-radio>
|
||||
<a-radio value="female">女</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学生电话" name="phone">
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入学生电话" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="家长姓名" name="parentName">
|
||||
<a-input v-model:value="formData.parentName" placeholder="请输入家长姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="家长电话" name="parentPhone">
|
||||
<a-input v-model:value="formData.parentPhone" placeholder="请输入家长电话" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio value="active">正常</a-radio>
|
||||
<a-radio value="inactive">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
student?: any;
|
||||
classId: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:open', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '',
|
||||
studentNumber: '',
|
||||
gender: 'male',
|
||||
phone: '',
|
||||
parentName: '',
|
||||
parentPhone: '',
|
||||
status: 'active'
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const isEdit = computed(() => !!props.student);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入学生姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '学生姓名长度在2-20个字符', trigger: 'blur' }
|
||||
],
|
||||
studentNumber: [
|
||||
{ required: true, message: '请输入学号', trigger: 'blur' }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: 'change' }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
parentName: [
|
||||
{ required: true, message: '请输入家长姓名', trigger: 'blur' },
|
||||
{ max: 20, message: '家长姓名长度不能超过20个字符', trigger: 'blur' }
|
||||
],
|
||||
parentPhone: [
|
||||
{ required: true, message: '请输入家长电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
name: '',
|
||||
studentNumber: '',
|
||||
gender: 'male',
|
||||
phone: '',
|
||||
parentName: '',
|
||||
parentPhone: '',
|
||||
status: 'active'
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
loading.value = true;
|
||||
|
||||
const submitData = {
|
||||
...formData.value,
|
||||
classId: props.classId
|
||||
};
|
||||
|
||||
// 这里应该调用API接口创建或更新学生
|
||||
// if (isEdit.value) {
|
||||
// await updateStudent(props.student.id, submitData);
|
||||
// } else {
|
||||
// await createStudent(submitData);
|
||||
// }
|
||||
|
||||
// 临时使用submitData避免警告
|
||||
console.log('学生数据:', submitData);
|
||||
|
||||
message.success(isEdit.value ? '更新成功' : '添加成功');
|
||||
emit('success');
|
||||
} catch (error: any) {
|
||||
if (error?.errorFields) {
|
||||
console.log('表单验证失败:', error);
|
||||
} else {
|
||||
console.error('提交失败:', error);
|
||||
message.error(isEdit.value ? '更新失败' : '添加失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:open', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => props.open, (visible) => {
|
||||
if (visible) {
|
||||
if (isEdit.value && props.student) {
|
||||
// 编辑模式，填充数据
|
||||
formData.value = {
|
||||
name: props.student.name,
|
||||
studentNumber: props.student.studentNumber,
|
||||
gender: props.student.gender || 'male',
|
||||
phone: props.student.phone || '',
|
||||
parentName: props.student.parentName || '',
|
||||
parentPhone: props.student.parentPhone || '',
|
||||
status: props.student.status || 'active'
|
||||
};
|
||||
} else {
|
||||
// 新增模式，重置表单
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.student-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/views/dashboard/DashboardPage.vue
Normal file
106
src/views/dashboard/DashboardPage.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="dashboard-page">
|
||||
<a-page-header title="欢迎使用朱子文化管理后台" />
|
||||
|
||||
<div class="dashboard-content">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card>
|
||||
<a-statistic
|
||||
title="题目总数"
|
||||
:value="statistics.questionCount"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card>
|
||||
<a-statistic
|
||||
title="注册用户"
|
||||
:value="statistics.userCount"
|
||||
:value-style="{ color: '#cf1322' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card>
|
||||
<a-statistic
|
||||
title="答题记录"
|
||||
:value="statistics.recordCount"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card>
|
||||
<a-statistic
|
||||
title="学校数量"
|
||||
:value="statistics.schoolCount"
|
||||
:value-style="{ color: '#722ed1' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-card title="快速入口" style="margin-top: 24px;">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-col :xs="24" :sm="8">
|
||||
<a-button block size="large" @click="$router.push('/admin/questions')">
|
||||
<FileTextOutlined />
|
||||
题库管理
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="8">
|
||||
<a-button block size="large" @click="$router.push('/admin/banners')">
|
||||
<PictureOutlined />
|
||||
轮播图管理
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="8">
|
||||
<a-button block size="large" @click="$router.push('/admin/users')">
|
||||
<UserOutlined />
|
||||
用户管理
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { FileTextOutlined, PictureOutlined, UserOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
// 统计数据
|
||||
const statistics = ref({
|
||||
questionCount: 12,
|
||||
userCount: 156,
|
||||
recordCount: 2341,
|
||||
schoolCount: 8
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dashboard-page {
|
||||
.dashboard-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
344
src/views/grades/GradePage.vue
Normal file
344
src/views/grades/GradePage.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="grade-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">年级管理</h1>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-select
|
||||
v-model:value="selectedSchoolId"
|
||||
placeholder="选择学校"
|
||||
style="width: 200px"
|
||||
show-search
|
||||
allow-clear
|
||||
@change="handleSchoolChange"
|
||||
>
|
||||
<a-select-option v-for="school in schools" :key="school.id" :value="school.id">
|
||||
{{ school.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索年级名称"
|
||||
style="width: 300px; margin-left: 8px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="action-section">
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
:disabled="!selectedSchoolId"
|
||||
>
|
||||
<PlusOutlined />
|
||||
添加年级
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grade-list">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="grades"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'active' ? 'green' : 'red'">
|
||||
{{ record.status === 'active' ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button size="small" @click="handleEdit(record)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
:type="record.status === 'active' ? 'default' : 'primary'"
|
||||
@click="handleToggleStatus(record)"
|
||||
>
|
||||
{{ record.status === 'active' ? '禁用' : '启用' }}
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定删除此年级吗？"
|
||||
@confirm="handleDelete(record)"
|
||||
>
|
||||
<a-button size="small" danger>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年级表单弹窗 -->
|
||||
<GradeFormModal
|
||||
v-model:open="formVisible"
|
||||
:grade="currentGrade"
|
||||
:school-id="selectedSchoolId"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getGrades, deleteGrade, toggleGradeStatus } from '@/apis/grades';
|
||||
import { getSchoolList } from '@/apis/schools';
|
||||
import GradeFormModal from './components/GradeFormModal.vue';
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const selectedSchoolId = ref<string>('');
|
||||
const searchKeyword = ref('');
|
||||
const grades = ref([]);
|
||||
const schools = ref([]);
|
||||
const formVisible = ref(false);
|
||||
const currentGrade = ref(null);
|
||||
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '年级名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '年级代码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '学校名称',
|
||||
dataIndex: 'schoolName',
|
||||
key: 'schoolName',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '班级数量',
|
||||
dataIndex: 'classCount',
|
||||
key: 'classCount',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '学生数量',
|
||||
dataIndex: 'studentCount',
|
||||
key: 'studentCount',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 方法
|
||||
const loadSchools = async () => {
|
||||
try {
|
||||
const result = await getSchoolList({ page: 1, pageSize: 100 });
|
||||
schools.value = result.list || [];
|
||||
} catch (error) {
|
||||
console.error('加载学校列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadGrades = async () => {
|
||||
if (!selectedSchoolId.value) {
|
||||
grades.value = [];
|
||||
pagination.value.total = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
schoolId: selectedSchoolId.value,
|
||||
page: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
keyword: searchKeyword.value
|
||||
};
|
||||
|
||||
const result = await getGrades(params);
|
||||
grades.value = result.list || [];
|
||||
pagination.value.total = result.total || 0;
|
||||
} catch (error) {
|
||||
console.error('加载年级列表失败:', error);
|
||||
message.error('加载年级列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSchoolChange = () => {
|
||||
pagination.value.current = 1;
|
||||
loadGrades();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1;
|
||||
loadGrades();
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
loadGrades();
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
currentGrade.value = null;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEdit = (grade: any) => {
|
||||
currentGrade.value = grade;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleDelete = async (grade: any) => {
|
||||
try {
|
||||
await deleteGrade(grade.id);
|
||||
message.success('删除成功');
|
||||
loadGrades();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleStatus = async (grade: any) => {
|
||||
try {
|
||||
await toggleGradeStatus(grade.id);
|
||||
message.success(`${grade.status === 'active' ? '禁用' : '启用'}成功`);
|
||||
loadGrades();
|
||||
} catch (error) {
|
||||
console.error('状态切换失败:', error);
|
||||
message.error('状态切换失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleTableChange = (pag: any) => {
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
loadGrades();
|
||||
};
|
||||
|
||||
const handleFormSuccess = () => {
|
||||
formVisible.value = false;
|
||||
loadGrades();
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => selectedSchoolId.value, () => {
|
||||
if (selectedSchoolId.value) {
|
||||
pagination.value.current = 1;
|
||||
loadGrades();
|
||||
} else {
|
||||
grades.value = [];
|
||||
pagination.value.total = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadSchools();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grade-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.grade-list {
|
||||
.ant-table {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
206
src/views/grades/components/GradeFormModal.vue
Normal file
206
src/views/grades/components/GradeFormModal.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="isEdit ? '编辑年级' : '添加年级'"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="600px"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="grade-form"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="年级名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入年级名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="年级代码" name="code">
|
||||
<a-input v-model:value="formData.code" placeholder="请输入年级代码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学制年限" name="duration">
|
||||
<a-input-number
|
||||
v-model:value="formData.duration"
|
||||
:min="1"
|
||||
:max="6"
|
||||
placeholder="学制年限（年）"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number
|
||||
v-model:value="formData.sort"
|
||||
:min="0"
|
||||
placeholder="数字越小排序越前"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="年级描述" name="description">
|
||||
<RichEditor
|
||||
v-model="formData.description"
|
||||
placeholder="请输入年级描述，支持富文本格式"
|
||||
:height="200"
|
||||
:maxlength="1000"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio value="active">正常</a-radio>
|
||||
<a-radio value="inactive">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
import { createGrade, updateGrade } from '@/apis/grades';
|
||||
import RichEditor from '@/components/RichEditor.vue';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
grade?: any;
|
||||
schoolId: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:open', value: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
name: '',
|
||||
code: '',
|
||||
duration: 3,
|
||||
sort: 0,
|
||||
description: '',
|
||||
status: 'active'
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const isEdit = computed(() => !!props.grade);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入年级名称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '年级名称长度在2-20个字符', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入年级代码', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_-]+$/, message: '年级代码只能包含字母、数字、下划线和中划线', trigger: 'blur' }
|
||||
],
|
||||
duration: [
|
||||
{ required: true, message: '请输入学制年限', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序值', trigger: 'blur' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
name: '',
|
||||
code: '',
|
||||
duration: 3,
|
||||
sort: 0,
|
||||
description: '',
|
||||
status: 'active'
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
loading.value = true;
|
||||
|
||||
const submitData = {
|
||||
...formData.value,
|
||||
schoolId: props.schoolId
|
||||
};
|
||||
|
||||
if (isEdit.value) {
|
||||
await updateGrade(props.grade.id, submitData);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await createGrade(submitData);
|
||||
message.success('创建成功');
|
||||
}
|
||||
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
if (error?.errorFields) {
|
||||
console.log('表单验证失败:', error);
|
||||
} else {
|
||||
console.error('提交失败:', error);
|
||||
message.error(isEdit.value ? '更新失败' : '创建失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:open', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 监听
|
||||
watch(() => props.open, (visible) => {
|
||||
if (visible) {
|
||||
if (isEdit.value && props.grade) {
|
||||
// 编辑模式，填充数据
|
||||
formData.value = {
|
||||
name: props.grade.name,
|
||||
code: props.grade.code,
|
||||
duration: props.grade.duration || 3,
|
||||
sort: props.grade.sort || 0,
|
||||
description: props.grade.description || '',
|
||||
status: props.grade.status || 'active'
|
||||
};
|
||||
} else {
|
||||
// 新增模式，重置表单
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grade-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
359
src/views/profile/PasswordPage.vue
Normal file
359
src/views/profile/PasswordPage.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div class="password-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">修改密码</h1>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<a-row justify="center">
|
||||
<a-col :span="12">
|
||||
<a-card title="密码修改" class="password-card">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleChangePassword"
|
||||
>
|
||||
<a-form-item label="当前密码" name="oldPassword">
|
||||
<a-input-password
|
||||
v-model:value="formData.oldPassword"
|
||||
placeholder="请输入当前密码"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="新密码" name="newPassword">
|
||||
<a-input-password
|
||||
v-model:value="formData.newPassword"
|
||||
placeholder="请输入新密码"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<KeyOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
<div class="password-strength">
|
||||
<div class="strength-bar">
|
||||
<div
|
||||
class="strength-fill"
|
||||
:class="passwordStrengthClass"
|
||||
:style="{ width: passwordStrengthPercent + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<span class="strength-text">{{ passwordStrengthText }}</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认新密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="formData.confirmPassword"
|
||||
placeholder="请再次输入新密码"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<div class="password-tips">
|
||||
<h4>密码安全建议：</h4>
|
||||
<ul>
|
||||
<li :class="{ 'tip-valid': hasMinLength }">至少8个字符</li>
|
||||
<li :class="{ 'tip-valid': hasUpperCase }">包含大写字母</li>
|
||||
<li :class="{ 'tip-valid': hasLowerCase }">包含小写字母</li>
|
||||
<li :class="{ 'tip-valid': hasNumber }">包含数字</li>
|
||||
<li :class="{ 'tip-valid': hasSpecialChar }">包含特殊字符</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a-form-item class="submit-section">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:loading="loading"
|
||||
size="large"
|
||||
block
|
||||
>
|
||||
<SaveOutlined />
|
||||
修改密码
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
import {
|
||||
LockOutlined,
|
||||
KeyOutlined,
|
||||
SafetyOutlined,
|
||||
SaveOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { changePassword } from '@/apis/profile';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
// 密码强度检查
|
||||
const hasMinLength = computed(() => formData.value.newPassword.length >= 8);
|
||||
const hasUpperCase = computed(() => /[A-Z]/.test(formData.value.newPassword));
|
||||
const hasLowerCase = computed(() => /[a-z]/.test(formData.value.newPassword));
|
||||
const hasNumber = computed(() => /\d/.test(formData.value.newPassword));
|
||||
const hasSpecialChar = computed(() => /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\?]/.test(formData.value.newPassword));
|
||||
|
||||
// 密码强度计算
|
||||
const passwordStrength = computed(() => {
|
||||
let strength = 0;
|
||||
if (hasMinLength.value) strength++;
|
||||
if (hasUpperCase.value) strength++;
|
||||
if (hasLowerCase.value) strength++;
|
||||
if (hasNumber.value) strength++;
|
||||
if (hasSpecialChar.value) strength++;
|
||||
return strength;
|
||||
});
|
||||
|
||||
const passwordStrengthPercent = computed(() => (passwordStrength.value / 5) * 100);
|
||||
|
||||
const passwordStrengthClass = computed(() => {
|
||||
if (passwordStrength.value <= 2) return 'weak';
|
||||
if (passwordStrength.value <= 3) return 'medium';
|
||||
return 'strong';
|
||||
});
|
||||
|
||||
const passwordStrengthText = computed(() => {
|
||||
if (passwordStrength.value <= 2) return '弱';
|
||||
if (passwordStrength.value <= 3) return '中等';
|
||||
return '强';
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
oldPassword: [
|
||||
{ required: true, message: '请输入当前密码', trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 8, message: '密码至少8个字符', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
|
||||
const checks = [
|
||||
hasMinLength.value,
|
||||
hasUpperCase.value,
|
||||
hasLowerCase.value,
|
||||
hasNumber.value,
|
||||
hasSpecialChar.value
|
||||
];
|
||||
|
||||
const validCount = checks.filter(Boolean).length;
|
||||
if (validCount < 3) {
|
||||
return Promise.reject('密码强度太弱，请包含至少3种字符类型');
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule: any, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (value !== formData.value.newPassword) {
|
||||
return Promise.reject('两次输入的密码不一致');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const handleChangePassword = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
await changePassword({
|
||||
oldPassword: formData.value.oldPassword,
|
||||
newPassword: formData.value.newPassword
|
||||
});
|
||||
|
||||
message.success('密码修改成功，请重新登录');
|
||||
|
||||
// 清除登录状态，跳转到登录页
|
||||
setTimeout(() => {
|
||||
authStore.logout();
|
||||
router.push('/login');
|
||||
}, 1500);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('修改密码失败:', error);
|
||||
|
||||
if (error.response?.data?.message === 'Invalid old password') {
|
||||
message.error('当前密码错误');
|
||||
} else {
|
||||
message.error('密码修改失败，请稍后重试');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.password-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// 移除多余的 padding 和 margin
|
||||
}
|
||||
|
||||
.password-card {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
|
||||
.form-icon {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.strength-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
.strength-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.weak {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background-color: #faad14;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strength-text {
|
||||
font-size: 12px;
|
||||
min-width: 20px;
|
||||
|
||||
&.weak {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-tips {
|
||||
background: #f6f8fa;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
margin: 16px 0;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
&:before {
|
||||
content: '✗';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.tip-valid {
|
||||
color: #52c41a;
|
||||
|
||||
&:before {
|
||||
content: '✓';
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
362
src/views/profile/ProfilePage.vue
Normal file
362
src/views/profile/ProfilePage.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div class="profile-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">个人信息</h1>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="16">
|
||||
<a-card title="基本信息" class="info-card">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleUpdateProfile"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input v-model:value="formData.username" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="真实姓名" name="realName">
|
||||
<a-input v-model:value="formData.realName" placeholder="请输入真实姓名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入手机号码" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮箱地址" name="email">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱地址" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="性别" name="gender">
|
||||
<a-radio-group v-model:value="formData.gender">
|
||||
<a-radio value="male">男</a-radio>
|
||||
<a-radio value="female">女</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="生日" name="birthday">
|
||||
<a-date-picker
|
||||
v-model:value="formData.birthday"
|
||||
placeholder="请选择生日"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="个人简介" name="bio">
|
||||
<a-textarea
|
||||
v-model:value="formData.bio"
|
||||
placeholder="介绍一下自己..."
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" :loading="loading">
|
||||
<SaveOutlined />
|
||||
保存修改
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="8">
|
||||
<a-card title="头像设置" class="avatar-card">
|
||||
<div class="avatar-section">
|
||||
<a-avatar
|
||||
:size="120"
|
||||
:src="userInfo.avatar"
|
||||
class="user-avatar"
|
||||
>
|
||||
<UserOutlined />
|
||||
</a-avatar>
|
||||
<div class="avatar-actions">
|
||||
<a-upload
|
||||
name="avatar"
|
||||
:show-upload-list="false"
|
||||
:before-upload="handleAvatarUpload"
|
||||
accept=".jpg,.jpeg,.png,.gif"
|
||||
>
|
||||
<a-button type="primary" size="small">
|
||||
<UploadOutlined />
|
||||
更换头像
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<p class="upload-tip">支持 JPG、PNG、GIF 格式，文件大小不超过 2MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-card title="账户统计" class="stats-card">
|
||||
<div class="stats-list">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">注册时间</div>
|
||||
<div class="stat-value">{{ userInfo.createdAt }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">最后登录</div>
|
||||
<div class="stat-value">{{ userInfo.lastLoginAt }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">登录次数</div>
|
||||
<div class="stat-value">{{ userInfo.loginCount || 0 }} 次</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { message, type FormInstance } from 'ant-design-vue';
|
||||
import {
|
||||
SaveOutlined,
|
||||
UserOutlined,
|
||||
UploadOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getUserProfile, updateUserProfile, uploadAvatar } from '@/apis/profile';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
id: '',
|
||||
username: '',
|
||||
realName: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
gender: 'male',
|
||||
birthday: null,
|
||||
bio: '',
|
||||
avatar: '',
|
||||
createdAt: '',
|
||||
lastLoginAt: '',
|
||||
loginCount: 0
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
username: '',
|
||||
realName: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
gender: 'male',
|
||||
birthday: null,
|
||||
bio: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
realName: [
|
||||
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '真实姓名长度在2-20个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: 'change' }
|
||||
],
|
||||
bio: [
|
||||
{ max: 200, message: '个人简介不能超过200个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 方法
|
||||
const loadUserProfile = async () => {
|
||||
try {
|
||||
const result = await getUserProfile();
|
||||
userInfo.value = result;
|
||||
|
||||
// 填充表单数据
|
||||
formData.value = {
|
||||
username: result.username,
|
||||
realName: result.realName || '',
|
||||
phone: result.phone || '',
|
||||
email: result.email || '',
|
||||
gender: result.gender || 'male',
|
||||
birthday: result.birthday ? dayjs(result.birthday) : null,
|
||||
bio: result.bio || ''
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
message.error('获取用户信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateProfile = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
const updateData = {
|
||||
...formData.value,
|
||||
birthday: formData.value.birthday ? formData.value.birthday.format('YYYY-MM-DD') : null
|
||||
};
|
||||
|
||||
await updateUserProfile(updateData);
|
||||
message.success('个人信息更新成功');
|
||||
|
||||
// 重新加载用户信息
|
||||
await loadUserProfile();
|
||||
|
||||
// 更新store中的用户信息
|
||||
authStore.updateUserInfo(userInfo.value);
|
||||
} catch (error) {
|
||||
console.error('更新个人信息失败:', error);
|
||||
message.error('更新个人信息失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAvatarUpload = async (file: File) => {
|
||||
// 检查文件大小 (2MB)
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
message.error('文件大小不能超过 2MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件类型
|
||||
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
message.error('只支持 JPG、PNG、GIF 格式的图片');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('avatar', file);
|
||||
|
||||
const result = await uploadAvatar(formData);
|
||||
userInfo.value.avatar = result.url;
|
||||
message.success('头像上传成功');
|
||||
|
||||
// 更新store中的用户信息
|
||||
authStore.updateUserInfo(userInfo.value);
|
||||
} catch (error) {
|
||||
console.error('头像上传失败:', error);
|
||||
message.error('头像上传失败');
|
||||
}
|
||||
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadUserProfile();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.profile-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// 移除多余的 padding 和 margin
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.user-avatar {
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
.stats-list {
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
281
src/views/questions/QuestionPage.vue
Normal file
281
src/views/questions/QuestionPage.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div class="question-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">题库管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索题目标题、内容或分类"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="filterType"
|
||||
placeholder="题目类型"
|
||||
style="width: 120px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="single">单选题</a-select-option>
|
||||
<a-select-option value="multiple">多选题</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-model:value="filterDifficulty"
|
||||
placeholder="难度"
|
||||
style="width: 100px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="easy">简单</a-select-option>
|
||||
<a-select-option value="medium">中等</a-select-option>
|
||||
<a-select-option value="hard">困难</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<a-button type="primary" @click="showCreateModal">
|
||||
<PlusOutlined />
|
||||
新增题目
|
||||
</a-button>
|
||||
<ImportExport @imported="handleImported" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 批量操作栏 -->
|
||||
<BatchOperations
|
||||
v-if="selectedRows.length > 0"
|
||||
:selected-count="selectedRows.length"
|
||||
@batch-delete="handleBatchDelete"
|
||||
@clear-selection="clearSelection"
|
||||
/>
|
||||
|
||||
<!-- 题目列表 -->
|
||||
<QuestionList
|
||||
:loading="loading"
|
||||
:data-source="questions"
|
||||
:pagination="pagination"
|
||||
:selected-rows="selectedRows"
|
||||
@selection-change="handleSelectionChange"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑题目弹窗 -->
|
||||
<QuestionForm
|
||||
v-model:visible="formVisible"
|
||||
:form-data="currentQuestion"
|
||||
:is-edit="isEditMode"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { getQuestionList, deleteQuestion, batchDeleteQuestions } from '@/apis/questions';
|
||||
import type { Question, QuestionQueryParams } from '@/apis/questions';
|
||||
|
||||
// 导入子组件
|
||||
import QuestionList from './components/QuestionList.vue';
|
||||
import QuestionForm from './components/QuestionForm.vue';
|
||||
import BatchOperations from './components/BatchOperations.vue';
|
||||
import ImportExport from './components/ImportExport.vue';
|
||||
|
||||
// 搜索筛选参数
|
||||
const searchKeyword = ref('');
|
||||
const filterType = ref<string>();
|
||||
const filterDifficulty = ref<string>();
|
||||
|
||||
// 列表数据
|
||||
const questions = ref<Question[]>([]);
|
||||
const selectedRows = ref<Question[]>([]);
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 表单相关
|
||||
const formVisible = ref(false);
|
||||
const isEditMode = ref(false);
|
||||
const currentQuestion = ref<Partial<Question>>({});
|
||||
|
||||
// 获取题目列表
|
||||
const { loading, send: fetchQuestions } = useRequest((params: QuestionQueryParams) => getQuestionList(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
loadQuestions();
|
||||
};
|
||||
|
||||
// 加载题目列表
|
||||
const loadQuestions = async () => {
|
||||
try {
|
||||
const params: QuestionQueryParams = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value || undefined,
|
||||
type: filterType.value as any,
|
||||
difficulty: filterDifficulty.value as any
|
||||
};
|
||||
|
||||
const result = await fetchQuestions(params);
|
||||
questions.value = result.list;
|
||||
pagination.total = result.total;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取题目列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 选择处理
|
||||
const handleSelectionChange = (rows: Question[]) => {
|
||||
selectedRows.value = rows;
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
selectedRows.value = [];
|
||||
};
|
||||
|
||||
// 新增题目
|
||||
const showCreateModal = () => {
|
||||
currentQuestion.value = {};
|
||||
isEditMode.value = false;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑题目
|
||||
const handleEdit = (record: Question) => {
|
||||
currentQuestion.value = { ...record };
|
||||
isEditMode.value = true;
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除题目
|
||||
const handleDelete = (record: Question) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除题目"${record.title}"吗？此操作不可恢复。`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await deleteQuestion(record.id);
|
||||
message.success('删除成功');
|
||||
loadQuestions();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '确认批量删除',
|
||||
content: `确定要删除选中的 ${selectedRows.value.length} 个题目吗？此操作不可恢复。`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id);
|
||||
await batchDeleteQuestions(ids);
|
||||
message.success(`成功删除 ${ids.length} 个题目`);
|
||||
clearSelection();
|
||||
loadQuestions();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '批量删除失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表单成功回调
|
||||
const handleFormSuccess = () => {
|
||||
formVisible.value = false;
|
||||
loadQuestions();
|
||||
};
|
||||
|
||||
// 导入成功回调
|
||||
const handleImported = () => {
|
||||
loadQuestions();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
loadQuestions();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadQuestions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.question-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
src/views/questions/components/BatchOperations.vue
Normal file
190
src/views/questions/components/BatchOperations.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="batch-operations">
|
||||
<a-alert
|
||||
:message="`已选择 ${selectedCount} 个题目`"
|
||||
type="info"
|
||||
show-icon
|
||||
closable
|
||||
@close="$emit('clear-selection')"
|
||||
>
|
||||
<template #action>
|
||||
<div class="batch-actions">
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
@click="$emit('batch-delete')"
|
||||
:disabled="selectedCount === 0"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
批量删除
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
size="small"
|
||||
@click="handleBatchExport"
|
||||
:disabled="selectedCount === 0"
|
||||
>
|
||||
<ExportOutlined />
|
||||
导出选中
|
||||
</a-button>
|
||||
|
||||
<a-dropdown>
|
||||
<a-button size="small" :disabled="selectedCount === 0">
|
||||
<SettingOutlined />
|
||||
批量操作
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleBatchOperation">
|
||||
<a-menu-item key="category">
|
||||
<FolderOutlined />
|
||||
修改分类
|
||||
</a-menu-item>
|
||||
<a-menu-item key="difficulty">
|
||||
<StarOutlined />
|
||||
修改难度
|
||||
</a-menu-item>
|
||||
<a-menu-item key="tags">
|
||||
<TagOutlined />
|
||||
添加标签
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<!-- 批量修改弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="batchModalVisible"
|
||||
:title="batchModalTitle"
|
||||
@ok="handleBatchConfirm"
|
||||
@cancel="batchModalVisible = false"
|
||||
>
|
||||
<!-- 修改分类 -->
|
||||
<div v-if="batchType === 'category'">
|
||||
<a-form-item label="新分类">
|
||||
<a-input
|
||||
v-model:value="batchValue"
|
||||
placeholder="请输入新的分类名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 修改难度 -->
|
||||
<div v-if="batchType === 'difficulty'">
|
||||
<a-form-item label="新难度">
|
||||
<a-select
|
||||
v-model:value="batchValue"
|
||||
placeholder="请选择新的难度"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option value="easy">简单</a-select-option>
|
||||
<a-select-option value="medium">中等</a-select-option>
|
||||
<a-select-option value="hard">困难</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 添加标签 -->
|
||||
<div v-if="batchType === 'tags'">
|
||||
<a-form-item label="标签">
|
||||
<a-select
|
||||
v-model:value="batchValue"
|
||||
mode="tags"
|
||||
placeholder="添加标签，按回车确认"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
ExportOutlined,
|
||||
SettingOutlined,
|
||||
DownOutlined,
|
||||
FolderOutlined,
|
||||
StarOutlined,
|
||||
TagOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
interface Props {
|
||||
selectedCount: number;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'batch-delete'): void;
|
||||
(e: 'clear-selection'): void;
|
||||
(e: 'batch-export'): void;
|
||||
(e: 'batch-update', type: string, value: any): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 批量操作弹窗
|
||||
const batchModalVisible = ref(false);
|
||||
const batchType = ref('');
|
||||
const batchValue = ref<any>('');
|
||||
const batchModalTitle = ref('');
|
||||
|
||||
// 批量导出
|
||||
const handleBatchExport = () => {
|
||||
emit('batch-export');
|
||||
message.info('导出功能开发中...');
|
||||
};
|
||||
|
||||
// 批量操作
|
||||
const handleBatchOperation = ({ key }: { key: string }) => {
|
||||
batchType.value = key;
|
||||
batchValue.value = key === 'tags' ? [] : '';
|
||||
|
||||
const titleMap: Record<string, string> = {
|
||||
category: '批量修改分类',
|
||||
difficulty: '批量修改难度',
|
||||
tags: '批量添加标签'
|
||||
};
|
||||
|
||||
batchModalTitle.value = titleMap[key] || '批量操作';
|
||||
batchModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 确认批量操作
|
||||
const handleBatchConfirm = () => {
|
||||
if (!batchValue.value) {
|
||||
message.error('请输入有效的值');
|
||||
return;
|
||||
}
|
||||
|
||||
emit('batch-update', batchType.value, batchValue.value);
|
||||
batchModalVisible.value = false;
|
||||
message.success('批量操作成功');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.batch-operations {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-alert) {
|
||||
border-radius: 8px;
|
||||
|
||||
.ant-alert-message {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
354
src/views/questions/components/ImportExport.vue
Normal file
354
src/views/questions/components/ImportExport.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a-button>
|
||||
<CloudDownloadOutlined />
|
||||
导入导出
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="import">
|
||||
<CloudUploadOutlined />
|
||||
导入题目
|
||||
</a-menu-item>
|
||||
<a-menu-item key="export">
|
||||
<CloudDownloadOutlined />
|
||||
导出题目
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="template">
|
||||
<FileExcelOutlined />
|
||||
下载模板
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="importVisible"
|
||||
title="导入题目"
|
||||
:confirm-loading="importing"
|
||||
@ok="handleImport"
|
||||
@cancel="handleImportCancel"
|
||||
>
|
||||
<div class="import-section">
|
||||
<a-alert
|
||||
message="导入说明"
|
||||
:description="importTips"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px"
|
||||
/>
|
||||
|
||||
<a-upload-dragger
|
||||
v-model:fileList="importFileList"
|
||||
:before-upload="beforeImportUpload"
|
||||
:on-remove="handleRemove"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
:max-count="1"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p class="ant-upload-hint">
|
||||
支持 Excel (.xlsx/.xls) 和 CSV 文件格式
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
|
||||
<!-- 导入选项 -->
|
||||
<div class="import-options" style="margin-top: 16px">
|
||||
<a-checkbox v-model:checked="importOptions.skipDuplicate">
|
||||
跳过重复题目
|
||||
</a-checkbox>
|
||||
<a-checkbox v-model:checked="importOptions.updateExisting">
|
||||
更新已存在的题目
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 导入结果弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="resultVisible"
|
||||
title="导入结果"
|
||||
:footer="null"
|
||||
>
|
||||
<div class="import-result">
|
||||
<a-result
|
||||
:status="importResult.success ? 'success' : 'warning'"
|
||||
:title="importResult.success ? '导入成功' : '导入完成'"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="result-stats">
|
||||
<a-statistic
|
||||
title="成功导入"
|
||||
:value="importResult.successCount"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
/>
|
||||
<a-statistic
|
||||
title="导入失败"
|
||||
:value="importResult.failCount"
|
||||
:value-style="{ color: '#cf1322' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="importResult.errors.length > 0" class="error-details">
|
||||
<h4>错误详情：</h4>
|
||||
<ul>
|
||||
<li v-for="(error, index) in importResult.errors" :key="index">
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a-button type="primary" @click="resultVisible = false">
|
||||
确定
|
||||
</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
CloudDownloadOutlined,
|
||||
CloudUploadOutlined,
|
||||
FileExcelOutlined,
|
||||
DownOutlined,
|
||||
InboxOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { importQuestions, exportQuestionTemplate } from '@/apis/questions';
|
||||
|
||||
interface Emits {
|
||||
(e: 'imported'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 导入相关状态
|
||||
const importVisible = ref(false);
|
||||
const importFileList = ref<any[]>([]);
|
||||
const importOptions = reactive({
|
||||
skipDuplicate: true,
|
||||
updateExisting: false
|
||||
});
|
||||
|
||||
// 导入结果
|
||||
const resultVisible = ref(false);
|
||||
const importResult = reactive({
|
||||
success: false,
|
||||
successCount: 0,
|
||||
failCount: 0,
|
||||
errors: [] as string[]
|
||||
});
|
||||
|
||||
// 导入说明
|
||||
const importTips = `
|
||||
1. 请下载模板文件，按照模板格式填写题目信息
|
||||
2. 支持 Excel (.xlsx/.xls) 和 CSV 文件格式
|
||||
3. 题目标题和内容为必填项
|
||||
4. 选项至少需要2个，正确答案用A、B、C等字母表示
|
||||
5. 单次最多导入1000个题目
|
||||
`;
|
||||
|
||||
// 导入请求
|
||||
const { loading: importing, send: sendImport } = useRequest(
|
||||
(file: File) => importQuestions(file),
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
// 菜单点击处理
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
switch (key) {
|
||||
case 'import':
|
||||
showImportModal();
|
||||
break;
|
||||
case 'export':
|
||||
handleExport();
|
||||
break;
|
||||
case 'template':
|
||||
handleDownloadTemplate();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 显示导入弹窗
|
||||
const showImportModal = () => {
|
||||
importVisible.value = true;
|
||||
importFileList.value = [];
|
||||
};
|
||||
|
||||
// 导入前检查
|
||||
const beforeImportUpload = (file: File) => {
|
||||
const isValidType = file.type.includes('sheet') || file.type.includes('csv') ||
|
||||
file.name.endsWith('.xlsx') || file.name.endsWith('.xls') || file.name.endsWith('.csv');
|
||||
|
||||
if (!isValidType) {
|
||||
message.error('只支持 Excel 和 CSV 文件格式！');
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过10MB！');
|
||||
return false;
|
||||
}
|
||||
|
||||
return false; // 阻止默认上传
|
||||
};
|
||||
|
||||
// 移除文件
|
||||
const handleRemove = () => {
|
||||
return true;
|
||||
};
|
||||
|
||||
// 执行导入
|
||||
const handleImport = async () => {
|
||||
if (importFileList.value.length === 0) {
|
||||
message.error('请选择要导入的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const file = importFileList.value[0].originFileObj || importFileList.value[0];
|
||||
const result = await sendImport(file);
|
||||
|
||||
// 设置导入结果
|
||||
importResult.success = result.failCount === 0;
|
||||
importResult.successCount = result.successCount;
|
||||
importResult.failCount = result.failCount;
|
||||
importResult.errors = result.errors || [];
|
||||
|
||||
// 显示结果
|
||||
importVisible.value = false;
|
||||
resultVisible.value = true;
|
||||
|
||||
// 通知父组件刷新
|
||||
if (result.successCount > 0) {
|
||||
emit('imported');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '导入失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 取消导入
|
||||
const handleImportCancel = () => {
|
||||
importVisible.value = false;
|
||||
importFileList.value = [];
|
||||
};
|
||||
|
||||
// 导出题目
|
||||
const handleExport = () => {
|
||||
message.info('导出功能开发中...');
|
||||
// 这里可以调用导出API
|
||||
// exportQuestions(searchParams);
|
||||
};
|
||||
|
||||
// 下载模板
|
||||
const handleDownloadTemplate = async () => {
|
||||
try {
|
||||
const blob = await exportQuestionTemplate();
|
||||
|
||||
// 创建下载链接
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
link.download = '题目导入模板.xlsx';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
// 释放URL对象
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
message.success('模板下载成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '模板下载失败');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.import-section {
|
||||
.import-options {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.import-result {
|
||||
.result-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.error-details {
|
||||
text-align: left;
|
||||
margin: 20px 0;
|
||||
|
||||
h4 {
|
||||
color: #cf1322;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-upload-drag) {
|
||||
background: #fafafa;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-upload-drag-icon {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.anticon {
|
||||
font-size: 48px;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-upload-hint {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
487
src/views/questions/components/QuestionForm.vue
Normal file
487
src/views/questions/components/QuestionForm.vue
Normal file
@@ -0,0 +1,487 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
:title="isEdit ? '编辑题目' : '新增题目'"
|
||||
:width="800"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 24 }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="题目标题" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入题目标题"
|
||||
:maxlength="100"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="题目内容" name="content">
|
||||
<RichEditor
|
||||
v-model="form.content"
|
||||
placeholder="请输入题目内容，支持富文本格式"
|
||||
:height="300"
|
||||
:maxlength="2000"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="题目类型" name="type">
|
||||
<a-select
|
||||
v-model:value="form.type"
|
||||
placeholder="选择题目类型"
|
||||
@change="handleTypeChange"
|
||||
>
|
||||
<a-select-option value="single">单选题</a-select-option>
|
||||
<a-select-option value="multiple">多选题</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="难度" name="difficulty">
|
||||
<a-select v-model:value="form.difficulty" placeholder="选择难度">
|
||||
<a-select-option value="easy">简单</a-select-option>
|
||||
<a-select-option value="medium">中等</a-select-option>
|
||||
<a-select-option value="hard">困难</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-form-item label="分值" name="score">
|
||||
<a-input-number
|
||||
v-model:value="form.score"
|
||||
:min="1"
|
||||
:max="100"
|
||||
placeholder="分值"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="题目分类" name="category">
|
||||
<a-input
|
||||
v-model:value="form.category"
|
||||
placeholder="请输入题目分类"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="题目标签" name="tags">
|
||||
<a-select
|
||||
v-model:value="form.tags"
|
||||
mode="tags"
|
||||
placeholder="添加标签，按回车确认"
|
||||
:max-tag-count="5"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 题目图片 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<a-form-item label="题目图片（可选）">
|
||||
<a-upload
|
||||
v-model:file-list="imageFileList"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeImageUpload"
|
||||
:on-remove="handleImageRemove"
|
||||
accept="image/*"
|
||||
:max-count="1"
|
||||
>
|
||||
<div v-if="!form.image">
|
||||
<PlusOutlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 选项设置 -->
|
||||
<a-form-item label="题目选项" name="options">
|
||||
<div class="options-section">
|
||||
<div v-for="(option, index) in form.options" :key="option.key" class="option-item">
|
||||
<a-row :gutter="8" align="middle">
|
||||
<a-col :span="3">
|
||||
<div class="option-label">{{ option.key }}.</div>
|
||||
</a-col>
|
||||
<a-col :span="15">
|
||||
<a-form-item-rest>
|
||||
<a-input
|
||||
v-model:value="option.value"
|
||||
:placeholder="`请输入选项${option.key}内容`"
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item-rest>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-item-rest>
|
||||
<a-checkbox
|
||||
:checked="form.correctAnswer.includes(option.key)"
|
||||
@change="(e: any) => handleAnswerChange(option.key, e.target.checked)"
|
||||
>
|
||||
正确答案
|
||||
</a-checkbox>
|
||||
</a-form-item-rest>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-form-item-rest>
|
||||
<a-button
|
||||
v-if="form.options.length > 2"
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
@click="removeOption(index)"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</a-button>
|
||||
</a-form-item-rest>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<a-form-item-rest>
|
||||
<a-button
|
||||
v-if="form.options.length < 6"
|
||||
type="dashed"
|
||||
block
|
||||
@click="addOption"
|
||||
style="margin-top: 8px"
|
||||
>
|
||||
<PlusOutlined />
|
||||
添加选项
|
||||
</a-button>
|
||||
</a-form-item-rest>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { createQuestion, updateQuestion } from '@/apis/questions';
|
||||
import type { Question, CreateQuestionParams, QuestionOption } from '@/apis/questions';
|
||||
import RichEditor from '@/components/RichEditor.vue';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
formData: Partial<Question>;
|
||||
isEdit: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'success'): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const formRef = ref();
|
||||
const imageFileList = ref<any[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<CreateQuestionParams>({
|
||||
title: '',
|
||||
content: '',
|
||||
type: 'single',
|
||||
difficulty: 'easy',
|
||||
score: 10,
|
||||
category: '',
|
||||
tags: [],
|
||||
options: [
|
||||
{ key: 'A', value: '' },
|
||||
{ key: 'B', value: '' }
|
||||
],
|
||||
correctAnswer: [],
|
||||
image: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入题目标题', trigger: 'blur' },
|
||||
{ min: 5, max: 100, message: '标题长度应为5-100个字符', trigger: 'blur' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入题目内容', trigger: 'blur' },
|
||||
{ min: 10, max: 2000, message: '内容长度应为10-2000个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择题目类型', trigger: 'change' }
|
||||
],
|
||||
difficulty: [
|
||||
{ required: true, message: '请选择难度', trigger: 'change' }
|
||||
],
|
||||
score: [
|
||||
{ required: true, message: '请输入分值', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, max: 100, message: '分值应为1-100之间的数字', trigger: 'blur' }
|
||||
],
|
||||
category: [
|
||||
{ required: true, message: '请输入题目分类', trigger: 'blur' }
|
||||
],
|
||||
options: [
|
||||
{
|
||||
validator: () => {
|
||||
const validOptions = form.options.filter(opt => opt.value.trim());
|
||||
if (validOptions.length < 2) {
|
||||
return Promise.reject(new Error('至少需要2个选项'));
|
||||
}
|
||||
if (form.correctAnswer.length === 0) {
|
||||
return Promise.reject(new Error('请选择正确答案'));
|
||||
}
|
||||
if (form.type === 'single' && form.correctAnswer.length > 1) {
|
||||
return Promise.reject(new Error('单选题只能有一个正确答案'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 提交请求
|
||||
const { loading, send: submitForm } = useRequest(
|
||||
() => {
|
||||
const api = props.isEdit && props.formData.id
|
||||
? updateQuestion(props.formData.id, form)
|
||||
: createQuestion(form);
|
||||
return api;
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
// 监听表单数据变化
|
||||
watch(() => props.formData, (newData) => {
|
||||
if (newData && Object.keys(newData).length > 0) {
|
||||
Object.assign(form, {
|
||||
title: newData.title || '',
|
||||
content: newData.content || '',
|
||||
type: newData.type || 'single',
|
||||
difficulty: newData.difficulty || 'easy',
|
||||
score: newData.score || 10,
|
||||
category: newData.category || '',
|
||||
tags: newData.tags || [],
|
||||
options: newData.options || [
|
||||
{ key: 'A', value: '' },
|
||||
{ key: 'B', value: '' }
|
||||
],
|
||||
correctAnswer: newData.correctAnswer || [],
|
||||
image: newData.image || ''
|
||||
});
|
||||
|
||||
// 设置图片列表
|
||||
if (newData.image) {
|
||||
imageFileList.value = [{
|
||||
uid: '-1',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: newData.image
|
||||
}];
|
||||
} else {
|
||||
imageFileList.value = [];
|
||||
}
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
// 监听可见性变化
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (!visible) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
// 题目类型变化处理
|
||||
const handleTypeChange = (value: string) => {
|
||||
if (value === 'single' && form.correctAnswer.length > 1) {
|
||||
// 单选题只保留第一个答案
|
||||
form.correctAnswer = form.correctAnswer.slice(0, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 答案选择处理
|
||||
const handleAnswerChange = (optionKey: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
if (form.type === 'single') {
|
||||
// 单选题，替换答案
|
||||
form.correctAnswer = [optionKey];
|
||||
} else {
|
||||
// 多选题，添加答案
|
||||
if (!form.correctAnswer.includes(optionKey)) {
|
||||
form.correctAnswer.push(optionKey);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 移除答案
|
||||
const index = form.correctAnswer.indexOf(optionKey);
|
||||
if (index > -1) {
|
||||
form.correctAnswer.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 添加选项
|
||||
const addOption = () => {
|
||||
const nextKey = String.fromCharCode(65 + form.options.length); // A, B, C...
|
||||
form.options.push({
|
||||
key: nextKey,
|
||||
value: ''
|
||||
});
|
||||
};
|
||||
|
||||
// 移除选项
|
||||
const removeOption = (index: number) => {
|
||||
const removedKey = form.options[index].key;
|
||||
form.options.splice(index, 1);
|
||||
|
||||
// 移除对应的正确答案
|
||||
const answerIndex = form.correctAnswer.indexOf(removedKey);
|
||||
if (answerIndex > -1) {
|
||||
form.correctAnswer.splice(answerIndex, 1);
|
||||
}
|
||||
|
||||
// 重新排列选项key
|
||||
form.options.forEach((option, i) => {
|
||||
option.key = String.fromCharCode(65 + i);
|
||||
});
|
||||
|
||||
// 更新正确答案的key
|
||||
form.correctAnswer = form.correctAnswer.map(answer => {
|
||||
const oldIndex = answer.charCodeAt(0) - 65;
|
||||
return oldIndex < form.options.length ? String.fromCharCode(65 + oldIndex) : answer;
|
||||
}).filter(answer => {
|
||||
const index = answer.charCodeAt(0) - 65;
|
||||
return index < form.options.length;
|
||||
});
|
||||
};
|
||||
|
||||
// 图片上传前检查
|
||||
const beforeImageUpload = (file: File) => {
|
||||
const isImage = file.type.startsWith('image/');
|
||||
if (!isImage) {
|
||||
message.error('只能上传图片文件！');
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('图片大小不能超过2MB！');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 模拟上传，生成临时URL
|
||||
const url = URL.createObjectURL(file);
|
||||
form.image = url;
|
||||
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
// 移除图片
|
||||
const handleImageRemove = () => {
|
||||
form.image = '';
|
||||
return true;
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
title: '',
|
||||
content: '',
|
||||
type: 'single',
|
||||
difficulty: 'easy',
|
||||
score: 10,
|
||||
category: '',
|
||||
tags: [],
|
||||
options: [
|
||||
{ key: 'A', value: '' },
|
||||
{ key: 'B', value: '' }
|
||||
],
|
||||
correctAnswer: [],
|
||||
image: ''
|
||||
});
|
||||
imageFileList.value = [];
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value.validateFields();
|
||||
|
||||
// 过滤空选项
|
||||
const validOptions = form.options.filter(opt => opt.value.trim());
|
||||
const formData = {
|
||||
...form,
|
||||
options: validOptions
|
||||
};
|
||||
|
||||
await submitForm();
|
||||
|
||||
message.success(props.isEdit ? '编辑成功' : '创建成功');
|
||||
emit('success');
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
message.error(error.message || (props.isEdit ? '编辑失败' : '创建失败'));
|
||||
}
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.options-section {
|
||||
.option-item {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.option-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
321
src/views/questions/components/QuestionList.vue
Normal file
321
src/views/questions/components/QuestionList.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<a-card class="question-list-card">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="paginationConfig"
|
||||
:row-selection="rowSelection"
|
||||
:scroll="{ x: 1070, y: 'calc(100vh - 350px)' }"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 题目内容 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="question-title">
|
||||
<h4>{{ record.title }}</h4>
|
||||
<p class="question-content">{{ record.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'type'">
|
||||
<a-tag :color="record.type === 'single' ? 'blue' : 'green'">
|
||||
{{ record.type === 'single' ? '单选题' : '多选题' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'difficulty'">
|
||||
<a-tag :color="getDifficultyColor(record.difficulty)">
|
||||
{{ getDifficultyText(record.difficulty) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'options'">
|
||||
<div class="options-preview">
|
||||
<div v-for="option in record.options.slice(0, 2)" :key="option.key" class="option-item">
|
||||
<strong>{{ option.key }}.</strong> {{ option.value }}
|
||||
</div>
|
||||
<span v-if="record.options.length > 2" class="more-options">
|
||||
...等{{ record.options.length }}个选项
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'correctAnswer'">
|
||||
<a-tag v-for="answer in record.correctAnswer" :key="answer" color="orange">
|
||||
{{ answer }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'score'">
|
||||
<span class="score-value">{{ record.score }}分</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'tags'">
|
||||
<a-tag v-for="tag in record.tags.slice(0, 2)" :key="tag" color="purple">
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
<span v-if="record.tags.length > 2">...</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="action-buttons">
|
||||
<a-button type="link" size="small" @click="$emit('edit', record)">
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-button type="link" size="small" danger @click="$emit('delete', record)">
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import type { Question } from '@/apis/questions';
|
||||
import type { TableColumnsType } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
loading?: boolean;
|
||||
dataSource: Question[];
|
||||
pagination: {
|
||||
current: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
showSizeChanger?: boolean;
|
||||
showQuickJumper?: boolean;
|
||||
showTotal?: (total: number) => string;
|
||||
};
|
||||
selectedRows: Question[];
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'selection-change', rows: Question[]): void;
|
||||
(e: 'edit', record: Question): void;
|
||||
(e: 'delete', record: Question): void;
|
||||
(e: 'page-change', page: number, pageSize: number): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: '题目信息',
|
||||
key: 'title',
|
||||
minWidth: 300,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
width: 70,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '难度',
|
||||
key: 'difficulty',
|
||||
width: 70,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '选项',
|
||||
key: 'options',
|
||||
width: 200,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '答案',
|
||||
key: 'correctAnswer',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '分值',
|
||||
key: 'score',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'category',
|
||||
width: 90,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tags',
|
||||
width: 100,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 分页配置
|
||||
const paginationConfig = computed(() => ({
|
||||
...props.pagination,
|
||||
onChange: (page: number, pageSize: number) => emit('page-change', page, pageSize),
|
||||
onShowSizeChange: (current: number, size: number) => emit('page-change', current, size)
|
||||
}));
|
||||
|
||||
// 行选择配置
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: props.selectedRows.map(row => row.id),
|
||||
onChange: (_selectedRowKeys: string[], selectedRows: Question[]) => {
|
||||
emit('selection-change', selectedRows);
|
||||
},
|
||||
getCheckboxProps: (record: Question) => ({
|
||||
name: record.id
|
||||
})
|
||||
}));
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pagination: any) => {
|
||||
emit('page-change', pagination.current, pagination.pageSize);
|
||||
};
|
||||
|
||||
// 难度颜色映射
|
||||
const getDifficultyColor = (difficulty: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
easy: 'green',
|
||||
medium: 'orange',
|
||||
hard: 'red'
|
||||
};
|
||||
return colorMap[difficulty] || 'default';
|
||||
};
|
||||
|
||||
// 难度文本映射
|
||||
const getDifficultyText = (difficulty: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
easy: '简单',
|
||||
medium: '中等',
|
||||
hard: '困难'
|
||||
};
|
||||
return textMap[difficulty] || difficulty;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.question-list-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-title {
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.options-preview {
|
||||
.option-item {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
|
||||
strong {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.more-options {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
|
||||
.ant-btn-link {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
|
||||
&.ant-btn-dangerous {
|
||||
color: #ff4d4f;
|
||||
|
||||
&:hover {
|
||||
color: #ff7875;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.question-list-card {
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
343
src/views/records/RecordPage.vue
Normal file
343
src/views/records/RecordPage.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="record-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">答题记录</h1>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 统计卡片 -->
|
||||
<StatisticsCards v-if="false" :statistics="statistics" :loading="statisticsLoading" />
|
||||
|
||||
<!-- 搜索和筛选栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索学生姓名或家长手机号"
|
||||
style="width: 250px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterSchool"
|
||||
placeholder="选择学校"
|
||||
style="width: 150px; margin-left: 8px"
|
||||
allow-clear
|
||||
show-search
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="school in schoolOptions" :key="school" :value="school">
|
||||
{{ school }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterGrade"
|
||||
placeholder="年级"
|
||||
style="width: 100px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="grade in gradeOptions" :key="grade" :value="grade">
|
||||
{{ grade }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterAnswererType"
|
||||
placeholder="答题人类型"
|
||||
style="width: 120px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="parent">家长答题</a-select-option>
|
||||
<a-select-option value="student">学生答题</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<a-range-picker
|
||||
v-model:value="dateRange"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
@change="handleDateChange"
|
||||
style="margin-right: 8px"
|
||||
/>
|
||||
|
||||
<a-button @click="handleExport">
|
||||
<DownloadOutlined />
|
||||
导出记录
|
||||
</a-button>
|
||||
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
刷新
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 答题记录列表 -->
|
||||
<RecordList
|
||||
:loading="loading"
|
||||
:data-source="records"
|
||||
:pagination="pagination"
|
||||
@detail="handleViewDetail"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 答题详情弹窗 -->
|
||||
<RecordDetailModal
|
||||
v-model:visible="detailVisible"
|
||||
:record="currentRecord"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { getRecordList, getAnswerStatistics, exportRecords } from '@/apis/records';
|
||||
import type { AnswerRecord, RecordQueryParams } from '@/apis/records';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
// 导入子组件
|
||||
import StatisticsCards from './components/StatisticsCards.vue';
|
||||
import RecordList from './components/RecordList.vue';
|
||||
import RecordDetailModal from './components/RecordDetailModal.vue';
|
||||
|
||||
// 搜索筛选参数
|
||||
const searchKeyword = ref('');
|
||||
const filterSchool = ref<string>();
|
||||
const filterGrade = ref<string>();
|
||||
const filterAnswererType = ref<string>();
|
||||
const dateRange = ref<[Dayjs, Dayjs]>();
|
||||
|
||||
// 列表数据
|
||||
const records = ref<AnswerRecord[]>([]);
|
||||
const statistics = ref<any>({});
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 详情弹窗
|
||||
const detailVisible = ref(false);
|
||||
const currentRecord = ref<AnswerRecord>();
|
||||
|
||||
// 筛选选项
|
||||
const schoolOptions = ref<string[]>([]);
|
||||
const gradeOptions = ref<string[]>([]);
|
||||
|
||||
// 获取记录列表
|
||||
const { loading, send: fetchRecords } = useRequest((params: RecordQueryParams) => getRecordList(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 获取统计数据
|
||||
const { loading: statisticsLoading, send: fetchStatistics } = useRequest(
|
||||
(params?: any) => getAnswerStatistics(params),
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
// 构建查询参数
|
||||
const buildQueryParams = (): RecordQueryParams => {
|
||||
const params: RecordQueryParams = {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value || undefined,
|
||||
schoolName: filterSchool.value,
|
||||
gradeName: filterGrade.value,
|
||||
answererType: filterAnswererType.value as any
|
||||
};
|
||||
|
||||
if (dateRange.value) {
|
||||
params.startTime = dateRange.value[0].format('YYYY-MM-DD');
|
||||
params.endTime = dateRange.value[1].format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
loadRecords();
|
||||
};
|
||||
|
||||
// 日期范围变化
|
||||
const handleDateChange = () => {
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
// 加载记录列表
|
||||
const loadRecords = async () => {
|
||||
try {
|
||||
const params = buildQueryParams();
|
||||
const result = await fetchRecords(params);
|
||||
|
||||
records.value = result.list;
|
||||
pagination.total = result.total;
|
||||
|
||||
// 提取筛选选项
|
||||
extractFilterOptions(result.list);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取答题记录失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载统计数据
|
||||
const loadStatistics = async () => {
|
||||
try {
|
||||
const params = buildQueryParams();
|
||||
delete params.page;
|
||||
delete params.pageSize;
|
||||
|
||||
const result = await fetchStatistics(params);
|
||||
statistics.value = result;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取统计数据失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 提取筛选选项
|
||||
const extractFilterOptions = (recordList: AnswerRecord[]) => {
|
||||
const schools = new Set<string>();
|
||||
const grades = new Set<string>();
|
||||
|
||||
recordList.forEach(record => {
|
||||
schools.add(record.schoolName);
|
||||
grades.add(record.gradeName);
|
||||
});
|
||||
|
||||
schoolOptions.value = Array.from(schools).sort();
|
||||
gradeOptions.value = Array.from(grades).sort();
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (record: AnswerRecord) => {
|
||||
currentRecord.value = record;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 导出记录
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const params = buildQueryParams();
|
||||
delete params.page;
|
||||
delete params.pageSize;
|
||||
|
||||
const blob = await exportRecords(params);
|
||||
|
||||
// 创建下载链接
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
link.download = `答题记录_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
// 释放URL对象
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
message.success('导出成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '导出失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
loadRecords();
|
||||
loadStatistics();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
loadRecords();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadRecords();
|
||||
loadStatistics();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.record-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 0;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
|
||||
.search-section {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
468
src/views/records/components/RecordDetailModal.vue
Normal file
468
src/views/records/components/RecordDetailModal.vue
Normal file
@@ -0,0 +1,468 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
:title="`答题详情 - ${record?.studentName || ''}`"
|
||||
:width="900"
|
||||
:footer="null"
|
||||
@cancel="$emit('update:visible', false)"
|
||||
>
|
||||
<div v-if="record" class="record-detail">
|
||||
<!-- 基本信息 -->
|
||||
<div class="basic-info">
|
||||
<a-descriptions :column="2" bordered size="small">
|
||||
<a-descriptions-item label="学生姓名">
|
||||
{{ record.studentName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="家长手机">
|
||||
{{ record.parentPhone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="所属学校">
|
||||
{{ record.schoolName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="年级班级">
|
||||
{{ record.gradeName }} · {{ record.className }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="答题人">
|
||||
<a-tag :color="getAnswererTypeColor(record.answererType)">
|
||||
{{ getAnswererTypeText(record.answererType) }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="答题时间">
|
||||
{{ formatDateTime(record.createTime) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 答题统计 -->
|
||||
<div class="answer-stats">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-statistic
|
||||
title="题目总数"
|
||||
:value="record.totalQuestions"
|
||||
:value-style="{ color: '#1890ff', fontSize: '20px' }"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-statistic
|
||||
title="答对题数"
|
||||
:value="record.correctCount"
|
||||
:value-style="{ color: '#52c41a', fontSize: '20px' }"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-statistic
|
||||
title="总得分"
|
||||
:value="record.totalScore"
|
||||
:value-style="{ color: '#f5222d', fontSize: '20px' }"
|
||||
suffix="分"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-statistic
|
||||
title="答题用时"
|
||||
:value="formatDuration(record.answerTime)"
|
||||
:value-style="{ color: '#722ed1', fontSize: '16px' }"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 题目详情 -->
|
||||
<div class="question-details">
|
||||
<h3>答题详情</h3>
|
||||
|
||||
<div class="question-list">
|
||||
<div
|
||||
v-for="(question, index) in record.questionDetails"
|
||||
:key="question.questionId"
|
||||
class="question-item"
|
||||
>
|
||||
<div class="question-header">
|
||||
<div class="question-number">第{{ index + 1}}题</div>
|
||||
<div class="question-result">
|
||||
<a-tag :color="question.isCorrect ? 'success' : 'error'">
|
||||
{{ question.isCorrect ? '正确' : '错误' }}
|
||||
</a-tag>
|
||||
<span class="question-score">
|
||||
得分: {{ question.score }}分
|
||||
</span>
|
||||
<span class="question-time">
|
||||
用时: {{ question.timeSpent }}秒
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-content">
|
||||
<div class="question-title">
|
||||
<strong>{{ question.questionTitle }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="answer-section">
|
||||
<div class="user-answer">
|
||||
<span class="label">你的答案:</span>
|
||||
<div class="answer-value">
|
||||
<a-tag
|
||||
v-for="answer in question.userAnswer"
|
||||
:key="answer"
|
||||
:color="question.isCorrect ? 'green' : 'red'"
|
||||
>
|
||||
{{ answer }}
|
||||
</a-tag>
|
||||
<span v-if="question.userAnswer.length === 0" class="no-answer">
|
||||
未作答
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="correct-answer">
|
||||
<span class="label">正确答案:</span>
|
||||
<div class="answer-value">
|
||||
<a-tag
|
||||
v-for="answer in question.correctAnswer"
|
||||
:key="answer"
|
||||
color="blue"
|
||||
>
|
||||
{{ answer }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 答题分析 -->
|
||||
<div class="answer-analysis">
|
||||
<h3>答题分析</h3>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card size="small">
|
||||
<a-statistic
|
||||
title="正确率"
|
||||
:value="((record.correctCount / record.totalQuestions) * 100)"
|
||||
:precision="1"
|
||||
suffix="%"
|
||||
:value-style="{
|
||||
color: getCorrectRateColor((record.correctCount / record.totalQuestions) * 100)
|
||||
}"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card size="small">
|
||||
<a-statistic
|
||||
title="平均用时"
|
||||
:value="(record.answerTime / record.totalQuestions)"
|
||||
:precision="1"
|
||||
suffix="秒/题"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card size="small">
|
||||
<a-statistic
|
||||
title="得分率"
|
||||
:value="getScoreRate()"
|
||||
:precision="1"
|
||||
suffix="%"
|
||||
:value-style="{ color: '#f5222d' }"
|
||||
/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Vue组件，无需导入computed
|
||||
import type { AnswerRecord } from '@/apis/records';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
record?: AnswerRecord;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
defineEmits<Emits>();
|
||||
|
||||
// 答题人类型颜色映射
|
||||
const getAnswererTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
parent: 'blue',
|
||||
student: 'green'
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 答题人类型文本映射
|
||||
const getAnswererTypeText = (type: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
parent: '家长答题',
|
||||
student: '学生答题'
|
||||
};
|
||||
return textMap[type] || type;
|
||||
};
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDateTime = (dateTime: string) => {
|
||||
return new Date(dateTime).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// 格式化时长（秒转换为分秒）
|
||||
const formatDuration = (seconds: number) => {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分${remainingSeconds}秒`;
|
||||
} else {
|
||||
return `${remainingSeconds}秒`;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取正确率颜色
|
||||
const getCorrectRateColor = (rate: number) => {
|
||||
if (rate >= 80) return '#52c41a';
|
||||
if (rate >= 60) return '#faad14';
|
||||
return '#f5222d';
|
||||
};
|
||||
|
||||
// 计算得分率
|
||||
const getScoreRate = () => {
|
||||
if (!props.record) return 0;
|
||||
|
||||
const totalPossibleScore = props.record.questionDetails.reduce(
|
||||
(sum, question) => sum + (question.isCorrect ? question.score : getQuestionMaxScore(question)),
|
||||
0
|
||||
);
|
||||
|
||||
if (totalPossibleScore === 0) return 0;
|
||||
|
||||
return (props.record.totalScore / totalPossibleScore) * 100;
|
||||
};
|
||||
|
||||
// 获取题目最大可能得分（这里简化处理，假设每题得分就是最大得分）
|
||||
const getQuestionMaxScore = (question: any) => {
|
||||
// 这里可以根据实际业务逻辑计算题目的最大可能得分
|
||||
// 暂时假设正确时的得分就是该题的满分
|
||||
return question.score || 10; // 默认10分
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.record-detail {
|
||||
.basic-info {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item-label {
|
||||
background: #fafafa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer-stats {
|
||||
margin-bottom: 32px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
|
||||
:deep(.ant-statistic) {
|
||||
text-align: center;
|
||||
|
||||
.ant-statistic-title {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-details {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #1890ff;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.question-list {
|
||||
.question-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.question-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.question-number {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.question-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.question-score,
|
||||
.question-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-content {
|
||||
.question-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.answer-section {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
.user-answer,
|
||||
.correct-answer {
|
||||
flex: 1;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
min-width: 80px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.answer-value {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
.no-answer {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer-analysis {
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #52c41a;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
text-align: center;
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ant-statistic-title {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.record-detail {
|
||||
.answer-stats {
|
||||
:deep(.ant-row) {
|
||||
.ant-col {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-details {
|
||||
.question-item {
|
||||
.question-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
.answer-section {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer-analysis {
|
||||
:deep(.ant-row) {
|
||||
.ant-col {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.record-detail {
|
||||
.answer-stats {
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.question-details .question-item {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
409
src/views/records/components/RecordList.vue
Normal file
409
src/views/records/components/RecordList.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<a-card class="record-list-card">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="paginationConfig"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 学生信息 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'studentInfo'">
|
||||
<div class="student-info">
|
||||
<div class="student-basic">
|
||||
<h4>{{ record.studentName }}</h4>
|
||||
<div class="student-details">
|
||||
<span class="phone">{{ record.parentPhone }}</span>
|
||||
<a-tag :color="getAnswererTypeColor(record.answererType)" size="small">
|
||||
{{ getAnswererTypeText(record.answererType) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-info">
|
||||
<div class="school-name">{{ record.schoolName }}</div>
|
||||
<div class="class-info">{{ record.gradeName }} · {{ record.className }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'answerInfo'">
|
||||
<div class="answer-info">
|
||||
<div class="answer-summary">
|
||||
<span class="total-questions">共{{ record.totalQuestions }}题</span>
|
||||
<span class="correct-count">答对{{ record.correctCount }}题</span>
|
||||
</div>
|
||||
<div class="answer-time">
|
||||
用时: {{ formatDuration(record.answerTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'score'">
|
||||
<div class="score-info">
|
||||
<div class="total-score">{{ record.totalScore }}分</div>
|
||||
<div class="accuracy">
|
||||
正确率: {{ ((record.correctCount / record.totalQuestions) * 100).toFixed(1) }}%
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'createTime'">
|
||||
<div class="time-info">
|
||||
<div class="date">{{ formatDate(record.createTime) }}</div>
|
||||
<div class="time">{{ formatTime(record.createTime) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="action-buttons">
|
||||
<a-button type="link" size="small" @click="$emit('detail', record)">
|
||||
<EyeOutlined />
|
||||
查看详情
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { EyeOutlined } from '@ant-design/icons-vue';
|
||||
import type { AnswerRecord } from '@/apis/records';
|
||||
import type { TableColumnsType } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
loading?: boolean;
|
||||
dataSource: AnswerRecord[];
|
||||
pagination: {
|
||||
current: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
showSizeChanger?: boolean;
|
||||
showQuickJumper?: boolean;
|
||||
showTotal?: (total: number) => string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'detail', record: AnswerRecord): void;
|
||||
(e: 'page-change', page: number, pageSize: number): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: '学生信息',
|
||||
key: 'studentInfo',
|
||||
width: 280,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '答题情况',
|
||||
key: 'answerInfo',
|
||||
width: 150,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '得分情况',
|
||||
key: 'score',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '答题时间',
|
||||
key: 'createTime',
|
||||
width: 140,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 分页配置
|
||||
const paginationConfig = computed(() => ({
|
||||
...props.pagination,
|
||||
onChange: (page: number, pageSize: number) => emit('page-change', page, pageSize),
|
||||
onShowSizeChange: (current: number, size: number) => emit('page-change', current, size)
|
||||
}));
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pagination: any) => {
|
||||
emit('page-change', pagination.current, pagination.pageSize);
|
||||
};
|
||||
|
||||
// 答题人类型颜色映射
|
||||
const getAnswererTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
parent: 'blue',
|
||||
student: 'green'
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 答题人类型文本映射
|
||||
const getAnswererTypeText = (type: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
parent: '家长答题',
|
||||
student: '学生答题'
|
||||
};
|
||||
return textMap[type] || type;
|
||||
};
|
||||
|
||||
// 格式化时长（秒转换为分秒）
|
||||
const formatDuration = (seconds: number) => {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分${remainingSeconds}秒`;
|
||||
} else {
|
||||
return `${remainingSeconds}秒`;
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateTime: string) => {
|
||||
return new Date(dateTime).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (dateTime: string) => {
|
||||
return new Date(dateTime).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.record-list-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
vertical-align: top;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr {
|
||||
&:hover {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.student-basic {
|
||||
h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.student-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.phone {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.school-info {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.school-name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.class-info {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer-info {
|
||||
text-align: center;
|
||||
|
||||
.answer-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.total-questions {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.correct-count {
|
||||
font-size: 13px;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.answer-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.score-info {
|
||||
text-align: center;
|
||||
|
||||
.total-score {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.accuracy {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.time-info {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
.date {
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.ant-btn-link {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
color: #1890ff;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.record-list-card {
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr {
|
||||
border-bottom: 8px solid #f5f5f5;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
.student-basic {
|
||||
.student-details {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer-info .answer-summary {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.action-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.record-list-card {
|
||||
box-shadow: none;
|
||||
|
||||
:deep(.ant-table) {
|
||||
font-size: 12px;
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
384
src/views/records/components/StatisticsCards.vue
Normal file
384
src/views/records/components/StatisticsCards.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<a-row :gutter="[16, 16]" class="statistics-cards">
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-card :loading="loading" class="stat-card">
|
||||
<a-statistic
|
||||
title="总答题记录"
|
||||
:value="statistics.totalRecords || 0"
|
||||
:value-style="{ color: '#3f8600', fontSize: '24px' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<FileTextOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-card :loading="loading" class="stat-card">
|
||||
<a-statistic
|
||||
title="参与用户数"
|
||||
:value="statistics.totalUsers || 0"
|
||||
:value-style="{ color: '#1890ff', fontSize: '24px' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-card :loading="loading" class="stat-card">
|
||||
<a-statistic
|
||||
title="平均得分"
|
||||
:value="statistics.avgScore || 0"
|
||||
:precision="1"
|
||||
:value-style="{ color: '#cf1322', fontSize: '24px' }"
|
||||
suffix="分"
|
||||
>
|
||||
<template #prefix>
|
||||
<TrophyOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :xs="24" :sm="12" :md="6">
|
||||
<a-card :loading="loading" class="stat-card">
|
||||
<a-statistic
|
||||
title="平均正确率"
|
||||
:value="statistics.avgCorrectRate || 0"
|
||||
:precision="1"
|
||||
:value-style="{ color: '#722ed1', fontSize: '24px' }"
|
||||
suffix="%"
|
||||
>
|
||||
<template #prefix>
|
||||
<CheckCircleOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 热门题目和排行榜 -->
|
||||
<a-row :gutter="[16, 16]" style="margin-top: 16px">
|
||||
<!-- 热门题目 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<a-card title="热门题目" :loading="loading" class="popular-questions">
|
||||
<div v-if="statistics.popularQuestions?.length > 0" class="question-list">
|
||||
<div
|
||||
v-for="(question, index) in statistics.popularQuestions.slice(0, 5)"
|
||||
:key="question.questionId"
|
||||
class="question-item"
|
||||
>
|
||||
<div class="question-rank">{{ index + 1 }}</div>
|
||||
<div class="question-info">
|
||||
<div class="question-title">{{ question.questionTitle }}</div>
|
||||
<div class="question-stats">
|
||||
<span>答题次数: {{ question.answerCount }}</span>
|
||||
<span class="divider">|</span>
|
||||
<span>正确率: {{ (question.correctRate * 100).toFixed(1) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 学校排行榜 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<a-card :loading="loading" class="ranking-card">
|
||||
<template #title>
|
||||
<a-tabs v-model:activeKey="activeRankingTab" size="small">
|
||||
<a-tab-pane key="school" tab="学校排行" />
|
||||
<a-tab-pane key="grade" tab="年级排行" />
|
||||
<a-tab-pane key="class" tab="班级排行" />
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<div class="ranking-content">
|
||||
<!-- 学校排行 -->
|
||||
<div v-if="activeRankingTab === 'school'" class="ranking-list">
|
||||
<div
|
||||
v-for="(item, index) in statistics.rankingData?.schoolRanking?.slice(0, 5)"
|
||||
:key="item.name"
|
||||
class="ranking-item"
|
||||
>
|
||||
<div class="ranking-position">
|
||||
<a-badge
|
||||
:count="index + 1"
|
||||
:number-style="getRankingStyle(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="ranking-name">{{ item.name }}</div>
|
||||
<div class="ranking-score">{{ item.avgScore.toFixed(1) }}分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年级排行 -->
|
||||
<div v-if="activeRankingTab === 'grade'" class="ranking-list">
|
||||
<div
|
||||
v-for="(item, index) in statistics.rankingData?.gradeRanking?.slice(0, 5)"
|
||||
:key="item.name"
|
||||
class="ranking-item"
|
||||
>
|
||||
<div class="ranking-position">
|
||||
<a-badge
|
||||
:count="index + 1"
|
||||
:number-style="getRankingStyle(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="ranking-name">{{ item.name }}</div>
|
||||
<div class="ranking-score">{{ item.avgScore.toFixed(1) }}分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 班级排行 -->
|
||||
<div v-if="activeRankingTab === 'class'" class="ranking-list">
|
||||
<div
|
||||
v-for="(item, index) in statistics.rankingData?.classRanking?.slice(0, 5)"
|
||||
:key="item.name"
|
||||
class="ranking-item"
|
||||
>
|
||||
<div class="ranking-position">
|
||||
<a-badge
|
||||
:count="index + 1"
|
||||
:number-style="getRankingStyle(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="ranking-name">{{ item.name }}</div>
|
||||
<div class="ranking-score">{{ item.avgScore.toFixed(1) }}分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-empty v-if="!hasRankingData" description="暂无数据" />
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import {
|
||||
FileTextOutlined,
|
||||
UserOutlined,
|
||||
TrophyOutlined,
|
||||
CheckCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { AnswerStatistics } from '@/apis/records';
|
||||
|
||||
interface Props {
|
||||
statistics: AnswerStatistics;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
// 排行榜切换
|
||||
const activeRankingTab = ref('school');
|
||||
|
||||
// 是否有排行榜数据
|
||||
const hasRankingData = computed(() => {
|
||||
const rankingData = props.statistics.rankingData;
|
||||
if (!rankingData) return false;
|
||||
|
||||
switch (activeRankingTab.value) {
|
||||
case 'school':
|
||||
return rankingData.schoolRanking && rankingData.schoolRanking.length > 0;
|
||||
case 'grade':
|
||||
return rankingData.gradeRanking && rankingData.gradeRanking.length > 0;
|
||||
case 'class':
|
||||
return rankingData.classRanking && rankingData.classRanking.length > 0;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 获取排名样式
|
||||
const getRankingStyle = (index: number) => {
|
||||
const colors = ['#f5222d', '#fa8c16', '#fadb14'];
|
||||
return {
|
||||
backgroundColor: colors[index] || '#52c41a',
|
||||
color: '#fff'
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics-cards {
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
:deep(.ant-statistic) {
|
||||
.ant-statistic-title {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.ant-statistic-content-prefix {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-questions {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.question-list {
|
||||
.question-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.question-rank {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.question-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.question-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.question-stats {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.divider {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
padding: 16px 24px 0;
|
||||
border-bottom: none;
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
.ant-tabs-tab {
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-content {
|
||||
min-height: 200px;
|
||||
|
||||
.ranking-list {
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ranking-position {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ranking-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ranking-score {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.statistics-cards {
|
||||
.stat-card {
|
||||
:deep(.ant-statistic-content) {
|
||||
.ant-statistic-content-value {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular-questions,
|
||||
.ranking-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
402
src/views/schools/SchoolPage.vue
Normal file
402
src/views/schools/SchoolPage.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="school-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">学校管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索学校名称"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterDistrict"
|
||||
placeholder="选择区县"
|
||||
style="width: 150px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="district in districtOptions" :key="district.name" :value="district.name">
|
||||
{{ district.name }} ({{ district.count }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterType"
|
||||
placeholder="学校类型"
|
||||
style="width: 120px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option value="primary">小学</a-select-option>
|
||||
<a-select-option value="junior">初中</a-select-option>
|
||||
<a-select-option value="senior">高中</a-select-option>
|
||||
<a-select-option value="vocational">职校</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
刷新
|
||||
</a-button>
|
||||
|
||||
<a-button type="primary" @click="handleAddSchool">
|
||||
<PlusOutlined />
|
||||
添加学校
|
||||
</a-button>
|
||||
|
||||
<a-button @click="showImportModal">
|
||||
<ImportOutlined />
|
||||
批量导入
|
||||
</a-button>
|
||||
|
||||
<a-button @click="handleExportTemplate">
|
||||
<DownloadOutlined />
|
||||
导出模板
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学校树形列表 -->
|
||||
<div class="school-tree-container">
|
||||
<a-spin :spinning="loading">
|
||||
<SchoolTree
|
||||
:data="schools"
|
||||
:loading="loading"
|
||||
@add-grade="handleAddGrade"
|
||||
@add-class="handleAddClass"
|
||||
@edit-school="handleEditSchool"
|
||||
@edit-grade="handleEditGrade"
|
||||
@edit-class="handleEditClass"
|
||||
@delete-school="handleDeleteSchool"
|
||||
@delete-grade="handleDeleteGrade"
|
||||
@delete-class="handleDeleteClass"
|
||||
/>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学校表单弹窗 -->
|
||||
<SchoolForm
|
||||
v-model:visible="schoolFormVisible"
|
||||
:school="currentSchool"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
|
||||
<!-- 年级表单弹窗 -->
|
||||
<GradeForm
|
||||
v-model:visible="gradeFormVisible"
|
||||
:grade="currentGrade"
|
||||
:school-id="currentSchoolId"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
|
||||
<!-- 班级表单弹窗 -->
|
||||
<ClassForm
|
||||
v-model:visible="classFormVisible"
|
||||
:class-data="currentClass"
|
||||
:school-id="currentSchoolId"
|
||||
:grade-id="currentGradeId"
|
||||
@success="handleFormSuccess"
|
||||
/>
|
||||
|
||||
<!-- 批量导入弹窗 -->
|
||||
<BatchImport
|
||||
v-model:visible="importModalVisible"
|
||||
@success="handleImportSuccess"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
PlusOutlined,
|
||||
ImportOutlined,
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import {
|
||||
getSchoolList,
|
||||
deleteSchool,
|
||||
deleteGrade,
|
||||
deleteClass,
|
||||
getDistrictList,
|
||||
exportSchoolTemplate
|
||||
} from '@/apis/schools';
|
||||
import type { School, SchoolQueryParams, Grade, Class } from '@/apis/schools';
|
||||
|
||||
// 导入子组件
|
||||
import SchoolTree from './components/SchoolTree.vue';
|
||||
import SchoolForm from './components/SchoolForm.vue';
|
||||
import GradeForm from './components/GradeForm.vue';
|
||||
import ClassForm from './components/ClassForm.vue';
|
||||
import BatchImport from './components/BatchImport.vue';
|
||||
|
||||
// 搜索筛选参数
|
||||
const searchKeyword = ref('');
|
||||
const filterDistrict = ref<string>();
|
||||
const filterType = ref<'primary' | 'junior' | 'senior' | 'vocational'>();
|
||||
|
||||
// 列表数据
|
||||
const schools = ref<School[]>([]);
|
||||
const districtOptions = ref<{ name: string; count: number }[]>([]);
|
||||
|
||||
// 表单弹窗状态
|
||||
const schoolFormVisible = ref(false);
|
||||
const gradeFormVisible = ref(false);
|
||||
const classFormVisible = ref(false);
|
||||
const importModalVisible = ref(false);
|
||||
|
||||
// 当前编辑的数据
|
||||
const currentSchool = ref<School>();
|
||||
const currentGrade = ref<Grade>();
|
||||
const currentClass = ref<Class>();
|
||||
const currentSchoolId = ref<string>('');
|
||||
const currentGradeId = ref<string>('');
|
||||
|
||||
// 获取学校列表
|
||||
const { loading, send: fetchSchools } = useRequest((params: SchoolQueryParams) => getSchoolList(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 获取区县列表
|
||||
const { send: fetchDistricts } = useRequest(() => getDistrictList(), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 构建查询参数
|
||||
const buildQueryParams = (): SchoolQueryParams => {
|
||||
return {
|
||||
keyword: searchKeyword.value || undefined,
|
||||
district: filterDistrict.value,
|
||||
type: filterType.value
|
||||
};
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
loadSchools();
|
||||
};
|
||||
|
||||
// 加载学校列表
|
||||
const loadSchools = async () => {
|
||||
try {
|
||||
const params = buildQueryParams();
|
||||
const result = await fetchSchools(params);
|
||||
schools.value = result.list;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取学校列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载区县数据
|
||||
const loadDistricts = async () => {
|
||||
try {
|
||||
const result = await fetchDistricts();
|
||||
districtOptions.value = result;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取区县数据失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
loadSchools();
|
||||
};
|
||||
|
||||
// 添加学校
|
||||
const handleAddSchool = () => {
|
||||
currentSchool.value = undefined;
|
||||
schoolFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑学校
|
||||
const handleEditSchool = (school: School) => {
|
||||
currentSchool.value = school;
|
||||
schoolFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除学校
|
||||
const handleDeleteSchool = async (school: School) => {
|
||||
try {
|
||||
await deleteSchool(school.id);
|
||||
message.success('删除成功');
|
||||
loadSchools();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 添加年级
|
||||
const handleAddGrade = (schoolId: string) => {
|
||||
currentGrade.value = undefined;
|
||||
currentSchoolId.value = schoolId;
|
||||
gradeFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑年级
|
||||
const handleEditGrade = (grade: Grade) => {
|
||||
currentGrade.value = grade;
|
||||
currentSchoolId.value = grade.schoolId;
|
||||
gradeFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除年级
|
||||
const handleDeleteGrade = async (grade: Grade) => {
|
||||
try {
|
||||
await deleteGrade(grade.id);
|
||||
message.success('删除成功');
|
||||
loadSchools();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 添加班级
|
||||
const handleAddClass = (schoolId: string, gradeId: string) => {
|
||||
currentClass.value = undefined;
|
||||
currentSchoolId.value = schoolId;
|
||||
currentGradeId.value = gradeId;
|
||||
classFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑班级
|
||||
const handleEditClass = (cls: Class) => {
|
||||
currentClass.value = cls;
|
||||
currentSchoolId.value = cls.schoolId;
|
||||
currentGradeId.value = cls.gradeId;
|
||||
classFormVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除班级
|
||||
const handleDeleteClass = async (cls: Class) => {
|
||||
try {
|
||||
await deleteClass(cls.id);
|
||||
message.success('删除成功');
|
||||
loadSchools();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 表单提交成功
|
||||
const handleFormSuccess = () => {
|
||||
loadSchools();
|
||||
};
|
||||
|
||||
// 显示导入弹窗
|
||||
const showImportModal = () => {
|
||||
importModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 导入成功
|
||||
const handleImportSuccess = () => {
|
||||
loadSchools();
|
||||
};
|
||||
|
||||
// 导出模板
|
||||
const handleExportTemplate = async () => {
|
||||
try {
|
||||
const blob = await exportSchoolTemplate();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = '学校数据导入模板.xlsx';
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
message.success('模板下载成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '模板下载失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadSchools();
|
||||
loadDistricts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.school-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// margin-top: 24px; // 移除多余的margin
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 0;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.school-tree-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
padding: 16px;
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
|
||||
.search-section {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
571
src/views/schools/components/BatchImport.vue
Normal file
571
src/views/schools/components/BatchImport.vue
Normal file
@@ -0,0 +1,571 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
title="批量导入学校数据"
|
||||
:width="700"
|
||||
:confirm-loading="importing"
|
||||
:ok-button-props="{ disabled: !uploadFile }"
|
||||
@ok="handleImport"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="import-content">
|
||||
<!-- 导入说明 -->
|
||||
<a-alert
|
||||
message="导入说明"
|
||||
:description="importDescription"
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
style="margin-bottom: 24px;"
|
||||
/>
|
||||
|
||||
<!-- 步骤指引 -->
|
||||
<a-steps :current="currentStep" size="small" style="margin-bottom: 24px;">
|
||||
<a-step title="下载模板" description="下载Excel导入模板" />
|
||||
<a-step title="填写数据" description="按模板格式填写学校数据" />
|
||||
<a-step title="上传文件" description="选择并上传Excel文件" />
|
||||
<a-step title="确认导入" description="检查数据并开始导入" />
|
||||
</a-steps>
|
||||
|
||||
<!-- 模板下载区域 -->
|
||||
<div class="template-section">
|
||||
<h4>
|
||||
<DownloadOutlined style="color: #1890ff; margin-right: 8px;" />
|
||||
第一步：下载导入模板
|
||||
</h4>
|
||||
<p class="section-desc">请先下载标准模板，按照模板格式填写学校数据。</p>
|
||||
|
||||
<a-button
|
||||
type="primary"
|
||||
ghost
|
||||
:loading="downloadLoading"
|
||||
@click="handleDownloadTemplate"
|
||||
style="margin-bottom: 16px;"
|
||||
>
|
||||
<DownloadOutlined />
|
||||
下载Excel模板
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- 文件上传区域 -->
|
||||
<div class="upload-section">
|
||||
<h4>
|
||||
<UploadOutlined style="color: #52c41a; margin-right: 8px;" />
|
||||
第二步：上传填写好的Excel文件
|
||||
</h4>
|
||||
<p class="section-desc">支持.xlsx和.xls格式，文件大小不超过10MB。</p>
|
||||
|
||||
<a-upload-dragger
|
||||
v-model:file-list="fileList"
|
||||
:multiple="false"
|
||||
accept=".xlsx,.xls"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:max-count="1"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p class="ant-upload-hint">
|
||||
支持Excel格式（.xlsx, .xls），单个文件不超过10MB
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
|
||||
<!-- 文件信息 -->
|
||||
<div v-if="uploadFile" class="file-info">
|
||||
<a-card size="small">
|
||||
<template #title>
|
||||
<FileExcelOutlined style="color: #52c41a; margin-right: 8px;" />
|
||||
已选择文件
|
||||
</template>
|
||||
|
||||
<a-descriptions :column="2" size="small">
|
||||
<a-descriptions-item label="文件名">
|
||||
{{ uploadFile.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="文件大小">
|
||||
{{ formatFileSize(uploadFile.size) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="文件类型">
|
||||
{{ uploadFile.type || '未知' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="上传时间">
|
||||
{{ formatDate(new Date()) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- 导入选项 -->
|
||||
<div class="options-section">
|
||||
<h4>
|
||||
<SettingOutlined style="color: #fa8c16; margin-right: 8px;" />
|
||||
导入选项
|
||||
</h4>
|
||||
|
||||
<a-checkbox-group v-model:value="importOptions">
|
||||
<a-checkbox value="skipDuplicate">跳过重复数据（根据学校名称和区县判断）</a-checkbox>
|
||||
<a-checkbox value="updateExisting">更新已存在的学校信息</a-checkbox>
|
||||
<a-checkbox value="createGradesClasses">同时创建年级和班级信息</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- 导入进度 -->
|
||||
<div v-if="importProgress.show" class="progress-section">
|
||||
<a-divider />
|
||||
<h4>导入进度</h4>
|
||||
<a-progress
|
||||
:percent="importProgress.percent"
|
||||
:status="importProgress.status"
|
||||
:stroke-color="importProgress.color"
|
||||
/>
|
||||
<p class="progress-text">{{ importProgress.text }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 导入结果 -->
|
||||
<div v-if="importResult" class="result-section">
|
||||
<a-divider />
|
||||
<h4>导入结果</h4>
|
||||
|
||||
<a-result
|
||||
:status="importResult.success ? 'success' : 'warning'"
|
||||
:title="importResult.title"
|
||||
:sub-title="importResult.subtitle"
|
||||
>
|
||||
<template #extra>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="成功导入"
|
||||
:value="importResult.successCount"
|
||||
suffix="条"
|
||||
:value-style="{ color: '#52c41a' }"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="失败记录"
|
||||
:value="importResult.failCount"
|
||||
suffix="条"
|
||||
:value-style="{ color: '#f5222d' }"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="总计处理"
|
||||
:value="importResult.totalCount"
|
||||
suffix="条"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-result>
|
||||
|
||||
<!-- 失败详情 -->
|
||||
<div v-if="importResult.errors?.length" class="error-details">
|
||||
<a-collapse ghost>
|
||||
<a-collapse-panel key="errors" header="查看失败详情">
|
||||
<div class="error-list">
|
||||
<div v-for="(error, index) in importResult.errors" :key="index" class="error-item">
|
||||
<a-tag color="red">行 {{ error.row }}</a-tag>
|
||||
{{ error.message }}
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { UploadProps, UploadFile } from 'ant-design-vue';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
UploadOutlined,
|
||||
InboxOutlined,
|
||||
FileExcelOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { exportSchoolTemplate, importSchoolData } from '@/apis/schools';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
'update:visible': [visible: boolean];
|
||||
'success': [];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 数据定义
|
||||
const fileList = ref<UploadFile[]>([]);
|
||||
const uploadFile = ref<File>();
|
||||
const currentStep = ref(0);
|
||||
const importOptions = ref<string[]>(['skipDuplicate', 'createGradesClasses']);
|
||||
|
||||
// 导入进度
|
||||
const importProgress = reactive({
|
||||
show: false,
|
||||
percent: 0,
|
||||
status: 'normal' as 'success' | 'exception' | 'normal' | 'active',
|
||||
color: '#1890ff',
|
||||
text: ''
|
||||
});
|
||||
|
||||
// 导入结果
|
||||
interface ImportResult {
|
||||
success: boolean;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
successCount: number;
|
||||
failCount: number;
|
||||
totalCount: number;
|
||||
errors?: Array<{
|
||||
row: number;
|
||||
message: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
const importResult = ref<ImportResult>();
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
// 导入说明文本
|
||||
const importDescription = `
|
||||
1. 请按照标准模板格式填写学校数据，包含学校基本信息、年级和班级信息
|
||||
2. 学校名称和所属区县为必填项，其他信息可选填
|
||||
3. 年级层级请填写数字（1-12），对应小学1-6年级、初中7-9年级、高中10-12年级
|
||||
4. 班级名称请使用标准格式，如"一班"、"二班"等
|
||||
5. 导入前建议先备份现有数据
|
||||
`;
|
||||
|
||||
// 下载模板请求
|
||||
const { loading: downloadLoading, send: sendDownloadTemplate } = useRequest(
|
||||
() => exportSchoolTemplate(), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 导入数据请求
|
||||
const { loading: importing, send: sendImportData } = useRequest(
|
||||
(file: File) => importSchoolData(file), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(visible, (newVisible) => {
|
||||
if (newVisible) {
|
||||
resetState();
|
||||
}
|
||||
});
|
||||
|
||||
// 重置状态
|
||||
const resetState = () => {
|
||||
fileList.value = [];
|
||||
uploadFile.value = undefined;
|
||||
currentStep.value = 0;
|
||||
importProgress.show = false;
|
||||
importProgress.percent = 0;
|
||||
importResult.value = undefined;
|
||||
};
|
||||
|
||||
// 下载模板
|
||||
const handleDownloadTemplate = async () => {
|
||||
try {
|
||||
const blob = await sendDownloadTemplate();
|
||||
const url = window.URL.createObjectURL(blob as Blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = '学校数据导入模板.xlsx';
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
message.success('模板下载成功');
|
||||
currentStep.value = Math.max(currentStep.value, 1);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '模板下载失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 文件上传前处理
|
||||
const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
// 检查文件类型
|
||||
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
|
||||
file.type === 'application/vnd.ms-excel' ||
|
||||
file.name.endsWith('.xlsx') ||
|
||||
file.name.endsWith('.xls');
|
||||
|
||||
if (!isExcel) {
|
||||
message.error('只能上传Excel格式文件（.xlsx, .xls）');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查文件大小（10MB）
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过10MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
uploadFile.value = file;
|
||||
currentStep.value = Math.max(currentStep.value, 2);
|
||||
|
||||
// 阻止默认上传行为
|
||||
return false;
|
||||
};
|
||||
|
||||
// 移除文件
|
||||
const handleRemove = () => {
|
||||
uploadFile.value = undefined;
|
||||
currentStep.value = Math.max(currentStep.value - 1, 0);
|
||||
};
|
||||
|
||||
// 开始导入
|
||||
const handleImport = async () => {
|
||||
if (!uploadFile.value) {
|
||||
message.error('请先选择要导入的Excel文件');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
currentStep.value = 3;
|
||||
|
||||
// 显示进度
|
||||
importProgress.show = true;
|
||||
importProgress.percent = 0;
|
||||
importProgress.status = 'active';
|
||||
importProgress.text = '正在读取文件...';
|
||||
|
||||
// 模拟进度更新
|
||||
const progressTimer = setInterval(() => {
|
||||
if (importProgress.percent < 90) {
|
||||
importProgress.percent += 10;
|
||||
|
||||
if (importProgress.percent <= 30) {
|
||||
importProgress.text = '正在验证数据格式...';
|
||||
} else if (importProgress.percent <= 60) {
|
||||
importProgress.text = '正在处理学校数据...';
|
||||
} else if (importProgress.percent <= 90) {
|
||||
importProgress.text = '正在创建年级班级...';
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
|
||||
const result = await sendImportData(uploadFile.value);
|
||||
|
||||
// 清除进度定时器
|
||||
clearInterval(progressTimer);
|
||||
|
||||
// 完成进度
|
||||
importProgress.percent = 100;
|
||||
importProgress.status = 'success';
|
||||
importProgress.color = '#52c41a';
|
||||
importProgress.text = '导入完成！';
|
||||
|
||||
// 设置结果
|
||||
importResult.value = {
|
||||
success: result.failCount === 0,
|
||||
title: result.failCount === 0 ? '导入成功！' : '导入完成，部分数据失败',
|
||||
subtitle: `成功导入 ${result.successCount} 条记录${result.failCount > 0 ? `，${result.failCount} 条记录失败` : ''}`,
|
||||
successCount: result.successCount,
|
||||
failCount: result.failCount,
|
||||
totalCount: result.successCount + result.failCount,
|
||||
errors: [] // API可能返回详细错误信息
|
||||
};
|
||||
|
||||
if (result.successCount > 0) {
|
||||
emit('success');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
importProgress.status = 'exception';
|
||||
importProgress.color = '#f5222d';
|
||||
importProgress.text = '导入失败！';
|
||||
|
||||
importResult.value = {
|
||||
success: false,
|
||||
title: '导入失败',
|
||||
subtitle: error.message || '文件处理过程中发生错误',
|
||||
successCount: 0,
|
||||
failCount: 0,
|
||||
totalCount: 0
|
||||
};
|
||||
|
||||
message.error(error.message || '导入失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date: Date): string => {
|
||||
return format(date, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.import-content {
|
||||
.section-desc {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-section,
|
||||
.upload-section,
|
||||
.options-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: 16px;
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.options-section {
|
||||
:deep(.ant-checkbox-group) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
.progress-text {
|
||||
text-align: center;
|
||||
color: #8c8c8c;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-section {
|
||||
:deep(.ant-result-title) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:deep(.ant-result-subtitle) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-details {
|
||||
margin-top: 16px;
|
||||
|
||||
.error-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
.error-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
background: #fff2f0;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #ff4d4f;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传组件样式 */
|
||||
:deep(.ant-upload-drag) {
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
background: #f0f8ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 步骤条样式 */
|
||||
:deep(.ant-steps-item-finish) {
|
||||
.ant-steps-item-icon {
|
||||
background: #52c41a;
|
||||
border-color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ant-modal) {
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.result-section {
|
||||
:deep(.ant-col) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
390
src/views/schools/components/ClassForm.vue
Normal file
390
src/views/schools/components/ClassForm.vue
Normal file
@@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑班级' : '添加班级'"
|
||||
:width="500"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 24 }"
|
||||
:wrapper-col="{ span: 24 }"
|
||||
>
|
||||
<a-form-item label="班级名称" name="name">
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="例如：一班、二班、A班等"
|
||||
:maxlength="20"
|
||||
show-count
|
||||
>
|
||||
<template #prefix>
|
||||
<TeamOutlined style="color: #52c41a;" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="班主任姓名" name="teacherName">
|
||||
<a-input
|
||||
v-model:value="formData.teacherName"
|
||||
placeholder="请输入班主任姓名（可选）"
|
||||
:maxlength="20"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined style="color: #1890ff;" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 班级信息预览 -->
|
||||
<div class="class-preview">
|
||||
<a-divider orientation="left">班级信息预览</a-divider>
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="所属学校">
|
||||
<HomeOutlined style="color: #1890ff; margin-right: 8px;" />
|
||||
{{ getSchoolName() }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="所属年级">
|
||||
<BookOutlined style="color: #fa8c16; margin-right: 8px;" />
|
||||
{{ getGradeName() }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 编辑模式的额外信息 -->
|
||||
<div v-if="isEdit && classData" class="edit-info">
|
||||
<a-divider orientation="left">班级统计</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-statistic
|
||||
title="学生人数"
|
||||
:value="classData.studentCount || 0"
|
||||
suffix="人"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<TeamOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="create-time">
|
||||
<div class="label">创建时间</div>
|
||||
<div class="value">{{ formatDate(classData.createTime) }}</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 创建提示 -->
|
||||
<div v-if="!isEdit" class="create-tip">
|
||||
<a-alert
|
||||
message="创建提示"
|
||||
description="班级创建后，学生可以通过小程序选择该班级进行绑定。"
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import {
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
HomeOutlined,
|
||||
BookOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { createClass, updateClass, getSchoolDetail } from '@/apis/schools';
|
||||
import type { Class, CreateClassParams, School } from '@/apis/schools';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
class?: Class;
|
||||
schoolId: string;
|
||||
gradeId: string;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
'update:visible': [visible: boolean];
|
||||
'success': [];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<CreateClassParams>({
|
||||
schoolId: '',
|
||||
gradeId: '',
|
||||
name: '',
|
||||
teacherName: ''
|
||||
});
|
||||
|
||||
// 学校信息
|
||||
const school = ref<School>();
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
const isEdit = computed(() => !!props.class);
|
||||
const classData = computed(() => props.class);
|
||||
|
||||
// 表单验证规则
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [
|
||||
{ required: true, message: '请输入班级名称', trigger: 'blur' },
|
||||
{ min: 1, max: 20, message: '班级名称长度应在1-20个字符之间', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\s]+$/,
|
||||
message: '班级名称只能包含中文、字母、数字和空格',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
teacherName: [
|
||||
{ max: 20, message: '班主任姓名不能超过20个字符', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5a-zA-Z\s]*$/,
|
||||
message: '班主任姓名只能包含中文、字母和空格',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 创建班级请求
|
||||
const { loading: createLoading, send: sendCreateClass } = useRequest(
|
||||
(params: CreateClassParams) => createClass(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 更新班级请求
|
||||
const { loading: updateLoading, send: sendUpdateClass } = useRequest(
|
||||
(id: string, params: CreateClassParams) => updateClass(id, params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 获取学校详情
|
||||
const { send: fetchSchoolDetail } = useRequest((id: string) => getSchoolDetail(id), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
const loading = computed(() => createLoading.value || updateLoading.value);
|
||||
|
||||
// 监听props变化，初始化表单数据
|
||||
watch(() => [props.class, props.schoolId, props.gradeId], ([cls, schoolId, gradeId]) => {
|
||||
if (typeof schoolId === 'string') {
|
||||
formData.schoolId = schoolId;
|
||||
}
|
||||
if (typeof gradeId === 'string') {
|
||||
formData.gradeId = gradeId;
|
||||
}
|
||||
|
||||
if (cls && typeof cls === 'object' && 'id' in cls) {
|
||||
Object.assign(formData, {
|
||||
schoolId: cls.schoolId,
|
||||
gradeId: cls.gradeId,
|
||||
name: cls.name,
|
||||
teacherName: cls.teacherName || ''
|
||||
});
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(visible, async (newVisible) => {
|
||||
if (newVisible) {
|
||||
// 弹窗打开时
|
||||
if (!props.class) {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 加载学校信息
|
||||
if (props.schoolId) {
|
||||
try {
|
||||
school.value = await fetchSchoolDetail(props.schoolId);
|
||||
} catch (error: any) {
|
||||
console.error('获取学校信息失败:', error);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 弹窗关闭时清理验证状态
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
schoolId: props.schoolId,
|
||||
gradeId: props.gradeId,
|
||||
name: '',
|
||||
teacherName: ''
|
||||
});
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 获取学校名称
|
||||
const getSchoolName = (): string => {
|
||||
return school.value?.name || '未知学校';
|
||||
};
|
||||
|
||||
// 获取年级名称
|
||||
const getGradeName = (): string => {
|
||||
if (!school.value?.grades) return '未知年级';
|
||||
|
||||
const grade = school.value.grades.find(g => g.id === props.gradeId);
|
||||
return grade?.name || '未知年级';
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
|
||||
if (isEdit.value && props.class) {
|
||||
// 编辑模式
|
||||
await sendUpdateClass(props.class.id, formData);
|
||||
message.success('班级信息更新成功');
|
||||
} else {
|
||||
// 新建模式
|
||||
await sendCreateClass(formData);
|
||||
message.success('班级创建成功');
|
||||
}
|
||||
|
||||
emit('success');
|
||||
visible.value = false;
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
|
||||
message.error(error.message || `${isEdit.value ? '更新' : '创建'}失败`);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return format(date, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN });
|
||||
} catch (error) {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.class-preview,
|
||||
.edit-info {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.create-time {
|
||||
.label {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.create-tip {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
.ant-input-prefix {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 描述列表样式 */
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
font-weight: 500;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 统计数值样式 */
|
||||
:deep(.ant-statistic) {
|
||||
text-align: center;
|
||||
|
||||
.ant-statistic-title {
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.ant-statistic-content-value {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ant-statistic-content-suffix {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ant-modal) {
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.edit-info {
|
||||
:deep(.ant-col) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
374
src/views/schools/components/GradeForm.vue
Normal file
374
src/views/schools/components/GradeForm.vue
Normal file
@@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑年级' : '添加年级'"
|
||||
:width="500"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 24 }"
|
||||
:wrapper-col="{ span: 24 }"
|
||||
>
|
||||
<a-form-item label="年级名称" name="name">
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="例如：一年级、七年级、高一等"
|
||||
:maxlength="20"
|
||||
show-count
|
||||
>
|
||||
<template #prefix>
|
||||
<BookOutlined style="color: #1890ff;" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="年级层级" name="level">
|
||||
<a-select
|
||||
v-model:value="formData.level"
|
||||
placeholder="请选择年级层级"
|
||||
:options="levelOptions"
|
||||
>
|
||||
<template #suffixIcon>
|
||||
<NumberOutlined />
|
||||
</template>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 年级说明 -->
|
||||
<a-alert
|
||||
v-if="formData.level"
|
||||
:message="getLevelDescription(formData.level)"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px;"
|
||||
/>
|
||||
</a-form>
|
||||
|
||||
<!-- 预览信息 -->
|
||||
<div v-if="isEdit && grade" class="preview-section">
|
||||
<a-divider orientation="left">年级信息</a-divider>
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="所属学校">
|
||||
<BankOutlined style="color: #1890ff; margin-right: 8px;" />
|
||||
{{ getSchoolName() }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatDate(grade.createTime) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="班级数量">
|
||||
<a-statistic
|
||||
:value="grade.classes?.length || 0"
|
||||
suffix="个"
|
||||
:value-style="{ fontSize: '14px', color: '#52c41a' }"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 快速创建班级提示 -->
|
||||
<div v-if="!isEdit" class="quick-tip">
|
||||
<a-alert
|
||||
message="提示"
|
||||
description="年级创建成功后，您可以在学校管理页面为该年级添加班级。"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import {
|
||||
BookOutlined,
|
||||
NumberOutlined,
|
||||
BankOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { createGrade, updateGrade, getSchoolDetail } from '@/apis/schools';
|
||||
import type { Grade, CreateGradeParams, School } from '@/apis/schools';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
grade?: Grade;
|
||||
schoolId: string;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
'update:visible': [visible: boolean];
|
||||
'success': [];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<CreateGradeParams>({
|
||||
schoolId: '',
|
||||
name: '',
|
||||
level: 1
|
||||
});
|
||||
|
||||
// 学校信息
|
||||
const school = ref<School>();
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
const isEdit = computed(() => !!props.grade);
|
||||
|
||||
// 年级层级选项
|
||||
const levelOptions = computed(() => {
|
||||
const options = [];
|
||||
|
||||
// 小学阶段
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
options.push({
|
||||
label: `${i}年级（小学）`,
|
||||
value: i,
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
// 初中阶段
|
||||
for (let i = 7; i <= 9; i++) {
|
||||
options.push({
|
||||
label: `${i}年级（初中）`,
|
||||
value: i,
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
// 高中阶段
|
||||
for (let i = 10; i <= 12; i++) {
|
||||
options.push({
|
||||
label: `${i}年级（高中）`,
|
||||
value: i,
|
||||
disabled: false
|
||||
});
|
||||
}
|
||||
|
||||
return options;
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [
|
||||
{ required: true, message: '请输入年级名称', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '年级名称长度应在2-20个字符之间', trigger: 'blur' }
|
||||
],
|
||||
level: [
|
||||
{ required: true, message: '请选择年级层级', trigger: 'change' },
|
||||
{
|
||||
type: 'number',
|
||||
min: 1,
|
||||
max: 12,
|
||||
message: '年级层级应在1-12之间',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 创建年级请求
|
||||
const { loading: createLoading, send: sendCreateGrade } = useRequest(
|
||||
(params: CreateGradeParams) => createGrade(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 更新年级请求
|
||||
const { loading: updateLoading, send: sendUpdateGrade } = useRequest(
|
||||
(id: string, params: CreateGradeParams) => updateGrade(id, params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 获取学校详情
|
||||
const { send: fetchSchoolDetail } = useRequest((id: string) => getSchoolDetail(id), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
const loading = computed(() => createLoading.value || updateLoading.value);
|
||||
|
||||
// 监听props变化，初始化表单数据
|
||||
watch(() => [props.grade, props.schoolId], ([grade, schoolId]) => {
|
||||
formData.schoolId = schoolId;
|
||||
|
||||
if (grade) {
|
||||
Object.assign(formData, {
|
||||
schoolId: grade.schoolId,
|
||||
name: grade.name,
|
||||
level: grade.level
|
||||
});
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(visible, async (newVisible) => {
|
||||
if (newVisible) {
|
||||
// 弹窗打开时
|
||||
if (!props.grade) {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 加载学校信息
|
||||
if (props.schoolId) {
|
||||
try {
|
||||
school.value = await fetchSchoolDetail(props.schoolId);
|
||||
} catch (error: any) {
|
||||
console.error('获取学校信息失败:', error);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 弹窗关闭时清理验证状态
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
schoolId: props.schoolId,
|
||||
name: '',
|
||||
level: 1
|
||||
});
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 获取层级描述
|
||||
const getLevelDescription = (level: number): string => {
|
||||
if (level >= 1 && level <= 6) {
|
||||
return `小学阶段 - 适用于6-12岁儿童`;
|
||||
} else if (level >= 7 && level <= 9) {
|
||||
return `初中阶段 - 适用于12-15岁青少年`;
|
||||
} else if (level >= 10 && level <= 12) {
|
||||
return `高中阶段 - 适用于15-18岁青少年`;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 获取学校名称
|
||||
const getSchoolName = (): string => {
|
||||
return school.value?.name || '未知学校';
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
|
||||
if (isEdit.value && props.grade) {
|
||||
// 编辑模式
|
||||
await sendUpdateGrade(props.grade.id, formData);
|
||||
message.success('年级信息更新成功');
|
||||
} else {
|
||||
// 新建模式
|
||||
await sendCreateGrade(formData);
|
||||
message.success('年级创建成功');
|
||||
}
|
||||
|
||||
emit('success');
|
||||
visible.value = false;
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
|
||||
message.error(error.message || `${isEdit.value ? '更新' : '创建'}失败`);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return format(date, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN });
|
||||
} catch (error) {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.preview-section {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.quick-tip {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
.ant-input-prefix {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-select) {
|
||||
.ant-select-selector {
|
||||
.ant-select-selection-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 描述列表样式 */
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
font-weight: 500;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* 统计数值样式 */
|
||||
:deep(.ant-statistic) {
|
||||
.ant-statistic-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ant-statistic-content-value {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ant-modal) {
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
347
src/views/schools/components/SchoolForm.vue
Normal file
347
src/views/schools/components/SchoolForm.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="isEdit ? '编辑学校' : '添加学校'"
|
||||
:width="600"
|
||||
:confirm-loading="loading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
:label-col="{ span: 24 }"
|
||||
:wrapper-col="{ span: 24 }"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学校名称" name="name">
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入学校名称"
|
||||
:maxlength="50"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="学校类型" name="type">
|
||||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder="请选择学校类型"
|
||||
>
|
||||
<a-select-option value="primary">
|
||||
<BookOutlined style="color: #52c41a;" />
|
||||
小学
|
||||
</a-select-option>
|
||||
<a-select-option value="junior">
|
||||
<ReadOutlined style="color: #1890ff;" />
|
||||
初中
|
||||
</a-select-option>
|
||||
<a-select-option value="senior">
|
||||
<TrophyOutlined style="color: #722ed1;" />
|
||||
高中
|
||||
</a-select-option>
|
||||
<a-select-option value="vocational">
|
||||
<ToolOutlined style="color: #fa541c;" />
|
||||
职业学校
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="所属区县" name="district">
|
||||
<a-input
|
||||
v-model:value="formData.district"
|
||||
placeholder="请输入所属区县"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-input
|
||||
v-model:value="formData.phone"
|
||||
placeholder="请输入联系电话"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="学校地址" name="address">
|
||||
<a-input
|
||||
v-model:value="formData.address"
|
||||
placeholder="请输入学校详细地址"
|
||||
:maxlength="100"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="校长姓名" name="principal">
|
||||
<a-input
|
||||
v-model:value="formData.principal"
|
||||
placeholder="请输入校长姓名"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 预览信息 -->
|
||||
<div v-if="isEdit" class="preview-section">
|
||||
<a-divider orientation="left">学校信息预览</a-divider>
|
||||
<a-descriptions :column="2" bordered size="small">
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ formatDate(school?.createTime) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="最后更新">
|
||||
{{ formatDate(school?.updateTime) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="学生总数" :span="2">
|
||||
<a-statistic
|
||||
:value="school?.studentCount || 0"
|
||||
suffix="人"
|
||||
:value-style="{ fontSize: '14px', color: '#1890ff' }"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import {
|
||||
BookOutlined,
|
||||
ReadOutlined,
|
||||
TrophyOutlined,
|
||||
ToolOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { createSchool, updateSchool } from '@/apis/schools';
|
||||
import type { School, CreateSchoolParams } from '@/apis/schools';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
school?: School;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
'update:visible': [visible: boolean];
|
||||
'success': [];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<CreateSchoolParams>({
|
||||
name: '',
|
||||
type: 'primary',
|
||||
district: '',
|
||||
address: '',
|
||||
principal: '',
|
||||
phone: ''
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
const isEdit = computed(() => !!props.school);
|
||||
|
||||
// 表单验证规则
|
||||
const rules: Record<string, Rule[]> = {
|
||||
name: [
|
||||
{ required: true, message: '请输入学校名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '学校名称长度应在2-50个字符之间', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择学校类型', trigger: 'change' }
|
||||
],
|
||||
district: [
|
||||
{ required: true, message: '请输入所属区县', trigger: 'blur' },
|
||||
{ max: 20, message: '区县名称不能超过20个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
|
||||
message: '请输入正确的手机号或固定电话',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
address: [
|
||||
{ max: 100, message: '地址不能超过100个字符', trigger: 'blur' }
|
||||
],
|
||||
principal: [
|
||||
{ max: 20, message: '校长姓名不能超过20个字符', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 创建学校请求
|
||||
const { loading: createLoading, send: sendCreateSchool } = useRequest((params: CreateSchoolParams) =>
|
||||
createSchool(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 更新学校请求
|
||||
const { loading: updateLoading, send: sendUpdateSchool } = useRequest(
|
||||
(id: string, params: CreateSchoolParams) => updateSchool(id, params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
const loading = computed(() => createLoading.value || updateLoading.value);
|
||||
|
||||
// 监听props变化，初始化表单数据
|
||||
watch(() => props.school, (school) => {
|
||||
if (school) {
|
||||
Object.assign(formData, {
|
||||
name: school.name,
|
||||
type: school.type,
|
||||
district: school.district,
|
||||
address: school.address || '',
|
||||
principal: school.principal || '',
|
||||
phone: school.phone || ''
|
||||
});
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(visible, (newVisible) => {
|
||||
if (newVisible) {
|
||||
// 弹窗打开时，如果是新建模式则重置表单
|
||||
if (!props.school) {
|
||||
resetForm();
|
||||
}
|
||||
} else {
|
||||
// 弹窗关闭时清理验证状态
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
type: 'primary',
|
||||
district: '',
|
||||
address: '',
|
||||
principal: '',
|
||||
phone: ''
|
||||
});
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
|
||||
if (isEdit.value && props.school) {
|
||||
// 编辑模式
|
||||
await sendUpdateSchool(props.school.id, formData);
|
||||
message.success('学校信息更新成功');
|
||||
} else {
|
||||
// 新建模式
|
||||
await sendCreateSchool(formData);
|
||||
message.success('学校创建成功');
|
||||
}
|
||||
|
||||
emit('success');
|
||||
visible.value = false;
|
||||
} catch (error: any) {
|
||||
if (error.errorFields) {
|
||||
// 表单验证错误
|
||||
return;
|
||||
}
|
||||
|
||||
message.error(error.message || `${isEdit.value ? '更新' : '创建'}失败`);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消操作
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return format(date, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN });
|
||||
} catch (error) {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.preview-section {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-select-selection-item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-show-count-suffix) {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 描述列表样式 */
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
font-weight: 500;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* 统计数值样式 */
|
||||
:deep(.ant-statistic) {
|
||||
.ant-statistic-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ant-statistic-content-value {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ant-modal) {
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
:deep(.ant-col) {
|
||||
span: 24 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
549
src/views/schools/components/SchoolTree.vue
Normal file
549
src/views/schools/components/SchoolTree.vue
Normal file
@@ -0,0 +1,549 @@
|
||||
<template>
|
||||
<div class="school-tree">
|
||||
<div v-if="!data.length && !loading" class="empty-state">
|
||||
<a-empty
|
||||
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
|
||||
:image-style="{ height: '100px' }"
|
||||
description="暂无学校数据"
|
||||
>
|
||||
<template #description>
|
||||
<span style="color: #8c8c8c">暂无学校数据，请添加学校或调整筛选条件</span>
|
||||
</template>
|
||||
</a-empty>
|
||||
</div>
|
||||
|
||||
<div v-else class="tree-content">
|
||||
<div v-for="school in data" :key="school.id" class="school-item">
|
||||
<!-- 学校卡片 -->
|
||||
<a-card class="school-card" :hoverable="true">
|
||||
<template #title>
|
||||
<div class="school-header">
|
||||
<div class="school-info">
|
||||
<HomeOutlined class="school-icon" />
|
||||
<span class="school-name">{{ school.name }}</span>
|
||||
<a-tag :color="getSchoolTypeColor(school.type)" size="small" class="type-tag">
|
||||
{{ getSchoolTypeText(school.type) }}
|
||||
</a-tag>
|
||||
<a-tag color="geekblue" size="small">{{ school.district }}</a-tag>
|
||||
</div>
|
||||
<div class="school-actions">
|
||||
<a-dropdown :trigger="['click']" placement="bottomRight">
|
||||
<a-button size="small" type="text">
|
||||
<MoreOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="add-grade" @click="$emit('addGrade', school.id)">
|
||||
<PlusOutlined />
|
||||
添加年级
|
||||
</a-menu-item>
|
||||
<a-menu-item key="edit" @click="$emit('editSchool', school)">
|
||||
<EditOutlined />
|
||||
编辑学校
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="delete" danger @click="handleDeleteSchool(school)">
|
||||
<DeleteOutlined />
|
||||
删除学校
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<div class="school-stats">
|
||||
<a-statistic
|
||||
title="学生总数"
|
||||
:value="school.studentCount || 0"
|
||||
:value-style="{ fontSize: '16px' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 学校基本信息 -->
|
||||
<div class="school-details">
|
||||
<div v-if="school.address" class="detail-item">
|
||||
<EnvironmentOutlined />
|
||||
<span>{{ school.address }}</span>
|
||||
</div>
|
||||
<div v-if="school.principal" class="detail-item">
|
||||
<UserOutlined />
|
||||
<span>校长：{{ school.principal }}</span>
|
||||
</div>
|
||||
<div v-if="school.phone" class="detail-item">
|
||||
<PhoneOutlined />
|
||||
<span>{{ school.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年级列表 -->
|
||||
<div v-if="school.grades?.length" class="grades-section">
|
||||
<a-divider orientation="left">年级班级</a-divider>
|
||||
<div class="grades-container">
|
||||
<div v-for="grade in school.grades" :key="grade.id" class="grade-item">
|
||||
<a-card size="small" class="grade-card">
|
||||
<template #title>
|
||||
<div class="grade-header">
|
||||
<div class="grade-info">
|
||||
<BookOutlined class="grade-icon" />
|
||||
<span class="grade-name">{{ grade.name }}</span>
|
||||
<a-tag size="small" color="orange">{{ grade.level }}年级</a-tag>
|
||||
</div>
|
||||
<div class="grade-actions">
|
||||
<a-dropdown :trigger="['click']" placement="bottomRight">
|
||||
<a-button size="small" type="text">
|
||||
<MoreOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="add-class" @click="$emit('addClass', school.id, grade.id)">
|
||||
<PlusOutlined />
|
||||
添加班级
|
||||
</a-menu-item>
|
||||
<a-menu-item key="edit" @click="$emit('editGrade', grade)">
|
||||
<EditOutlined />
|
||||
编辑年级
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="delete" danger @click="handleDeleteGrade(grade)">
|
||||
<DeleteOutlined />
|
||||
删除年级
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 班级列表 -->
|
||||
<div v-if="grade.classes?.length" class="classes-container">
|
||||
<div v-for="cls in grade.classes" :key="cls.id" class="class-item">
|
||||
<a-tag
|
||||
:color="getClassColor(cls.id)"
|
||||
class="class-tag"
|
||||
@click="handleClassClick(cls)"
|
||||
>
|
||||
<TeamOutlined />
|
||||
{{ cls.name }}
|
||||
<span v-if="cls.studentCount" class="student-count">
|
||||
({{ cls.studentCount }}人)
|
||||
</span>
|
||||
<span v-if="cls.teacherName" class="teacher-name">
|
||||
- {{ cls.teacherName }}
|
||||
</span>
|
||||
|
||||
<a-dropdown :trigger="['click']" @click.stop>
|
||||
<MoreOutlined class="class-more" />
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="edit" @click="$emit('editClass', cls)">
|
||||
<EditOutlined />
|
||||
编辑班级
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="delete" danger @click="handleDeleteClass(cls)">
|
||||
<DeleteOutlined />
|
||||
删除班级
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无班级提示 -->
|
||||
<div v-else class="no-classes">
|
||||
<a-button
|
||||
type="dashed"
|
||||
size="small"
|
||||
@click="$emit('addClass', school.id, grade.id)"
|
||||
style="width: 100%"
|
||||
>
|
||||
<PlusOutlined />
|
||||
添加班级
|
||||
</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无年级提示 -->
|
||||
<div v-else class="no-grades">
|
||||
<a-empty
|
||||
:image="simpleImage"
|
||||
:image-style="{ height: '40px' }"
|
||||
description="暂无年级"
|
||||
>
|
||||
<a-button type="primary" size="small" @click="$emit('addGrade', school.id)">
|
||||
<PlusOutlined />
|
||||
添加年级
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import {
|
||||
HomeOutlined,
|
||||
BookOutlined,
|
||||
TeamOutlined,
|
||||
MoreOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EnvironmentOutlined,
|
||||
UserOutlined,
|
||||
PhoneOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { School, Grade, Class } from '@/apis/schools';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
data: School[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
addGrade: [schoolId: string];
|
||||
addClass: [schoolId: string, gradeId: string];
|
||||
editSchool: [school: School];
|
||||
editGrade: [grade: Grade];
|
||||
editClass: [cls: Class];
|
||||
deleteSchool: [school: School];
|
||||
deleteGrade: [grade: Grade];
|
||||
deleteClass: [cls: Class];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 简单图标（用于空状态）
|
||||
const simpleImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02NCA5NkM4MC4xNjA0IDk2IDkzIDgzLjE2MDQgOTMgNjdTODAuMTYwNCAzOCA2NCAzOFMzNSA1MC44Mzk2IDM1IDY3UzQ3LjgzOTYgOTYgNjQgOTZaIiBzdHJva2U9IiNEOUQ5RDkiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K';
|
||||
|
||||
// 获取学校类型颜色
|
||||
const getSchoolTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
primary: 'green',
|
||||
junior: 'blue',
|
||||
senior: 'purple',
|
||||
vocational: 'orange'
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 获取学校类型文本
|
||||
const getSchoolTypeText = (type: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
primary: '小学',
|
||||
junior: '初中',
|
||||
senior: '高中',
|
||||
vocational: '职校'
|
||||
};
|
||||
return textMap[type] || '未知';
|
||||
};
|
||||
|
||||
// 获取班级颜色（基于ID生成固定颜色）
|
||||
const getClassColor = (classId: string) => {
|
||||
const colors = ['blue', 'green', 'orange', 'red', 'purple', 'cyan', 'geekblue', 'magenta'];
|
||||
const hash = classId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
return colors[hash % colors.length];
|
||||
};
|
||||
|
||||
// 处理班级点击
|
||||
const handleClassClick = (cls: Class) => {
|
||||
console.log('班级点击:', cls);
|
||||
// 可以在这里添加班级详情查看逻辑
|
||||
};
|
||||
|
||||
// 删除学校确认
|
||||
const handleDeleteSchool = (school: School) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除学校',
|
||||
content: `确定要删除学校"${school.name}"吗？此操作将同时删除该学校下的所有年级和班级，且不可恢复。`,
|
||||
okText: '确定删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
emit('deleteSchool', school);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 删除年级确认
|
||||
const handleDeleteGrade = (grade: Grade) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除年级',
|
||||
content: `确定要删除年级"${grade.name}"吗？此操作将同时删除该年级下的所有班级，且不可恢复。`,
|
||||
okText: '确定删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
emit('deleteGrade', grade);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 删除班级确认
|
||||
const handleDeleteClass = (cls: Class) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除班级',
|
||||
content: `确定要删除班级"${cls.name}"吗？此操作不可恢复。`,
|
||||
okText: '确定删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
emit('deleteClass', cls);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.school-tree {
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.tree-content {
|
||||
.school-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.school-card {
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.school-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.school-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
.school-icon {
|
||||
color: #1890ff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.school-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.school-actions {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.school-details {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grades-section {
|
||||
.grades-container {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.grade-card {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 2px 8px rgba(64, 169, 255, 0.15);
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
min-height: auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.grade-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.grade-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
|
||||
.grade-icon {
|
||||
color: #fa8c16;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grade-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classes-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.class-item {
|
||||
.class-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.student-count {
|
||||
opacity: 0.8;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.teacher-name {
|
||||
opacity: 0.7;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.class-more {
|
||||
margin-left: 4px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-classes {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.no-grades {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.school-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
.school-info {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.school-actions {
|
||||
margin-left: 0;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.grades-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grade-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
.grade-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.classes-container {
|
||||
.class-item .class-tag {
|
||||
.teacher-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/views/users/UserPage.vue
Normal file
355
src/views/users/UserPage.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="user-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">用户管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 搜索和筛选栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="search-section">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索学生姓名或家长手机号"
|
||||
style="width: 300px"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterSchool"
|
||||
placeholder="选择学校"
|
||||
style="width: 150px; margin-left: 8px"
|
||||
allow-clear
|
||||
show-search
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="school in schoolOptions" :key="school.id" :value="school.id">
|
||||
{{ school.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterGrade"
|
||||
placeholder="年级"
|
||||
style="width: 100px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="grade in gradeOptions" :key="grade.id" :value="grade.id">
|
||||
{{ grade.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-select
|
||||
v-model:value="filterClass"
|
||||
placeholder="班级"
|
||||
style="width: 120px; margin-left: 8px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-select-option v-for="cls in classOptions" :key="cls.id" :value="cls.id">
|
||||
{{ cls.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<div class="action-section">
|
||||
<a-button @click="handleRefresh">
|
||||
<ReloadOutlined/>
|
||||
刷新
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户列表 -->
|
||||
<UserList
|
||||
:loading="loading"
|
||||
:data-source="users"
|
||||
:pagination="pagination"
|
||||
@view-detail="handleViewDetail"
|
||||
@unbind="handleUnbind"
|
||||
@disable="handleDisable"
|
||||
@enable="handleEnable"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 用户详情弹窗 -->
|
||||
<UserDetailModal
|
||||
v-model:visible="detailVisible"
|
||||
:user="currentUser"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, reactive, onMounted} from 'vue';
|
||||
import {message, Modal} from 'ant-design-vue';
|
||||
import {ReloadOutlined} from '@ant-design/icons-vue';
|
||||
import {useRequest} from 'alova/client';
|
||||
import {getUserList, unbindParentStudent, disableUser, enableUser} from '@/apis/users';
|
||||
import {getSchoolList} from '@/apis/schools';
|
||||
import type {AppUser, UserQueryParams} from '@/apis/users';
|
||||
import type {School} from '@/apis/schools';
|
||||
|
||||
// 导入子组件
|
||||
import UserList from './components/UserList.vue';
|
||||
import UserDetailModal from './components/UserDetailModal.vue';
|
||||
|
||||
// 搜索筛选参数
|
||||
const searchKeyword = ref('');
|
||||
const filterSchool = ref<string>();
|
||||
const filterGrade = ref<string>();
|
||||
const filterClass = ref<string>();
|
||||
|
||||
// 列表数据
|
||||
const users = ref<AppUser[]>([]);
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`
|
||||
});
|
||||
|
||||
// 详情弹窗
|
||||
const detailVisible = ref(false);
|
||||
const currentUser = ref<AppUser>();
|
||||
|
||||
// 筛选选项
|
||||
const schoolOptions = ref<School[]>([]);
|
||||
const gradeOptions = ref<any[]>([]);
|
||||
const classOptions = ref<any[]>([]);
|
||||
|
||||
// 获取用户列表
|
||||
const {loading, send: fetchUsers} = useRequest((params: UserQueryParams) => getUserList(params), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 获取学校列表（用于筛选）
|
||||
const {send: fetchSchools} = useRequest(() => getSchoolList(), {
|
||||
immediate: false
|
||||
});
|
||||
|
||||
// 构建查询参数
|
||||
const buildQueryParams = (): UserQueryParams => {
|
||||
return {
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
keyword: searchKeyword.value || undefined,
|
||||
schoolId: filterSchool.value,
|
||||
gradeId: filterGrade.value,
|
||||
classId: filterClass.value
|
||||
};
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
loadUsers();
|
||||
};
|
||||
|
||||
// 加载用户列表
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const params = buildQueryParams();
|
||||
const result = await fetchUsers(params);
|
||||
|
||||
users.value = result.list;
|
||||
pagination.total = result.total;
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取用户列表失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 加载学校数据
|
||||
const loadSchools = async () => {
|
||||
try {
|
||||
const result = await fetchSchools();
|
||||
schoolOptions.value = result.list;
|
||||
|
||||
// 提取年级和班级选项
|
||||
const grades = new Map();
|
||||
const classes = new Map();
|
||||
|
||||
result.list.forEach(school => {
|
||||
if (school.grades) {
|
||||
school.grades.forEach(grade => {
|
||||
grades.set(grade.id, {
|
||||
id: grade.id,
|
||||
name: grade.name,
|
||||
schoolId: grade.schoolId
|
||||
});
|
||||
|
||||
if (grade.classes) {
|
||||
grade.classes.forEach(cls => {
|
||||
classes.set(cls.id, {
|
||||
id: cls.id,
|
||||
name: cls.name,
|
||||
gradeId: cls.gradeId,
|
||||
schoolId: cls.schoolId
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
gradeOptions.value = Array.from(grades.values());
|
||||
classOptions.value = Array.from(classes.values());
|
||||
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取学校数据失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (user: AppUser) => {
|
||||
currentUser.value = user;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 解绑用户
|
||||
const handleUnbind = (user: AppUser) => {
|
||||
Modal.confirm({
|
||||
title: '确认解绑',
|
||||
content: `确定要解绑家长"${user.nickname || user.phone}"与学生"${user.studentName}"的关系吗？`,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await unbindParentStudent(user.id);
|
||||
message.success('解绑成功');
|
||||
loadUsers();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '解绑失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 禁用用户
|
||||
const handleDisable = (user: AppUser) => {
|
||||
Modal.confirm({
|
||||
title: '确认禁用',
|
||||
content: `确定要禁用用户"${user.nickname || user.phone}"吗？禁用后该用户将无法正常使用小程序。`,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await disableUser(user.id);
|
||||
message.success('禁用成功');
|
||||
loadUsers();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '禁用失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 启用用户
|
||||
const handleEnable = (user: AppUser) => {
|
||||
Modal.confirm({
|
||||
title: '确认启用',
|
||||
content: `确定要启用用户"${user.nickname || user.phone}"吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await enableUser(user.id);
|
||||
message.success('启用成功');
|
||||
loadUsers();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '启用失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
loadUsers();
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
loadUsers();
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadUsers();
|
||||
loadSchools();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-page {
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
// margin-top: 24px; // 移除多余的margin
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.search-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 0;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
|
||||
.search-section {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
373
src/views/users/components/UserDetailModal.vue
Normal file
373
src/views/users/components/UserDetailModal.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:open="visible"
|
||||
title="用户详细信息"
|
||||
:width="800"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div v-if="user" class="user-detail">
|
||||
<!-- 用户基本信息 -->
|
||||
<a-card title="基本信息" class="detail-card">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<div class="avatar-section">
|
||||
<a-avatar :src="user.avatar" :size="80" class="user-avatar">
|
||||
{{ user.nickname?.[0] || user.phone?.slice(-4) }}
|
||||
</a-avatar>
|
||||
<div class="status-badge">
|
||||
<a-tag :color="getStatusColor(user.status || 'active')">
|
||||
{{ getStatusText(user.status || 'active') }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<a-descriptions :column="2" bordered>
|
||||
<a-descriptions-item label="用户昵称">
|
||||
{{ user.nickname || '未设置' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="手机号码">
|
||||
{{ user.phone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="微信OpenID">
|
||||
<a-typography-text code copyable>{{ user.openid }}</a-typography-text>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="用户ID">
|
||||
<a-typography-text code copyable>{{ user.id }}</a-typography-text>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="注册时间">
|
||||
{{ formatDate(user.createTime) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="最后更新">
|
||||
{{ formatDate(user.updateTime) }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 学生信息 -->
|
||||
<a-card title="学生信息" class="detail-card">
|
||||
<div v-if="user.studentName">
|
||||
<a-descriptions :column="2" bordered>
|
||||
<a-descriptions-item label="学生姓名">
|
||||
{{ user.studentName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="学生ID">
|
||||
<a-typography-text code copyable>{{ user.studentId }}</a-typography-text>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="座位号">
|
||||
{{ user.studentSeatNumber || '未设置' }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="绑定状态">
|
||||
<a-tag color="green">已绑定</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
<div v-else class="no-student">
|
||||
<a-empty
|
||||
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
|
||||
:image-style="{ height: '60px' }"
|
||||
description="该用户未绑定学生信息"
|
||||
>
|
||||
<template #description>
|
||||
<span style="color: #8c8c8c">该用户未绑定学生信息</span>
|
||||
</template>
|
||||
</a-empty>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 学校班级信息 -->
|
||||
<a-card title="学校班级" class="detail-card">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="学校名称">
|
||||
<div class="school-item">
|
||||
<BankOutlined style="color: #1890ff; margin-right: 8px;" />
|
||||
{{ user.schoolName }}
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="年级班级">
|
||||
<div class="grade-class-item">
|
||||
<TeamOutlined style="color: #52c41a; margin-right: 8px;" />
|
||||
{{ user.gradeName }} {{ user.className }}
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="学校ID">
|
||||
<a-typography-text code copyable>{{ user.schoolId }}</a-typography-text>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
|
||||
<!-- 学习统计 -->
|
||||
<a-card title="学习统计" class="detail-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="总得分"
|
||||
:value="user.totalScore"
|
||||
:value-style="{ color: '#f5222d' }"
|
||||
suffix="分"
|
||||
>
|
||||
<template #prefix>
|
||||
<TrophyOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="答题次数"
|
||||
:value="user.answerCount"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
suffix="次"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-statistic
|
||||
title="平均得分"
|
||||
:value="user.answerCount > 0 ? Math.round(user.totalScore / user.answerCount * 100) / 100 : 0"
|
||||
:precision="2"
|
||||
:value-style="{ color: '#52c41a' }"
|
||||
suffix="分"
|
||||
>
|
||||
<template #prefix>
|
||||
<BarChartOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<div class="last-answer-info">
|
||||
<div class="info-label">
|
||||
<ClockCircleOutlined style="margin-right: 8px;" />
|
||||
最后答题时间
|
||||
</div>
|
||||
<div class="info-value">
|
||||
{{ user.lastAnswerTime ? formatDate(user.lastAnswerTime) : '暂无记录' }}
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-else class="loading-state">
|
||||
<a-spin size="large">
|
||||
<div class="loading-content">加载用户信息中...</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
BankOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined,
|
||||
EditOutlined,
|
||||
BarChartOutlined,
|
||||
ClockCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { AppUser } from '@/apis/users';
|
||||
import { format } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
user?: AppUser | null;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
'update:visible': [visible: boolean];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 计算属性
|
||||
const visible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
});
|
||||
|
||||
// 关闭弹窗
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return format(date, 'yyyy-MM-dd HH:mm:ss', { locale: zhCN });
|
||||
} catch (error) {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
active: 'green',
|
||||
disabled: 'red',
|
||||
pending: 'orange'
|
||||
};
|
||||
return statusMap[status] || 'default';
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
active: '正常',
|
||||
disabled: '已禁用',
|
||||
pending: '待激活'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-detail {
|
||||
.detail-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
background: #fafafa;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
text-align: center;
|
||||
|
||||
.user-avatar {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.no-student {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.school-item,
|
||||
.grade-class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.last-answer-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
.info-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300px;
|
||||
|
||||
.loading-content {
|
||||
margin-top: 16px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
/* 描述列表样式优化 */
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item-label {
|
||||
font-weight: 500;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
:deep(.ant-statistic) {
|
||||
.ant-statistic-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
.ant-statistic-content-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ant-modal) {
|
||||
margin: 16px;
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
.detail-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions) {
|
||||
.ant-descriptions-item {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.last-answer-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
363
src/views/users/components/UserList.vue
Normal file
363
src/views/users/components/UserList.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="user-list">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
row-key="id"
|
||||
@change="handleTableChange"
|
||||
:scroll="{ x: 1200 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'user'">
|
||||
<div class="user-info">
|
||||
<a-avatar :src="record.avatar" :size="40" class="user-avatar">
|
||||
{{ record.nickname?.[0] || record.phone?.slice(-4) }}
|
||||
</a-avatar>
|
||||
<div class="user-details">
|
||||
<div class="nickname">{{ record.nickname || '未设置昵称' }}</div>
|
||||
<div class="phone">{{ record.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'student'">
|
||||
<div v-if="record.studentName" class="student-info">
|
||||
<div class="student-name">{{ record.studentName }}</div>
|
||||
<div class="seat-number" v-if="record.studentSeatNumber">
|
||||
座位号: {{ record.studentSeatNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="no-student">未绑定学生</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'school'">
|
||||
<div class="school-info">
|
||||
<div class="school-name">{{ record.schoolName }}</div>
|
||||
<div class="class-info">
|
||||
{{ record.gradeName }} {{ record.className }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'stats'">
|
||||
<div class="stats-info">
|
||||
<div class="score">总分: <span class="score-value">{{ record.totalScore }}</span></div>
|
||||
<div class="count">答题: {{ record.answerCount }}次</div>
|
||||
<div class="last-time" v-if="record.lastAnswerTime">
|
||||
最后答题: {{ formatTime(record.lastAnswerTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="action-buttons">
|
||||
<a-button type="link" size="small" @click="$emit('viewDetail', record)">
|
||||
<EyeOutlined />
|
||||
查看详情
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
v-if="record.studentName"
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
@click="$emit('unbind', record)"
|
||||
>
|
||||
<DisconnectOutlined />
|
||||
解绑
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
:danger="record.status === 'active'"
|
||||
@click="record.status === 'active' ? $emit('disable', record) : $emit('enable', record)"
|
||||
>
|
||||
<template v-if="record.status === 'active'">
|
||||
<StopOutlined />
|
||||
禁用
|
||||
</template>
|
||||
<template v-else>
|
||||
<PlayCircleOutlined />
|
||||
启用
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
EyeOutlined,
|
||||
DisconnectOutlined,
|
||||
StopOutlined,
|
||||
PlayCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { AppUser } from '@/apis/users';
|
||||
import type { TableColumnsType, TableProps } from 'ant-design-vue';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { zhCN } from 'date-fns/locale';
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
dataSource: AppUser[];
|
||||
loading?: boolean;
|
||||
pagination?: any;
|
||||
}
|
||||
|
||||
// 事件定义
|
||||
interface Emits {
|
||||
viewDetail: [user: AppUser];
|
||||
unbind: [user: AppUser];
|
||||
disable: [user: AppUser];
|
||||
enable: [user: AppUser];
|
||||
pageChange: [page: number, pageSize: number];
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 表格列配置
|
||||
const columns = computed<TableColumnsType>(() => [
|
||||
{
|
||||
title: '用户信息',
|
||||
dataIndex: 'user',
|
||||
key: 'user',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '学生信息',
|
||||
dataIndex: 'student',
|
||||
key: 'student',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '学校班级',
|
||||
dataIndex: 'school',
|
||||
key: 'school',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '答题统计',
|
||||
dataIndex: 'stats',
|
||||
key: 'stats',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 120,
|
||||
render: (text: string) => formatTime(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
fixed: 'right'
|
||||
}
|
||||
]);
|
||||
|
||||
// 处理表格变化
|
||||
const handleTableChange: TableProps['onChange'] = (pag) => {
|
||||
if (pag?.current && pag?.pageSize) {
|
||||
emit('pageChange', pag.current, pag.pageSize);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr: string) => {
|
||||
if (!timeStr) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(timeStr);
|
||||
return formatDistanceToNow(date, {
|
||||
locale: zhCN,
|
||||
addSuffix: true
|
||||
});
|
||||
} catch (error) {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
active: 'green',
|
||||
disabled: 'red',
|
||||
pending: 'orange'
|
||||
};
|
||||
return statusMap[status] || 'default';
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
active: '正常',
|
||||
disabled: '已禁用',
|
||||
pending: '待激活'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-list {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.ant-table) {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.user-avatar {
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.nickname {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
.student-name {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.seat-number {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.no-student {
|
||||
color: #8c8c8c;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.school-info {
|
||||
.school-name {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.class-info {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
.score {
|
||||
margin-bottom: 2px;
|
||||
|
||||
.score-value {
|
||||
font-weight: 600;
|
||||
color: #f5222d;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.last-time {
|
||||
font-size: 11px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
.ant-btn {
|
||||
padding: 0 4px;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
|
||||
&:hover {
|
||||
background: rgba(24, 144, 255, 0.08);
|
||||
}
|
||||
|
||||
&.ant-btn-dangerous:hover {
|
||||
background: rgba(255, 77, 79, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.user-info {
|
||||
.user-details .nickname {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-details .phone {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.ant-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
src/vite-env.d.ts
vendored
Normal file
23
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
|
||||
declare interface ImportMetaEnv {
|
||||
readonly VITE_APP_BASE_API: string;
|
||||
readonly VITE_API_BASE_URL: string;
|
||||
readonly VITE_NODE_ENV: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
|
||||
declare module '*.vue' {
|
||||
import type {DefineComponent} from 'vue';
|
||||
const component: DefineComponent<object, object, any>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@": [
|
||||
"src"
|
||||
],
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
25
tsconfig.node.json
Normal file
25
tsconfig.node.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
86
vite.config.ts
Normal file
86
vite.config.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import {defineConfig, loadEnv} from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import * as path from 'path';
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers';
|
||||
|
||||
|
||||
export default defineConfig(({mode}: { mode: string }): object => {
|
||||
const env: Record<string, string> = loadEnv(mode, process.cwd());
|
||||
return {
|
||||
publicDir: 'public',
|
||||
base: '/',
|
||||
resolve: {
|
||||
//设置别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
worker: {
|
||||
format: 'es'
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
dts: true,
|
||||
dirs: ['src/components', 'src/views'],
|
||||
resolvers: [
|
||||
AntDesignVueResolver({
|
||||
importStyle: false,
|
||||
resolveIcons: true
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
api: "modern-compiler",
|
||||
javascriptEnabled: true,
|
||||
additionalData: `@use "@/assets/styles/index.scss";`
|
||||
},
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
esbuild: {
|
||||
drop: env.VITE_NODE_ENV === 'production' ? ['console', 'debugger'] : [],
|
||||
},
|
||||
build: {
|
||||
outDir: "dist", // 指定输出路径
|
||||
assetsDir: "assets", // 指定生成静态文件目录
|
||||
assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
minify: "esbuild", // 指定使用哪种混淆器
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 15000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
rollupOptions: { // 自定义底层的 Rollup 打包配置
|
||||
output: {
|
||||
format: 'es',
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]',// 资源文件像 字体，图片等
|
||||
},
|
||||
}
|
||||
},
|
||||
server: {
|
||||
proxy: env.VITE_NODE_ENV === 'development' ? {} : {
|
||||
[env.VITE_APP_BASE_API]: {
|
||||
//后端接口的baseurl
|
||||
target: env.VITE_API_BASE_URL,
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
rewrite: (path: string) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
)
|
||||
;
|
||||
Reference in New Issue
Block a user