Compare commits

...

57 Commits

Author SHA1 Message Date
DevOps
b67a1e039c feat: 移除项目编码手动输入
- 项目编码由后端自动生成
- 移除表单中的项目编码输入框和验证规则

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-08 17:19:33 +08:00
DevOps
c7e78612bf feat: 添加单位统计API调用
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-08 16:08:47 +08:00
DevOps
49c1cd81c6 重构项3: 添加表号生成和显示功能
- 在编排页面项目头部添加表号显示
- 实现generateTableNo方法,格式为: 场地(1位)+时段(1位)+序号(2位)
- 时段规则: 上午=1, 下午=2
- 序号在同场地同时段中按id排序确定

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-08 15:46:48 +08:00
DevOps
420bd29eff 重构项1: 移除项目管理中的场地分配功能
- 移除表格中的所属场地列
- 移除表单中的场地选择字段
- 移除场地相关的API导入和数据定义
- 移除handleCompetitionChangeInForm、loadVenuesForProjects、getVenueName等函数
- 后端已实现动态场地分配,无需前端指定

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-08 15:37:07 +08:00
DevOps
a1b26208a4 feat: 赛事管理页面状态根据时间自动计算
- 添加 calculateStatus 方法根据报名时间和比赛时间计算状态
- 状态显示不再依赖数据库字段,而是实时计算

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-07 12:28:07 +08:00
DevOps
41c67e1ddf fix: 将订单管理改为赛事管理
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-07 11:58:03 +08:00
DevOps
e5b028f084 fix: 修复场地类型(venueType)加载和保存问题
- 在loadVenues中添加venueType字段映射,确保从后端加载时正确回显
- 在saveVenues中添加venueType字段,确保保存时正确提交
- 修复附件上传headers认证问题

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-06 15:17:28 +08:00
DevOps
6385acd43b fix(deduction): 修复扣分项编辑功能
- form对象添加itemName字段解决编辑时名称不显示
- 查询时过滤空字符串参数避免无数据问题
- 字段名deductionPoints改为deductionPoint与后端一致
2026-01-06 14:56:10 +08:00
DevOps
c37b6d8f6f fix(competition): 修复附件上传按钮失灵问题
- 添加 getToken 导入
- 为 avue-form 上传组件添加 Blade-Auth headers 认证

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-06 12:52:28 +08:00
DevOps
98c831eff0 fix: 修复报名详情页面文案和统计逻辑
- 修正错误文案: 单位型号人数 → 报名人数, 剩下显时(公共) → 预计时长(分钟)
- 重新设计参赛人数统计表格: 单位/单人项目/集体项目/男/女/合计
- 修复统计逻辑按项目类型和性别正确统计

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-06 11:47:56 +08:00
DevOps
586ad7e66e fix: 移除项目列表中的参赛人数限制列
- 从competition/index.vue移除参赛人数限制列
- 从competition/create.vue移除参赛人数限制列
- 该功能已不再使用

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-06 10:59:51 +08:00
DevOps
8656aa5abc feat(project): add venue selection for project management
- Add venueId field to project form
- Load venue list when competition is selected
- Allow assigning projects to specific venues

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-05 15:59:09 +08:00
DevOps
c1f5acb644 Revert "feat(judgeInvite): add project assignment editing feature"
This reverts commit ecd569337d.
2026-01-05 15:20:01 +08:00
DevOps
ecd569337d feat(judgeInvite): add project assignment editing feature
- Add edit projects button in judge invite list
- Add edit projects dialog with project multi-select
- Add updateInviteProjects API method
- Fix: load project list before opening edit dialog

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-01-05 15:08:04 +08:00
DevOps
be8b887a1c feat(judgeInvite): 增加场地过滤条件 2025-12-31 16:20:50 +08:00
DevOps
6a5b220f6e fix(project): 将最大参赛人数改为单位容纳人数,用于编排分组计算 2025-12-30 16:55:20 +08:00
DevOps
8f14a165e5 fix(project): 移除项目编辑/新增页面的报名时间字段 2025-12-30 16:48:56 +08:00
DevOps
21fc12b18d feat(schedule): 前端支持动态时间段配置
- 添加 getScheduleConfig API 调用
- 更新 generateTimeSlots 从后端获取时间配置
- 添加 loadScheduleConfig 和 formatTimeForDisplay 方法
- 时间段不再硬编码,从 ScheduleConfig 动态获取
2025-12-30 10:51:28 +08:00
DevOps
21274e9639 fix(schedule): 修复markPlayerAsException重复定义导致的事件绑定问题 2025-12-29 17:28:03 +08:00
DevOps
564374250b fix(api): 修复updateCheckInStatus API路径 2025-12-29 15:42:43 +08:00
DevOps
77c2c51d8a fix(schedule): 修复展开选手详情中的异常状态持久化API调用
- markPlayerAsException方法添加updateCheckInStatus API调用
- removePlayerException方法添加updateCheckInStatus API调用
- 添加编排完成状态检查
2025-12-29 15:33:19 +08:00
DevOps
578b94aa39 feat: add estimated duration field and exception status persistence
- Add estimatedDuration field to project form with validation
- Add estimatedDuration column to project table
- Add updateCheckInStatus API for exception status persistence
- Call backend API when marking/removing exception status
2025-12-29 15:08:29 +08:00
DevOps
a9b82d7aae docs: 更新README,简化内容并更新域名 2025-12-29 14:21:48 +08:00
DevOps
f412a9c759 fix: 项目管理表格显示所属赛事名称 2025-12-29 13:24:14 +08:00
Developer
0b9f107b2a fix: 修复项目编辑时报名费字段映射问题 2025-12-29 11:48:03 +08:00
DevOps
5bbe374ebf fix: 修复项目管理页面编辑项目API调用错误
- 将updateProject改为submitProject,后端submit接口同时支持新增和修改
2025-12-29 11:21:55 +08:00
DevOps
39ff98e6c0 fix: 修复项目管理页面新增项目API调用错误
- 将addProject改为submitProject,匹配后端API端点/martial/project/submit
2025-12-29 11:16:13 +08:00
DevOps
f1c2501afc 裁判邀请表格添加负责场地列
- 显示裁判负责的场地名称
- 总裁显示"全部场地"

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-12-29 10:32:46 +08:00
DevOps
657c4210a4 添加总裁(裁判长)角色支持到裁判邀请和评委管理页面
- judgeInvite/index.vue: 添加总裁选项和显示
- referee/index.vue: 添加总裁筛选和显示

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-12-28 20:06:08 +08:00
DevOps
a98b18275f feat: 添加项目类型筛选和显示功能
- 添加项目类型下拉筛选框(套路/散打/器械/对练)
- 在表格中添加项目类型列
- 支持项目类型查询参数
2025-12-28 19:03:48 +08:00
DevOps
6267d87b18 fix: 修复项目管理页面筛选功能
- 将分组类别从下拉框改为文本输入框,支持模糊搜索
- 移除项目类型筛选(后端不支持该字段)
- 修复handleReset中的缩进问题
2025-12-28 17:28:18 +08:00
DevOps
67ffd4fc23 fix: 移除赛事筛选的 status 限制,显示所有赛事
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-12-28 17:12:18 +08:00
DevOps
6befd3644a fix: 修复项目管理页面数据显示问题
- 修复 API 响应数据解析 (res.data.data.records)
- 移除后端不支持的 eventType 参数
- 修复报名费字段映射 (registrationFee -> price)
- 修复分组类别显示为文本而非数字

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-12-28 17:09:38 +08:00
DevOps
a6768c394a fix: change participantType to type to match backend field name
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-12-28 16:37:31 +08:00
DevOps
ac7587ef7e refactor: 裁判角色名称修改 - 裁判长→主裁判, 普通裁判→裁判员
- 修改referee/index.vue中的UI显示文字
- 修改judgeInvite/index.vue中的UI显示文字
- 更新referee.js中的注释

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 11:37:29 +08:00
DevOps
4f1d0b5888 feat(judgeInvite): 移除项目分配功能,裁判默认负责整个场地所有项目
- 移除导入裁判时的项目选择下拉框
- 移除项目必选验证
- 不传projects参数,后端自动获取场地所有项目

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-26 16:35:27 +08:00
DevOps
cc6fabe576 feat: 裁判邀请导入功能添加场地和项目选择
- 导入对话框添加场地下拉选择
- 导入对话框添加项目多选
- 调用API时传递venueId和projects参数

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-26 15:45:10 +08:00
04cd85cbe3 fix bugs 2025-12-26 13:15:26 +08:00
c12fb79444 Merge branch 'main' of git.waypeak.work:martial/martial-web 2025-12-26 11:06:52 +08:00
1744adcf92 fix bugs 2025-12-26 11:06:38 +08:00
DevOps
7f8c5c630b 修复导出功能:正确处理blob响应
- axios拦截器跳过blob类型响应的code检查
- 从res.data获取blob数据而非res

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 13:58:21 +08:00
DevOps
694b955cef 实现赛程表导出功能
- 添加 exportSchedule API 调用后端导出接口
- 实现 handleExport 方法,支持下载 Excel 文件
- 文件名格式:赛程表_赛事名称.xlsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 13:45:09 +08:00
DevOps
ea4650b912 场地Tab添加场地过滤功能
- 添加场地按钮列表,支持切换不同场地
- 新增 selectedVenueIdForVenueTab 状态变量
- 修改 venueData 计算属性支持按场地过滤
- 初始化时默认选中第一个场地

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 13:34:35 +08:00
DevOps
e035647b51 feat: 竞赛分组页面项目支持折叠,默认收起
- 点击项目头部可展开/收起队伍列表
- 默认所有项目收起,方便管理多个项目
- 添加展开图标指示当前状态

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 12:55:55 +08:00
DevOps
352727b4fb feat: 竞赛分组页面添加队伍展开功能,显示选手签到状态和异常标记
- 点击队伍行可展开显示选手详情
- 显示选手签到状态:未签到/已签到/异常
- 支持标记异常和取消异常操作
- 优化评分页面代码

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-24 12:49:33 +08:00
DevOps
5e75688e13 feat: 赛程编排表格按队伍分组显示选手
Some checks are pending
continuous-integration/drone/push Build is pending
- 将同一单位的选手合并为一个队伍行
- 多选手队伍可展开查看具体选手
- 队伍状态根据所有选手状态计算(已签到/未签到/部分签到/部分异常)
- 上移/下移操作移动整个队伍
- 异常标记:单人队伍在主行标记,多人队伍需展开后标记单个选手
- 修复语法错误(转义字符和字符串引号)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-23 17:17:34 +08:00
DevOps
226d92f725 fix: 修复P2和P3问题
Some checks failed
continuous-integration/drone/push Build was killed
1. P2: 修复订单管理this.$set不兼容Vue3问题,改为直接赋值
2. P3: 修复选手年龄显示-1问题,改为显示"--"

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-22 13:25:38 +08:00
DevOps
3d314fe84f chore: 更新package-lock.json
All checks were successful
continuous-integration/drone/push Build is passing
🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-19 14:44:37 +08:00
179f7ea85d Merge branch 'main' of git.waypeak.work:martial/martial-web
All checks were successful
continuous-integration/drone/push Build is passing
2025-12-17 09:31:23 +08:00
d8730cc2c2 fix bugs 2025-12-17 09:31:14 +08:00
Developer
96f3b56eff fix: 修复 API 代理路径,去掉多余的 /api 前缀
All checks were successful
continuous-integration/drone/push Build is passing
🤖 Generated with Claude Code
2025-12-13 23:11:31 +08:00
1a99a45729 fix bugs
All checks were successful
continuous-integration/drone/push Build is passing
2025-12-13 09:34:06 +08:00
669f29878b fix bugs
All checks were successful
continuous-integration/drone/push Build is passing
2025-12-12 17:54:40 +08:00
5b806e29b7 fix bugs
Some checks failed
continuous-integration/drone/push Build is failing
2025-12-11 16:56:19 +08:00
ab69968bda 修改前端页面
Some checks failed
continuous-integration/drone/push Build is failing
2025-12-03 13:51:22 +08:00
aa6facf13a fix bugs
All checks were successful
continuous-integration/drone/push Build is passing
2025-11-30 12:15:21 +08:00
4e26a5089c fix bugs 2025-11-30 12:14:27 +08:00
109 changed files with 38310 additions and 3492 deletions

View File

@@ -1,8 +1,37 @@
{
"permissions": {
"allow": [
"Bash(./mysql:*)",
"Bash(find:*)",
"Bash(npm run dev:*)",
"Bash(dir:*)",
"Bash(npm run build:*)"
"Bash(where:*)",
"Bash(ls:*)",
"Bash(move schedule-system-complete-guide.md scheduleschedule-complete-guide.md)",
"Bash(tree:*)",
"Bash(bash:*)",
"Bash(curl:*)",
"Bash(grep:*)",
"Bash(mvn clean compile:*)",
"Bash(mvn clean package:*)",
"Bash(mvn package:*)",
"Bash(findstr:*)",
"Bash(python:*)",
"Bash(mysql:*)",
"Bash(netstat:*)",
"Bash(taskkill:*)",
"Bash(powershell -Command:*)",
"Bash(mvn spring-boot:run:*)",
"Bash(timeout /t 2)",
"Bash(ping:*)",
"Bash(mvn compile:*)",
"Bash(timeout /t 25)",
"Bash(git checkout:*)",
"Bash(timeout /t 5)",
"Bash(paste:*)",
"Bash(cp:*)",
"Bash(tasklist:*)",
"Bash(node:*)"
],
"deny": [],
"ask": []

292
README.md
View File

@@ -1,270 +1,72 @@
# 武术赛事通 - 前端项目
# 武术赛事管理系统 - 管理后台
基于 Vue 3 + Vite + Element Plus 构建
基于 Vue 3 + Vite + Element Plus 构建的武术比赛管理后台。
## 🌐 在线访问
## 在线访问
- **生产环境**: https://martial.johnsion.club
- **后端 API**: https://martial-api.johnsion.club
- **API 文档**: https://martial-doc.johnsion.club
| 服务 | 地址 |
|------|------|
| 管理后台 | https://martial-admin.aitisai.com |
| 后端 API | https://martial-api.aitisai.com |
## 📦 技术栈
## 技术栈
- **框架**: Vue 3.4 (Composition API)
- **构建工具**: Vite 5
- **UI 组件**: Element Plus
- **表单/表格**: Avue
- **HTTP 库**: Axios
- **路由**: Vue Router 4
- **UI 组件**: Element Plus + Avue
- **状态管理**: Vuex 4
- **样式**: Sass/SCSS
- **路由**: Vue Router 4
## 📁 项目结构
## 快速开始
```bash
# 安装依赖
npm install
# 开发环境
npm run dev
# 构建生产版本
npm run build
```
访问 http://localhost:8083
## 项目结构
```
martial-web/
├── src/
│ ├── main.js # 应用入口
│ ├── App.vue # 根组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── views/ # 页面组件
│ ├── components/ # 通用组件
│ ├── views/martial/ # 武术业务页面
│ ├── competition/ # 赛事管理
│ ├── project/ # 项目管理
│ ├── participant/ # 参赛选手
│ ├── judgeInvite/ # 裁判邀请
│ ├── score/ # 评分管理
│ │ └── ...
│ ├── api/ # API 接口
── utils/ # 工具函数
├── public/ # 静态资源
── router/ # 路由配置
│ └── store/ # 状态管理
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
── vite.config.js # Vite 配置
├── nginx.conf # Nginx 配置(生产环境容器使用)
├── Dockerfile # 完整构建 Dockerfile
├── Dockerfile.deploy # 部署 Dockerfile
└── .drone.yml # Drone CI/CD 配置
── vite.config.js # Vite 配置
```
## 🚀 本地开发
### 环境要求
- Node.js >= 18
- npm >= 9
### 安装依赖
## Docker 部署
```bash
npm install
docker build -t martial-web .
docker run -d -p 8083:80 martial-web
```
### 开发运行
## 相关仓库
```bash
npm run dev
```
| 仓库 | 说明 |
|------|------|
| [martial-master](https://git.waypeak.work/martial/martial-master) | 后端 API |
| [martial-mini](https://git.waypeak.work/martial/martial-mini) | 用户端小程序 |
| [martial-admin-mini](https://git.waypeak.work/martial/martial-admin-mini) | 裁判端小程序 |
访问 http://localhost:5173
---
### 生产构建
```bash
npm run build
```
构建产物在 `dist/` 目录
### 预览生产构建
```bash
npm run serve
```
## 🐳 Docker 部署
### 方法一:完整构建(开发/测试)
```bash
docker build -t martial/frontend:latest -f Dockerfile .
docker run -d -p 80:80 martial/frontend:latest
```
### 方法二:部署已构建产物(生产推荐)
```bash
# 先本地构建
npm run build
# 使用 Dockerfile.deploy 轻量化部署
docker build -t martial/frontend:latest -f Dockerfile.deploy .
# 运行容器
docker run -d \
--name martial-frontend \
--restart always \
-p 5173:80 \
--network martial_martial-network \
-e TZ=Asia/Shanghai \
martial/frontend:latest
```
## 🔄 CI/CD 自动部署
项目使用 Drone CI/CD 进行自动化部署。
### 部署流程
当推送到 `main` 分支时,自动触发:
1. **安装依赖** - `npm install`
2. **构建项目** - `npm run build`
3. **传输文件** - SCP 上传 dist、Dockerfile.deploy、nginx.conf 到服务器
4. **构建镜像** - 在服务器上执行 `docker build -f Dockerfile.deploy`
5. **部署容器** - 停止旧容器,启动新容器
6. **健康检查** - 验证服务可访问
### 查看构建状态
访问 https://martial-ci.johnsion.club
## ⚙️ 配置说明
### 环境变量
**开发环境** (`.env.development`)
```env
VITE_APP_API=/api # API 前缀(开发时走 Vite 代理)
```
**生产环境** (`.env.production`)
```env
VITE_APP_API= # 留空(因为 BladeX 端点路径已完整)
```
### Nginx 配置
生产环境 nginx 配置(`nginx.conf`
```nginx
# 前端路由Vue Router history 模式)
location / {
try_files $uri $uri/ /index.html;
}
# API 代理到后端(通过宿主机网关地址)
location /blade-auth/ {
proxy_pass http://172.21.0.1:8123/blade-auth/;
}
location /blade-system/ {
proxy_pass http://172.21.0.1:8123/blade-system/;
}
location /api/ {
proxy_pass http://172.21.0.1:8123/api/;
}
```
### Vite 配置
开发环境代理配置(`vite.config.js`
```js
server: {
proxy: {
'/api': {
target: 'http://localhost:8123',
changeOrigin: true
}
}
}
```
## 🔧 常见问题
### 问题1: "No endpoint POST /api/blade-auth/oauth/token"
**原因**: 错误配置 `VITE_APP_API``/api` 前缀,导致请求 `/api/blade-auth/oauth/token`
**解决**: 检查 `.env.production``VITE_APP_API=`(留空)
### 问题2: 容器启动报 "host not found in upstream martial-backend"
**原因**: nginx.conf 中使用 Docker 服务名 `martial-backend`,但容器无法解析
**解决**: 使用宿主机网关地址 `172.21.0.1:8123` 代替
### 问题3: 端口 80 占用
**原因**: 宿主机 Caddy 已占用 80 端口
**解决**: 前端容器使用其他端口(如 5173由 Caddy 反向代理
## 📝 开发规范
### 代码风格
- 使用 ESLint + Prettier
- 遵循 Vue 3 组合式 API 最佳实践
- 组件命名使用PascalCase
- 文件命名使用kebab-case
### Git 提交规范
```
feat: 新功能
fix: 修复 Bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
perf: 性能优化
test: 测试相关
chore: 构建/工具配置
```
## 🏗️ 生产架构
### 部署拓扑
```
互联网
Cloudflare CDN
Caddy (80/443端口自动 HTTPS)
martial.johnsion.club → localhost:5173 (前端 Nginx 容器)
├── 静态文件 → 直接返回 Vue 应用
└── /blade-auth, /blade-system, /api → 代理到后端 172.21.0.1:8123
```
### 网络架构
```
Docker Network: martial_martial-network (bridge)
├── martial-frontend (172.21.0.x) - 端口映射 5173:80
├── martial-mysql (172.21.0.x) - 端口映射 33066:3306
└── martial-redis (172.21.0.x) - 端口映射 63379:6379
宿主机:
├── Caddy (80/443) - 反向代理服务
├── Java 后端 (8123) - martial-master 应用
└── Drone CI/CD (8080) - 自动化部署
```
## 🔐 安全考虑
- 生产环境启用 HTTPS 证书Caddy 自动签发)
- API 接口通过 Nginx 代理,隔离后端
- 敏感配置通过 Drone Secrets 管理
- 容器间网络隔离,仅暴露必要端口
## 📚 相关链接
- [后端仓库](https://git.waypeak.work/martial/martial-master)
- [BladeX 框架](https://bladex.cn)
- [Vue 3 文档](https://cn.vuejs.org/)
- [Element Plus](https://element-plus.org/)
- [Vite 文档](https://vitejs.dev/)
## 👥 贡献者
- **开发者**: JohnSion
- **AI 助手**: Claude Code
**最后更新**: 2024-12-29

127
doc/README.md Normal file
View File

@@ -0,0 +1,127 @@
# 武术赛事管理系统 - 文档中心
> 本目录包含项目的所有技术文档,按模块和版本组织
## 📁 文档目录结构
```
doc/
├── README.md # 文档中心首页(本文件)
├── schedule/ # 编排模块文档
│ ├── README.md # 编排模块文档索引
│ ├── schedule-complete-guide.md # 编排系统完整指南(最新版本)
│ ├── versions/ # 历史版本
│ │ ├── v1.0/
│ │ │ └── schedule-complete-guide-v1.0.md
│ │ ├── v1.1/
│ │ │ └── schedule-complete-guide-v1.1.md
│ │ └── CHANGELOG.md # 版本更新日志
│ └── archive/ # 已废弃的旧文档
│ ├── schedule-system-analysis.md
│ ├── schedule-system-design.md
│ └── ...
├── registration/ # 报名模块文档
│ ├── README.md
│ └── registration-performance-optimization.md
├── image/ # 文档图片资源
│ └── ...
└── templates/ # 文档模板
└── feature-doc-template.md
```
## 📚 主要文档
### 编排模块
| 文档名称 | 版本 | 更新日期 | 说明 |
|---------|------|----------|------|
| [编排系统完整指南](./schedule/schedule-complete-guide.md) | v1.0 | 2025-12-10 | **主文档** - 编排系统的完整技术方案 |
| [编排模块索引](./schedule/README.md) | - | 2025-12-10 | 编排模块所有文档的导航 |
### 报名模块
| 文档名称 | 版本 | 更新日期 | 说明 |
|---------|------|----------|------|
| [报名性能优化](./registration/registration-performance-optimization.md) | v1.0 | 2025-12-10 | 报名功能的性能优化方案 |
## 🔄 文档版本管理规范
### 版本号规则
- **主版本号 (Major)**: 重大功能变更或架构调整,如 v1.0 → v2.0
- **次版本号 (Minor)**: 功能新增或优化,如 v1.0 → v1.1
- **修订号 (Patch)**: 文档修正、补充说明,如 v1.0.1 → v1.0.2
### 版本更新流程
1. **修改文档内容**
- 直接在主文档中修改(如 `schedule-complete-guide.md`
- 更新文档头部的版本信息和更新日志
2. **发布新版本**
- 将当前主文档复制到 `versions/vX.X/` 目录
- 更新 `versions/CHANGELOG.md` 记录变更
- 更新模块的 `README.md` 索引
3. **归档废弃文档**
- 将不再维护的旧文档移到 `archive/` 目录
- 在文档顶部添加 **已废弃** 标记
### 示例
```bash
# 当前版本: v1.0
doc/schedule/schedule-complete-guide.md
# 发布 v1.1 版本
1. 复制 schedule-complete-guide.md → versions/v1.0/schedule-complete-guide-v1.0.md
2. 修改 schedule-complete-guide.md 内容(版本号改为 v1.1
3. 更新 versions/CHANGELOG.md
4. 更新 schedule/README.md
```
## 📝 文档编写规范
### 文档命名
- 使用小写字母和连字符
- 格式: `{模块名}-{文档类型}.md`
- 例如: `schedule-complete-guide.md`, `registration-api-spec.md`
### 文档头部信息
每个文档都应包含以下头部信息:
```markdown
# 文档标题
> **版本**: vX.X.X
> **创建日期**: YYYY-MM-DD
> **最后更新**: YYYY-MM-DD
> **文档作者**: 作者名
> **状态**: 草稿 / 审核中 / 已发布 / 已废弃
```
### 文档目录
- 使用 `## 目录` 章节
- 每个一级标题对应一个锚点
- 保持目录结构清晰
## 🔗 相关资源
- [项目Git仓库](https://github.com/your-org/martial-system)
- [API接口文档](http://localhost:8123/doc.html)
- [数据库文档](./database/schema.md)
- [开发规范](./development-standards.md)
## 📧 文档反馈
如发现文档问题或有改进建议,请:
1. 提交 Issue: [GitHub Issues](https://github.com/your-org/martial-system/issues)
2. 联系开发团队: dev@example.com
---
**文档中心最后更新**: 2025-12-10

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

View File

@@ -0,0 +1,21 @@
# 报名模块文档
> 本目录包含报名模块的相关技术文档
## 📚 文档列表
### 性能优化
- **[报名性能优化方案](./registration-performance-optimization.md)** - v1.0
- 最后更新2025-12-10
- 状态:已发布
- 简介:报名功能的性能优化技术方案
## 🔗 相关文档
- [项目文档中心](../README.md)
- [编排模块文档](../schedule/README.md)
---
**最后更新**: 2025-12-10

View File

@@ -0,0 +1,418 @@
# 报名详情页面性能优化
## 问题描述
用户反馈:点击报名详情页面时出现大批量 API 调用,导致页面加载缓慢。
## 原问题分析
### 原实现方式的性能问题
在 [index.vue](d:\workspace\31.比赛项目\project\martial-web\src\views\martial\registration\index.vue) 页面的 `mounted()` 钩子中,同时调用了 4 个数据加载方法:
```javascript
mounted() {
this.competitionId = this.$route.query.competitionId
if (this.competitionId) {
this.loadCompetitionInfo(this.competitionId)
this.loadRegistrationStats() // 方法1
this.loadParticipantsStats() // 方法2
this.loadProjectTimeStats() // 方法3
this.loadAmountStats() // 方法4
}
}
```
**存在的严重性能问题**
### 1. 重复查询参赛者列表4 次 API 调用)
四个方法都独立调用 `getParticipantList` API
- `loadRegistrationStats()` → 调用 1 次 `getParticipantList`
- `loadParticipantsStats()` → 调用 1 次 `getParticipantList`
- `loadProjectTimeStats()` → 调用 1 次 `getParticipantList`
- `loadAmountStats()` → 调用 1 次 `getParticipantList`
**总计4 次相同的 API 调用**,每次返回几千条数据!
### 2. 循环调用项目详情 APIN × 3 次)
三个方法都需要查询项目详情,每个方法独立循环调用 `getProjectDetail`
```javascript
// loadRegistrationStats() 中
for (const athlete of participants) {
const projectId = athlete.projectId || athlete.project_id
if (projectId && !projectIds.has(projectId)) {
projectIds.add(projectId)
const projectRes = await getProjectDetail(projectId) // 第1轮调用
// ...
}
}
// loadProjectTimeStats() 中
for (const [projectId, athleteList] of projectMap) {
const projectRes = await getProjectDetail(projectId) // 第2轮调用重复
// ...
}
// loadAmountStats() 中
if (!stat.projectPrices.has(projectId)) {
const projectRes = await getProjectDetail(projectId) // 第3轮调用重复
// ...
}
```
**假设场景**:一个赛事有 20 个不同项目
- `loadRegistrationStats()` 调用 20 次 `getProjectDetail`
- `loadProjectTimeStats()` 再调用 20 次 `getProjectDetail`
- `loadAmountStats()` 又调用 20 次 `getProjectDetail`
**总计60 次 `getProjectDetail` API 调用!**
### 3. 总体性能开销
对于一个有 **20 个项目、500 名参赛者** 的赛事:
| API | 调用次数 | 单次数据量 | 总开销 |
|-----|---------|-----------|--------|
| `getParticipantList` | **4 次** | 500 条记录 | **2000 条记录传输** |
| `getProjectDetail` | **60 次** | 1 条记录 | 60 次网络往返 |
| `getCompetitionDetail` | 1 次 | 1 条记录 | 1 次网络往返 |
**总计65 次 API 调用!**
假设每次 API 调用平均耗时 50ms
- 总耗时 = 65 × 50ms = **3.25 秒**
- 加上数据处理和渲染 ≈ **4-5 秒**
用户体验极差!
## 优化方案
### 核心思路:缓存 + 批量加载
1. **缓存参赛者列表**:只调用一次 `getParticipantList`,所有方法共享同一份数据
2. **缓存项目信息**:只调用一次每个项目的 `getProjectDetail`,使用 Map 存储
3. **批量并行加载**:一次性并行加载所有项目信息,而不是串行循环
### 实现细节
#### 1. 添加缓存数据结构
```javascript
data() {
return {
// ...其他数据
projectCache: new Map(), // 项目信息缓存
participantsCache: null // 参赛者列表缓存
}
}
```
#### 2. 统一的参赛者获取方法(带缓存)
```javascript
// 统一获取参赛者列表(带缓存)
async getParticipants() {
if (this.participantsCache !== null) {
return this.participantsCache // 从缓存返回
}
try {
const res = await getParticipantList(this.competitionId, 1, 10000)
const participants = res.data?.data?.records || res.data?.data || []
this.participantsCache = participants // 存入缓存
return participants
} catch (err) {
console.error('查询参赛者列表失败:', err)
return []
}
}
```
#### 3. 统一的项目信息获取方法(带缓存)
```javascript
// 统一的项目信息获取方法(带缓存)
async getProjectInfo(projectId) {
if (!projectId) return null
// 先从缓存中查找
if (this.projectCache.has(projectId)) {
return this.projectCache.get(projectId)
}
// 缓存中没有则调用API
try {
const projectRes = await getProjectDetail(projectId)
const projectInfo = projectRes.data?.data
if (projectInfo) {
this.projectCache.set(projectId, projectInfo) // 存入缓存
return projectInfo
}
} catch (err) {
console.error(`查询项目${projectId}详情失败:`, err)
}
return null
}
```
#### 4. 批量预加载项目信息
```javascript
// 批量预加载项目信<E79BAE><E4BFA1>一次性并行加载所有需要的项目
async preloadProjectInfo(participants) {
const projectIds = new Set()
participants.forEach(p => {
const projectId = p.projectId || p.project_id
if (projectId && !this.projectCache.has(projectId)) {
projectIds.add(projectId)
}
})
// 并行加载所有项目信息
if (projectIds.size > 0) {
const promises = Array.from(projectIds).map(id => this.getProjectInfo(id))
await Promise.all(promises) // 并行执行,不是串行!
}
}
```
#### 5. 修改各个加载方法使用缓存
**loadRegistrationStats()** - 预加载所有项目:
```javascript
async loadRegistrationStats() {
const participants = await this.getParticipants() // 使用缓存
this.competitionInfo.totalParticipants = participants.length
// 一次性并行加载所有项目信息
await this.preloadProjectInfo(participants)
// 从缓存中获取价格
let totalAmount = 0
const projectIds = new Set()
for (const athlete of participants) {
const projectId = athlete.projectId || athlete.project_id
if (projectId && !projectIds.has(projectId)) {
projectIds.add(projectId)
const project = this.projectCache.get(projectId) // 从缓存读取
if (project) {
totalAmount += parseFloat(project.price || 0)
}
}
}
this.competitionInfo.totalAmount = totalAmount.toFixed(2)
}
```
**loadParticipantsStats()** - 直接使用缓存:
```javascript
async loadParticipantsStats() {
const participants = await this.getParticipants() // 从缓存读取
// 按单位分组统计...
}
```
**loadProjectTimeStats()** - 从缓存读取项目信息:
```javascript
async loadProjectTimeStats() {
const participants = await this.getParticipants() // 从缓存读取
// 按项目分组
const projectMap = new Map()
participants.forEach(athlete => {
// ...分组逻辑
})
// 从缓存中获取项目信息不再调用API
const projectStats = []
for (const [projectId, athleteList] of projectMap) {
const project = this.projectCache.get(projectId) // 从缓存读取
if (project) {
projectStats.push({
projectName: project.projectName || project.project_name || '未知项目',
// ...其他字段
})
}
}
this.projectTimeData = projectStats
}
```
**loadAmountStats()** - 从缓存读取价格:
```javascript
async loadAmountStats() {
const participants = await this.getParticipants() // 从缓存读取
const unitMap = new Map()
for (const athlete of participants) {
const projectId = athlete.projectId || athlete.project_id
if (projectId) {
stat.projectIds.add(projectId)
// 从缓存中获取价格不再调用API
if (!stat.projectPrices.has(projectId)) {
const project = this.projectCache.get(projectId) // 从缓存读取
const price = project ? (project.price || 0) : 0
stat.projectPrices.set(projectId, parseFloat(price))
}
}
}
// ...计算总金额
}
```
## 优化效果
### API 调用次数对比
对于一个有 **20 个项目、500 名参赛者** 的赛事:
| API | 优化前 | 优化后 | 减少 |
|-----|--------|--------|------|
| `getParticipantList` | **4 次** | **1 次** | ↓ 75% |
| `getProjectDetail` | **60 次** | **20 次(并行)** | ↓ 66.7% |
| 总 API 调用 | **65 次** | **21 次** | ↓ 67.7% |
### 性能提升
假设每次 API 调用平均耗时 50ms
**优化前**
- 串行执行65 × 50ms = **3,250ms3.25 秒)**
- 加上数据处理 ≈ **4-5 秒**
**优化后**
- `getParticipantList`: 1 × 50ms = 50ms
- `getProjectDetail`: 20 次并行 ≈ 100ms并行执行不是串行
- 内存缓存读取:可忽略不计
- **总耗时 ≈ 150-200ms**
- 加上数据处理 ≈ **300-500ms**
**性能提升**:从 **4-5 秒** 降低到 **0.3-0.5 秒**,提升约 **90%**
### 网络流量优化
**优化前**
- 传输 500 条参赛者记录 × 4 次 = **2000 条记录**
- 传输 20 条项目记录 × 3 次 = **60 条记录**
**优化后**
- 传输 500 条参赛者记录 × 1 次 = **500 条记录**
- 传输 20 条项目记录 × 1 次 = **20 条记录**
**流量减少约 75%**
## 优化亮点
1. **缓存机制**:避免重复数据获取
2. **并行加载**`Promise.all` 并行加载项目信息,而不是串行循环
3. **内存优化**:使用 `Map` 数据结构高效存储和查找
4. **代码复用**:统一的获取方法,避免代码重复
## 相关文件
### 修改的文件
- [src/views/martial/registration/index.vue](d:\workspace\31.比赛项目\project\martial-web\src\views\martial\registration\index.vue)
### 修改内容
1. 添加缓存数据结构(第 189-190 行)
2. 新增 `getParticipants()` 方法(第 206-221 行)
3. 新增 `getProjectInfo()` 方法(第 223-240 行)
4. 新增 `preloadProjectInfo()` 方法(第 242-255 行)
5. 优化 `loadRegistrationStats()` 方法(第 299-331 行)
6. 优化 `loadParticipantsStats()` 方法(第 333-370 行)
7. 优化 `loadProjectTimeStats()` 方法(第 371-420 行)
8. 优化 `loadAmountStats()` 方法(第 422-472 行)
## 测试验证
### 如何测试
1. **打开浏览器开发者工具**F12
2. **切换到 Network 标签**
3. **点击报名详情页面**
4. **观察网络请求**
### 预期结果
**优化前**
- 看到 4 次 `getParticipantList` 请求
- 看到 60 次 `getProjectDetail` 请求
- 总计 65+ 次请求
**优化后**
- 只看到 1 次 `getParticipantList` 请求
- 只看到 20 次 `getProjectDetail` 请求(并行发起)
- 总计 21 次请求
- 页面加载速度明显提升
## 进一步优化建议
如果还需要继续优化,可以考虑:
### 1. 后端批量查询接口
创建一个后端批量查询接口:
```java
@PostMapping("/projects/batch")
public R<List<MartialProject>> batchGetProjects(@RequestBody List<Long> projectIds) {
// 一次性查询多个项目
List<MartialProject> projects = projectService.listByIds(projectIds);
return R.data(projects);
}
```
这样可以将 20 次 `getProjectDetail` 请求减少到 1 次!
### 2. 后端聚合查询接口
创建一个后端聚合接口,一次性返回所有统计数据:
```java
@GetMapping("/registration/stats")
public R<RegistrationStatsDTO> getRegistrationStats(@RequestParam Long competitionId) {
// 后端一次性查询所有需要的数据
RegistrationStatsDTO stats = registrationService.getStats(competitionId);
return R.data(stats);
}
```
这样前端只需要调用 1 个 API 即可获取所有数据!
### 3. 使用 Vuex 或 Pinia 状态管理
将缓存数据放到全局状态管理中,跨页面共享:
```javascript
// store/modules/competition.js
export default {
state: {
participantsCache: {},
projectCache: {}
},
mutations: {
SET_PARTICIPANTS_CACHE(state, { competitionId, data }) {
state.participantsCache[competitionId] = data
}
}
}
```
## 总结
通过引入缓存机制和并行加载优化,将报名详情页面的 **65 次 API 调用减少到 21 次**,性能提升约 **90%**,页面加载时间从 **4-5 秒降低到 0.3-0.5 秒**,大幅改善了用户体验。
这是前端性能优化的经典案例,核心原则是:
1. **避免重复请求** - 使用缓存
2. **减少串行等待** - 使用并行加载
3. **优化数据流量** - 批量查询而不是循环单次查询

View File

@@ -0,0 +1,243 @@
# 赛程编排数据问题修复报告
## 问题描述
用户反馈: "现在编排数据没有数据,请检查下为什么"
## 问题调查
### 1. 初始测试结果
- 使用测试脚本 `test-schedule-module.sh`
- 配置的竞赛ID: `COMPETITION_ID=1`
- 结果: 自动编排接口返回成功,但 `competitionGroups` 数组为空
### 2. 根因分析
#### 数据库查询验证
```bash
# 查询竞赛ID=1的详情
curl "http://localhost:8123/martial/competition/detail?id=1"
# 结果: {"data":{},"msg":"暂无承载数据"} ❌ 不存在
# 查询竞赛ID=200的详情
curl "http://localhost:8123/martial/competition/detail?id=200"
# 结果: {"data":{"id":"200","competitionName":"郑州协会全国运动大赛",...}} ✅ 存在
# 查询参赛人员
curl "http://localhost:8123/martial/athlete/list?current=1&size=10"
# 结果: {"data":{"total":1000,...}} ✅ 1000条参赛人员数据
# 所有参赛人员的 competitionId 都是 200
```
#### 代码分析
查看后端自动编排服务 `MartialScheduleArrangeServiceImpl.java`:
```java
private List<MartialAthlete> loadAthletes(Long competitionId) {
LambdaQueryWrapper<MartialAthlete> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(MartialAthlete::getCompetitionId, competitionId)
.eq(MartialAthlete::getIsDeleted, 0);
return athleteMapper.selectList(wrapper);
}
```
**关键发现:**
- `loadAthletes()` 方法通过 `competitionId` 查询 `martial_athlete`
-`competitionId=1` 时,查询结果为空,因为数据库中不存在该竞赛
-`competitionId=200` 时,可以查询到1000条参赛人员数据
### 3. 根本原因
**测试脚本使用了错误的竞赛ID:**
- 配置的ID: 1 (不存在)
- 实际数据的ID: 200 (有完整数据)
## 解决方案
### 修复步骤
**修改测试脚本配置:**
文件: `test-schedule-module.sh` 第10行
```bash
# 修改前
COMPETITION_ID=1
# 修改后
COMPETITION_ID=200
```
### 验证结果
重新运行测试脚本后:
#### ✅ 测试1: 触发自动编排
```json
{
"code": 200,
"success": true,
"data": {},
"msg": "自动编排完成"
}
```
#### ✅ 测试2: 获取编排结果
返回了完整的赛程编排数据结构:
```json
{
"code": 200,
"success": true,
"data": {
"isDraft": true,
"isCompleted": false,
"competitionGroups": [
{
"id": "1998816743155355653",
"title": "成年男子长拳 成年男子组",
"type": "单人",
"count": "129人",
"venueId": 200,
"venueName": "主赛场A馆",
"timeSlot": "13:30",
"timeSlotIndex": 0,
"participants": [
{
"id": "1998816743155355655",
"schoolUnit": "南京体育学院",
"status": "未签到",
"sortOrder": 1
},
{
"id": "1998816743218270209",
"schoolUnit": "江苏省武术运动协会",
"status": "未签到",
"sortOrder": 2
}
// ... 更多参赛者
]
}
// ... 更多分组
]
},
"msg": "操作成功"
}
```
**数据统计:**
- 成功生成多个竞赛分组
- 每个分组包含完整的参赛者信息
- 包含场馆分配、时间安排等编排信息
- 单个分组示例显示129人参赛
#### ✅ 测试4: 完成编排并锁定
```json
{
"code": 200,
"success": true,
"data": {},
"msg": "编排已完成并锁定"
}
```
## 数据流验证
### 完整的编排数据流
```
1. 竞赛基础数据 (competition_id=200)
2. 参赛人员数据 (1000条记录, competition_id=200)
3. 自动编排算法 (loadAthletes按competition_id查询)
4. 生成编排结果 (competitionGroups数组)
5. 保存到数据库 (martial_competition_group + martial_competition_participant)
6. 前端展示 (schedule/index.vue)
```
### 关键数据表关联
```
martial_competition (赛事表)
id = 200
↓ (1对多)
martial_athlete (参赛人员表)
competition_id = 200
total_count = 1000
↓ (自动编排算法处理)
martial_competition_group (竞赛分组表)
competition_id = 200
↓ (1对多)
martial_competition_participant (分组参赛者表)
group_id → competition_group.id
```
## 测试结果总结
| 测试项 | 状态 | 说明 |
|--------|------|------|
| 后端服务检查 | ✅ 通过 | 端口8123正常运行 |
| 触发自动编排 | ✅ 通过 | 成功生成编排数据 |
| 获取编排结果 | ✅ 通过 | 返回完整的分组和参赛者数据 |
| 保存编排草稿 | ✅ 跳过 | 使用真实自动编排数据 |
| 完成并锁定编排 | ✅ 通过 | 成功锁定编排结果 |
| 数据库连接 | ⚠️ 跳过 | MySQL客户端未安装 |
| 验证数据完整性 | ✅ 通过 | 通过API验证数据完整 |
**最终结果: 6项测试, 5项通过, 1项跳过**
## 经验总结
### 问题教训
1. **测试数据配置错误**: 测试脚本硬编码了不存在的竞赛ID
2. **缺少数据验证**: 没有预先验证测试ID是否存在于数据库中
3. **错误处理不够清晰**: 自动编排返回成功但数据为空时,应该有更明确的提示
### 改进建议
1. **测试脚本增强**:
- 添加竞赛ID存在性验证
- 添加参赛人员数量检查
- 在测试前输出数据库状态摘要
2. **后端改进**:
```java
// 建议在 autoArrange() 方法开始时添加验证
public void autoArrange(Long competitionId) {
List<MartialAthlete> athletes = loadAthletes(competitionId);
if (athletes.isEmpty()) {
throw new ServiceException("竞赛ID: " + competitionId + " 没有参赛人员数据,无法进行自动编排");
}
// ... 继续编排逻辑
}
```
3. **前端改进**:
- 在触发自动编排前检查是否有参赛人员
- 编排结果为空时显示友好提示
## 结论
问题已完全解决。根本原因是测试脚本使用了错误的竞赛ID(1),而实际数据库中的有效竞赛ID是200。
修改测试脚本配置后,赛程编排模块的所有功能都正常工作:
- ✅ 自动编排算法正确执行
- ✅ 成功生成完整的分组和参赛者数据
- ✅ 场馆和时间分配正常
- ✅ 保存和锁定功能正常
前后端编排功能实现完整,可以投入使用。
---
**修复日期**: 2025-12-11
**修复人员**: Claude Code
**验证状态**: ✅ 已验证通过

148
doc/schedule/README.md Normal file
View File

@@ -0,0 +1,148 @@
# 编排模块文档索引
> 本目录包含编排模块的所有技术文档和历史版本
## 📚 主文档
### 当前版本
- **[编排系统完整指南](./schedule-complete-guide.md)** - v1.0
- 最后更新2025-12-10
- 状态:已发布
- 简介编排系统的完整技术方案包含架构设计、数据库设计、前后端实现、API文档等
## 📁 文档结构
```
schedule/
├── README.md # 本文件 - 编排模块文档索引
├── schedule-complete-guide.md # 主文档 - 编排系统完整指南(当前版本)
├── versions/ # 历史版本目录
│ ├── CHANGELOG.md # 版本更新日志
│ ├── v1.0/
│ │ └── schedule-complete-guide-v1.0.md
│ └── v1.1/ (未来版本)
│ └── schedule-complete-guide-v1.1.md
└── archive/ # 已废弃的旧文档
├── schedule-system-analysis.md # 已废弃 - 系统分析文档
├── schedule-system-design.md # 已废弃 - 系统设计文档
├── schedule-feature-implementation.md
├── schedule-backend-implementation-summary.md
├── schedule-backend-api-spec.md
├── schedule-api-conflict-fix.md
├── schedule-ui-test-guide.md
├── schedule-ui-update-summary.md
└── schedule-performance-optimization.md
```
## 📖 文档说明
### 主文档
**schedule-complete-guide.md** 是编排模块的核心技术文档,包含以下内容:
1. **系统概述** - 功能简介、技术栈
2. **架构设计** - 系统架构图、模块划分
3. **数据库设计** - 核心表设计、表关系图
4. **后端实现** - Controller层、Service层、Mapper层
5. **前端实现** - 页面结构、数据结构、核心方法
6. **数据流转** - 完整流程图、数据库操作流程
7. **核心功能** - 场地过滤、顺序调整、分组移动、异常标记等
8. **API接口文档** - 详细的接口说明和示例
9. **关键代码解析** - 重要代码段的详细说明
10. **使用指南** - 操作流程、常见问题、调试方法
### 历史版本
所有发布的版本都会保存在 `versions/` 目录下,按版本号组织:
- `versions/v1.0/` - 第一个正式版本
- `versions/v1.1/` - 功能优化版本(未来)
- `versions/CHANGELOG.md` - 记录所有版本的更新内容
### 已废弃文档
`archive/` 目录存放已不再维护的旧文档,这些文档可能包含过时的信息或已被主文档整合:
- **schedule-system-analysis.md** - 早期的系统分析文档
- **schedule-system-design.md** - 早期的设计文档
- **schedule-feature-implementation.md** - 功能实现记录
- **schedule-backend-implementation-summary.md** - 后端实现总结
- **schedule-backend-api-spec.md** - API规范文档
- **schedule-api-conflict-fix.md** - API冲突修复记录
- **schedule-ui-test-guide.md** - UI测试指南
- **schedule-ui-update-summary.md** - UI更新总结
- **schedule-performance-optimization.md** - 性能优化方案
> ⚠️ **注意**archive 目录中的文档仅供参考,可能包含过时信息,请以主文档为准。
## 🔄 版本管理
### 版本号规则
- **主版本号 (Major)**: 重大功能变更或架构调整 (v1.0 → v2.0)
- **次版本号 (Minor)**: 功能新增或优化 (v1.0 → v1.1)
- **修订号 (Patch)**: 文档修正、补充说明 (v1.0.1 → v1.0.2)
### 更新流程
1. **日常修改**:直接在主文档 `schedule-complete-guide.md` 中修改
2. **发布新版本**
- 将当前主文档复制到 `versions/vX.X/` 目录
- 更新 `versions/CHANGELOG.md` 记录变更
- 在主文档头部更新版本号和更新日期
### 示例
```bash
# 当前主文档版本: v1.0
doc/schedule/schedule-complete-guide.md
# 发布 v1.1 版本的步骤:
1. 复制主文档到历史版本目录
cp schedule-complete-guide.md versions/v1.0/schedule-complete-guide-v1.0.md
2. 修改主文档内容,更新版本号为 v1.1
3. 更新 versions/CHANGELOG.md记录 v1.1 的变更内容
4. 更新本 README.md在主文档说明中更新版本号
```
## 📝 快速导航
### 我想了解...
- **整体架构** → [完整指南 - 架构设计](./schedule-complete-guide.md#架构设计)
- **数据库表结构** → [完整指南 - 数据库设计](./schedule-complete-guide.md#数据库设计)
- **API接口** → [完整指南 - API接口文档](./schedule-complete-guide.md#API接口文档)
- **前端实现** → [完整指南 - 前端实现](./schedule-complete-guide.md#前端实现)
- **后端实现** → [完整指南 - 后端实现](./schedule-complete-guide.md#后端实现)
- **如何使用** → [完整指南 - 使用指南](./schedule-complete-guide.md#使用指南)
- **数据流转** → [完整指南 - 数据流转](./schedule-complete-guide.md#数据流转)
### 我遇到问题...
- **编排数据为空** → [完整指南 - 常见问题](./schedule-complete-guide.md#为什么编排数据为空)
- **无法编辑** → [完整指南 - 常见问题](./schedule-complete-guide.md#为什么无法编辑)
- **保存失败** → [完整指南 - 常见问题](./schedule-complete-guide.md#保存草稿失败怎么办)
- **调试方法** → [完整指南 - 开发调试](./schedule-complete-guide.md#开发调试)
## 📅 版本历史
| 版本 | 发布日期 | 主要更新 | 文档链接 |
|------|----------|----------|----------|
| v1.0 | 2025-12-10 | 初始版本,完整技术方案 | [查看文档](./versions/v1.0/schedule-complete-guide-v1.0.md) |
详细的版本更新记录请查看 [CHANGELOG.md](./versions/CHANGELOG.md)
## 🔗 相关文档
- [项目文档中心](../README.md)
- [报名模块文档](../registration/README.md)
- [数据库设计文档](../database/schema.md)(待创建)
- [开发规范](../development-standards.md)(待创建)
---
**最后更新**: 2025-12-10

View File

@@ -0,0 +1,201 @@
# 赛程编排API冲突修复说明
## 问题描述
在实现赛程编排后端API时发现项目中已经存在 `MartialScheduleArrangeController` 控制器,该控制器已经定义了相同的路径:
- `GET /martial/schedule/result`
- `POST /martial/schedule/save-and-lock`
这导致Spring Boot启动时报错
```
Ambiguous mapping. Cannot map 'martialScheduleController' method to {POST [/martial/schedule/save-and-lock]}:
There is already 'martialScheduleArrangeController' bean method mapped.
```
## 解决方案
### 1. 删除重复的控制器端点
从新创建的 `MartialScheduleController` 中删除了冲突的3个端点
- `/result`
- `/save-draft`
- `/save-and-lock`
保留原有的基础CRUD端点detail, list, submit, remove
### 2. 更新现有控制器
修改 `MartialScheduleArrangeController`使其使用新创建的Service和DTO
**文件**: [MartialScheduleArrangeController.java](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\controller\MartialScheduleArrangeController.java)
#### 2.1 添加依赖注入
```java
private final IMartialScheduleArrangeService scheduleArrangeService;
private final IMartialScheduleService scheduleService; // 新增
```
#### 2.2 更新 GET /result 端点
**修改前**:
```java
public R<Map<String, Object>> getScheduleResult(@RequestParam Long competitionId) {
Map<String, Object> result = scheduleArrangeService.getScheduleResult(competitionId);
return R.data(result);
}
```
**修改后**:
```java
public R<ScheduleResultDTO> getScheduleResult(@RequestParam Long competitionId) {
ScheduleResultDTO result = scheduleService.getScheduleResult(competitionId);
return R.data(result);
}
```
**改进**:
- 使用结构化的DTO替代Map
- 返回类型更加明确
- 符合前端API规范
#### 2.3 新增 POST /save-draft 端点
```java
@PostMapping("/save-draft")
@Operation(summary = "保存编排草稿", description = "传入编排草稿数据")
public R saveDraftSchedule(@RequestBody SaveScheduleDraftDTO dto) {
try {
boolean success = scheduleService.saveDraftSchedule(dto);
return success ? R.success("草稿保存成功") : R.fail("草稿保存失败");
} catch (Exception e) {
log.error("保存编排草稿失败", e);
return R.fail("保存编排草稿失败: " + e.getMessage());
}
}
```
#### 2.4 更新 POST /save-and-lock 端点
**修改前**:
```java
public R saveAndLock(@RequestBody Map<String, Object> params) {
Long competitionId = Long.valueOf(String.valueOf(params.get("competitionId")));
scheduleArrangeService.saveAndLock(competitionId, userId);
return R.success("编排已保存并锁定");
}
```
**修改后**:
```java
public R saveAndLock(@RequestBody SaveScheduleDraftDTO dto) {
BladeUser user = AuthUtil.getUser();
String userId = user != null ? user.getUserName() : "system";
boolean success = scheduleService.saveAndLockSchedule(dto.getCompetitionId());
if (success) {
// 调用原有的锁定逻辑
scheduleArrangeService.saveAndLock(dto.getCompetitionId(), userId);
return R.success("编排已完成并锁定");
} else {
return R.fail("编排锁定失败");
}
}
```
**改进**:
1. 使用DTO替代Map类型安全
2. 结合新旧两个Service的功能
3. 先更新参赛者状态,再执行原有的锁定逻辑
## 最终API结构
### MartialScheduleArrangeController
**基础路径**: `/martial/schedule`
| 方法 | 路径 | 功能 | 请求类型 | 响应类型 |
|------|------|------|----------|----------|
| GET | `/result` | 获取编排结果 | competitionId | ScheduleResultDTO |
| POST | `/save-draft` | 保存编排草稿 | SaveScheduleDraftDTO | R |
| POST | `/save-and-lock` | 完成编排并锁定 | SaveScheduleDraftDTO | R |
| POST | `/auto-arrange` | 手动触发自动编排 | Map | R |
### MartialScheduleController
**基础路径**: `/martial/schedule`
| 方法 | 路径 | 功能 | 请求类型 | 响应类型 |
|------|------|------|----------|----------|
| GET | `/detail` | 获取详情 | id | MartialSchedule |
| GET | `/list` | 分页列表 | MartialSchedule, Query | IPage |
| POST | `/submit` | 新增或修改 | MartialSchedule | R |
| POST | `/remove` | 删除 | ids | R |
## 字段冲突修复
### 问题
实体类 `MartialScheduleParticipant``status` 字段与基础类 `TenantEntity` 冲突。
### 解决方案
`status` 字段重命名为 `checkInStatus`(签到状态):
**文件**: [MartialScheduleParticipant.java:86-90](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\pojo\entity\MartialScheduleParticipant.java#L86-L90)
```java
/**
* 签到状态:未签到/已签到/异常
*/
@Schema(description = "签到状态:未签到/已签到/异常")
private String checkInStatus;
```
### 相应更新
**Service层** ([MartialScheduleServiceImpl.java](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\service\impl\MartialScheduleServiceImpl.java)):
1. **读取时**:
```java
dto.setStatus(p.getCheckInStatus() != null ? p.getCheckInStatus() : "未签到");
```
2. **保存时**:
```java
participant.setCheckInStatus(participantDTO.getStatus());
```
前端仍然使用 `status` 字段在Service层进行映射转换。
## 数据库字段名建议
```sql
ALTER TABLE martial_schedule_participant
ADD COLUMN check_in_status VARCHAR(20) DEFAULT '未签到' COMMENT '签到状态:未签到/已签到/异常',
ADD COLUMN schedule_status VARCHAR(20) DEFAULT 'draft' COMMENT '编排状态draft/completed';
```
## 前后端对接
前端API配置无需修改仍然使用原有路径
```javascript
// 获取赛程编排结果
GET /api/martial/schedule/result
// 保存编排草稿
POST /api/martial/schedule/save-draft
// 完成编排并锁定
POST /api/martial/schedule/save-and-lock
```
所有端点都通过 `MartialScheduleArrangeController` 处理。
## 总结
通过以下措施解决了API冲突问题
1. ✅ 删除重复的控制器端点
2. ✅ 更新现有控制器使用新的DTO和Service
3. ✅ 修复字段名冲突
4. ✅ 保持前端API路径不变
5. ✅ 结合新旧Service功能确保业务逻辑完整
现在系统可以正常启动API端点清晰明确没有冲突。

View File

@@ -0,0 +1,204 @@
# 赛程编排后端API数据格式规范
## 1. 获取赛程编排结果 - getScheduleResult
**接口地址**: `GET /api/martial/schedule/result`
**请求参数**:
```javascript
{
competitionId: Number // 赛事ID
}
```
**返回数据格式**:
```javascript
{
"code": 200,
"msg": "success",
"data": {
"isDraft": true, // 是否为草稿状态
"isCompleted": false, // 是否已完成编排
"competitionGroups": [ // 竞赛分组列表
{
"id": 1, // 分组ID
"title": "1. 小学组小组赛男女类", // 分组标题
"type": "集体", // 类型:集体/单人/双人
"count": "2队", // 队伍数量
"code": "1101", // 分组编号
"venueId": 1, // 当前所属场地ID
"venueName": "一号场地", // 场地名称
"timeSlot": "2025年11月6日 上午8:30", // 时间段
"timeSlotIndex": 0, // 时间段索引
"participants": [ // 参赛人员列表
{
"id": 101, // 参赛人员ID
"schoolUnit": "清河小学", // 学校/单位
"status": "未签到", // 状态:未签到/已签到/异常
"sortOrder": 1 // 排序
},
{
"id": 102,
"schoolUnit": "访河社区",
"status": "未签到",
"sortOrder": 2
}
]
},
{
"id": 2,
"title": "1. 小学组小组赛男女类",
"type": "单人",
"count": "3队",
"code": "1组",
"venueId": 2,
"venueName": "二号场地",
"timeSlot": "2025年11月6日 上午8:30",
"timeSlotIndex": 0,
"participants": [
{
"id": 103,
"schoolUnit": "少林寺武校",
"status": "未签到",
"sortOrder": 1
},
{
"id": 104,
"schoolUnit": "访河社区",
"status": "已签到",
"sortOrder": 2
},
{
"id": 105,
"schoolUnit": "武当派",
"status": "异常",
"sortOrder": 3
}
]
}
]
}
}
```
**重要说明**:
1. **首次分配规则**: 系统后台需要按照"先集体,后个人"的顺序进行第一次场地分配
2. **状态字段**:
- `未签到`: 默认状态
- `已签到`: 参赛人员已签到
- `异常`: 被标记为异常的参赛人员
3. **timeSlotIndex**: 对应前端动态生成的时间段数组索引从0开始
4. **sortOrder**: 参赛人员在分组内的排序,用于上移/下移功能
## 2. 保存编排草稿 - saveDraftSchedule
**接口地址**: `POST /api/martial/schedule/save-draft`
**请求数据格式**:
```javascript
{
"competitionId": 1, // 赛事ID
"isDraft": true, // 是否为草稿
"competitionGroups": [ // 竞赛分组数据
{
"id": 1, // 分组ID如果是新建则为null
"title": "1. 小学组小组赛男女类",
"type": "集体",
"count": "2队",
"code": "1101",
"venueId": 1, // 场地ID
"venueName": "一号场地",
"timeSlot": "2025年11月6日 上午8:30",
"timeSlotIndex": 0,
"participants": [
{
"id": 101,
"schoolUnit": "清河小学",
"status": "未签到",
"sortOrder": 1
},
{
"id": 102,
"schoolUnit": "访河社区",
"status": "异常",
"sortOrder": 2
}
]
}
]
}
```
**返回数据格式**:
```javascript
{
"code": 200,
"msg": "草稿保存成功",
"data": null
}
```
**重要说明**:
1. 草稿可以被多次保存和更新
2. 保存草稿不会锁定数据,用户可以继续编辑
3. 下次打开页面时,如果`isCompleted`为false则加载草稿数据
## 3. 完成编排并锁定 - saveAndLockSchedule
**接口地址**: `POST /api/martial/schedule/save-and-lock`
**请求数据格式**:
```javascript
{
"competitionId": 1 // 赛事ID
}
```
**返回数据格式**:
```javascript
{
"code": 200,
"msg": "编排已完成并锁定",
"data": null
}
```
**重要说明**:
1. 完成编排后,`isCompleted`标记为true
2. 编排完成后,前端将禁用所有编辑功能(上移、下移、标记异常、移动分组等)
3. 只有在`isCompleted`为true时才显示"导出"按钮
## 4. 前端页面功能说明
### 4.1 移动分组功能
- 用户可以将整个竞赛分组移动到不同的场地和时间段
- 移动后需要更新分组的`venueId``venueName``timeSlot``timeSlotIndex`字段
- 移动操作在保存草稿时提交到后端
### 4.2 异常组功能
- 只有状态为"未签到"的参赛人员才显示"异常"按钮
- 点击"异常"按钮后,参赛人员状态变为"异常"
- 异常参赛人员会在"异常组"弹窗中显示
- 可以从异常组移除,状态恢复为"未签到"
### 4.3 上移/下移功能
- 调整参赛人员在分组内的顺序
- 修改后会更新`sortOrder`字段
- 在保存草稿时提交到后端
### 4.4 保存草稿与完成编排
- **保存草稿**: 保存当前编排状态,不锁定,可继续编辑
- **完成编排**: 锁定编排,禁用所有编辑功能,显示导出按钮
## 5. 字段映射说明
| 前端字段 | 后端字段(可能的命名) | 说明 |
|---------|---------------------|------|
| schoolUnit | school_unit / schoolUnit | 学校/单位名称 |
| venueName | venue_name / venueName | 场地名称 |
| venueId | venue_id / venueId | 场地ID |
| timeSlot | time_slot / timeSlot | 时间段文本 |
| timeSlotIndex | time_slot_index / timeSlotIndex | 时间段索引 |
| sortOrder | sort_order / sortOrder | 排序 |
**提示**: 后端可以使用下划线命名snake_case或驼峰命名camelCase前端已做兼容处理。

View File

@@ -0,0 +1,347 @@
# 赛程编排后端实现总结
## 实施概览
本次实现了赛程编排系统的三个核心后端API接口完全按照 `schedule-backend-api-spec.md` 文档的规范进行开发。
## 实现的文件列表
### 1. DTO类 (数据传输对象)
#### 1.1 ScheduleResultDTO.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/pojo/dto/ScheduleResultDTO.java`
- **作用**: 赛程编排结果的响应数据结构
- **字段**:
- `isDraft`: 是否为草稿状态
- `isCompleted`: 是否已完成编排
- `competitionGroups`: 竞赛分组列表
#### 1.2 CompetitionGroupDTO.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/pojo/dto/CompetitionGroupDTO.java`
- **作用**: 竞赛分组数据结构
- **字段**:
- `id`: 分组ID
- `title`: 分组标题
- `type`: 类型(集体/单人/双人)
- `count`: 队伍数量
- `code`: 分组编号
- `venueId`: 场地ID
- `venueName`: 场地名称
- `timeSlot`: 时间段
- `timeSlotIndex`: 时间段索引
- `participants`: 参赛人员列表
#### 1.3 ParticipantDTO.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/pojo/dto/ParticipantDTO.java`
- **作用**: 参赛人员数据结构
- **字段**:
- `id`: 参赛人员ID
- `schoolUnit`: 学校/单位
- `status`: 状态(未签到/已签到/异常)
- `sortOrder`: 排序
#### 1.4 SaveScheduleDraftDTO.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/pojo/dto/SaveScheduleDraftDTO.java`
- **作用**: 保存编排草稿的请求数据结构
- **字段**:
- `competitionId`: 赛事ID
- `isDraft`: 是否为草稿
- `competitionGroups`: 竞赛分组数据
### 2. 实体类修改
#### 2.1 MartialScheduleParticipant.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/pojo/entity/MartialScheduleParticipant.java`
- **修改内容**: 添加了两个新字段
- `status`: 参赛人员状态(未签到/已签到/异常)
- `scheduleStatus`: 编排状态(draft/completed)
### 3. 服务接口
#### 3.1 IMartialScheduleService.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/service/IMartialScheduleService.java`
- **新增方法**:
- `getScheduleResult(Long competitionId)`: 获取赛程编排结果
- `saveDraftSchedule(SaveScheduleDraftDTO dto)`: 保存编排草稿
- `saveAndLockSchedule(Long competitionId)`: 完成编排并锁定
### 4. 服务实现
#### 4.1 MartialScheduleServiceImpl.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/service/impl/MartialScheduleServiceImpl.java`
- **新增依赖注入**:
- `MartialScheduleGroupMapper`: 分组数据访问
- `MartialScheduleDetailMapper`: 编排明细数据访问
- `MartialScheduleParticipantMapper`: 参赛者数据访问
- **实现的方法**:
##### 4.1.1 getScheduleResult(Long competitionId)
**功能**: 查询并返回赛事的编排结果
**实现逻辑**:
1. 查询所有竞赛分组(按display_order排序)
2. 查询所有编排明细
3. 查询所有参赛者(按performance_order排序)
4. 根据scheduleStatus判断是否已完成编排
5. 组装DTO数据返回
**关键代码**:
```java
// 检查编排状态
boolean isCompleted = participants.stream()
.anyMatch(p -> "completed".equals(p.getScheduleStatus()));
boolean isDraft = !isCompleted;
// 设置项目类型
switch (group.getProjectType()) {
case 1: groupDTO.setType("单人"); break;
case 2: groupDTO.setType("集体"); break;
default: groupDTO.setType("其他"); break;
}
```
##### 4.1.2 saveDraftSchedule(SaveScheduleDraftDTO dto)
**功能**: 保存编排草稿数据
**实现逻辑**:
1. 遍历所有竞赛分组
2. 更新或创建编排明细(MartialScheduleDetail)
3. 更新参赛者的状态和排序
4. 将scheduleStatus设置为"draft"
5. 使用事务确保数据一致性
**关键代码**:
```java
@Transactional(rollbackFor = Exception.class)
public boolean saveDraftSchedule(SaveScheduleDraftDTO dto) {
// 更新编排明细
detail.setVenueId(groupDTO.getVenueId());
detail.setVenueName(groupDTO.getVenueName());
detail.setTimeSlot(groupDTO.getTimeSlot());
// 更新参赛者信息
participant.setStatus(participantDTO.getStatus());
participant.setPerformanceOrder(participantDTO.getSortOrder());
participant.setScheduleStatus("draft");
}
```
##### 4.1.3 saveAndLockSchedule(Long competitionId)
**功能**: 完成编排并锁定,不允许再次编辑
**实现逻辑**:
1. 查询赛事的所有分组
2. 查询所有参赛者
3. 将所有参赛者的scheduleStatus更新为"completed"
4. 使用事务确保数据一致性
**关键代码**:
```java
@Transactional(rollbackFor = Exception.class)
public boolean saveAndLockSchedule(Long competitionId) {
for (MartialScheduleParticipant participant : participants) {
participant.setScheduleStatus("completed");
scheduleParticipantMapper.updateById(participant);
}
}
```
### 5. 控制器
#### 5.1 MartialScheduleController.java
- **路径**: `martial-master/src/main/java/org/springblade/modules/martial/controller/MartialScheduleController.java`
- **新增端点**:
##### 5.1.1 GET /martial/schedule/result
**功能**: 获取赛程编排结果
**请求参数**:
- `competitionId` (Long): 赛事ID
**响应示例**:
```json
{
"code": 200,
"msg": "success",
"data": {
"isDraft": true,
"isCompleted": false,
"competitionGroups": [...]
}
}
```
##### 5.1.2 POST /martial/schedule/save-draft
**功能**: 保存编排草稿
**请求体**: SaveScheduleDraftDTO
**响应示例**:
```json
{
"code": 200,
"msg": "草稿保存成功"
}
```
##### 5.1.3 POST /martial/schedule/save-and-lock
**功能**: 完成编排并锁定
**请求体**: 包含competitionId的SaveScheduleDraftDTO
**响应示例**:
```json
{
"code": 200,
"msg": "编排已完成并锁定"
}
```
## 数据库设计说明
### 涉及的表
1. **martial_schedule_group** (赛程编排分组)
- 存储竞赛分组信息
- 字段: competition_id, group_name, project_type, display_order等
2. **martial_schedule_detail** (赛程编排明细)
- 存储场地和时间段分配信息
- 字段: schedule_group_id, venue_id, venue_name, schedule_date, time_slot等
3. **martial_schedule_participant** (赛程编排参赛者关联)
- 存储参赛者信息
- **新增字段**:
- `status`: VARCHAR - 参赛人员状态(未签到/已签到/异常)
- `schedule_status`: VARCHAR - 编排状态(draft/completed)
### 数据库迁移建议
需要在 `martial_schedule_participant` 表中添加以下字段:
```sql
ALTER TABLE martial_schedule_participant
ADD COLUMN status VARCHAR(20) DEFAULT '未签到' COMMENT '状态:未签到/已签到/异常',
ADD COLUMN schedule_status VARCHAR(20) DEFAULT 'draft' COMMENT '编排状态draft/completed';
```
## 业务逻辑说明
### 编排状态管理
1. **草稿状态** (draft):
- 用户可以多次保存和修改
- 不影响其他功能
- scheduleStatus = "draft"
2. **完成状态** (completed):
- 编排锁定,前端禁用所有编辑功能
- 显示"导出"按钮
- scheduleStatus = "completed"
### 首次分配规则
根据API规范后端需要按照"先集体,后个人"的顺序进行第一次场地分配:
- 集体项目 (projectType = 2) 优先分配
- 个人项目 (projectType = 1) 后分配
- 使用 display_order 字段控制顺序
### 状态字段说明
参赛人员状态 (status):
- **未签到**: 默认状态
- **已签到**: 参赛人员已签到
- **异常**: 被标记为异常的参赛人员
## 前后端对接说明
### API路径映射
前端API配置 (`src/api/martial/activitySchedule.js`):
```javascript
// 获取赛程编排结果
GET /api/martial/schedule/result
// 保存编排草稿
POST /api/martial/schedule/save-draft
// 完成编排并锁定
POST /api/martial/schedule/save-and-lock
```
后端Controller路径 (`MartialScheduleController.java`):
```java
@RequestMapping("/martial/schedule")
@GetMapping("/result")
@PostMapping("/save-draft")
@PostMapping("/save-and-lock")
```
### 数据格式兼容性
- 后端使用驼峰命名 (camelCase)
- 前端已做兼容处理,同时支持驼峰和下划线命名
- DTO中的字段名与前端API规范完全一致
## 测试建议
### 单元测试
1. 测试getScheduleResult方法:
- 测试空数据情况
- 测试草稿状态
- 测试完成状态
- 测试数据组装正确性
2. 测试saveDraftSchedule方法:
- 测试新建编排明细
- 测试更新编排明细
- 测试参赛者状态更新
- 测试事务回滚
3. 测试saveAndLockSchedule方法:
- 测试状态更新
- 测试锁定后的查询结果
### 集成测试
1. 测试完整的编排流程:
- 首次获取编排结果
- 多次保存草稿
- 完成编排并锁定
- 再次查询验证状态
2. 测试异常场景:
- 赛事不存在
- 分组不存在
- 参赛者不存在
## 后续优化建议
1. **性能优化**:
- 对于大量参赛者的情况,考虑使用批量更新
- 添加缓存机制减少数据库查询
2. **功能增强**:
- 添加编排历史记录
- 实现编排版本管理
- 添加编排冲突检测
3. **安全性**:
- 添加权限验证
- 添加操作日志
- 实现并发控制
## 总结
本次实现完全按照前端API规范进行开发实现了:
- ✅ 3个核心API接口
- ✅ 4个DTO类
- ✅ 实体类字段扩展
- ✅ 完整的服务层逻辑
- ✅ 事务管理
- ✅ Swagger文档注解
所有代码遵循项目现有的代码风格和架构规范,可以直接集成到现有系统中使用。

View File

@@ -0,0 +1,387 @@
# 赛程编排功能实施完成文档
## 📋 实施概述
**实施日期**: 2025-12-08
**版本**: v1.0
**状态**: ✅ 核心功能已完成
---
## 1. 已完成的功能
### ✅ 1.1 数据库表创建
创建了两张核心数据库表:
**文件位置**: `doc/create_schedule_tables.sql`
#### martial_schedule (赛程安排表)
- 存储分组的基本信息
- 包含场地分配、时间段分配
- 支持草稿和发布状态
#### martial_schedule_detail (赛程明细表)
- 存储每个分组中的参赛人员详情
- 记录实际比赛时间
- 支持比赛进度跟踪
**执行方式**:
```bash
# 方式1: 通过数据库客户端导入并执行
# 方式2: 命令行执行
mysql -u root -p martial_competition < doc/create_schedule_tables.sql
```
### ✅ 1.2 前端赛程编排页面完善
**文件位置**: `src/views/martial/schedule/index.vue`
#### 核心算法实现:
1. **时间段自动生成** (generateTimeSlots方法)
- 根据赛事开始/结束时间自动生成
- 上午场: 08:30-12:00
- 下午场: 13:30-17:30
- 支持多天赛程
2. **智能自动分组** (autoGroupParticipants方法)
- ✅ 集体项目优先(type=2)
- ✅ 个人项目在后(type=1)
- ✅ 集体项目按"单位+项目"分组
- ✅ 个人项目按"项目+组别"分组,每组最多30人
- ✅ 自动生成分组名称和编号
3. **场地自动分配** (autoAssignVenues方法)
- ✅ 负载均衡算法
- ✅ 优先分配时长长的分组
- ✅ 选择当前负载最小的场地
- ✅ 均匀分布,避免某个场地过载
4. **分组名称编辑**
- ✅ 双击分组名称进入编辑模式
- ✅ Enter保存,失焦保存
- ✅ 实时更新显示
5. **拖拽移动分组**
- ✅ 使用vuedraggable组件
- ✅ 支持在场地间拖拽移动
- ✅ 支持场地内排序
---
## 2. 功能使用流程
### 2.1 基本操作流程
```
1. 进入赛事管理 → 选择赛事 → 点击"编排"按钮
2. 系统自动加载:
- 赛事信息
- 时间段列表 (根据赛事时间自动生成)
- 场地列表
- 所有参赛者数据
3. 点击"自动编排"按钮
4. 系统自动完成:
- 按集体/个人分类参赛者
- 智能分组 (集体按单位+项目, 个人按项目+组别)
- 自动分配场地 (负载均衡)
5. 手动调整 (可选):
- 双击分组名称修改
- 拖拽分组到其他场地
- 调整分组内选手顺序
- 选择场地下拉菜单移动分组
6. 保存编排 / 完成编排
```
### 2.2 时间段切换
- 点击页面顶部的时间段按钮
- 可查看不同时间段的分组安排
- 每个时间段独立管理分组
### 2.3 场地视图
- 切换到"场地"Tab
- 查看每个场地的分组分布
- 统计每个场地的预计时长
---
## 3. 核心算法说明
### 3.1 自动分组算法
```javascript
autoGroupParticipants(participants) {
// 1. 分离集体(type=2)和个人(type=1)
const teamProjects = participants.filter(p => p.type === 2)
const individualProjects = participants.filter(p => p.type === 1)
// 2. 集体项目: 按"organization_projectId"分组
// 3. 个人项目: 按"projectId_category"分组,每组最多30人
// 4. 返回: [集体分组, 个人分组]
}
```
**特点**:
- 集体项目同单位同项目的选手分在一组
- 个人项目同项目同组别的选手分在一组
- 个人项目超过30人自动拆分为A组、B组、C组...
### 3.2 场地分配算法 (贪心 + 负载均衡)
```javascript
autoAssignVenues(groups) {
// 1. 初始化场地负载为0
// 2. 分组按预计时长降序排序
// 3. 贪心策略:
// - 找当前负载最小的场地
// - 分配分组到该场地
// - 更新场地负载
}
```
**特点**:
- 先分配时间长的分组,后分配时间短的
- 总是选择负载最轻的场地
- 确保各场地负载均衡
---
## 4. 测试用例
### 4.1 使用1000个参赛者测试
**前提条件**:
1. 已执行 `test-data/batch_create_1000_participants.sql`
2. 赛事ID=200: "郑州协会全国运动大赛"
3. 包含10个项目、5个场地、1000个参赛者
**测试步骤**:
#### 测试1: 自动编排功能
```
1. 进入赛事编排页面 (competitionId=200)
2. 点击"自动编排"按钮
3. 预期结果:
- 自动生成分组 (集体项目在前,个人项目在后)
- 每个分组自动分配场地
- 场地负载均衡
- 显示成功提示
```
#### 测试2: 分组名称编辑
```
1. 双击某个分组名称
2. 修改名称 (如: "少林寺武术学校 - 集体拳术表演" → "少林组")
3. 按Enter保存
4. 预期结果: 名称更新成功
```
#### 测试3: 场地切换
```
1. 点击某个分组的"选择场地"下拉菜单
2. 选择其他场地
3. 预期结果: 分组移动到新场地
```
#### 测试4: 时间段切换
```
1. 点击不同的时间段按钮
2. 预期结果: 显示对应时间段的分组列表
```
#### 测试5: 场地视图
```
1. 切换到"场地"Tab
2. 预期结果:
- 显示每个场地的分组列表
- 显示每个分组的预计时长
- 统计汇总正确
```
### 4.2 边界测试
| 测试项 | 操作 | 预期结果 |
|--------|------|---------|
| 无参赛者 | 点击自动编排 | 提示"没有未分组的参赛者" |
| 无场地 | 点击自动分配场地 | 提示"请先配置场地信息" |
| 空分组名称 | 保存空名称 | 保持原名称 |
| 大量参赛者 | 1000人自动编排 | 正常处理,性能良好 |
---
## 5. 性能优化
### 5.1 已实现的优化
1. **项目信息缓存**
- 使用Map缓存项目详情
- 避免重复查询相同项目
2. **批量处理**
- 一次性加载所有参赛者
- 批量分组和分配
3. **算法优化**
- 使用Map进行分组,时间复杂度O(n)
- 负载均衡算法,时间复杂度O(n*m), n=分组数, m=场地数
### 5.2 未来可优化
1. **虚拟滚动**: 分组数量>100时使用虚拟滚动
2. **防抖保存**: 拖拽操作延迟保存
3. **懒加载**: 只加载当前时间段数据
---
## 6. 数据流转
```
用户操作
前端Vue页面 (src/views/martial/schedule/index.vue)
调用API (src/api/martial/...)
后端接口 (待开发)
数据库表 (martial_schedule, martial_schedule_detail)
```
---
## 7. 待开发功能
### 7.1 后端API接口
需要创建以下接口 (参考文档第5章):
1. **GET /api/martial/schedule/time-slots**
- 获取时间段列表
2. **POST /api/martial/schedule/auto-group**
- 自动生成分组
3. **PUT /api/martial/schedule/group/{groupId}/name**
- 更新分组名称
4. **POST /api/martial/schedule/save**
- 保存编排结果 (草稿)
5. **POST /api/martial/schedule/publish**
- 发布编排 (status=1)
6. **POST /api/martial/schedule/auto-assign-venues**
- 自动分配场地
7. **GET /api/martial/schedule/list**
- 获取已保存的编排
### 7.2 功能增强
1. **保存草稿**: 将编排数据保存到数据库
2. **加载已保存编排**: 恢复之前的编排状态
3. **发布编排**: 确认完成后发布
4. **导出功能**: 导出Excel/PDF格式的赛程表
5. **打印功能**: 打印秩序册
---
## 8. 文件清单
### 已创建/修改的文件
```
✅ doc/schedule-system-analysis.md # 系统设计文档 (1200+行)
✅ doc/create_schedule_tables.sql # 数据库表创建SQL
✅ doc/schedule-feature-implementation.md # 本文档
✅ src/views/martial/schedule/index.vue # 前端编排页面 (已完善)
✅ test-data/batch_create_1000_participants.sql # 测试数据
✅ doc/batch-create-participants-guide.md # 测试数据使用指南
```
### 待创建的文件 (后端)
```
❌ backend/api/schedule.js # 赛程编排API接口
❌ backend/service/schedule.js # 赛程编排业务逻辑
❌ backend/mapper/schedule.xml # 赛程数据访问SQL
```
---
## 9. 技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | - | 前端框架 |
| Element Plus | - | UI组件库 |
| vuedraggable | - | 拖拽功能 |
| MySQL | 5.7+ | 数据库 |
| SpringBoot | 2.x | 后端框架(待开发) |
---
## 10. 常见问题
### Q1: 如何确定参赛者的项目类型?
**A**: 通过查询 `martial_project` 表的 `type` 字段:
- `type=1`: 个人项目
- `type=2`: 集体项目
### Q2: 个人项目为什么每组最多30人?
**A**: 这是为了避免单组人数过多,比赛时间过长。可以在代码中修改 `maxPerGroup` 变量。
### Q3: 如何自定义场地分配策略?
**A**: 修改 `autoAssignVenues` 方法中的分配逻辑,可以考虑:
- 场地容量限制
- 项目类型匹配 (如集体项目分配到大场地)
- 时间段容量限制
### Q4: 分组编号规则是什么?
**A**: GROUP_001, GROUP_002, ... 按生成顺序递增,集体项目编号在前。
---
## 11. 下一步计划
### 阶段1: 后端接口开发 (优先级: 高)
- [ ] 创建赛程编排相关API接口
- [ ] 实现数据持久化
- [ ] 实现加载已保存编排
### 阶段2: 功能完善 (优先级: 中)
- [ ] 保存草稿功能
- [ ] 发布编排功能
- [ ] 撤销/重做功能
### 阶段3: 导出功能 (优先级: 中)
- [ ] 导出Excel格式赛程表
- [ ] 导出PDF格式秩序册
- [ ] 二维码生成(选手扫码查看)
### 阶段4: 优化和扩展 (优先级: 低)
- [ ] 性能优化(虚拟滚动、懒加载)
- [ ] 冲突检测(同一选手多项目)
- [ ] 可视化增强(甘特图、热力图)
---
## 12. 联系与反馈
如有问题或建议,请记录在项目Issue中。
---
**文档维护**:
- 创建人: Claude Code
- 创建日期: 2025-12-08
- 版本: v1.0
- 最后更新: 2025-12-08

View File

@@ -0,0 +1,265 @@
# 赛程编排页面加载性能优化
## 问题描述
用户反馈:点击打开编排页面(`http://localhost:2888/api/martial/project/detail?id=200`)时出现大批量数据库查询,导致页面加载缓慢。
## 原问题分析
### 原实现方式MartialScheduleServiceImpl.java:149-258
```java
public ScheduleResultDTO getScheduleResult(Long competitionId) {
// 1. 查询所有分组
List<MartialScheduleGroup> groups = scheduleGroupMapper.selectList(...);
// 2. 查询所有编排明细
List<MartialScheduleDetail> details = scheduleDetailMapper.selectList(...);
// 3. 查询所有参赛者(使用 IN 查询)
List<MartialScheduleParticipant> participants = scheduleParticipantMapper.selectList(...);
// 4. 在内存中进行数据组装
// ...
}
```
**性能问题**
- 执行了 **3 次独立的数据库查询**
- <20><><EFBFBD>然使用了 IN 查询避免了 N+1 问题,但仍需要多次网络往返
- 数据库需要执行 3 次查询计划,查询优化器无法统一优化
- 数据传输量大,需要多次网络 IO
## 优化方案
### 使用单次 JOIN 查询获取所有数据
#### 1. 创建优化的 VO <20><>
新建文件:`ScheduleGroupDetailVO.java`
```java
@Data
public class ScheduleGroupDetailVO implements Serializable {
// 分组信息
private Long groupId;
private String groupName;
private String category;
private Integer projectType;
private Integer totalTeams;
private Integer totalParticipants;
private Integer displayOrder;
// 编排明细信息
private Long detailId;
private Long venueId;
private String venueName;
private String timeSlot;
// 参赛者信息
private Long participantId;
private String organization;
private String checkInStatus;
private String scheduleStatus;
private Integer performanceOrder;
}
```
#### 2. 添加自定义 Mapper 方法
`MartialScheduleGroupMapper.java` 中添加:
```java
public interface MartialScheduleGroupMapper extends BaseMapper<MartialScheduleGroup> {
/**
* 查询赛程编排的完整详情一次性JOIN查询优化性能
*/
List<ScheduleGroupDetailVO> selectScheduleGroupDetails(@Param("competitionId") Long competitionId);
}
```
#### 3. 实现优化的 SQL 查询
`MartialScheduleGroupMapper.xml` 中实现:
```xml
<select id="selectScheduleGroupDetails" resultType="org.springblade.modules.martial.pojo.vo.ScheduleGroupDetailVO">
SELECT
g.id AS groupId,
g.group_name AS groupName,
g.category AS category,
g.project_type AS projectType,
g.total_teams AS totalTeams,
g.total_participants AS totalParticipants,
g.display_order AS displayOrder,
d.id AS detailId,
d.venue_id AS venueId,
d.venue_name AS venueName,
d.time_slot AS timeSlot,
p.id AS participantId,
p.organization AS organization,
p.check_in_status AS checkInStatus,
p.schedule_status AS scheduleStatus,
p.performance_order AS performanceOrder
FROM
martial_schedule_group g
LEFT JOIN
martial_schedule_detail d ON g.id = d.schedule_group_id AND d.is_deleted = 0
LEFT JOIN
martial_schedule_participant p ON g.id = p.schedule_group_id AND p.is_deleted = 0
WHERE
g.competition_id = #{competitionId}
AND g.is_deleted = 0
ORDER BY
g.display_order ASC,
p.performance_order ASC
</select>
```
#### 4. 重写 Service 层方法
修改 `MartialScheduleServiceImpl.getScheduleResult()` 方法:
```java
@Override
public ScheduleResultDTO getScheduleResult(Long competitionId) {
// 使用优化的一次性JOIN查询获取所有数据
List<ScheduleGroupDetailVO> details = scheduleGroupMapper.selectScheduleGroupDetails(competitionId);
if (details.isEmpty()) {
// 返回空结果
}
// 按分组ID分组数据在内存中处理速度很快
Map<Long, List<ScheduleGroupDetailVO>> groupMap = details.stream()
.collect(Collectors.groupingBy(ScheduleGroupDetailVO::getGroupId));
// 组装 DTO 返回
// ...
}
```
## 优化效果
### 数据库查询次数对比
| 指标 | 优化前 | 优化后 | 提升 |
|------|--------|--------|------|
| SQL 查询次数 | 3 次 | **1 次** | **减少 66.7%** |
| 网络往返次数 | 3 次 | **1 次** | **减少 66.7%** |
| 查询优化 | 分散优化 | **统一优化** | 数据库可进行整体优化 |
### 性能提升分析
1. **减少网络开销**
- 从 3 次<><E6ACA1>络往返减少到 1 次
- 减少了 TCP 连接的建立和等待时间
- 降低了网络延迟的累积效应
2. **数据库查询优化**
- 数据库可以对整个 JOIN 查询进行统一的执行计划优化
- 可以利用索引加速 JOIN 操作
- 减少了查询解析和编译的次数
3. **数据传输优化**
- 虽然单次传输数据量可能略大,但总体网络 IO 更少
- 减少了协议头、认证等额外开销
4. **应用层优化**
- 使用 Java Stream API 在内存中快速分组
- 内存操作速度远快于网络 IO
### 预估性能提升
假设场景:
- 一个比赛有 20 个分组
- 平均每个分组有 30 个参赛者
- 单次数据库查询平均耗时 50ms
**优化前**
- 3 次查询 × 50ms = 150ms
- 加上网络延迟和 Java 处理 ≈ **200ms**
**优化后**
- 1 次查询 × 80ms = 80msJOIN 查询稍慢)
- 加上 Java 内存分组 ≈ **100ms**
**性能提升**:约 **50%** 的响应时间减少
## 实际应用建议
### 何时使用这种优化
**适用场景**
- 需要同时查询多个关联表的数据
- 数据量不是特别大(几千到几万条)
- 需要减少网络往返次数
- 关联关系明确JOIN 条件简单
⚠️ **不适用场景**
- 单表数据量超过 10 万条
- JOIN 会产生笛卡尔积爆炸
- 某些关联数据可选加载(懒加载更合适)
### 进一步优化建议
如果数据量继续增大,可以考虑:
1. **分页加载**
- 前端使用虚拟滚动或分页
- 后端添加 LIMIT/OFFSET
2. **缓存优化**
- 将常用的编排结果缓存到 Redis
- 设置合理的过期时间
3. **数据库索引**
- 确保 `competition_id`, `schedule_group_id` 有索引
- 考虑添加联合索引加速 JOIN
4. **读写分离**
- 查询走从库,减轻主库压力
- 使用 MyBatis Plus 的多数据源配置
## 相关文件
### 新增文件
- `src/main/java/org/springblade/modules/martial/pojo/vo/ScheduleGroupDetailVO.java`
### 修改文件
- `src/main/java/org/springblade/modules/martial/mapper/MartialScheduleGroupMapper.java`
- `src/main/java/org/springblade/modules/martial/mapper/MartialScheduleGroupMapper.xml`
- `src/main/java/org/springblade/modules/martial/service/impl/MartialScheduleServiceImpl.java`
## 测试验证
### 如何测试
1. **启动后端服务**
```bash
cd martial-master
mvn spring-boot:run
```
2. **访问编排页面**
```
http://localhost:2888/api/martial/project/detail?id=200
```
3. **查看数据库日志**
- 在 `application.yml` 中开启 SQL 日志
- 观察只执行了 1 次 JOIN 查询
4. **性能对比**
- 使用浏览器开发者工具查看网络请求时间
- 对比优化前后的响应时间
### 预期结果
- 后端日志中只看到 1 条 SQL 查询语句
- 页面加载速度明显提升
- 数据显示正确,功能无异常
## 总结
这次优化通过将 **3 次独立查询合并为 1 次 JOIN 查询**,显著减少了数据库往返次数和网络 IO预计可将页面加载时间减少约 50%。这是一种常见且有效的性能优化手段,特别适合需要关联多个表的查询场景。

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,819 @@
# 赛程编排系统设计文档
## 📋 文档说明
**版本**: v2.0
**创建日期**: 2025-12-08
**最后更新**: 2025-12-08
**状态**: 设计阶段
---
## 1. 业务需求概述
### 1.1 核心需求
武术赛事管理系统需要实现**自动赛程编排功能**,将参赛者智能分配到不同的场地和时间段,确保比赛有序进行。
### 1.2 关键特性
-**后端自动编排**使用Java后端定时任务自动编排前端只负责展示
-**集体优先原则**:集体项目优先编排,个人项目随后
-**负载均衡**:均匀分配到所有场地和时间段
-**定时刷新**每10分钟自动重新编排未保存状态
-**手动调整**:支持用户手动调整编排结果
-**锁定机制**:保存后锁定,不再自动编排
---
## 2. 业务规则
### 2.1 项目类型
#### 集体项目type=2
- **定义**:多人一场表演
- **时长**约5分钟/场
- **场地占用**:独占整个场地
- **示例**:太极拳男组(泰州太极拳小学:张三、李四、王五、小红、小花)
- **分组规则**:按"项目+组别"分组,同一分组内按单位列出
#### 个人项目type=1
- **定义**:单人表演
- **时长**约1分钟/人
- **场地占用**场地可同时容纳6人
- **示例**:太极拳个人男组(台州太极拳馆:洪坚立;泰州太极拳小学:李四)
- **分组规则**:按"项目+组别"分组,不限人数
### 2.2 时间段划分
```
每天分为两个时间段:
- 上午场08:30 - 11:30180分钟预留30分钟机动
- 下午场13:30 - 17:30240分钟预留30分钟机动
实际可用时间:
- 上午150分钟扣除间隔时间
- 下午210分钟扣除间隔时间
间隔时间每场比赛间隔1-2分钟选手准备
```
### 2.3 编排优先级
```
优先级排序:
1. 集体项目type=2
2. 个人项目type=1
同类型内部排序:
- 按项目ID升序
- 按组别category排序
- 按报名时间先后
```
### 2.4 分配策略
#### 场地分配
- **集体项目**:每个分组独占一个场地时间段
- **个人项目**每个场地时间段可容纳多个分组按6人/批次计算)
#### 时间段分配
- **负载均衡**:优先填充负载较轻的时间段
- **连续性**:同一项目的多个分组尽量安排在相邻时间段
- **容量检查**:确保不超过时间段容量
#### 计算公式
```
集体项目占用时长 = 队伍数 × 5分钟 + (队伍数-1) × 2分钟间隔
个人项目占用时长 = ⌈人数/6⌉ × (6分钟 + 2分钟间隔)
场地时间段容量:
- 上午150分钟
- 下午210分钟
```
---
## 3. 数据库设计
### 3.1 编排主表
```sql
CREATE TABLE `martial_schedule_group` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`competition_id` bigint(20) NOT NULL COMMENT '赛事ID',
`group_name` varchar(200) NOT NULL COMMENT '分组名称:太极拳男组',
`project_id` bigint(20) NOT NULL COMMENT '项目ID',
`project_name` varchar(100) DEFAULT NULL COMMENT '项目名称',
`category` varchar(50) DEFAULT NULL COMMENT '组别:成年组、少年组',
`project_type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=个人 2=集体',
`display_order` int(11) NOT NULL DEFAULT '0' COMMENT '显示顺序(集体优先)',
`total_participants` int(11) DEFAULT '0' COMMENT '总参赛人数',
`total_teams` int(11) DEFAULT '0' COMMENT '总队伍数(集体项目)',
`created_time` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_competition` (`competition_id`),
KEY `idx_project` (`project_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='赛程编排分组表';
```
### 3.2 编排明细表(场地时间段分配)
```sql
CREATE TABLE `martial_schedule_detail` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`schedule_group_id` bigint(20) NOT NULL COMMENT '分组ID',
`competition_id` bigint(20) NOT NULL COMMENT '赛事ID',
`venue_id` bigint(20) NOT NULL COMMENT '场地ID',
`venue_name` varchar(100) DEFAULT NULL COMMENT '场地名称',
`schedule_date` date NOT NULL COMMENT '比赛日期',
`time_period` varchar(20) NOT NULL COMMENT '时间段morning/afternoon',
`time_slot` varchar(20) NOT NULL COMMENT '时间点08:30/13:30',
`estimated_start_time` datetime DEFAULT NULL COMMENT '预计开始时间',
`estimated_end_time` datetime DEFAULT NULL COMMENT '预计结束时间',
`estimated_duration` int(11) DEFAULT '0' COMMENT '预计时长(分钟)',
`participant_count` int(11) DEFAULT '0' COMMENT '参赛人数',
`sort_order` int(11) DEFAULT '0' COMMENT '场内顺序',
`created_time` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_group` (`schedule_group_id`),
KEY `idx_venue_time` (`venue_id`, `schedule_date`, `time_slot`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='赛程编排明细表';
```
### 3.3 参赛者关联表
```sql
CREATE TABLE `martial_schedule_participant` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`schedule_detail_id` bigint(20) NOT NULL COMMENT '编排明细ID',
`schedule_group_id` bigint(20) NOT NULL COMMENT '分组ID',
`participant_id` bigint(20) NOT NULL COMMENT '参赛者ID',
`organization` varchar(200) DEFAULT NULL COMMENT '单位名称',
`player_name` varchar(100) DEFAULT NULL COMMENT '选手姓名',
`project_name` varchar(100) DEFAULT NULL COMMENT '项目名称',
`category` varchar(50) DEFAULT NULL COMMENT '组别',
`performance_order` int(11) DEFAULT '0' COMMENT '出场顺序',
`created_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_detail` (`schedule_detail_id`),
KEY `idx_participant` (`participant_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='赛程编排参赛者关联表';
```
### 3.4 编排状态表
```sql
CREATE TABLE `martial_schedule_status` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`competition_id` bigint(20) NOT NULL UNIQUE COMMENT '赛事ID',
`schedule_status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '0=未编排 1=编排中 2=已保存锁定',
`last_auto_schedule_time` datetime DEFAULT NULL COMMENT '最后自动编排时间',
`locked_time` datetime DEFAULT NULL COMMENT '锁定时间',
`locked_by` varchar(100) DEFAULT NULL COMMENT '锁定人',
`total_groups` int(11) DEFAULT '0' COMMENT '总分组数',
`total_participants` int(11) DEFAULT '0' COMMENT '总参赛人数',
`created_time` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_competition` (`competition_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='赛程编排状态表';
```
---
## 4. 后端编排算法设计
### 4.1 算法流程
```
┌─────────────────────────────────────────┐
│ 定时任务每10分钟执行一次 │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 1. 检查赛事状态 │
│ - 如果已锁定(status=2),跳过 │
│ - 如果未开始,继续 │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 2. 加载数据 │
│ - 赛事信息(开始/结束时间) │
│ - 场地列表 │
│ - 参赛者列表 │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 3. 生成时间段网格 │
│ - 计算比赛天数 │
│ - 生成所有时间段(上午/下午) │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 4. 自动分组 │
│ - 集体项目按"项目+组别"分组 │
│ - 个人项目按"项目+组别"分组 │
│ - 集体项目排在前面 │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 5. 分配场地和时间段(负载均衡) │
│ - 初始化所有场地×时间段的负载 │
│ - 按时长降序处理分组 │
│ - 贪心算法:选择负载最小的位置 │
└─────────────────┬───────────────────────┘
┌─────────────────────────────────────────┐
│ 6. 保存到数据库 │
│ - 清空旧的编排数据 │
│ - 插入新的编排结果 │
│ - 更新编排状态 │
└─────────────────────────────────────────┘
```
### 4.2 核心算法伪代码
#### 4.2.1 自动分组算法
```java
public List<ScheduleGroup> autoGroupParticipants(List<Participant> participants) {
List<ScheduleGroup> groups = new ArrayList<>();
int displayOrder = 1;
// 1. 分离集体和个人项目
List<Participant> teamParticipants = participants.stream()
.filter(p -> p.getProjectType() == 2)
.collect(Collectors.toList());
List<Participant> individualParticipants = participants.stream()
.filter(p -> p.getProjectType() == 1)
.collect(Collectors.toList());
// 2. 集体项目分组:按"项目ID_组别"分组
Map<String, List<Participant>> teamGroupMap = teamParticipants.stream()
.collect(Collectors.groupingBy(p ->
p.getProjectId() + "_" + p.getCategory()
));
for (Map.Entry<String, List<Participant>> entry : teamGroupMap.entrySet()) {
List<Participant> members = entry.getValue();
Participant first = members.get(0);
// 统计队伍数(按单位分组)
long teamCount = members.stream()
.map(Participant::getOrganization)
.distinct()
.count();
ScheduleGroup group = new ScheduleGroup();
group.setGroupName(first.getProjectName() + " " + first.getCategory());
group.setProjectId(first.getProjectId());
group.setProjectType(2);
group.setDisplayOrder(displayOrder++);
group.setTotalParticipants(members.size());
group.setTotalTeams((int) teamCount);
group.setParticipants(members);
// 计算预计时长:队伍数 × 5分钟 + 间隔时间
int duration = (int) teamCount * 5 + ((int) teamCount - 1) * 2;
group.setEstimatedDuration(duration);
groups.add(group);
}
// 3. 个人项目分组:按"项目ID_组别"分组
Map<String, List<Participant>> individualGroupMap = individualParticipants.stream()
.collect(Collectors.groupingBy(p ->
p.getProjectId() + "_" + p.getCategory()
));
for (Map.Entry<String, List<Participant>> entry : individualGroupMap.entrySet()) {
List<Participant> members = entry.getValue();
Participant first = members.get(0);
ScheduleGroup group = new ScheduleGroup();
group.setGroupName(first.getProjectName() + " " + first.getCategory());
group.setProjectId(first.getProjectId());
group.setProjectType(1);
group.setDisplayOrder(displayOrder++);
group.setTotalParticipants(members.size());
group.setParticipants(members);
// 计算预计时长:人数/6向上取整× (6分钟 + 2分钟间隔)
int batches = (int) Math.ceil(members.size() / 6.0);
int duration = batches * 8;
group.setEstimatedDuration(duration);
groups.add(group);
}
return groups;
}
```
#### 4.2.2 场地时间段分配算法(负载均衡)
```java
public void assignVenueAndTimeSlot(List<ScheduleGroup> groups,
List<Venue> venues,
List<TimeSlot> timeSlots) {
// 1. 初始化负载表(场地 × 时间段)
Map<String, Integer> loadMap = new HashMap<>();
for (Venue venue : venues) {
for (TimeSlot timeSlot : timeSlots) {
String key = venue.getId() + "_" + timeSlot.getKey();
loadMap.put(key, 0);
}
}
// 2. 获取时间段容量
Map<String, Integer> capacityMap = new HashMap<>();
for (TimeSlot timeSlot : timeSlots) {
int capacity = timeSlot.getPeriod().equals("morning") ? 150 : 210;
capacityMap.put(timeSlot.getKey(), capacity);
}
// 3. 按预计时长降序排序(先安排时间长的)
groups.sort((a, b) -> b.getEstimatedDuration() - a.getEstimatedDuration());
// 4. 贪心算法分配
for (ScheduleGroup group : groups) {
String bestKey = null;
int minLoad = Integer.MAX_VALUE;
// 遍历所有场地×时间段组合
for (Venue venue : venues) {
for (TimeSlot timeSlot : timeSlots) {
String key = venue.getId() + "_" + timeSlot.getKey();
int currentLoad = loadMap.get(key);
int capacity = capacityMap.get(timeSlot.getKey());
// 检查容量是否足够
if (currentLoad + group.getEstimatedDuration() <= capacity) {
if (currentLoad < minLoad) {
minLoad = currentLoad;
bestKey = key;
}
}
}
}
// 分配到最佳位置
if (bestKey != null) {
String[] parts = bestKey.split("_");
long venueId = Long.parseLong(parts[0]);
String timeSlotKey = parts[1];
group.setVenueId(venueId);
group.setTimeSlotKey(timeSlotKey);
// 更新负载
loadMap.put(bestKey, loadMap.get(bestKey) + group.getEstimatedDuration());
}
}
}
```
### 4.3 算法复杂度分析
- **自动分组算法**: O(n)n为参赛者数量
- **场地分配算法**: O(g × v × t)g为分组数v为场地数t为时间段数
- **总体复杂度**: O(n + g×v×t)
对于1000人5个场地10个时间段
- 分组: O(1000) ≈ 1ms
- 分配: O(100×5×10) = O(5000) ≈ 5ms
- **总耗时**: < 10ms
---
## 5. 前端展示设计
### 5.1 页面布局
```
┌────────────────────────────────────────────────────────────┐
│ 编排 - 郑州协会全国运动大赛 [返回] │
└────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ [竞赛分组] [场地] │
└────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ 竞赛分组内容区 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 1. 太极拳男组 集体 2队 2组 1101 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 1. 少林寺武校 │ │ │
│ │ │ [场A 2025-11-06 08:30] [场A 2025-11-06 13:30] ...│
│ │ │ 2. 洛阳武校 │ │ │
│ │ │ [场B 2025-11-06 08:30] [场B 2025-11-06 13:30] ...│
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 2. 长拳个人男组 个人 3人 1个A 1102 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 1. 少林寺武校 张三 │ │ │
│ │ │ [场A 2025-11-06 08:30] │ │ │
│ │ │ 2. 洛阳武校 李四 │ │ │
│ │ │ [场A 2025-11-06 08:30] │ │ │
│ │ │ 3. 少林寺武校 王五 │ │ │
│ │ │ [场B 2025-11-06 13:30] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ [保存编排] │
└────────────────────────────────────────────────────────────┘
```
### 5.2 数据结构
```javascript
// 前端数据结构
{
competitionInfo: {
competitionId: 200,
competitionName: "郑州协会全国运动大赛",
startDate: "2025-11-06",
endDate: "2025-11-10"
},
scheduleGroups: [
{
id: 1,
groupName: "太极拳男组",
projectType: 2, // 集体
displayOrder: 1,
totalParticipants: 10,
totalTeams: 2,
// 按单位组织的参赛者(集体项目)
organizationGroups: [
{
organization: "少林寺武校",
participants: [
{ id: 1, playerName: "张三", ... },
{ id: 2, playerName: "李四", ... }
],
scheduleDetails: [
{
venueId: 1,
venueName: "场A",
scheduleDate: "2025-11-06",
timePeriod: "morning",
timeSlot: "08:30"
}
]
},
{
organization: "洛阳武校",
participants: [...],
scheduleDetails: [...]
}
]
},
{
id: 2,
groupName: "长拳个人男组",
projectType: 1, // 个人
displayOrder: 2,
totalParticipants: 3,
// 个人项目直接列出参赛者
participants: [
{
id: 10,
organization: "少林寺武校",
playerName: "张三",
scheduleDetail: {
venueId: 1,
venueName: "场A",
scheduleDate: "2025-11-06",
timePeriod: "morning",
timeSlot: "08:30"
}
},
{
id: 11,
organization: "洛阳武校",
playerName: "李四",
scheduleDetail: {...}
}
]
}
]
}
```
### 5.3 场地按钮点击交互
当用户点击某个场地时间段按钮时:
```javascript
handleVenueTimeClick(participant, scheduleDetail) {
// 弹出对话框显示该时间段该场地的详细信息
this.$alert(`
<h3>场地详情</h3>
<p>场地: ${scheduleDetail.venueName}</p>
<p>时间: ${scheduleDetail.scheduleDate} ${scheduleDetail.timeSlot}</p>
<p>参赛者: ${participant.organization} - ${participant.playerName}</p>
<p>项目: ${participant.projectName}</p>
`, '场地时间段详情', {
dangerouslyUseHTMLString: true
});
}
```
---
## 6. 后端定时任务设计
### 6.1 定时任务配置
```java
@Component
@EnableScheduling
public class ScheduleAutoArrangeTask {
@Autowired
private IScheduleService scheduleService;
/**
* 每10分钟执行一次自动编排
* cron: 0 */10 * * * ?
*/
@Scheduled(cron = "0 */10 * * * ?")
public void autoArrangeSchedule() {
log.info("开始执行自动编排任务...");
try {
// 查询所有未锁定的赛事
List<Long> competitionIds = scheduleService.getUnlockedCompetitions();
for (Long competitionId : competitionIds) {
try {
// 执行自动编排
scheduleService.autoArrange(competitionId);
log.info("赛事[{}]自动编排完成", competitionId);
} catch (Exception e) {
log.error("赛事[{}]自动编排失败", competitionId, e);
}
}
} catch (Exception e) {
log.error("自动编排任务执行失败", e);
}
}
}
```
### 6.2 编排服务接口
```java
public interface IScheduleService {
/**
* 自动编排
* @param competitionId 赛事ID
*/
void autoArrange(Long competitionId);
/**
* 获取未锁定的赛事列表
* @return 赛事ID列表
*/
List<Long> getUnlockedCompetitions();
/**
* 保存编排(锁定)
* @param competitionId 赛事ID
* @param userId 用户ID
*/
void saveAndLock(Long competitionId, String userId);
/**
* 获取编排结果
* @param competitionId 赛事ID
* @return 编排数据
*/
ScheduleResult getScheduleResult(Long competitionId);
/**
* 手动调整编排
* @param adjustRequest 调整请求
*/
void adjustSchedule(ScheduleAdjustRequest adjustRequest);
}
```
---
## 7. API接口设计
### 7.1 获取编排结果
```
GET /api/martial/schedule/result/{competitionId}
Response:
{
"code": 200,
"msg": "success",
"data": {
"competitionId": 200,
"scheduleStatus": 1, // 0=未编排 1=编排中 2=已锁定
"lastAutoScheduleTime": "2025-11-06 10:00:00",
"totalGroups": 45,
"totalParticipants": 1100,
"scheduleGroups": [
{
"id": 1,
"groupName": "太极拳男组",
"projectType": 2,
"displayOrder": 1,
"organizationGroups": [...]
},
...
]
}
}
```
### 7.2 保存并锁定编排
```
POST /api/martial/schedule/save-and-lock
Request:
{
"competitionId": 200,
"userId": "admin"
}
Response:
{
"code": 200,
"msg": "编排已保存并锁定"
}
```
### 7.3 手动调整编排
```
POST /api/martial/schedule/adjust
Request:
{
"competitionId": 200,
"participantId": 123,
"targetVenueId": 2,
"targetDate": "2025-11-06",
"targetTimeSlot": "13:30"
}
Response:
{
"code": 200,
"msg": "调整成功"
}
```
---
## 8. 测试数据设计
### 8.1 集体项目测试数据
需要生成100个集体项目的参赛队伍
```
项目分布:
- 太极拳集体20个单位
- 长拳集体20个单位
- 剑术集体20个单位
- 刀术集体20个单位
- 棍术集体20个单位
每个单位5人共100个队伍500人
```
### 8.2 测试数据总计
```
原有个人项目1000人
新增集体项目500人100个队伍
总计1500人
预计分组:
- 集体项目分组约20个按项目+组别)
- 个人项目分组约25个
- 总计约45个分组
```
---
## 9. 技术实现要点
### 9.1 后端技术栈
- **Spring Boot**: 2.x
- **MyBatis-Plus**: 数据访问
- **Quartz**: 定时任务调度
- **Redis**: 编排结果缓存(可选)
### 9.2 前端技术栈
- **Vue 3**: 前端框架
- **Element Plus**: UI组件
- **Axios**: HTTP请求
### 9.3 性能优化
1. **批量查询**:一次性加载所有参赛者
2. **结果缓存**编排结果缓存10分钟
3. **增量编排**:只对新增参赛者进行增量编排(可选)
4. **索引优化**:场地、时间段联合索引
---
## 10. 实施计划
### 阶段1数据库和测试数据第1天
- ✅ 创建数据库表
- ✅ 生成集体项目测试数据
- ✅ 验证数据完整性
### 阶段2后端编排算法第2-3天
- ⏳ 实现自动分组算法
- ⏳ 实现场地时间段分配算法
- ⏳ 实现定时任务
- ⏳ 单元测试
### 阶段3后端API接口第4天
- ⏳ 获取编排结果接口
- ⏳ 保存锁定接口
- ⏳ 手动调整接口
### 阶段4前端展示页面第5-6天
- ⏳ 修改页面布局
- ⏳ 实现集体/个人不同展示
- ⏳ 实现场地时间段按钮点击
- ⏳ 集成后端API
### 阶段5测试和优化第7天
- ⏳ 功能测试
- ⏳ 性能测试
- ⏳ 用户验收测试
---
## 11. 风险和注意事项
### 11.1 容量不足风险
**风险**:参赛人数过多,所有场地时间段容量不足
**解决方案**
- 编排前进行容量校验
- 提示用户增加比赛天数或场地
- 自动建议最少需要的天数
### 11.2 数据一致性
**风险**:定时任务执行时用户正在查看页面
**解决方案**
- 前端轮询检查编排时间戳
- 如有更新,提示用户刷新
- 锁定状态下不再自动编排
### 11.3 并发冲突
**风险**:多个定时任务同时执行
**解决方案**
- 使用分布式锁Redis
- 数据库乐观锁
- 任务执行状态标记
---
**文档版本**: v2.0
**创建人**: Claude Code
**审核人**: 待定
**状态**: 设计中

View File

@@ -0,0 +1,194 @@
# 赛程编排界面测试指南
## 测试前准备
### 1. 启动前端服务
```bash
cd D:\workspace\31.比赛项目\project\martial-web
npm run dev
```
访问地址: http://localhost:5173 (或控制台显示的端口)
### 2. 确认后端服务运行
- 后端地址: http://localhost:8123
- 确认赛事ID: 200 (或其他已有赛程数据的赛事)
## 测试场景
### 场景1: 竞赛分组Tab界面测试
#### 测试步骤
1. 进入赛程编排页面
2. 确认默认显示"竞赛分组"Tab
3. 检查时间段选择器显示是否正确
4. 点击不同时间段按钮,观察分组数据是否正确切换
#### 预期结果
✅ 分组显示为紧凑列表格式
✅ 每个分组标题格式: "序号. 项目名称 [类型标签] 队伍数 人数 编号"
✅ 集体项目子项格式: "序号. 单位名称 [场地标签]"
✅ 个人项目子项格式: "序号. 单位-姓名 [场地标签]"
✅ 场地标签显示为小标签(如"场A场")
✅ 时间段切换时数据正确过滤
#### 对比参考图片
- 参考图片: `doc/image/订单管理页面/微信图片_20251127165909_228_2.png`
- 检查点:
- 布局是否紧凑
- 序号是否显示
- 场地标签是否内联显示
- 颜色样式是否协调
### 场景2: 场地Tab界面测试
#### 测试步骤
1. 点击"场地"Tab切换
2. 确认显示时间段选择器
3. 观察场地分区是否正确显示
4. 检查每个场地的标题样式
5. 检查每个场地的表格内容
6. 点击不同时间段,观察各场地表格数据变化
#### 预期结果
✅ 显示多个场地分区(一号场地、二号场地等)
✅ 每个场地标题有蓝色背景
✅ 每个场地显示独立的表格
✅ 表格列包含: 序号、项目、单人/集体、队伍、组数、合并场、序号
✅ "单人/集体"列显示带颜色的标签
✅ 集体项目按单位展开为多行
✅ 个人项目整个分组显示为一行
✅ 时间段切换时表格数据正确过滤
✅ 某场地无数据时显示空数据提示
#### 对比参考图片
- 参考图片: `doc/image/订单管理页面/微信图片_20251127165915_229_2.png`
- 检查点:
- 场地分区是否清晰
- 场地标题样式是否匹配(蓝色背景)
- 表格列是否对齐
- 表格边框是否显示
- 数据是否正确填充
### 场景3: 数据过滤测试
#### 测试步骤
1. 在"竞赛分组"Tab选择不同时间段
2. 记录显示的分组数量
3. 切换到"场地"Tab
4. 确认相同时间段,各场地表格数据总和与竞赛分组数量一致
5. 切换不同时间段,重复验证
#### 预期结果
✅ 两个Tab的时间段选择器状态保持同步
✅ 同一时间段,两个Tab显示的数据应该对应
✅ 数据过滤准确,无遗漏或重复
### 场景4: 空数据测试
#### 测试步骤
1. 选择一个没有赛程的时间段
2. 观察"竞赛分组"Tab显示
3. 观察"场地"Tab显示
#### 预期结果
✅ "竞赛分组"Tab显示空数据提示
✅ "场地"Tab各场地显示空数据提示
✅ 空数据提示美观清晰
### 场景5: 大数据量测试
#### 测试步骤
1. 使用有大量参赛者的赛事(如测试赛事ID: 200, 1000人)
2. 检查页面加载速度
3. 检查表格滚动是否流畅
4. 检查数据显示是否完整
#### 预期结果
✅ 页面加载无明显卡顿
✅ 表格滚动流畅
✅ 所有数据正确显示
✅ 序号连续无跳号
### 场景6: 功能按钮测试
#### 测试步骤
1. 点击"刷新"按钮
2. 点击"保存编排"按钮(如果状态允许)
3. 观察状态标签变化
#### 预期结果
✅ 刷新按钮正常工作
✅ 保存按钮正常工作
✅ 状态标签正确显示(未编排/编排中/已锁定)
## 兼容性测试
### 浏览器测试
- [ ] Chrome (最新版)
- [ ] Edge (最新版)
- [ ] Firefox (最新版)
### 分辨率测试
- [ ] 1920x1080
- [ ] 1366x768
- [ ] 1280x720
## 问题记录
### 界面问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|------|----------|----------|------|------|
| 1 | | | | |
### 数据问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|------|----------|----------|------|------|
| 1 | | | | |
### 功能问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|------|----------|----------|------|------|
| 1 | | | | |
## 性能指标
### 页面加载
- [ ] 初始加载时间 < 2秒
- [ ] Tab切换响应 < 500毫秒
- [ ] 时间段切换响应 < 500毫秒
### 数据渲染
- [ ] 100人以下: 即时渲染
- [ ] 100-500人: < 1秒
- [ ] 500-1000人: < 2秒
- [ ] 1000人以上: < 3秒
## 验收标准
### 必须满足
✅ 界面布局与参考图片一致
✅ 所有功能正常工作
✅ 数据显示准确无误
✅ 无明显性能问题
✅ 无控制台错误
### 建议满足
✅ 页面加载流畅
✅ 动画过渡自然
✅ 空数据提示友好
✅ 多浏览器兼容
## 测试完成确认
- [ ] 所有测试场景已执行
- [ ] 所有问题已记录
- [ ] 严重问题已修复
- [ ] 功能验收通过
- [ ] 界面验收通过
---
**测试人员**: _____________
**测试日期**: _____________
**测试版本**: _____________

View File

@@ -0,0 +1,230 @@
# 赛程编排界面更新总结
## 更新时间
2025-12-09
## 更新目标
根据参考图片修改赛程编排页面的显示界面,使其更加简洁紧凑,同时保持所有现有业务逻辑不变。
## 参考图片
1. `doc/image/订单管理页面/微信图片_20251127165909_228_2.png` - 竞赛分组Tab界面
2. `doc/image/订单管理页面/微信图片_20251127165915_229_2.png` - 场地Tab界面
## 主要改动
### 1. 竞赛分组Tab (Competition Grouping Tab)
#### 改动前
- 使用卡片式布局展示分组
- 场地时间信息显示为按钮
- 布局较为分散,占用空间较大
#### 改动后
- 采用紧凑列表布局
- 分组标题显示为:"序号. 项目名称 类型标签 队伍数 人数 编号"
- 集体项目:子项显示为"序号. 单位名称 场地标签..."
- 个人项目:子项显示为"序号. 单位-姓名 场地标签"
- 场地信息以小标签形式内联显示(如"场A场")
#### 新增样式类
- `.groups-list-compact` - 紧凑列表容器
- `.group-item-compact` - 分组项
- `.group-header-compact` - 分组标题区
- `.group-number` - 序号样式
- `.group-title-text` - 标题文本
- `.group-type-badge` - 类型标签(集体/个人)
- `.group-meta-text` - 元信息文本
- `.team-list-compact` - 集体项目队伍列表
- `.team-item-compact` - 队伍项
- `.individual-list-compact` - 个人项目列表
- `.individual-item-compact` - 个人项
- `.venue-labels` - 场地标签容器
- `.venue-label` - 单个场地标签
### 2. 场地Tab (Venue Tab)
#### 改动前
- 按场地分区显示,每个场地一个大卡片
- 每个场地内显示该场地的所有分组
- 使用与竞赛分组Tab相同的卡片布局
#### 改动后
- **按场地分区显示**,保持场地分区结构
- 添加时间段选择器(与竞赛分组Tab一致)
- 每个场地显示一个**独立的表格**
- 场地标题采用蓝色背景样式
- 使用Element Plus的`el-table`组件
- 表格列:
- 序号 (80px, 居中)
- 项目 (最小200px)
- 单人/集体 (100px, 居中, 带标签)
- 队伍 (80px, 居中)
- 组数 (80px, 居中)
- 合并场 (100px, 居中)
- 序号 (100px, 居中)
#### 新增计算属性
```javascript
venueTableDataByVenue() {
// 按场地生成表格数据数组
// 每个场地一个对象: { venueId, venueName, tableData }
// 根据当前选中时间段过滤该场地的分组
// 集体项目:按单位(organizationGroups)生成行
// 个人项目:整个分组作为一行
}
```
#### 新增样式类
- `.venue-section-table` - 场地分区容器
- `.venue-header` - 场地标题(蓝色背景)
- `.empty-venue` - 场地无数据提示
- `.venue-table-container` - 表格容器
- Element Plus表格样式覆盖
### 3. 公共改进
#### 时间段选择器
- 两个Tab都显示时间段选择器
- 选中的时间段高亮显示
- 根据选中时间段过滤显示的数据
#### 样式优化
- 统一使用更紧凑的间距
- 调整颜色方案以匹配参考图片
- 使用内联标签代替按钮显示场地信息
- 优化字体大小和权重
## 文件修改
### 修改的文件
- `src/views/martial/schedule/index.vue`
### 具体修改内容
#### Template部分
1. **竞赛分组Tab** (行 38-113)
- 重写分组列表结构为紧凑布局
- 移除按钮,使用标签显示场地
- 简化嵌套结构
2. **场地Tab** (行 115-172)
- 保持场地分区结构
- 每个场地显示独立表格
- 添加时间段选择器
- 使用`el-table`组件
- 添加场地标题和空数据提示
#### Script部分
1. **computed属性** (行 238-331)
- 保留`currentTimeSlotGroups`
- 保留`groupsByVenue`
- 新增`venueTableDataByVenue` - 按场地生成表格数据数组
#### Style部分 (行 527-775)
1. 完全重写样式
2. 移除旧的`.groups-list`相关样式
3. 新增`.groups-list-compact`相关样式
4. 新增`.venue-section-table`相关样式(场地分区+表格)
5. 保持页面整体布局样式不变
## 保持不变的功能
### 数据加载
- `loadCompetitionInfo()` - 加载赛事信息
- `loadVenues()` - 加载场地列表
- `loadScheduleResult()` - 加载编排结果
- `generateTimeSlots()` - 生成时间段
### 业务逻辑
- 自动编排逻辑(后端)
- 数据结构(scheduleGroups)
- API调用
- 保存和锁定功能
- 刷新功能
### 删除的功能
- 场地详情对话框相关代码(场地信息已直接在表格中显示)
- `handleVenueDetailClick()` 方法(不再需要)
- `handleParticipantDetailClick()` 方法(不再需要)
- 相关的dialog组件(不再需要)
## 兼容性说明
### 数据结构兼容
完全兼容现有后端API返回的数据结构:
- `scheduleGroups` 数组
- `organizationGroups` (集体项目)
- `participants` (个人项目)
- `scheduleDetails` 场地时间信息
### 功能兼容
- 所有后端API保持不变
- 所有业务逻辑保持不变
- 仅UI展示方式改变
## 测试建议
### 界面测试
1. 检查竞赛分组Tab显示是否正确
2. 检查场地Tab表格显示是否正确
3. 测试时间段切换功能
4. 测试Tab切换功能
5. 检查在不同数据量下的显示效果
### 数据测试
1. 测试无数据情况
2. 测试集体项目数据
3. 测试个人项目数据
4. 测试混合数据
5. 测试大数据量(1000+参赛者)
### 功能测试
1. 测试刷新功能
2. 测试保存编排功能
3. 测试锁定状态显示
4. 测试导出功能
## 后续优化建议
### 功能增强
1. 添加表格排序功能
2. 添加表格搜索/过滤功能
3. 添加分页功能(数据量大时)
4. 支持拖拽调整分组顺序
### 交互优化
1. 添加点击表格行显示详情
2. 添加右键菜单快捷操作
3. 添加批量编辑功能
4. 添加场地冲突高亮提示
### 导出功能
1. 支持导出为Excel
2. 支持导出为PDF
3. 支持打印预览
4. 支持自定义导出模板
## 总结
本次更新成功将赛程编排界面改造为更加紧凑清晰的布局,主要亮点:
✅ 竞赛分组Tab采用紧凑列表,信息密度更高
✅ 场地Tab保持场地分区结构,每个场地显示独立表格
✅ 两个Tab都支持时间段筛选
✅ 场地标题采用醒目的蓝色背景样式
✅ 保持所有现有业务逻辑不变
✅ 完全兼容现有后端API
✅ 样式清晰,符合参考图片要求
**关键改进点:**
- 场地Tab按"一号场地"、"二号场地"等分区显示
- 每个场地区域内显示该场地的赛程表格
- 表格数据根据选中的时间段动态过滤
- 集体项目按单位(队伍)展开为多行
- 个人项目整个分组显示为一行
---
**修改人**: Claude Code
**修改日期**: 2025-12-09
**文件位置**: `src/views/martial/schedule/index.vue`

View File

@@ -0,0 +1,442 @@
# 编排功能实施总结
> **完成日期**: 2025-12-11
> **实施人员**: Claude Code
> **项目**: 武术赛事管理系统 - 编排模块
---
## 📋 实施概述
本次实施完成了武术赛事编排系统的前后端完整功能,包括数据查询、草稿保存、编排锁定等核心功能。
## ✅ 已完成功能
### 1. 后端实现
#### 1.1 Controller层
**文件**: [MartialScheduleArrangeController.java](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\controller\MartialScheduleArrangeController.java)
已实现的接口:
-`GET /api/martial/schedule/result` - 获取编排结果
-`POST /api/martial/schedule/save-draft` - 保存编排草稿
-`POST /api/martial/schedule/save-and-lock` - 完成编排并锁定
-`POST /api/martial/schedule/auto-arrange` - 手动触发自动编排
#### 1.2 Service层
**文件**: [MartialScheduleServiceImpl.java](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\service\impl\MartialScheduleServiceImpl.java)
已实现的方法:
**getScheduleResult(Long competitionId)**
- 功能:获取赛程编排结果
- 优化使用LEFT JOIN一次性查询所有数据避免N+1问题
- 返回:包含分组、场地、时间段、参赛者的完整数据
```java
@Override
public ScheduleResultDTO getScheduleResult(Long competitionId) {
// 使用优化的一次性JOIN查询
List<ScheduleGroupDetailVO> details = scheduleGroupMapper
.selectScheduleGroupDetails(competitionId);
// 在内存中按分组ID分组
Map<Long, List<ScheduleGroupDetailVO>> groupMap = details.stream()
.collect(Collectors.groupingBy(ScheduleGroupDetailVO::getGroupId));
// 检查编排状态并组装数据
// ...
}
```
**saveDraftSchedule(SaveScheduleDraftDTO dto)**
- 功能:保存编排草稿
- 事务:使用@Transactional确保数据一致性
- 处理:更新分组、明细、参赛者信息
```java
@Override
@Transactional(rollbackFor = Exception.class)
public boolean saveDraftSchedule(SaveScheduleDraftDTO dto) {
// 遍历每个分组
for (CompetitionGroupDTO groupDTO : dto.getCompetitionGroups()) {
// 更新编排明细(场地、时间段)
// 更新参赛者信息(状态、出场顺序)
}
return true;
}
```
**saveAndLockSchedule(Long competitionId)**
- 功能:完成编排并锁定
- 事务:使用@Transactional确保数据一致性
- 处理:将所有参赛者状态改为"completed"
```java
@Override
@Transactional(rollbackFor = Exception.class)
public boolean saveAndLockSchedule(Long competitionId) {
// 查询所有分组
// 更新所有参赛者的编排状态为completed
for (MartialScheduleParticipant participant : participants) {
participant.setScheduleStatus("completed");
scheduleParticipantMapper.updateById(participant);
}
return true;
}
```
#### 1.3 Mapper层
**文件**: [MartialScheduleGroupMapper.xml](d:\workspace\31.比赛项目\project\martial-master\src\main\java\org\springblade\modules\martial\mapper\MartialScheduleGroupMapper.xml)
核心SQL查询
```xml
<select id="selectScheduleGroupDetails" resultType="ScheduleGroupDetailVO">
SELECT
g.id AS groupId,
g.group_name AS groupName,
g.category AS category,
g.project_type AS projectType,
g.total_teams AS totalTeams,
g.total_participants AS totalParticipants,
g.display_order AS displayOrder,
d.id AS detailId,
d.venue_id AS venueId,
d.venue_name AS venueName,
d.time_slot AS timeSlot,
p.id AS participantId,
p.organization AS organization,
p.check_in_status AS checkInStatus,
p.schedule_status AS scheduleStatus,
p.performance_order AS performanceOrder
FROM
martial_schedule_group g
LEFT JOIN
martial_schedule_detail d ON g.id = d.schedule_group_id AND d.is_deleted = 0
LEFT JOIN
martial_schedule_participant p ON g.id = p.schedule_group_id AND p.is_deleted = 0
WHERE
g.competition_id = #{competitionId}
AND g.is_deleted = 0
ORDER BY
g.display_order ASC,
p.performance_order ASC
</select>
```
**优化说明**
- ✅ 使用LEFT JOIN避免N+1查询问题
- ✅ 一次性获取所有关联数据
- ✅ 在Service层进行内存分组提高性能
#### 1.4 DTO类
已定义的DTO
**ScheduleResultDTO** - 编排结果DTO
```java
@Data
public class ScheduleResultDTO {
private Boolean isDraft; // 是否为草稿
private Boolean isCompleted; // 是否已完成
private List<CompetitionGroupDTO> competitionGroups; // 竞赛分组列表
}
```
**CompetitionGroupDTO** - 竞赛分组DTO
```java
@Data
public class CompetitionGroupDTO {
private Long id; // 分组ID
private String title; // 分组标题
private String type; // 类型:集体/单人/双人
private String count; // 队伍数量
private String code; // 分组编号
private Long venueId; // 场地ID
private String venueName; // 场地名称
private String timeSlot; // 时间段
private Integer timeSlotIndex; // 时间段索引
private List<ParticipantDTO> participants; // 参赛人员列表
}
```
**ParticipantDTO** - 参赛人员DTO
```java
@Data
public class ParticipantDTO {
private Long id; // 参赛人员ID
private String schoolUnit; // 学校/单位
private String status; // 状态:未签到/已签到/异常
private Integer sortOrder; // 排序
}
```
**SaveScheduleDraftDTO** - 保存草稿DTO
```java
@Data
public class SaveScheduleDraftDTO {
private Long competitionId; // 赛事ID
private Boolean isDraft; // 是否为草稿
private List<CompetitionGroupDTO> competitionGroups; // 竞赛分组数据
}
```
### 2. 前端实现
#### 2.1 页面组件
**文件**: [index.vue](d:\workspace\31.比赛项目\project\martial-web\src\views\martial\schedule\index.vue)
主要功能:
- ✅ 场地选择和时间段选择
- ✅ 竞赛分组列表展示(根据场地和时间段过滤)
- ✅ 参赛者上移/下移功能
- ✅ 异常标记功能
- ✅ 分组移动功能
- ✅ 草稿保存功能
- ✅ 完成编排并锁定功能
#### 2.2 核心方法
**loadScheduleData()** - 加载编排数据
```javascript
async loadScheduleData() {
const res = await getScheduleResult(this.competitionId)
const data = res.data?.data
this.isScheduleCompleted = data.isCompleted || false
this.competitionGroups = data.competitionGroups.map(/* 数据映射 */)
// 加载异常组数据
this.loadExceptionList()
}
```
**handleSaveDraft()** - 保存草稿
```javascript
async handleSaveDraft() {
const saveData = {
competitionId: this.competitionId,
isDraft: true,
competitionGroups: this.competitionGroups.map(group => ({
// 映射所有分组数据
participants: group.items.map((item, index) => ({
id: item.id,
schoolUnit: item.schoolUnit,
status: item.status,
sortOrder: index + 1 // 重新计算顺序
}))
}))
}
await saveDraftSchedule(saveData)
this.$message.success('草稿保存成功')
}
```
**confirmComplete()** - 完成编排(已修复)
```javascript
async confirmComplete() {
// 1. 先保存草稿
const saveData = { /* 构建数据 */ }
await saveDraftSchedule(saveData)
// 2. 然后锁定
await saveAndLockSchedule(saveData)
// 3. 更新UI状态
this.isScheduleCompleted = true
this.$message.success('编排已完成并锁定')
}
```
#### 2.3 计算属性
**filteredCompetitionGroups** - 过滤竞赛分组
```javascript
computed: {
filteredCompetitionGroups() {
if (!this.selectedVenueId || this.selectedTime === null) {
return []
}
return this.competitionGroups.filter(group => {
return group.venueId === this.selectedVenueId &&
group.timeSlotIndex === this.selectedTime
})
}
}
```
#### 2.4 API调用
**文件**: [activitySchedule.js](d:\workspace\31.比赛项目\project\martial-web\src\api\martial\activitySchedule.js)
```javascript
// 获取赛程编排结果
export const getScheduleResult = (competitionId) => {
return request({
url: '/api/martial/schedule/result',
method: 'get',
params: { competitionId }
})
}
// 保存编排草稿
export const saveDraftSchedule = (data) => {
return request({
url: '/api/martial/schedule/save-draft',
method: 'post',
data
})
}
// 保存并锁定赛程编排
export const saveAndLockSchedule = (data) => {
return request({
url: '/api/martial/schedule/save-and-lock',
method: 'post',
data
})
}
```
## 🔧 修复的问题
### 问题1: 前端页面不显示编排数据
**原因**: 缺少场地和时间段过滤逻辑
**解决方案**: 添加计算属性`filteredCompetitionGroups`实现动态过滤
### 问题2: confirmComplete方法未调用保存接口
**原因**: 直接修改状态,没有调用后端接口
**解决方案**: 修改为先保存草稿,再调用锁定接口
**修改前**:
```javascript
confirmComplete() {
this.isScheduleCompleted = true
this.confirmDialogVisible = false
this.$message.success('编排已完成,现在可以进行调度操作')
}
```
**修改后**:
```javascript
async confirmComplete() {
try {
// 1. 保存草稿
await saveDraftSchedule(saveData)
// 2. 锁定
await saveAndLockSchedule(saveData)
// 3. 更新UI
this.isScheduleCompleted = true
this.$message.success('编排已完成并锁定')
} catch (err) {
this.$message.error('完成编排失败')
}
}
```
## 📊 数据流转
### 完整流程
```
1. 用户进入编排页面
2. mounted钩子执行
- loadCompetitionInfo() - 加载赛事信息
- loadVenues() - 加载场地列表
- loadScheduleData() - 加载编排数据
3. 后端查询编排数据
GET /api/martial/schedule/result?competitionId=1
- 执行优化的LEFT JOIN查询
- 在内存中分组和组装数据
- 返回ScheduleResultDTO
4. 前端渲染
- 显示场地按钮列表
- 显示时间段按钮列表
- 根据选中的场地和时间段过滤分组
5. 用户操作
- 选择场地/时间段
- 上移/下移参赛者
- 标记异常
- 移动分组
6. 保存草稿
POST /api/martial/schedule/save-draft
- 更新编排明细(场地、时间段)
- 更新参赛者信息(状态、出场顺序)
7. 完成编排
- 先调用保存草稿接口
- 再调用锁定接口
POST /api/martial/schedule/save-and-lock
- 更新所有参赛者状态为"completed"
```
## 🎯 核心技术点
### 1. 性能优化
- **后端**: 使用LEFT JOIN避免N+1查询
- **前端**: 使用计算属性实现响应式过滤
### 2. 数据一致性
- 使用@Transactional确保事务性
- 先保存草稿再锁定,确保数据完整
### 3. 用户体验
- 实时更新:修改后立即反馈
- 错误处理:统一的错误提示
- 状态管理:清晰的草稿/已完成状态
## 📝 测试建议
### 功能测试
1. ✅ 测试加载编排数据
2. ✅ 测试场地和时间段切换
3. ✅ 测试参赛者上移/下移
4. ✅ 测试异常标记和移除
5. ✅ 测试分组移动
6. ✅ 测试保存草稿
7. ✅ 测试完成编排并锁定
### 性能测试
1. 测试大量数据1000+参赛者)的加载速度
2. 测试频繁切换场地和时间段的响应速度
3. 测试保存草稿的并发性能
### 边界测试
1. 测试没有编排数据的情况
2. 测试没有场地信息的情况
3. 测试网络异常的情况
4. 测试已锁定编排的操作限制
## 🔗 相关文档
- [编排系统完整指南](./schedule-complete-guide.md) - 完整技术方案
- [项目文档中心](../README.md) - 文档索引
- [版本更新日志](./versions/CHANGELOG.md) - 版本历史
## 📅 后续优化建议
### 短期优化1-2周
1. **前端虚拟滚动** - 优化大数据量渲染
2. **批量操作** - 支持批量上移/下移
3. **撤销/重做** - 支持操作撤销
### 中期优化1-2月
1. **缓存策略** - 减少重复查询
2. **实时推送** - WebSocket实时更新
3. **导出功能** - 完善Excel导出
### 长期优化3-6月
1. **AI智能编排** - 自动优化编排顺序
2. **协同编辑** - 多人同时编排
3. **移动端适配** - 响应式设计
---
**实施完成日期**: 2025-12-11
**文档最后更新**: 2025-12-11

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,203 @@
# 编排系统文档更新日志
> 记录编排系统文档的所有版本更新历史
## 版本规范
- **主版本号 (Major)**: 重大功能变更或架构调整,如 v1.0 → v2.0
- **次版本号 (Minor)**: 功能新增或优化,如 v1.0 → v1.1
- **修订号 (Patch)**: 文档修正、补充说明,如 v1.0.1 → v1.0.2
---
## [v1.0] - 2025-12-10
### 新增内容
#### 系统概述
- 功能简介:自动编排、手动调整、场地管理、草稿保存、锁定发布、数据导出
- 技术栈Vue 2.x + Element UI + Spring Boot + MyBatis Plus + MySQL 8.0
#### 架构设计
- 系统架构图(前端层、后端层、数据库层)
- 模块划分(前端模块、后端模块)
- 详细的文件结构说明
#### 数据库设计
- 核心表设计4张表
- `martial_schedule_group` - 赛程编排分组表
- `martial_schedule_detail` - 赛程编排明细表
- `martial_schedule_participant` - 赛程编排参赛者关联表
- `martial_schedule_status` - 赛程编排状态表
- 关联表说明(`martial_athlete`, `martial_venue`
- 表关系图和关键字段说明
- 完整的建表SQL和索引设计
#### 后端实现
- Controller层实现
- `MartialScheduleArrangeController` - 编排控制器
- 主要接口:获取编排结果、保存草稿、完成并锁定、手动触发编排
- Service层实现
- 核心方法:`getScheduleResult()` - 获取编排结果
- 核心方法:`saveDraftSchedule()` - 保存编排草稿
- 数据流程和事务处理
- Mapper层实现
- 关键SQL查询LEFT JOIN优化
- 避免N+1查询问题的最佳实践
#### 前端实现
- 页面结构index.vue
- 头部布局(返回按钮、标题、异常组按钮)
- Tab切换竞赛分组、场地
- 场地选择器、时间段选择器
- 竞赛分组列表和表格
- 底部操作按钮
- 核心数据结构
- 基础信息字段
- UI状态字段
- 编排数据结构
- 核心方法实现
- `loadScheduleData()` - 加载编排数据
- `handleSaveDraft()` - 保存草稿
- `handleMoveUp/Down()` - 上移/下移
- `markAsException()` - 标记异常
- API调用activitySchedule.js
- `getScheduleResult()` - 获取编排结果
- `saveDraftSchedule()` - 保存草稿
- `saveAndLockSchedule()` - 保存并锁定
#### 数据流转
- 完整流程图8个步骤
- 用户进入页面 → 前端加载 → 后端查询 → 数据返回 → 前端渲染 → 用户操作 → 保存草稿 → 完成编排
- 数据库操作流程
- 查询编排数据的SQL
- 保存草稿数据的事务处理
#### 核心功能
- 场地和时间段过滤(计算属性实现)
- 参赛者顺序调整(上移、下移)
- 分组移动(跨场地、跨时间段)
- 异常标记(异常组管理)
- 草稿保存(增量更新)
- 完成编排(锁定机制)
#### API接口文档
- GET `/api/martial/schedule/result` - 获取编排结果
- POST `/api/martial/schedule/save-draft` - 保存编排草稿
- POST `/api/martial/schedule/save-and-lock` - 完成编排并锁定
- GET `/api/martial/venue/list-by-competition` - 获取场地列表
- GET `/api/martial/competition/detail` - 获取赛事详情
- 包含请求参数、响应示例、错误码说明
#### 关键代码解析
- 计算属性 `filteredCompetitionGroups` 的实现原理
- 生成时间段列表的算法
- 保存草稿的数据转换逻辑
- 后端数据组装的性能优化
#### 使用指南
- 管理员操作流程(进入页面、查看数据、调整编排、保存草稿、完成编排)
- 常见问题解答
- 为什么编排数据为空?
- 为什么无法编辑?
- 保存草稿失败怎么办?
- 开发调试方法
- 前端调试技巧
- 后端调试技巧
- 数据库调试SQL
#### 附录
- 数据字典(编排状态、项目类型、参赛者状态)
- 相关文档链接
- 更新日志
### 文档特色
- **完整性**覆盖从前端到后端、从UI到数据库的完整技术栈
- **实用性**:包含大量代码示例和实际操作流程
- **可读性**:清晰的章节结构、流程图、表格说明
- **可维护性**:详细的注释和说明,便于后续维护
### 文件信息
- **文件名**: `schedule-complete-guide.md`
- **文件大小**: ~62 KB
- **总行数**: 1857 行
- **主要章节**: 11 个
- **代码示例**: 50+ 个
- **SQL语句**: 10+ 个
- **流程图**: 5 个
---
## 版本对比
| 版本 | 发布日期 | 主要内容 | 文件大小 | 行数 |
|------|----------|----------|----------|------|
| v1.0 | 2025-12-10 | 初始版本,完整技术方案 | ~62 KB | 1857 |
---
## 待规划版本
### v1.1 (计划中)
可能的更新方向:
- **性能优化章节**
- 前端虚拟滚动优化
- 后端分页查询优化
- 缓存策略设计
- **扩展功能**
- 批量操作功能
- 撤销/重做功能
- 编排历史记录
- **集成测试**
- 单元测试用例
- 集成测试方案
- 性能测试报告
### v2.0 (未来)
可能的重大更新:
- 微服务架构改造
- 前端升级到 Vue 3
- 实时协同编排功能
- AI智能编排算法
---
## 文档维护说明
### 更新规范
1. **修改主文档**
- 所有修改都在 `schedule-complete-guide.md` 中进行
- 更新文档头部的版本信息和更新日期
2. **发布新版本**
- 确定版本号(根据修改程度)
- 复制主文档到 `versions/vX.X/` 目录
- 更新本 CHANGELOG.md 文件
- 更新 README.md 中的版本信息
3. **归档旧版本**
- 不再维护的文档移到 `archive/` 目录
- 在文档顶部添加 **已废弃** 标记
### 版本命名示例
```
v1.0 - 初始版本
v1.1 - 新增性能优化章节
v1.1.1 - 修正API文档中的错误
v1.2 - 新增集成测试章节
v2.0 - 架构重构升级到Vue 3
```
---
**文档最后更新**: 2025-12-10

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,181 @@
# 裁判邀请功能使用说明
## 功能概述
裁判邀请模块用于为武术赛事邀请裁判,通过生成邀请码的方式让裁判登录系统并回复邀请。
## 完整操作流程
### 1. 准备工作
#### 1.1 创建赛事
- 进入"赛事管理"模块
- 创建新的赛事
- 确保赛事状态为"进行中"
#### 1.2 添加裁判
- 进入"评委管理"模块
- 点击"新增评委"按钮
- 填写裁判基本信息:
- 姓名、性别、手机号、身份证号
- 裁判类型(主裁判/普通裁判)
- 等级/职称
- 擅长项目
- 保存裁判信息
### 2. 生成邀请码
#### 方式一:从评委库导入(推荐)
这是为新裁判生成邀请码的主要方式。
**操作步骤:**
1. 进入"裁判邀请"页面
2. 选择赛事(页面顶部下拉框)
3. 点击"从评委库导入"按钮
4. 在弹出的对话框中:
- 可以搜索裁判(按姓名、手机号、类型)
- 勾选需要邀请的裁判(支持多选)
- 查看已选择的裁判数量
5. 点击"确定导入"按钮
6. 系统自动为选中的裁判批量生成邀请码
7. 生成成功后,邀请列表会自动刷新
**特点:**
- ✅ 支持批量操作
- ✅ 可以搜索和筛选裁判
- ✅ 自动生成邀请码
- ✅ 适合首次邀请裁判
#### 方式二:批量生成邀请码
用于为已有邀请记录但未生成邀请码的裁判批量生成。
**操作步骤:**
1. 在邀请列表中勾选需要生成邀请码的记录
2. 点击"批量生成邀请码"按钮
3. 确认操作
4. 系统为选中的裁判生成邀请码
**注意:**
- ⚠️ 只能为已有邀请记录的裁判生成
- ⚠️ 如果是新裁判,请使用"从评委库导入"
#### 方式三:单个生成邀请码
用于为单个裁判生成或重新生成邀请码。
**操作步骤:**
1. 在邀请列表中找到目标裁判
2. 如果未生成邀请码:点击"生成邀请码"按钮
3. 如果已有邀请码:点击邀请码旁边的刷新图标"重新生成"
4. 邀请码会自动复制到剪贴板
### 3. 发送邀请
生成邀请码后,需要将邀请码发送给裁判:
**发送方式:**
- 📧 邮件:将邀请码通过邮件发送
- 📱 短信:将邀请码通过短信发送
- 💬 微信/其他:通过即时通讯工具发送
**邀请码使用:**
- 裁判收到邀请码后,访问系统登录页面
- 输入邀请码进行登录
- 查看赛事信息并回复邀请(接受/拒绝)
### 4. 管理邀请
#### 4.1 查看邀请状态
邀请状态说明:
- 🟡 **待回复**:已发送邀请,裁判尚未回复
- 🟢 **已接受**:裁判已接受邀请
- 🔴 **已拒绝**:裁判已拒绝邀请
-**已取消**:管理员已取消邀请
#### 4.2 邀请操作
**对于"待回复"状态的邀请:**
- **重发**:重新发送邀请通知
- **提醒**:发送提醒消息催促裁判回复
- **取消**:取消邀请(需填写取消原因)
**对于"已接受"状态的邀请:**
- **确认**:确认裁判参与(可进行后续的场地、项目分配)
**所有邀请:**
- **查看**:查看邀请详细信息
- **复制邀请码**:点击邀请码即可复制
### 5. 统计信息
页面顶部显示四个统计卡片:
- 📊 **总邀请数**:已发送的邀请总数
-**待回复**:等待裁判回复的邀请数
-**已接受**:裁判已接受的邀请数
-**已拒绝**:裁判已拒绝的邀请数
### 6. 导出数据
点击"导出数据"按钮可以导出当前筛选条件下的邀请列表为Excel文件。
## 常见问题
### Q1: 为什么"批量生成邀请码"按钮是灰色的?
**A:** 可能的原因:
1. 未选择赛事
2. 赛事列表正在加载
3. 未勾选任何邀请记录
### Q2: 如何为新裁判生成邀请码?
**A:** 使用"从评委库导入"功能:
1. 先在"评委管理"中添加裁判
2. 在"裁判邀请"页面点击"从评委库导入"
3. 选择裁判并确认导入
### Q3: 邀请码可以重复使用吗?
**A:** 不可以。每个邀请码只能使用一次。如果需要重新邀请,请使用"重新生成"功能。
### Q4: 邀请码有效期是多久?
**A:** 默认有效期为30天。过期后需要重新生成。
### Q5: 如何知道裁判是否收到邀请?
**A:**
- 查看邀请状态,如果裁判已登录并回复,状态会更新
- 可以使用"提醒"功能发送提醒消息
- 建议通过电话或其他方式确认裁判是否收到
## 技术说明
### 邀请码生成规则
- 每个赛事+裁判组合生成唯一邀请码
- 邀请码包含角色信息(主裁判/普通裁判)
- 可以预分配场地和项目
### 数据关联
```
赛事 (Competition)
邀请记录 (JudgeInvite)
裁判 (Judge)
```
### API接口
- 生成邀请码:`POST /api/blade-martial/judgeInvite/generate`
- 批量生成:`POST /api/blade-martial/judgeInvite/generate/batch`
- 重新生成:`PUT /api/blade-martial/judgeInvite/regenerate/{inviteId}`
- 邀请列表:`GET /api/blade-martial/judgeInvite/list`
- 邀请统计:`GET /api/blade-martial/judgeInvite/statistics`
## 更新日志
### 2025-12-13
- ✨ 新增"从评委库导入"功能
- ✨ 支持裁判搜索和筛选
- ✨ 优化邀请码生成流程
- 🐛 修复按钮禁用逻辑问题
- 🐛 修复赛事选择初始化问题
- 💄 优化用户界面和交互体验

View File

@@ -0,0 +1,581 @@
# 评委邀请码功能实现指南
> **实施日期**: 2025-12-12
> **页面路径**: `src/views/martial/judgeInvite/index.vue`
> **与赛事绑定**: ✅ 已通过 `competitionId` 实现
---
## 📋 实现方案
### 一、需求分析
根据文档,评委邀请码功能需要实现:
1. **单个生成**为单个评委生成6位邀请码
2. **批量生成**:为多个评委批量生成邀请码
3. **重新生成**:已有邀请码时可重新生成
4. **复制功能**:点击邀请码可复制
5. **赛事绑定**:所有操作都与选中的赛事绑定
### 二、后端接口(已完成)
后端接口已在 `src/api/martial/judgeInvite.js` 中添加:
```javascript
// 1. 生成邀请码
export const generateInviteCode = (data) => {
return request({
url: '/api/blade-martial/judgeInvite/generate',
method: 'post',
data
})
}
// 2. 批量生成邀请码
export const batchGenerateInviteCode = (data) => {
return request({
url: '/api/blade-martial/judgeInvite/generate/batch',
method: 'post',
data
})
}
// 3. 重新生成邀请码
export const regenerateInviteCode = (inviteId) => {
return request({
url: `/api/blade-martial/judgeInvite/regenerate/${inviteId}`,
method: 'put'
})
}
// 4. 查询评委邀请码
export const getInviteByJudge = (competitionId, judgeId) => {
return request({
url: '/api/blade-martial/judgeInvite/byJudge',
method: 'get',
params: { competitionId, judgeId }
})
}
```
---
## 三、前端实现步骤
### 步骤1导入新增的API
`src/views/martial/judgeInvite/index.vue` 第281-292行修改导入语句
```javascript
import {
getJudgeInviteList,
sendInvite,
batchSendInvites,
resendInvite,
cancelInvite,
confirmInvite,
getInviteStatistics,
importFromJudgePool,
exportInvites,
sendReminder,
generateInviteCode, // 新增
batchGenerateInviteCode, // 新增
regenerateInviteCode // 新增
} from '@/api/martial/judgeInvite'
```
### 步骤2修改邀请码列显示第165-179行
将现有的邀请码列替换为:
```vue
<el-table-column prop="inviteCode" label="邀请码" width="200" align="center">
<template #default="{ row }">
<!-- 已有邀请码显示邀请码 + 重新生成按钮 -->
<div v-if="row.inviteCode" style="display: flex; align-items: center; justify-content: center; gap: 8px;">
<el-tag
type="warning"
effect="dark"
size="default"
style="font-family: monospace; font-weight: bold; cursor: pointer;"
@click="copyToClipboard(row.inviteCode, '邀请码')"
title="点击复制"
>
{{ row.inviteCode }}
</el-tag>
<el-button
link
type="primary"
size="small"
@click="handleRegenerateCode(row)"
title="重新生成邀请码"
>
<el-icon><Refresh /></el-icon>
</el-button>
</div>
<!-- 未生成邀请码显示生成按钮 -->
<el-button
v-else
type="primary"
size="small"
@click="handleGenerateCode(row)"
>
生成邀请码
</el-button>
</template>
</el-table-column>
```
### 步骤3添加批量生成按钮第129-131行
修改工具栏的"批量邀请"按钮功能:
```vue
<el-button type="success" :icon="DocumentCopy" @click="handleBatchGenerateCode">
批量生成邀请码
</el-button>
```
### 步骤4添加方法实现
`<script setup>` 部分在第456行之后添加以下方法
```javascript
// ==================== 邀请码生成功能 ====================
/**
* 生成单个邀请码
*/
const handleGenerateCode = async (row) => {
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return
}
try {
loading.value = true
const res = await generateInviteCode({
competitionId: queryParams.competitionId,
judgeId: row.judgeId,
role: row.refereeType === 1 ? 'chief_judge' : 'judge', // 根据评委类型设置角色
venueId: row.venueId || null,
projects: row.projects ? JSON.stringify(row.projects) : null,
expireDays: 30
})
if (res.data && res.data.inviteCode) {
ElMessage.success(`邀请码生成成功:${res.data.inviteCode}`)
// 自动复制到剪贴板
copyToClipboard(res.data.inviteCode, '邀请码')
// 刷新列表
await fetchData()
await loadStatistics()
} else {
ElMessage.error(res.msg || '生成失败')
}
} catch (error) {
console.error('生成邀请码失败:', error)
ElMessage.error(error.response?.data?.msg || error.message || '生成邀请码失败')
} finally {
loading.value = false
}
}
/**
* 重新生成邀请码
*/
const handleRegenerateCode = async (row) => {
try {
await ElMessageBox.confirm(
'重新生成后,旧邀请码将失效。确定继续吗?',
'重新生成邀请码',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
loading.value = true
const res = await regenerateInviteCode(row.id)
if (res.data && res.data.inviteCode) {
ElMessage.success(`邀请码已重新生成:${res.data.inviteCode}`)
// 自动复制到剪贴板
copyToClipboard(res.data.inviteCode, '邀请码')
// 刷新列表
await fetchData()
await loadStatistics()
} else {
ElMessage.error(res.msg || '重新生成失败')
}
} catch (error) {
if (error !== 'cancel') {
console.error('重新生成邀请码失败:', error)
ElMessage.error(error.response?.data?.msg || error.message || '重新生成邀请码失败')
}
} finally {
loading.value = false
}
}
/**
* 批量生成邀请码
*/
const handleBatchGenerateCode = async () => {
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return
}
if (selection.value.length === 0) {
ElMessage.warning('请先选择评委')
return
}
try {
await ElMessageBox.confirm(
`确定为选中的 ${selection.value.length} 位评委批量生成邀请码吗?`,
'批量生成邀请码',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}
)
loading.value = true
const judgeIds = selection.value.map(item => item.judgeId)
const res = await batchGenerateInviteCode({
competitionId: queryParams.competitionId,
judgeIds: judgeIds,
role: 'judge',
expireDays: 30
})
if (res.data && Array.isArray(res.data)) {
ElMessage.success(`成功生成 ${res.data.length} 个邀请码`)
// 刷新列表
await fetchData()
await loadStatistics()
} else {
ElMessage.error(res.msg || '批量生成失败')
}
} catch (error) {
if (error !== 'cancel') {
console.error('批量生成邀请码失败:', error)
ElMessage.error(error.response?.data?.msg || error.message || '批量生成邀请码失败')
}
} finally {
loading.value = false
}
}
```
---
## 四、数据流转说明
### 1. 赛事绑定流程
```
用户操作:
1. 选择赛事(下拉框)
2. queryParams.competitionId 更新
3. 触发 handleCompetitionChange
4. 加载该赛事的评委列表
5. 显示评委及其邀请码状态
```
### 2. 生成邀请码流程
```
单个生成:
1. 点击"生成邀请码"按钮
2. 调用 generateInviteCode API
3. 传入:
- competitionId: 当前选中的赛事ID
- judgeId: 评委ID
- role: 评委角色
- venueId: 场地ID可选
- projects: 项目列表(可选)
- expireDays: 30天
4. 后端生成6位随机码
5. 返回邀请码
6. 前端自动复制到剪贴板
7. 刷新列表显示
```
### 3. 批量生成流程
```
批量生成:
1. 选择多个评委(勾选)
2. 点击"批量生成邀请码"按钮
3. 确认操作
4. 调用 batchGenerateInviteCode API
5. 传入:
- competitionId: 当前选中的赛事ID
- judgeIds: 评委ID数组
- role: 'judge'
- expireDays: 30天
6. 后端循环为每个评委生成邀请码
7. 返回生成的邀请码列表
8. 刷新列表显示
```
---
## 五、关键字段说明
### 1. 数据表字段martial_judge_invite
| 字段 | 类型 | 说明 | 示例值 |
|------|------|------|--------|
| `id` | bigint | 主键ID | 1001 |
| `competition_id` | bigint | **赛事ID绑定** | 1 |
| `judge_id` | bigint | 评委ID | 5 |
| `invite_code` | varchar(50) | 邀请码 | ABC123 |
| `role` | varchar(20) | 角色 | judge/chief_judge |
| `venue_id` | bigint | 场地ID | 2 |
| `projects` | varchar(500) | 项目列表 | ["太极拳","长拳"] |
| `expire_time` | datetime | 过期时间 | 2026-01-11 |
| `is_used` | int | 是否已使用 | 0/1 |
| `status` | int | 状态 | 1-启用0-禁用 |
### 2. 前端查询参数
```javascript
queryParams = {
current: 1, // 当前页
size: 10, // 每页条数
competitionId: '', // ⭐ 赛事ID核心绑定字段
judgeName: '', // 评委姓名
judgeLevel: '', // 评委等级
inviteStatus: '' // 邀请状态
}
```
---
## 六、测试验证
### 测试场景1单个生成邀请码
**前置条件**
- 已选择赛事
- 列表中有评委记录
- 评委未生成邀请码
**操作步骤**
1. 在评委列表中找到一个未生成邀请码的评委
2. 点击"生成邀请码"按钮
3. 等待生成完成
**预期结果**
- ✅ 显示成功提示:`邀请码生成成功ABC123`
- ✅ 邀请码自动复制到剪贴板
- ✅ 列表刷新,显示生成的邀请码
- ✅ 邀请码列变为:邀请码 + 重新生成按钮
### 测试场景2重新生成邀请码
**前置条件**
- 已选择赛事
- 评委已有邀请码
**操作步骤**
1. 点击邀请码旁边的重新生成按钮
2. 确认操作
3. 等待生成完成
**预期结果**
- ✅ 显示警告提示框
- ✅ 确认后生成新邀请码
- ✅ 旧邀请码失效
- ✅ 新邀请码自动复制到剪贴板
### 测试场景3批量生成邀请码
**前置条件**
- 已选择赛事
- 列表中有多个未生成邀请码的评委
**操作步骤**
1. 勾选多个评委如3个
2. 点击"批量生成邀请码"按钮
3. 确认操作
4. 等待生成完成
**预期结果**
- ✅ 显示确认提示框:`确定为选中的 3 位评委批量生成邀请码吗?`
- ✅ 确认后批量生成
- ✅ 显示成功提示:`成功生成 3 个邀请码`
- ✅ 列表刷新,所有评委都显示邀请码
### 测试场景4复制邀请码
**前置条件**
- 评委已有邀请码
**操作步骤**
1. 点击邀请码标签
2. 粘贴到其他地方验证
**预期结果**
- ✅ 显示成功提示:`邀请码已复制ABC123`
- ✅ 剪贴板中有邀请码内容
### 测试场景5赛事切换
**操作步骤**
1. 在赛事A生成邀请码
2. 切换到赛事B
3. 查看列表
**预期结果**
- ✅ 只显示赛事B的评委列表
- ✅ 赛事A的邀请码不显示
- ✅ 每个赛事的邀请码独立管理
---
## 七、错误处理
### 错误1未选择赛事
```javascript
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return
}
```
### 错误2评委已有有效邀请码
后端会返回错误信息:
```json
{
"success": false,
"msg": "该评委已有有效邀请码,请使用重新生成功能"
}
```
前端显示:
```javascript
ElMessage.error(error.response?.data?.msg || '生成邀请码失败')
```
### 错误3邀请码重复
后端会自动重试最多10次前端无需处理
---
## 八、UI/UX优化建议
### 1. 视觉优化
- ✅ 邀请码使用等宽字体(`monospace`
- ✅ 使用警告色标签(`type="warning"`
- ✅ 添加复制提示(`title="点击复制"`
- ✅ 按钮使用图标(`<Refresh />`
### 2. 交互优化
- ✅ 点击邀请码自动复制
- ✅ 重新生成前确认提示
- ✅ 批量生成前确认提示
- ✅ 生成成功后自动复制到剪贴板
- ✅ 操作成功后自动刷新列表
### 3. 加载状态
- ✅ 生成时显示 loading
- ✅ 防止重复点击
- ✅ 异常时显示错误提示
---
## 九、实施检查清单
### 后端准备
- [x] DTO类创建完成
- [x] Service方法实现完成
- [x] Controller接口添加完成
- [x] 数据库表结构正确
- [x] 唯一索引配置正确
### 前端准备
- [x] API接口添加完成`judgeInvite.js`
- [ ] 导入新增API
- [ ] 修改邀请码列UI
- [ ] 添加生成邀请码方法
- [ ] 添加重新生成方法
- [ ] 添加批量生成方法
- [ ] 修改批量邀请按钮功能
### 测试验证
- [ ] 单个生成测试通过
- [ ] 重新生成测试通过
- [ ] 批量生成测试通过
- [ ] 复制功能测试通过
- [ ] 赛事切换测试通过
- [ ] 错误处理测试通过
---
## 十、总结
### 核心要点
1. **赛事绑定**:所有操作都基于 `queryParams.competitionId`
2. **数据隔离**:不同赛事的邀请码完全独立
3. **用户友好**:自动复制、确认提示、状态反馈
4. **错误处理**:完善的错误提示和异常处理
5. **性能优化**:操作后自动刷新,保持数据同步
### 实施时间
- 前端修改30分钟
- 测试验证20分钟
- **总计**50分钟
### 下一步
1. 按照本文档修改前端代码
2. 启动项目测试各功能
3. 根据测试结果调整优化
4. 上线部署
---
**祝您实施顺利!** 🚀
如有问题,请参考:
- 后端实施文档:`评委邀请码生成方案实施指南.md`
- API文档`src/api/martial/judgeInvite.js`
- 页面代码:`src/views/martial/judgeInvite/index.vue`

View File

@@ -0,0 +1,554 @@
# 评委邀请码生成方案 - 实施指南
> **实施日期**: 2025-12-12
> **实施方式**: 管理员生成 → 复制发送 → 评委使用
> **状态**: ✅ 代码已完成,可立即测试
---
## 📋 方案概述
### 核心流程
```
管理员操作:
1. 进入评委管理页面
2. 选择评委,点击"生成邀请码"
3. 系统生成6位随机码ABC123
4. 复制邀请码
5. 通过微信/短信发送给评委
评委使用:
1. 收到邀请码
2. 打开小程序登录页
3. 输入比赛编码 + 邀请码
4. 登录成功,开始评分
```
### 技术特点
-**无需改表** - 使用现有字段
-**6位随机码** - 大写字母+数字组合
-**唯一性保证** - 数据库唯一索引
-**有效期管理** - 默认30天
-**状态管理** - 待使用/已使用/已禁用
---
## 🚀 已完成的代码
### 1. DTO 类
#### GenerateInviteDTO.java
**路径**: `src/main/java/org/springblade/modules/martial/pojo/dto/GenerateInviteDTO.java`
```java
@Data
@ApiModel("生成邀请码DTO")
public class GenerateInviteDTO {
@NotNull(message = "赛事ID不能为空")
private Long competitionId;
@NotNull(message = "评委ID不能为空")
private Long judgeId;
@NotBlank(message = "角色不能为空")
private String role; // judge 或 chief_judge
private Long venueId; // 场地ID普通评委必填
private String projects; // 项目列表JSON
private Integer expireDays = 30; // 过期天数
}
```
#### BatchGenerateInviteDTO.java
**路径**: `src/main/java/org/springblade/modules/martial/pojo/dto/BatchGenerateInviteDTO.java`
```java
@Data
@ApiModel("批量生成邀请码DTO")
public class BatchGenerateInviteDTO {
@NotNull(message = "赛事ID不能为空")
private Long competitionId;
@NotEmpty(message = "评委列表不能为空")
private List<Long> judgeIds;
private String role = "judge";
private Integer expireDays = 30;
}
```
---
### 2. Service 层
#### IMartialJudgeInviteService.java
**新增方法**:
```java
// 生成邀请码
MartialJudgeInvite generateInviteCode(GenerateInviteDTO dto);
// 批量生成邀请码
List<MartialJudgeInvite> batchGenerateInviteCode(BatchGenerateInviteDTO dto);
// 重新生成邀请码
MartialJudgeInvite regenerateInviteCode(Long inviteId);
// 生成唯一邀请码
String generateUniqueInviteCode();
```
#### MartialJudgeInviteServiceImpl.java
**核心实现**:
1. **生成唯一邀请码**:
```java
// 6位随机字符串大写字母+数字)
String inviteCode = UUID.randomUUID().toString()
.replaceAll("-", "")
.substring(0, 6)
.toUpperCase();
```
2. **检查重复**:
```java
// 检查邀请码是否已存在
long count = this.count(
Wrappers.<MartialJudgeInvite>lambdaQuery()
.eq(MartialJudgeInvite::getInviteCode, inviteCode)
.eq(MartialJudgeInvite::getIsDeleted, 0)
);
```
3. **防止重复生成**:
```java
// 检查评委是否已有有效邀请码
MartialJudgeInvite existInvite = this.getOne(
Wrappers.<MartialJudgeInvite>lambdaQuery()
.eq(MartialJudgeInvite::getCompetitionId, competitionId)
.eq(MartialJudgeInvite::getJudgeId, judgeId)
.eq(MartialJudgeInvite::getStatus, 1)
.gt(MartialJudgeInvite::getExpireTime, LocalDateTime.now())
);
```
---
### 3. Controller 层
#### MartialJudgeInviteController.java
**新增接口**:
| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 生成邀请码 | POST | `/martial/judgeInvite/generate` | 为单个评委生成 |
| 批量生成 | POST | `/martial/judgeInvite/generate/batch` | 批量生成 |
| 重新生成 | PUT | `/martial/judgeInvite/regenerate/{id}` | 重新生成(旧码失效) |
| 查询邀请码 | GET | `/martial/judgeInvite/byJudge` | 查询评委的邀请码 |
---
## 🧪 测试指南
### 1. 使用 Postman 测试
#### 测试1生成邀请码
```http
POST http://localhost:8080/martial/judgeInvite/generate
Content-Type: application/json
Blade-Auth: Bearer {token}
{
"competitionId": 1,
"judgeId": 1,
"role": "judge",
"venueId": 1,
"projects": "[\"女子组长拳\",\"男子组陈氏太极拳\"]",
"expireDays": 30
}
```
**预期响应**:
```json
{
"code": 200,
"success": true,
"data": {
"id": 1001,
"competitionId": 1,
"judgeId": 1,
"inviteCode": "ABC123",
"role": "judge",
"venueId": 1,
"projects": "[\"女子组长拳\",\"男子组陈氏太极拳\"]",
"expireTime": "2026-01-11 10:00:00",
"isUsed": 0,
"status": 1
}
}
```
#### 测试2批量生成邀请码
```http
POST http://localhost:8080/martial/judgeInvite/generate/batch
Content-Type: application/json
Blade-Auth: Bearer {token}
{
"competitionId": 1,
"judgeIds": [1, 2, 3, 4, 5],
"role": "judge",
"expireDays": 30
}
```
#### 测试3查询评委邀请码
```http
GET http://localhost:8080/martial/judgeInvite/byJudge?competitionId=1&judgeId=1
Blade-Auth: Bearer {token}
```
#### 测试4重新生成邀请码
```http
PUT http://localhost:8080/martial/judgeInvite/regenerate/1001
Blade-Auth: Bearer {token}
```
---
### 2. 使用 SQL 测试
#### 执行测试脚本
```bash
# 进入数据库
mysql -u root -p blade
# 执行测试脚本
source database/martial-db/test_invite_code_generation.sql
```
#### 查询有效邀请码
```sql
SELECT
ji.id,
ji.invite_code,
ji.role,
j.name AS judge_name,
ji.expire_time,
ji.is_used,
CASE
WHEN ji.is_used = 1 THEN '已使用'
WHEN ji.expire_time < NOW() THEN '已过期'
WHEN ji.status = 0 THEN '已禁用'
ELSE '待使用'
END AS status_text
FROM martial_judge_invite ji
LEFT JOIN martial_judge j ON ji.judge_id = j.id
WHERE ji.competition_id = 1
AND ji.is_deleted = 0
ORDER BY ji.create_time DESC;
```
---
## 📊 数据库字段说明
### martial_judge_invite 表
| 字段 | 类型 | 说明 | 使用方式 |
|------|------|------|----------|
| `invite_code` | varchar(50) | 邀请码 | 6位随机码 |
| `status` | int | 状态 | 1-启用0-禁用 |
| `is_used` | int | 是否已使用 | 0-未使用1-已使用 |
| `expire_time` | datetime | 过期时间 | 默认30天后 |
| `use_time` | datetime | 使用时间 | 登录时记录 |
| `role` | varchar(20) | 角色 | judge/chief_judge |
| `venue_id` | bigint | 场地ID | 普通评委必填 |
| `projects` | varchar(500) | 项目列表 | JSON数组 |
### 状态判断逻辑
```
有效邀请码status=1 AND is_used=0 AND expire_time>NOW()
已使用is_used=1
已过期expire_time<=NOW()
已禁用status=0
```
---
## 🎯 前端集成建议
### 1. 在评委管理页面添加按钮
```vue
<template>
<el-table :data="judgeList">
<el-table-column label="操作">
<template #default="{ row }">
<!-- 生成邀请码按钮 -->
<el-button
v-if="!row.inviteCode"
type="primary"
size="small"
@click="generateInviteCode(row)"
>
生成邀请码
</el-button>
<!-- 显示邀请码 -->
<div v-else>
<el-tag>{{ row.inviteCode }}</el-tag>
<el-button
type="text"
size="small"
@click="copyInviteCode(row.inviteCode)"
>
复制
</el-button>
<el-button
type="text"
size="small"
@click="regenerateInviteCode(row)"
>
重新生成
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
```
### 2. 生成邀请码方法
```javascript
async generateInviteCode(judge) {
try {
const res = await this.$http.post('/martial/judgeInvite/generate', {
competitionId: this.competitionId,
judgeId: judge.id,
role: judge.refereeType === 1 ? 'chief_judge' : 'judge',
venueId: judge.venueId,
projects: JSON.stringify(judge.projects),
expireDays: 30
});
if (res.success) {
this.$message.success('邀请码生成成功:' + res.data.inviteCode);
// 复制到剪贴板
this.copyToClipboard(res.data.inviteCode);
// 刷新列表
this.loadJudgeList();
}
} catch (error) {
this.$message.error(error.message || '生成失败');
}
}
// 复制到剪贴板
copyToClipboard(text) {
const input = document.createElement('input');
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
this.$message.success('已复制到剪贴板');
}
```
### 3. 批量生成
```javascript
async batchGenerate() {
const selectedJudges = this.$refs.table.selection;
if (selectedJudges.length === 0) {
this.$message.warning('请选择评委');
return;
}
const judgeIds = selectedJudges.map(j => j.id);
try {
const res = await this.$http.post('/martial/judgeInvite/generate/batch', {
competitionId: this.competitionId,
judgeIds: judgeIds,
role: 'judge',
expireDays: 30
});
if (res.success) {
this.$message.success(`成功生成${res.data.length}个邀请码`);
this.loadJudgeList();
}
} catch (error) {
this.$message.error(error.message || '批量生成失败');
}
}
```
---
## ✅ 验证清单
### 后端验证
- [ ] DTO类创建成功
- [ ] Service方法实现完成
- [ ] Controller接口添加完成
- [ ] 编译无错误
- [ ] Swagger文档生成正常
### 功能验证
- [ ] 单个生成邀请码成功
- [ ] 邀请码格式正确6位大写字母+数字)
- [ ] 邀请码唯一性验证通过
- [ ] 批量生成成功
- [ ] 重新生成成功(旧码失效)
- [ ] 查询邀请码成功
- [ ] 防止重复生成(已有有效邀请码时报错)
### 数据库验证
- [ ] 邀请码保存成功
- [ ] 过期时间设置正确
- [ ] 状态字段正确
- [ ] 唯一索引生效
### 小程序验证
- [ ] 使用邀请码登录成功
- [ ] 登录后权限正确
- [ ] 场地和项目信息正确
---
## 🔧 常见问题
### 问题1邀请码重复
**现象**: 生成的邀请码已存在
**原因**: 随机生成时碰撞
**解决**: 代码已实现重试机制最多10次
---
### 问题2评委已有邀请码
**现象**: 提示"该评委已有有效邀请码"
**原因**: 防止重复生成
**解决**:
- 使用"重新生成"功能
- 或等待旧邀请码过期
---
### 问题3邀请码过期
**现象**: 登录时提示邀请码已过期
**原因**: 超过30天有效期
**解决**: 使用"重新生成"功能
---
## 📈 后续优化建议
### 短期优化(可选)
1. **邀请码格式优化**
- 添加前缀WS-ABC123
- 区分角色J-评委C-裁判长)
2. **批量导出**
- 导出Excel评委信息+邀请码
- 生成PDF邀请函
3. **统计报表**
- 邀请码使用率
- 过期邀请码数量
### 长期优化(可选)
1. **短信/邮件发送**
- 集成短信服务
- 自动发送邀请码
2. **二维码生成**
- 生成邀请二维码
- 扫码直接登录
3. **邀请码管理**
- 批量禁用
- 批量延期
---
## 📞 技术支持
### 代码位置
| 文件 | 路径 |
|------|------|
| DTO类 | `src/main/java/org/springblade/modules/martial/pojo/dto/` |
| Service接口 | `src/main/java/org/springblade/modules/martial/service/IMartialJudgeInviteService.java` |
| Service实现 | `src/main/java/org/springblade/modules/martial/service/impl/MartialJudgeInviteServiceImpl.java` |
| Controller | `src/main/java/org/springblade/modules/martial/controller/MartialJudgeInviteController.java` |
| 测试SQL | `database/martial-db/test_invite_code_generation.sql` |
### Swagger 文档
启动后端服务后访问:
```
http://localhost:8080/doc.html
```
搜索"裁判邀请码管理"查看所有接口。
---
## 🎉 总结
### 已完成
✅ DTO类创建
✅ Service层实现
✅ Controller接口
✅ 测试SQL脚本
✅ 实施文档
### 工作量
- 后端开发2小时
- 测试验证1小时
- 文档编写1小时
- **总计**4小时
### 下一步
1. 启动后端服务
2. 使用Postman测试接口
3. 前端集成(如需要)
4. 联调测试
5. 上线部署
---
**祝您实施顺利!** 🚀
如有问题,请查看代码注释或联系技术支持。

View File

@@ -0,0 +1,260 @@
# 赛事列表加载问题排查指南
## 问题现象
- 赛事下拉框显示"无数据"
- 所有按钮(发送邀请、批量生成邀请码等)无法点击
- 页面显示"暂无数据"
## 排查步骤
### 1. 检查浏览器控制台
打开浏览器开发者工具F12查看Console标签页
**查看日志输出:**
```
赛事列表API返回: {...}
解析后的赛事列表: [...]
```
**可能的错误信息:**
- `加载赛事列表失败: Network Error` - 网络连接问题
- `加载赛事列表失败: 404` - API路径错误
- `加载赛事列表失败: 500` - 后端服务错误
### 2. 检查Network请求
在开发者工具的Network标签页中
1. 刷新页面
2. 找到 `/api/martial/competition/list` 请求
3. 查看请求状态:
- **200**: 请求成功,检查返回数据
- **404**: API路径不存在
- **500**: 后端服务错误
- **Failed**: 网络连接失败
4. 查看Response数据结构
```json
{
"code": 200,
"data": {
"records": [...], // 赛事列表
"total": 10
}
}
```
### 3. 检查后端服务
#### 3.1 确认后端服务是否启动
**Windows:**
```bash
netstat -ano | findstr 8888
```
**Linux/Mac:**
```bash
netstat -tuln | grep 8888
```
如果没有输出,说明后端服务未启动。
#### 3.2 启动后端服务
进入后端项目目录:
```bash
cd martial-master
mvn spring-boot:run
```
或者使用IDEIDEA/Eclipse启动。
### 4. 检查数据库数据
#### 4.1 连接数据库
使用数据库客户端Navicat、DBeaver等连接
- Host: 127.0.0.1
- Port: 3306
- Database: martial_db
- Username: root
- Password: 123456
#### 4.2 执行检查SQL
运行项目根目录下的 `check_data.sql` 文件:
```sql
-- 检查赛事数据
SELECT * FROM martial_competition LIMIT 10;
-- 检查赛事总数
SELECT COUNT(*) FROM martial_competition;
```
**如果赛事表为空:**
需要先创建赛事数据。
### 5. 创建测试数据
#### 5.1 创建赛事
进入"赛事管理"页面,点击"新增赛事",填写:
- 赛事名称:测试赛事
- 赛事编码TEST001
- 主办单位:测试单位
- 地区:北京
- 详细地点:测试地点
- 报名时间:选择日期范围
- 比赛时间:选择日期范围
保存后,赛事列表应该就能显示了。
#### 5.2 创建裁判
进入"评委管理"页面,点击"新增评委",填写:
- 姓名:张三
- 性别:男
- 手机号13800138000
- 身份证号110101199001011234
- 裁判类型:普通裁判
- 等级/职称:一级
### 6. 检查API配置
#### 6.1 检查前端API配置
查看 `martial-web/src/axios/index.js` 或类似文件:
```javascript
const baseURL = process.env.VUE_APP_API_BASE_URL || '/api'
```
确认API基础路径配置正确。
#### 6.2 检查代理配置
查看 `martial-web/vite.config.js``vue.config.js`
```javascript
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true
}
}
```
确认代理配置指向正确的后端地址。
### 7. 常见问题解决
#### 问题1: CORS跨域错误
**错误信息:**
```
Access to XMLHttpRequest at 'http://localhost:8888/api/...' from origin 'http://localhost:5173' has been blocked by CORS policy
```
**解决方案:**
1. 检查后端CORS配置
2. 使用代理配置
3. 确保前后端端口配置正确
#### 问题2: 404 Not Found
**可能原因:**
1. API路径错误
2. 后端Controller路径配置错误
3. 后端服务未启动
**解决方案:**
1. 检查API路径`/api/martial/competition/list`
2. 检查后端Controller注解`@RequestMapping("/martial/competition")`
3. 启动后端服务
#### 问题3: 数据结构不匹配
**现象:**
API返回数据但前端解析失败。
**解决方案:**
查看控制台日志,确认数据结构:
```javascript
console.log('赛事列表API返回:', res)
console.log('解析后的赛事列表:', records)
```
如果数据结构不对,修改前端解析逻辑。
### 8. 快速测试
#### 8.1 使用Postman测试API
**请求:**
```
GET http://localhost:8888/api/martial/competition/list?current=1&size=10
```
**期望返回:**
```json
{
"code": 200,
"success": true,
"data": {
"records": [
{
"id": 1,
"competitionName": "测试赛事",
"status": 1,
...
}
],
"total": 1
}
}
```
#### 8.2 使用curl测试
```bash
curl -X GET "http://localhost:8888/api/martial/competition/list?current=1&size=10"
```
### 9. 临时解决方案
如果急需使用,可以临时修改代码,手动添加测试数据:
```javascript
// 在 loadCompetitionList 函数中添加
competitionList.value = [
{
id: 1,
competitionName: '测试赛事',
status: 1
}
]
queryParams.competitionId = 1
```
**注意:** 这只是临时方案,不要提交到代码库。
### 10. 联系支持
如果以上步骤都无法解决问题,请提供以下信息:
1. 浏览器控制台完整错误日志
2. Network请求的详细信息Request/Response
3. 后端服务日志
4. 数据库查询结果
## 修改记录
### 2025-12-13
- ✨ 添加详细的日志输出
- ✨ 优化数据解析逻辑,支持多种返回格式
- ✨ 移除status=1的限制查询所有赛事
- 📝 创建排查指南文档

View File

@@ -17,7 +17,7 @@ server {
# API 代理到后端(直接访问宿主机上的后端服务)
location /api/ {
proxy_pass http://172.21.0.1:8123/api/;
proxy_pass http://172.21.0.1:8123/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

19
package-lock.json generated
View File

@@ -25,6 +25,7 @@
"vue": "^3.4.27",
"vue-i18n": "^9.1.9",
"vue-router": "^4.3.2",
"vuedraggable": "^4.1.0",
"vuex": "^4.1.0"
},
"devDependencies": {
@@ -2405,6 +2406,12 @@
"node": ">=8.3.0"
}
},
"node_modules/sortablejs": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
"license": "MIT"
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -2831,6 +2838,18 @@
"vue": "^3.2.0"
}
},
"node_modules/vuedraggable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
"integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
"license": "MIT",
"dependencies": {
"sortablejs": "1.14.0"
},
"peerDependencies": {
"vue": "^3.0.1"
}
},
"node_modules/vuex": {
"version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",

View File

@@ -26,6 +26,7 @@
"vue": "^3.4.27",
"vue-i18n": "^9.1.9",
"vue-router": "^4.3.2",
"vuedraggable": "^4.1.0",
"vuex": "^4.1.0"
},
"devDependencies": {

211
src/api/martial/activity.js Normal file
View File

@@ -0,0 +1,211 @@
import request from '@/axios';
// ==================== 活动日程管理接口 ====================
/**
* 活动日程分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.activityType - 活动类型(可选)
* @param {String} params.activityName - 活动名称(可选)
* @param {String} params.startDate - 开始日期(可选)
* @param {String} params.endDate - 结束日期(可选)
*/
export const getActivityScheduleList = (current, size, params) => {
return request({
url: '/api/blade-martial/activity-schedule/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取活动日程详情
* @param {Number} id - 活动ID
*/
export const getActivityScheduleDetail = (id) => {
return request({
url: '/api/blade-martial/activity-schedule/detail',
method: 'get',
params: { id }
})
}
/**
* 添加活动日程
* @param {Object} data - 活动数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.activityType - 活动类型(opening_ceremony/closing_ceremony/competition/training/meeting/other)
* @param {String} data.activityName - 活动名称
* @param {String} data.description - 活动描述
* @param {String} data.startTime - 开始时间
* @param {String} data.endTime - 结束时间
* @param {String} data.location - 活动地点
* @param {Number} data.venueId - 场地ID(可选)
* @param {String} data.organizer - 组织者
* @param {String} data.participants - 参与人员(可选)
* @param {String} data.remarks - 备注(可选)
*/
export const addActivity = (data) => {
return request({
url: '/api/blade-martial/activity-schedule/add',
method: 'post',
data
})
}
/**
* 修改活动日程
* @param {Object} data - 活动数据
*/
export const updateActivity = (data) => {
return request({
url: '/api/blade-martial/activity-schedule/update',
method: 'post',
data
})
}
/**
* 删除活动日程
* @param {String} ids - 活动ID,多个用逗号分隔
*/
export const removeActivity = (ids) => {
return request({
url: '/api/blade-martial/activity-schedule/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取日历视图数据
* @param {Number} competitionId - 赛事ID
* @param {String} month - 月份(格式: YYYY-MM)
*/
export const getActivityCalendar = (competitionId, month) => {
return request({
url: '/api/blade-martial/activity-schedule/calendar',
method: 'get',
params: { competitionId, month }
})
}
/**
* 检查活动时间冲突
* @param {Object} data - 活动数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.startTime - 开始时间
* @param {String} data.endTime - 结束时间
* @param {Number} data.venueId - 场地ID(可选)
* @param {Number} data.excludeId - 排除的活动ID(编辑时使用)
*/
export const checkActivityConflict = (data) => {
return request({
url: '/api/blade-martial/activity-schedule/check-conflict',
method: 'post',
data
})
}
/**
* 复制活动
* @param {Object} data - 复制数据
* @param {Number} data.sourceId - 源活动ID
* @param {String} data.newStartTime - 新开始时间
* @param {String} data.newEndTime - 新结束时间
*/
export const copyActivity = (data) => {
return request({
url: '/api/blade-martial/activity-schedule/copy',
method: 'post',
data
})
}
/**
* 按日期查询活动
* @param {Number} competitionId - 赛事ID
* @param {String} date - 日期(格式: YYYY-MM-DD)
*/
export const getActivitiesByDate = (competitionId, date) => {
return request({
url: '/api/blade-martial/activity-schedule/by-date',
method: 'get',
params: { competitionId, date }
})
}
/**
* 获取活动统计
* @param {Number} competitionId - 赛事ID
*/
export const getActivityStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/activity-schedule/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* 按类型统计活动
* @param {Number} competitionId - 赛事ID
*/
export const getActivityByType = (competitionId) => {
return request({
url: '/api/blade-martial/activity-schedule/statistics-by-type',
method: 'get',
params: { competitionId }
})
}
/**
* 导出活动日程
* @param {Object} params - 导出参数
*/
export const exportActivitySchedule = (params) => {
return request({
url: '/api/blade-martial/activity-schedule/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导入活动日程
* @param {File} file - Excel文件
* @param {Number} competitionId - 赛事ID
*/
export const importActivitySchedule = (file, competitionId) => {
const formData = new FormData()
formData.append('file', file)
formData.append('competitionId', competitionId)
return request({
url: '/api/blade-martial/activity-schedule/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 批量添加活动
* @param {Array} data - 活动数据数组
*/
export const batchAddActivities = (data) => {
return request({
url: '/api/blade-martial/activity-schedule/batch-add',
method: 'post',
data
})
}

View File

@@ -0,0 +1,208 @@
import request from '@/axios';
// ==================== 武术赛事活动日程管理接口 ====================
/**
* 活动日程分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
*/
export const getActivityScheduleList = (current, size, params) => {
return request({
url: '/martial/activitySchedule/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取活动日程详情
* @param {Number} id - 活动日程ID
*/
export const getActivityScheduleDetail = (id) => {
return request({
url: '/martial/activitySchedule/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改活动日程
* @param {Object} data - 活动日程数据
* @param {String} data.competitionId - 赛事ID
* @param {String} data.scheduleDate - 日程日期
* @param {String} data.scheduleTime - 日程时间
* @param {String} data.eventName - 活动项目
* @param {String} data.venue - 地点
* @param {String} data.description - 描述
* @param {String} data.remark - 备注
* @param {Number} data.sortOrder - 排序
*/
export const submitActivitySchedule = (data) => {
return request({
url: '/martial/activitySchedule/submit',
method: 'post',
data
})
}
/**
* 删除活动日程
* @param {String} ids - 活动日程ID,多个用逗号分隔
*/
export const removeActivitySchedule = (ids) => {
return request({
url: '/martial/activitySchedule/remove',
method: 'post',
params: { ids }
})
}
// ==================== 赛程编排接口 ====================
/**
* 获取赛程编排结果
* @param {Number} competitionId - 赛事ID
*/
export const getScheduleResult = (competitionId) => {
return request({
url: '/martial/schedule/result',
method: 'get',
params: { competitionId },
timeout: 30000 // 设置30秒超时,因为编排数据较大
})
}
/**
* 保存并锁定赛程编排
* @param {Number} competitionId - 赛事ID
*/
export const saveAndLockSchedule = (competitionId) => {
return request({
url: '/martial/schedule/save-and-lock',
method: 'post',
data: { competitionId },
timeout: 60000 // 设置60秒超时,因为锁定操作可能耗时较长
})
}
/**
* 保存编排草稿
* @param {Object} data - 编排草稿数据
* @param {Number} data.competitionId - 赛事ID
* @param {Boolean} data.isDraft - 是否为草稿
* @param {Array} data.competitionGroups - 竞赛分组数据
*/
export const saveDraftSchedule = (data) => {
return request({
url: '/martial/schedule/save-draft',
method: 'post',
data,
timeout: 60000 // 设置60秒超时,因为保存草稿可能涉及大量数据
})
}
/**
* 触发自动编排
* @param {Number} competitionId - 赛事ID
*/
export const triggerAutoArrange = (competitionId) => {
return request({
url: '/martial/schedule/auto-arrange',
method: 'post',
data: { competitionId },
timeout: 60000 // 设置60秒超时,因为自动编排可能耗时较长
})
}
/**
* 移动赛程分组到指定场地和时间段
* @param {Object} data - 移动请求数据
* @param {Number} data.groupId - 分组ID
* @param {Number} data.targetVenueId - 目标场地ID
* @param {Number} data.targetTimeSlotIndex - 目标时间段索引
*/
export const moveScheduleGroup = (data) => {
return request({
url: '/martial/schedule/move-group',
method: 'post',
data
})
}
// ==================== 调度功能接口 ====================
/**
* 获取调度数据
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.venueId - 场地ID
* @param {Number} params.timeSlotIndex - 时间段索引
*/
export const getDispatchData = (params) => {
return request({
url: '/martial/schedule/dispatch-data',
method: 'get',
params
})
}
/**
* 调整出场顺序
* @param {Object} data - 调整请求数据
* @param {Number} data.detailId - 编排明细ID
* @param {Number} data.participantId - 参赛者记录ID
* @param {String} data.action - 调整动作(move_up/move_down/swap)
* @param {Number} data.targetOrder - 目标顺序(交换时使用)
*/
export const adjustOrder = (data) => {
return request({
url: '/martial/schedule/adjust-order',
method: 'post',
data
})
}
/**
* 批量保存调度
* @param {Object} data - 保存调度数据
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.adjustments - 调整列表
*/
export const saveDispatch = (data) => {
return request({
url: '/martial/schedule/save-dispatch',
method: 'post',
data
})
}
/**
* 导出赛程表
* @param {Number} competitionId - 赛事ID
*/
export const exportSchedule = (competitionId) => {
return request({
url: '/martial/export/schedule',
method: 'get',
params: { competitionId },
responseType: 'blob'
})
}
// Export schedule template 2 (competition time format)
export const exportScheduleTemplate2 = (competitionId, venueId, venueName, timeSlot) => {
return request({
url: '/martial/export/schedule2',
method: 'get',
params: { competitionId, venueId, venueName, timeSlot },
responseType: 'blob'
})
}

View File

@@ -0,0 +1,136 @@
import request from '@/axios';
// ==================== 赛事附件管理接口 ====================
/**
* 获取附件详情
* @param {Number} id - 附件ID
*/
export const getAttachmentDetail = (id) => {
return request({
url: '/api/martial/competition/attachment/detail',
method: 'get',
params: { id }
})
}
/**
* 附件列表查询(分页)
* @param {Number} current - 当前页
* @param {Number} size - 每页条数
* @param {Object} params - 查询参数
*/
export const getAttachmentList = (current, size, params) => {
return request({
url: '/api/martial/competition/attachment/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 根据赛事ID和类型获取附件列表
* @param {Number} competitionId - 赛事ID
* @param {String} attachmentType - 附件类型info-赛事发布, rules-赛事规程, schedule-活动日程, results-成绩, medals-奖牌榜, photos-图片直播
*/
export const getAttachmentsByType = (competitionId, attachmentType) => {
return request({
url: '/api/martial/competition/attachment/getByType',
method: 'get',
params: { competitionId, attachmentType }
})
}
/**
* 根据赛事ID获取所有附件
* @param {Number} competitionId - 赛事ID
*/
export const getAttachmentsByCompetition = (competitionId) => {
return request({
url: '/api/martial/competition/attachment/getByCompetition',
method: 'get',
params: { competitionId }
})
}
/**
* 新增或修改附件
* @param {Object} data - 附件数据
* @param {Number} data.id - ID修改时必传
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.attachmentType - 附件类型
* @param {String} data.fileName - 文件名称
* @param {String} data.fileUrl - 文件URL
* @param {Number} data.fileSize - 文件大小(字节)
* @param {String} data.fileType - 文件类型(扩展名)
* @param {Number} data.orderNum - 排序序号
* @param {Number} data.status - 状态1-启用 0-禁用)
*/
export const submitAttachment = (data) => {
return request({
url: '/api/martial/competition/attachment/submit',
method: 'post',
data
})
}
/**
* 批量保存附件
* @param {Array} attachments - 附件列表
*/
export const batchSubmitAttachments = (attachments) => {
return request({
url: '/api/martial/competition/attachment/batchSubmit',
method: 'post',
data: attachments
})
}
/**
* 删除附件
* @param {String} ids - 附件ID,多个用逗号分隔
*/
export const removeAttachment = (ids) => {
return request({
url: '/api/martial/competition/attachment/remove',
method: 'post',
params: { ids }
})
}
/**
* 删除赛事的指定类型附件
* @param {Number} competitionId - 赛事ID
* @param {String} attachmentType - 附件类型
*/
export const removeAttachmentByType = (competitionId, attachmentType) => {
return request({
url: '/api/martial/competition/attachment/removeByType',
method: 'post',
params: { competitionId, attachmentType }
})
}
// 附件类型常量
export const ATTACHMENT_TYPES = {
INFO: 'info', // 赛事发布
RULES: 'rules', // 赛事规程
SCHEDULE: 'schedule', // 活动日程
RESULTS: 'results', // 成绩
MEDALS: 'medals', // 奖牌榜
PHOTOS: 'photos' // 图片直播
}
// 附件类型标签映射
export const ATTACHMENT_TYPE_LABELS = {
info: '赛事发布',
rules: '赛事规程',
schedule: '活动日程',
results: '成绩',
medals: '奖牌榜',
photos: '图片直播'
}

64
src/api/martial/banner.js Normal file
View File

@@ -0,0 +1,64 @@
import request from '@/axios';
// ==================== 轮播图管理接口 ====================
/**
* 轮播图分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
*/
export const getBannerList = (current, size, params) => {
return request({
url: '/api/martial/banner/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取轮播图详情
* @param {Number} id - 轮播图主键ID
*/
export const getBannerDetail = (id) => {
return request({
url: '/api/martial/banner/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改轮播图
* @param {Object} data - 轮播图数据
* @param {String} data.title - 轮播图标题
* @param {Number} data.position - 显示位置(1-首页,2-赛事详情,3-其他)
* @param {String} data.imageUrl - 轮播图图片URL
* @param {String} data.linkUrl - 跳转链接
* @param {Number} data.sortOrder - 排序顺序
* @param {String} data.startTime - 开始显示时间
* @param {String} data.endTime - 结束显示时间
*/
export const submitBanner = (data) => {
return request({
url: '/api/martial/banner/submit',
method: 'post',
data
})
}
/**
* 删除轮播图
* @param {String} ids - 轮播图ID,多个用逗号分隔
*/
export const removeBanner = (ids) => {
return request({
url: '/api/martial/banner/remove',
method: 'post',
params: { ids }
})
}

View File

@@ -1,5 +1,80 @@
import request from '@/axios';
// ==================== 赛事管理接口 ====================
/**
* 赛事列表查询
* @param {Number} current - 当前页
* @param {Number} size - 每页条数
* @param {Object} params - 查询参数
*/
export const getCompetitionList = (current, size, params) => {
return request({
url: '/api/martial/competition/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取赛事详情
* @param {Number} id - 赛事ID
*/
export const getCompetitionDetail = (id) => {
return request({
url: '/api/martial/competition/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改赛事
* @param {Object} data - 赛事数据
* @param {Number} data.id - ID修改时必传
* @param {String} data.competitionName - 赛事名称
* @param {String} data.competitionCode - 赛事编码
* @param {String} data.organizer - 主办单位
* @param {String} data.location - 地区
* @param {String} data.venue - 详细地点
* @param {String} data.registrationStartTime - 报名开始时间
* @param {String} data.registrationEndTime - 报名结束时间
* @param {String} data.competitionStartTime - 比赛开始时间
* @param {String} data.competitionEndTime - 比赛结束时间
* @param {String} data.introduction - 赛事简介
* @param {String} data.posterImages - 宣传图片(JSON)
* @param {String} data.contactPerson - 联系人
* @param {String} data.contactPhone - 联系电话
* @param {String} data.contactEmail - 联系邮箱
* @param {String} data.rules - 竞赛规则
* @param {String} data.requirements - 参赛要求
* @param {String} data.awards - 奖项设置
* @param {String} data.regulationFiles - 规程文件(JSON)
*/
export const submitCompetition = (data) => {
return request({
url: '/api/martial/competition/submit',
method: 'post',
data
})
}
/**
* 删除赛事
* @param {String} ids - 赛事ID,多个用逗号分隔
*/
export const removeCompetition = (ids) => {
return request({
url: '/api/martial/competition/remove',
method: 'post',
params: { ids }
})
}
// ==================== 武术赛事订单管理接口 ====================
/**

View File

@@ -0,0 +1,138 @@
import request from '@/axios';
// ==================== 扣分项管理接口 ====================
/**
* 扣分项分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.projectId - 项目ID
* @param {String} params.itemName - 扣分项名称(可选)
*/
export const getDeductionList = (current, size, params) => {
return request({
url: '/api/blade-martial/deductionItem/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取扣分项详情
* @param {Number} id - 扣分项ID
*/
export const getDeductionDetail = (id) => {
return request({
url: '/api/blade-martial/deductionItem/detail',
method: 'get',
params: { id }
})
}
/**
* 新增扣分项
* @param {Object} data - 扣分项数据
* @param {Number} data.projectId - 项目ID
* @param {String} data.itemName - 扣分项名称
* @param {Number} data.deductionPoints - 扣分值
* @param {String} data.description - 描述说明
* @param {Number} data.sortOrder - 排序序号
*/
export const addDeduction = (data) => {
return request({
url: '/api/blade-martial/deductionItem/submit',
method: 'post',
data
})
}
/**
* 修改扣分项
* @param {Object} data - 扣分项数据
*/
export const updateDeduction = (data) => {
return request({
url: '/api/blade-martial/deductionItem/submit',
method: 'post',
data
})
}
/**
* 删除扣分项
* @param {String} ids - 扣分项ID,多个用逗号分隔
*/
export const removeDeduction = (ids) => {
return request({
url: '/api/blade-martial/deductionItem/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取项目的扣分项列表(不分页)
* @param {Number} projectId - 项目ID
*/
export const getDeductionsByProject = (projectId) => {
return request({
url: '/api/blade-martial/deductionItem/list-by-project',
method: 'get',
params: { projectId }
})
}
/**
* 克隆扣分项
* @param {Object} data - 克隆数据
* @param {Number} data.sourceProjectId - 源项目ID
* @param {Number} data.targetProjectId - 目标项目ID
*/
export const cloneDeductions = (data) => {
return request({
url: '/api/blade-martial/deductionItem/clone',
method: 'post',
data
})
}
/**
* 更新扣分项排序
* @param {Array} sortData - 排序数据数组 [{id, sortOrder}, ...]
*/
export const updateDeductionOrder = (sortData) => {
return request({
url: '/api/blade-martial/deductionItem/update-order',
method: 'post',
data: sortData
})
}
/**
* 导出扣分项模板
*/
export const exportDeductionTemplate = () => {
return request({
url: '/api/blade-martial/deductionItem/export-template',
method: 'get',
responseType: 'blob'
})
}
/**
* 导出扣分项列表
* @param {Object} params - 查询参数
*/
export const exportDeductions = (params) => {
return request({
url: '/api/blade-martial/deductionItem/export',
method: 'get',
params,
responseType: 'blob'
})
}

View File

@@ -0,0 +1,118 @@
import request from '@/axios';
// ==================== 武术赛事扣分项管理接口 ====================
/**
* 扣分项分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.projectId - 项目ID
* @param {String} params.itemName - 扣分项名称(可选)
*/
export const getDeductionList = (current, size, params) => {
return request({
url: '/api/blade-martial/deductionItem/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取扣分项详情
* @param {Number} id - 扣分项ID
*/
export const getDeductionDetail = (id) => {
return request({
url: '/api/blade-martial/deductionItem/detail',
method: 'get',
params: { id }
})
}
/**
* 新增扣分项
* @param {Object} data - 扣分项数据
* @param {Number} data.projectId - 项目ID
* @param {String} data.itemName - 扣分项名称
* @param {Number} data.deductionPoints - 扣分值
* @param {String} data.description - 描述
* @param {Number} data.sortOrder - 排序序号
*/
export const addDeduction = (data) => {
return request({
url: '/api/blade-martial/deductionItem/submit',
method: 'post',
data
})
}
/**
* 修改扣分项
* @param {Object} data - 扣分项数据
*/
export const updateDeduction = (data) => {
return request({
url: '/api/blade-martial/deductionItem/submit',
method: 'post',
data
})
}
/**
* 删除扣分项
* @param {String} ids - 扣分项ID,多个用逗号分隔
*/
export const removeDeduction = (ids) => {
return request({
url: '/api/blade-martial/deductionItem/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取项目的扣分项列表(不分页)
* @param {Number} projectId - 项目ID
*/
export const getDeductionsByProject = (projectId) => {
return request({
url: '/api/blade-martial/deductionItem/list-by-project',
method: 'get',
params: { projectId }
})
}
/**
* 批量导入扣分项
* @param {Number} projectId - 项目ID
* @param {File} file - Excel文件
*/
export const importDeductions = (projectId, file) => {
const formData = new FormData()
formData.append('projectId', projectId)
formData.append('file', file)
return request({
url: '/api/blade-martial/deductionItem/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 导出扣分项模板
*/
export const exportDeductionTemplate = () => {
return request({
url: '/api/blade-martial/deductionItem/export-template',
method: 'get',
responseType: 'blob'
})
}

View File

@@ -0,0 +1,262 @@
import request from '@/axios';
// ==================== 武术赛事异常事件管理接口 ====================
/**
* 异常事件分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.exceptionType - 异常类型(可选)
* @param {Number} params.severity - 严重程度(可选)
* @param {Number} params.status - 处理状态(可选)
*/
export const getExceptionList = (current, size, params) => {
return request({
url: '/api/blade-martial/exception/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取异常事件详情
* @param {Number} id - 异常事件ID
*/
export const getExceptionDetail = (id) => {
return request({
url: '/api/blade-martial/exception/detail',
method: 'get',
params: { id }
})
}
/**
* 上报异常事件
* @param {Object} data - 异常事件数据
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.projectId - 项目ID可选
* @param {Number} data.venueId - 场地ID可选
* @param {Number} data.exceptionType - 异常类型1设备故障2人员问题3时间冲突4评分异常5安全事故6其他
* @param {Number} data.severity - 严重程度1轻微2一般3严重4紧急
* @param {String} data.title - 标题
* @param {String} data.description - 描述
* @param {String} data.reporterName - 上报人姓名
* @param {String} data.reporterPhone - 上报人电话
* @param {Array} data.images - 图片URL数组可选
*/
export const reportException = (data) => {
return request({
url: '/api/blade-martial/exception/report',
method: 'post',
data
})
}
/**
* 修改异常事件
* @param {Object} data - 异常事件数据
*/
export const updateException = (data) => {
return request({
url: '/api/blade-martial/exception/update',
method: 'post',
data
})
}
/**
* 删除异常事件
* @param {String} ids - 异常事件ID,多个用逗号分隔
*/
export const removeException = (ids) => {
return request({
url: '/api/blade-martial/exception/remove',
method: 'post',
params: { ids }
})
}
/**
* 处理异常事件
* @param {Object} data - 处理数据
* @param {Number} data.id - 异常事件ID
* @param {String} data.handlerName - 处理人姓名
* @param {String} data.handleResult - 处理结果
* @param {String} data.handleNote - 处理备注
*/
export const handleException = (data) => {
return request({
url: '/api/blade-martial/exception/handle',
method: 'post',
data
})
}
/**
* 关闭异常事件
* @param {Number} id - 异常事件ID
* @param {String} closeReason - 关闭原因
*/
export const closeException = (id, closeReason) => {
return request({
url: '/api/blade-martial/exception/close',
method: 'post',
params: { id },
data: { closeReason }
})
}
/**
* 重新打开异常事件
* @param {Number} id - 异常事件ID
* @param {String} reopenReason - 重开原因
*/
export const reopenException = (id, reopenReason) => {
return request({
url: '/api/blade-martial/exception/reopen',
method: 'post',
params: { id },
data: { reopenReason }
})
}
/**
* 分配异常事件
* @param {Object} data - 分配数据
* @param {Number} data.id - 异常事件ID
* @param {String} data.assigneeName - 分配人姓名
* @param {String} data.assigneePhone - 分配人电话
*/
export const assignException = (data) => {
return request({
url: '/api/blade-martial/exception/assign',
method: 'post',
data
})
}
/**
* 获取待处理异常事件列表
* @param {Number} competitionId - 赛事ID
* @param {Number} severity - 严重程度(可选)
*/
export const getPendingExceptions = (competitionId, severity) => {
return request({
url: '/api/blade-martial/exception/pending',
method: 'get',
params: { competitionId, severity }
})
}
/**
* 获取我的异常事件列表
* @param {Number} competitionId - 赛事ID
* @param {String} assigneeName - 分配人姓名
*/
export const getMyExceptions = (competitionId, assigneeName) => {
return request({
url: '/api/blade-martial/exception/my-exceptions',
method: 'get',
params: { competitionId, assigneeName }
})
}
/**
* 获取异常事件统计
* @param {Number} competitionId - 赛事ID
*/
export const getExceptionStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/exception/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* 按类型统计异常事件
* @param {Number} competitionId - 赛事ID
*/
export const getExceptionByType = (competitionId) => {
return request({
url: '/api/blade-martial/exception/statistics-by-type',
method: 'get',
params: { competitionId }
})
}
/**
* 按严重程度统计异常事件
* @param {Number} competitionId - 赛事ID
*/
export const getExceptionBySeverity = (competitionId) => {
return request({
url: '/api/blade-martial/exception/statistics-by-severity',
method: 'get',
params: { competitionId }
})
}
/**
* 上传异常事件图片
* @param {File} file - 图片文件
*/
export const uploadExceptionImage = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/exception/upload-image',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 添加异常处理记录
* @param {Object} data - 处理记录数据
* @param {Number} data.exceptionId - 异常事件ID
* @param {String} data.operatorName - 操作人姓名
* @param {String} data.operationType - 操作类型
* @param {String} data.operationNote - 操作备注
*/
export const addExceptionLog = (data) => {
return request({
url: '/api/blade-martial/exception/add-log',
method: 'post',
data
})
}
/**
* 获取异常处理记录
* @param {Number} exceptionId - 异常事件ID
*/
export const getExceptionLogs = (exceptionId) => {
return request({
url: '/api/blade-martial/exception/logs',
method: 'get',
params: { exceptionId }
})
}
/**
* 导出异常事件报表
* @param {Object} params - 导出参数
*/
export const exportExceptions = (params) => {
return request({
url: '/api/blade-martial/exception/export',
method: 'get',
params,
responseType: 'blob'
})
}

302
src/api/martial/export.js Normal file
View File

@@ -0,0 +1,302 @@
import request from '@/axios';
// ==================== 武术赛事导出打印接口 ====================
/**
* 导出成绩单Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {String} params.category - 分组类别(可选)
* @param {Boolean} params.includeRanking - 是否包含排名默认true
* @param {Boolean} params.includeMedal - 是否包含奖牌默认true
*/
export const exportResults = (params) => {
return request({
url: '/api/blade-martial/export/results',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出运动员名单Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {String} params.category - 分组类别(可选)
* @param {String} params.teamName - 团队名称(可选)
* @param {Number} params.status - 报名状态(可选)
*/
export const exportAthletes = (params) => {
return request({
url: '/api/blade-martial/export/athletes',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出赛程表Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.venueId - 场地ID可选
* @param {String} params.scheduleDate - 赛程日期(可选)
* @param {Number} params.projectId - 项目ID可选
*/
export const exportSchedule = (params) => {
return request({
url: '/api/blade-martial/export/schedule',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出评分表Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {Number} params.judgeId - 裁判ID可选
* @param {String} params.scoreDate - 评分日期(可选)
*/
export const exportScores = (params) => {
return request({
url: '/api/blade-martial/export/scores',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出裁判名单Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.judgeLevel - 裁判等级(可选)
* @param {Number} params.projectId - 项目ID可选
*/
export const exportReferees = (params) => {
return request({
url: '/api/blade-martial/export/referees',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出工作人员名单Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.role - 角色类型(可选)
*/
export const exportStaff = (params) => {
return request({
url: '/api/blade-martial/export/staff',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出奖牌榜Excel
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.groupBy - 分组方式team/region
*/
export const exportMedalRanking = (params) => {
return request({
url: '/api/blade-martial/export/medal-ranking',
method: 'get',
params,
responseType: 'blob'
})
}
// ==================== 证书生成接口 ====================
/**
* 生成单个证书HTML/PDF
* @param {Number} resultId - 成绩ID
* @param {String} format - 格式html/pdf默认pdf
*/
export const generateCertificate = (resultId, format = 'pdf') => {
return request({
url: `/api/blade-martial/export/certificate/${resultId}`,
method: 'get',
params: { format },
responseType: format === 'pdf' ? 'blob' : 'json'
})
}
/**
* 批量生成证书
* @param {Object} data - 生成参数
* @param {Array} data.resultIds - 成绩ID数组
* @param {Number} data.projectId - 项目ID可选为空时使用resultIds
* @param {Number} data.competitionId - 赛事ID可选为空时使用resultIds
* @param {String} data.format - 格式html/pdf默认pdf
* @param {Boolean} data.mergeFiles - 是否合并为一个文件默认false
*/
export const batchCertificates = (data) => {
return request({
url: '/api/blade-martial/export/certificates/batch',
method: 'post',
data,
responseType: 'blob'
})
}
/**
* 获取证书数据(用于预览)
* @param {Number} resultId - 成绩ID
*/
export const getCertificateData = (resultId) => {
return request({
url: `/api/blade-martial/export/certificate/data/${resultId}`,
method: 'get'
})
}
/**
* 获取证书模板列表
* @param {Number} competitionId - 赛事ID可选
*/
export const getCertificateTemplates = (competitionId) => {
return request({
url: '/api/blade-martial/export/certificate/templates',
method: 'get',
params: { competitionId }
})
}
/**
* 上传证书模板
* @param {File} file - 模板文件
* @param {String} templateName - 模板名称
* @param {Number} competitionId - 赛事ID可选
*/
export const uploadCertificateTemplate = (file, templateName, competitionId) => {
const formData = new FormData()
formData.append('file', file)
formData.append('templateName', templateName)
if (competitionId) {
formData.append('competitionId', competitionId)
}
return request({
url: '/api/blade-martial/export/certificate/template/upload',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
// ==================== 报表导出接口 ====================
/**
* 导出赛事统计报表
* @param {Number} competitionId - 赛事ID
*/
export const exportCompetitionReport = (competitionId) => {
return request({
url: '/api/blade-martial/export/competition-report',
method: 'get',
params: { competitionId },
responseType: 'blob'
})
}
/**
* 导出项目统计报表
* @param {Number} projectId - 项目ID
*/
export const exportProjectReport = (projectId) => {
return request({
url: '/api/blade-martial/export/project-report',
method: 'get',
params: { projectId },
responseType: 'blob'
})
}
/**
* 导出裁判工作量统计
* @param {Object} params - 导出参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.startDate - 开始日期(可选)
* @param {String} params.endDate - 结束日期(可选)
*/
export const exportJudgeWorkload = (params) => {
return request({
url: '/api/blade-martial/export/judge-workload',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出报名统计报表
* @param {Number} competitionId - 赛事ID
*/
export const exportRegistrationReport = (competitionId) => {
return request({
url: '/api/blade-martial/export/registration-report',
method: 'get',
params: { competitionId },
responseType: 'blob'
})
}
// ==================== 打印接口 ====================
/**
* 打印签到表
* @param {Object} params - 打印参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {String} params.scheduleDate - 赛程日期(可选)
*/
export const printSignInSheet = (params) => {
return request({
url: '/api/blade-martial/export/print/sign-in',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 打印秩序册
* @param {Number} competitionId - 赛事ID
*/
export const printProgramBook = (competitionId) => {
return request({
url: '/api/blade-martial/export/print/program-book',
method: 'get',
params: { competitionId },
responseType: 'blob'
})
}
/**
* 打印成绩公告
* @param {Object} params - 打印参数
* @param {Number} params.projectId - 项目ID
* @param {Number} params.competitionId - 赛事ID
*/
export const printResultAnnouncement = (params) => {
return request({
url: '/api/blade-martial/export/print/result-announcement',
method: 'get',
params,
responseType: 'blob'
})
}

221
src/api/martial/info.js Normal file
View File

@@ -0,0 +1,221 @@
import request from '@/axios';
// ==================== <20>o<EFBFBD><03><06><> ====================
/**
* <20><><EFBFBD>o<EFBFBD>h
* @param {Number} current - SMu ؤ1
* @param {Number} size - <20>up<75> ؤ10
* @param {Object} params - <20><><EFBFBD>p
* @param {Number} params.competitionId - <20>[ID
* @param {String} params.infoType - <20>o{<7B>announcementlJ/notice<1A>/news<77><73>/rules<65>
* @param {String} params.title - <07>!<21>" <0C>
* @param {Number} params.publishStatus - <20><03>0<><30>/1<><31>/2<> <0B> <0C>
* @param {Boolean} params.isTop - /&nv<08>
* @param {Boolean} params.isImportant - /&́<08>
*/
export const getInfoPublishList = (current, size, params) => {
return request({
url: '/api/blade-martial/info-publish/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* <20><><EFBFBD>o<EFBFBD><03><>
* @param {Number} id - <20>oID
*/
export const getInfoPublishDetail = (id) => {
return request({
url: '/api/blade-martial/info-publish/detail',
method: 'get',
params: { id }
})
}
/**
* <20><03>o
* @param {Object} data - <20>opn
* @param {Number} data.competitionId - <20>[ID
* @param {String} data.infoType - <20>o{<7B>
* @param {String} data.title - <07>
* @param {String} data.coverImage - b<>URL<08>
* @param {String} data.summary - X<>
* @param {String} data.content - <20><>̇,
* @param {Array} data.attachments - D<>URLp<4C><08>
* @param {String} data.publishTime - <20><03><><08>
k<19>s<EFBFBD>
* @param {Boolean} data.isTop - /&nv
* @param {Boolean} data.isImportant - /&́
*/
export const publishInfo = (data) => {
return request({
url: '/api/blade-martial/info-publish/publish',
method: 'post',
data
})
}
/**
* <20><><EFBFBD>o
* @param {Object} data - <20>opn
*/
export const updateInfoPublish = (data) => {
return request({
url: '/api/blade-martial/info-publish/update',
method: 'post',
data
})
}
/**
* d<>o
* @param {String} ids - <20>oID *(<17><06>
*/
export const removeInfoPublish = (ids) => {
return request({
url: '/api/blade-martial/info-publish/remove',
method: 'post',
params: { ids }
})
}
/**
* bnv<6E>
* @param {Number} id - <20>oID
* @param {Boolean} isTop - /&nv
*/
export const toggleTop = (id, isTop) => {
return request({
url: '/api/blade-martial/info-publish/toggle-top',
method: 'post',
data: { id, isTop }
})
}
/**
* <62>
* @param {Number} id - <20>oID
* @param {Boolean} isImportant - /&́
*/
export const toggleImportant = (id, isImportant) => {
return request({
url: '/api/blade-martial/info-publish/toggle-important',
method: 'post',
data: { id, isImportant }
})
}
/**
*
b<>
* @param {File} file - <20>G<EFBFBD><47>
*/
export const uploadCoverImage = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/info-publish/upload-cover',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
*
D<>
* @param {File} file - D<><44><EFBFBD>
* @param {Function} onProgress -
ۦ<>
*/
export const uploadAttachment = (file, onProgress) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/info-publish/upload-attachment',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: onProgress
})
}
/**
* y<>
D<>
* @param {Array} files - D<><44><EFBFBD>p<EFBFBD>
*/
export const batchUploadAttachments = (files) => {
const formData = new FormData()
files.forEach(file => {
formData.append('files', file)
})
return request({
url: '/api/blade-martial/info-publish/batch-upload-attachments',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
*
<EFBFBD>/ <0B><>o
* @param {Number} id - <20>oID
* @param {Number} publishStatus - <20><03>1<><31>/2<> <0B>
*/
export const updatePublishStatus = (id, publishStatus) => {
return request({
url: '/api/blade-martial/info-publish/update-status',
method: 'post',
data: { id, publishStatus }
})
}
/**
* <20><><EFBFBD>
* @param {Number} competitionId - <20>[ID
*/
export const getInfoStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/info-publish/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* <20><><05><>
* @param {Number} id - <20>oID
*/
export const incrementViewCount = (id) => {
return request({
url: '/api/blade-martial/info-publish/increment-view',
method: 'post',
data: { id }
})
}
/**
* <20><><EFBFBD>o<EFBFBD><03>U
* @param {Object} params - <20><><EFBFBD>p
*/
export const exportInfoPublish = (params) => {
return request({
url: '/api/blade-martial/info-publish/export',
method: 'get',
params,
responseType: 'blob'
})

View File

@@ -0,0 +1,248 @@
import request from '@/axios';
// ==================== 武术赛事信息发布管理接口 ====================
/**
* 信息发布分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.infoType - 信息类型(可选)
* @param {Number} params.publishStatus - 发布状态(可选)
* @param {String} params.title - 标题(可选)
*/
export const getInfoPublishList = (current, size, params) => {
return request({
url: '/api/martial/infoPublish/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取信息发布详情
* @param {Number} id - 信息ID
*/
export const getInfoPublishDetail = (id) => {
return request({
url: '/api/martial/infoPublish/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改信息(提交)
* @param {Object} data - 信息数据
* @param {Number} data.id - ID修改时必传
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.infoType - 信息类型1公告2通知3新闻4规则5其他
* @param {String} data.title - 标题
* @param {String} data.content - 内容
* @param {String} data.summary - 摘要(可选)
* @param {String} data.coverImage - 封面图片(可选)
* @param {Array} data.attachments - 附件URL数组可选
* @param {Number} data.isTop - 是否置顶0否1是
* @param {Number} data.isImportant - 是否重要0否1是
* @param {String} data.publishTime - 发布时间(可选,为空则立即发布)
*/
export const submitInfo = (data) => {
return request({
url: '/api/martial/infoPublish/submit',
method: 'post',
data
})
}
/**
* 删除信息
* @param {String} ids - 信息ID,多个用逗号分隔
*/
export const removeInfo = (ids) => {
return request({
url: '/api/martial/infoPublish/remove',
method: 'post',
params: { ids }
})
}
/**
* 撤回信息
* @param {Number} id - 信息ID
*/
export const withdrawInfo = (id) => {
return request({
url: '/api/blade-martial/infoPublish/withdraw',
method: 'post',
params: { id }
})
}
/**
* 置顶/取消置顶信息
* @param {Number} id - 信息ID
* @param {Number} isTop - 是否置顶0否1是
*/
export const toggleTop = (id, isTop) => {
return request({
url: '/api/blade-martial/infoPublish/toggle-top',
method: 'post',
params: { id, isTop }
})
}
/**
* 设置/取消重要信息
* @param {Number} id - 信息ID
* @param {Number} isImportant - 是否重要0否1是
*/
export const toggleImportant = (id, isImportant) => {
return request({
url: '/api/blade-martial/infoPublish/toggle-important',
method: 'post',
params: { id, isImportant }
})
}
/**
* 获取已发布信息列表(不分页)
* @param {Number} competitionId - 赛事ID
* @param {Number} infoType - 信息类型(可选)
* @param {Number} limit - 获取数量默认10
*/
export const getPublishedInfoList = (competitionId, infoType, limit = 10) => {
return request({
url: '/api/blade-martial/infoPublish/published',
method: 'get',
params: { competitionId, infoType, limit }
})
}
/**
* 获取置顶信息列表
* @param {Number} competitionId - 赛事ID
*/
export const getTopInfoList = (competitionId) => {
return request({
url: '/api/blade-martial/infoPublish/top-info',
method: 'get',
params: { competitionId }
})
}
/**
* 获取重要信息列表
* @param {Number} competitionId - 赛事ID
*/
export const getImportantInfoList = (competitionId) => {
return request({
url: '/api/blade-martial/infoPublish/important-info',
method: 'get',
params: { competitionId }
})
}
/**
* 搜索信息
* @param {Object} params - 搜索参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.keyword - 关键词
* @param {Number} params.infoType - 信息类型(可选)
* @param {String} params.startTime - 开始时间(可选)
* @param {String} params.endTime - 结束时间(可选)
*/
export const searchInfo = (params) => {
return request({
url: '/api/blade-martial/infoPublish/search',
method: 'get',
params
})
}
/**
* 增加阅读量
* @param {Number} id - 信息ID
*/
export const increaseViewCount = (id) => {
return request({
url: '/api/blade-martial/infoPublish/view',
method: 'post',
params: { id }
})
}
/**
* 上传封面图片
* @param {File} file - 图片文件
*/
export const uploadCoverImage = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/infoPublish/upload-cover',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 上传附件
* @param {File} file - 附件文件
*/
export const uploadAttachment = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/infoPublish/upload-attachment',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 下载附件
* @param {String} attachmentUrl - 附件URL
*/
export const downloadAttachment = (attachmentUrl) => {
return request({
url: '/api/blade-martial/infoPublish/download',
method: 'get',
params: { attachmentUrl },
responseType: 'blob'
})
}
/**
* 获取信息统计
* @param {Number} competitionId - 赛事ID
*/
export const getInfoStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/infoPublish/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* 批量发布信息
* @param {Array} data - 信息数据数组
*/
export const batchPublishInfo = (data) => {
return request({
url: '/api/blade-martial/infoPublish/batch-publish',
method: 'post',
data
})
}

View File

@@ -0,0 +1,266 @@
import request from '@/axios';
// ==================== 武术赛事裁判邀请管理接口 ====================
/**
* 裁判邀请分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.judgeName - 裁判姓名(可选)
* @param {String} params.judgeLevel - 裁判等级(可选)
* @param {Number} params.inviteStatus - 邀请状态(可选)
*/
export const getJudgeInviteList = (current, size, params) => {
return request({
url: '/api/martial/judgeInvite/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取裁判邀请详情
* @param {Number} id - 邀请ID
*/
export const getJudgeInviteDetail = (id) => {
return request({
url: '/api/martial/judgeInvite/detail',
method: 'get',
params: { id }
})
}
/**
* 发送邀请
* @param {Object} data - 邀请数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.judgeName - 裁判姓名
* @param {String} data.judgeLevel - 裁判等级
* @param {String} data.contactPhone - 联系电话
* @param {String} data.contactEmail - 联系邮箱
* @param {String} data.inviteMessage - 邀请信息(可选)
*/
export const sendInvite = (data) => {
return request({
url: '/api/martial/judgeInvite/send',
method: 'post',
data
})
}
/**
* 修改邀请
* @param {Object} data - 邀请数据
*/
export const updateInvite = (data) => {
return request({
url: '/api/martial/judgeInvite/submit',
method: 'post',
data
})
}
/**
* 删除邀请
* @param {String} ids - 邀请ID,多个用逗号分隔
*/
export const removeInvite = (ids) => {
return request({
url: '/api/martial/judgeInvite/remove',
method: 'post',
params: { ids }
})
}
/**
* 批量发送邀请
* @param {Object} data - 批量邀请参数
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.judges - 裁判信息数组
* @param {String} data.inviteMessage - 邀请信息(可选)
*/
export const batchSendInvites = (data) => {
return request({
url: '/api/martial/judgeInvite/batch-send',
method: 'post',
data
})
}
/**
* 重新发送邀请
* @param {Number} id - 邀请ID
*/
export const resendInvite = (id) => {
return request({
url: `/api/martial/judgeInvite/resend/${id}`,
method: 'post'
})
}
/**
* 裁判回复邀请
* @param {Object} data - 回复数据
* @param {Number} data.inviteId - 邀请ID
* @param {String} data.inviteToken - 邀请令牌
* @param {Number} data.replyStatus - 回复状态1接受2拒绝
* @param {String} data.replyNote - 回复备注
*/
export const replyInvite = (data) => {
return request({
url: '/api/martial/judgeInvite/reply',
method: 'post',
data
})
}
/**
* 取消邀请
* @param {Number} id - 邀请ID
* @param {String} reason - 取消原因
*/
export const cancelInvite = (id, reason) => {
return request({
url: `/api/martial/judgeInvite/cancel/${id}`,
method: 'post',
params: { reason }
})
}
/**
* 确认邀请
* @param {Number} id - 邀请ID
*/
export const confirmInvite = (id) => {
return request({
url: `/api/martial/judgeInvite/confirm/${id}`,
method: 'post'
})
}
/**
* 获取邀请统计
* @param {Number} competitionId - 赛事ID
*/
export const getInviteStatistics = (competitionId) => {
return request({
url: '/api/martial/judgeInvite/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* 获取已接受邀请的裁判列表
* @param {Number} competitionId - 赛事ID
*/
export const getAcceptedJudges = (competitionId) => {
return request({
url: '/api/martial/judgeInvite/accepted-judges',
method: 'get',
params: { competitionId }
})
}
/**
* 从裁判库导入
* @param {Number} competitionId - 赛事ID
* @param {String} judgeIds - 裁判ID逗号分隔
*/
export const importFromJudgePool = (competitionId, judgeIds) => {
return request({
url: '/api/martial/judgeInvite/import/pool',
method: 'post',
params: { competitionId, judgeIds }
})
}
/**
* 导出邀请名单
* @param {Object} params - 导出参数
*/
export const exportInvites = (params) => {
return request({
url: '/api/martial/judgeInvite/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 发送提醒消息
* @param {Number} id - 邀请ID
* @param {String} message - 提醒消息
*/
export const sendReminder = (id, message) => {
return request({
url: `/api/martial/judgeInvite/reminder/${id}`,
method: 'post',
params: { message }
})
}
/**
* 生成邀请码
* @param {Object} data - 生成参数
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.judgeId - 评委ID
* @param {String} data.role - 角色judge/chief_judge
* @param {Number} data.venueId - 场地ID普通评委必填
* @param {String} data.projects - 项目列表JSON
* @param {Number} data.expireDays - 过期天数默认30
*/
export const generateInviteCode = (data) => {
return request({
url: '/api/martial/judgeInvite/generate',
method: 'post',
data
})
}
/**
* 批量生成邀请码
* @param {Object} data - 批量生成参数
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.judgeIds - 评委ID数组
* @param {String} data.role - 角色默认judge
* @param {Number} data.expireDays - 过期天数默认30
*/
export const batchGenerateInviteCode = (data) => {
return request({
url: '/api/martial/judgeInvite/generate/batch',
method: 'post',
data
})
}
/**
* 重新生成邀请码
* @param {Number} inviteId - 邀请ID
*/
export const regenerateInviteCode = (inviteId) => {
return request({
url: `/api/martial/judgeInvite/regenerate/${inviteId}`,
method: 'put'
})
}
/**
* 查询评委的邀请码
* @param {Number} competitionId - 赛事ID
* @param {Number} judgeId - 评委ID
*/
export const getInviteByJudge = (competitionId, judgeId) => {
return request({
url: '/api/martial/judgeInvite/byJudge',
method: 'get',
params: { competitionId, judgeId }
})
}

View File

@@ -0,0 +1,248 @@
import request from '@/axios';
// ==================== 武术赛事裁判-项目关联管理接口 ====================
/**
* 裁判-项目关联分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.judgeId - 裁判ID可选
* @param {Number} params.projectId - 项目ID可选
* @param {String} params.role - 角色(可选)
*/
export const getJudgeProjectList = (current, size, params) => {
return request({
url: '/api/blade-martial/judge-project/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取裁判-项目关联详情
* @param {Number} id - 关联ID
*/
export const getJudgeProjectDetail = (id) => {
return request({
url: '/api/blade-martial/judge-project/detail',
method: 'get',
params: { id }
})
}
/**
* 分配裁判到项目
* @param {Object} data - 分配数据
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.judgeId - 裁判ID
* @param {String} data.judgeName - 裁判姓名
* @param {Number} data.projectId - 项目ID
* @param {String} data.projectName - 项目名称
* @param {String} data.role - 角色(主裁、副裁、执裁)
*/
export const assignJudge = (data) => {
return request({
url: '/api/blade-martial/judge-project/assign',
method: 'post',
data
})
}
/**
* 修改分配
* @param {Object} data - 分配数据
*/
export const updateAssignment = (data) => {
return request({
url: '/api/blade-martial/judge-project/update',
method: 'post',
data
})
}
/**
* 删除分配
* @param {String} ids - 关联ID,多个用逗号分隔
*/
export const removeAssignment = (ids) => {
return request({
url: '/api/blade-martial/judge-project/remove',
method: 'post',
params: { ids }
})
}
/**
* 批量分配裁判
* @param {Object} data - 批量分配参数
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.assignments - 分配信息数组
* @param {Number} data.assignments[].judgeId - 裁判ID
* @param {Number} data.assignments[].projectId - 项目ID
* @param {String} data.assignments[].role - 角色
*/
export const batchAssignJudges = (data) => {
return request({
url: '/api/blade-martial/judge-project/batch-assign',
method: 'post',
data
})
}
/**
* 自动分配裁判
* @param {Object} data - 自动分配参数
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.projectId - 项目ID可选
* @param {String} data.strategy - 分配策略balance负载均衡/level按等级
*/
export const autoAssignJudges = (data) => {
return request({
url: '/api/blade-martial/judge-project/auto-assign',
method: 'post',
data
})
}
/**
* 获取项目的裁判列表
* @param {Number} projectId - 项目ID
*/
export const getJudgesByProject = (projectId) => {
return request({
url: '/api/blade-martial/judge-project/judges-by-project',
method: 'get',
params: { projectId }
})
}
/**
* 获取裁判的项目列表
* @param {Number} judgeId - 裁判ID
* @param {Number} competitionId - 赛事ID
*/
export const getProjectsByJudge = (judgeId, competitionId) => {
return request({
url: '/api/blade-martial/judge-project/projects-by-judge',
method: 'get',
params: { judgeId, competitionId }
})
}
/**
* 获取裁判工作量统计
* @param {Number} competitionId - 赛事ID
*/
export const getJudgeWorkload = (competitionId) => {
return request({
url: '/api/blade-martial/judge-project/workload',
method: 'get',
params: { competitionId }
})
}
/**
* 检查裁判冲突
* @param {Object} data - 检查参数
* @param {Number} data.judgeId - 裁判ID
* @param {Number} data.projectId - 项目ID
* @param {Number} data.competitionId - 赛事ID
*/
export const checkJudgeConflict = (data) => {
return request({
url: '/api/blade-martial/judge-project/check-conflict',
method: 'post',
data
})
}
/**
* 交换两个裁判的项目分配
* @param {Object} data - 交换参数
* @param {Number} data.assignmentId1 - 分配1的ID
* @param {Number} data.assignmentId2 - 分配2的ID
*/
export const swapJudgeAssignment = (data) => {
return request({
url: '/api/blade-martial/judge-project/swap',
method: 'post',
data
})
}
/**
* 复制分配到其他项目
* @param {Object} data - 复制参数
* @param {Number} data.sourceProjectId - 源项目ID
* @param {Number} data.targetProjectId - 目标项目ID
*/
export const copyAssignment = (data) => {
return request({
url: '/api/blade-martial/judge-project/copy',
method: 'post',
data
})
}
/**
* 获取可分配的裁判列表
* @param {Number} competitionId - 赛事ID
* @param {Number} projectId - 项目ID可选
*/
export const getAvailableJudges = (competitionId, projectId) => {
return request({
url: '/api/blade-martial/judge-project/available-judges',
method: 'get',
params: { competitionId, projectId }
})
}
/**
* 获取未分配裁判的项目列表
* @param {Number} competitionId - 赛事ID
*/
export const getUnassignedProjects = (competitionId) => {
return request({
url: '/api/blade-martial/judge-project/unassigned-projects',
method: 'get',
params: { competitionId }
})
}
/**
* 导出裁判分配表
* @param {Object} params - 导出参数
*/
export const exportAssignments = (params) => {
return request({
url: '/api/blade-martial/judge-project/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导入裁判分配
* @param {Number} competitionId - 赛事ID
* @param {File} file - Excel文件
*/
export const importAssignments = (competitionId, file) => {
const formData = new FormData()
formData.append('competitionId', competitionId)
formData.append('file', file)
return request({
url: '/api/blade-martial/judge-project/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}

203
src/api/martial/live.js Normal file
View File

@@ -0,0 +1,203 @@
import request from '@/axios';
// ==================== f/[<5B><><EFBFBD><EFBFBD><06><> ====================
/**
* <20><><EFBFBD><EFBFBD>u<><75>
* @param {Number} current - SMu,ؤ1
* @param {Number} size - <20>uap,ؤ10
* @param {Object} params - <20><><EFBFBD>p
* @param {Number} params.competitionId - [<5B>ID
* @param {String} params.updateType - <20><>{<7B>match[<5B>/result<10>/notice<1A>
* @param {Number} params.projectId - y<>ID<08>
* @param {Number} params.venueId - :0ID<08>
*/
export const getLiveUpdateList = (current, size, params) => {
return request({
url: '/api/blade-martial/live-update/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
* @param {Number} id - <20><>ID
*/
export const getLiveUpdateDetail = (id) => {
return request({
url: '/api/blade-martial/live-update/detail',
method: 'get',
params: { id }
})
}
/**
* <20><03><><EFBFBD><EFBFBD>
* @param {Object} data - <20><><EFBFBD><EFBFBD>pn
* @param {Number} data.competitionId - [<5B>ID
* @param {String} data.title - <07>
* @param {String} data.content - <20><>̇,
* @param {String} data.updateType - <20><>{<7B>
* @param {Number} data.projectId - y<>ID<08>
* @param {Number} data.venueId - :0ID<08>
* @param {Array} data.images - <20>GURLp<4C>
* @param {Array} data.videos - ƑURLp<4C>
* @param {Boolean} data.isTop - /&nv
*/
export const publishLiveUpdate = (data) => {
return request({
url: '/api/blade-martial/live-update/publish',
method: 'post',
data
})
}
/**
* <20>9<EFBFBD><39><EFBFBD><EFBFBD>
* @param {Object} data - <20><><EFBFBD><EFBFBD>pn
*/
export const updateLiveUpdate = (data) => {
return request({
url: '/api/blade-martial/live-update/update',
method: 'post',
data
})
}
/**
* d<><64><EFBFBD><EFBFBD>
* @param {String} ids - <20><>ID,*(<17><06>
*/
export const removeLiveUpdate = (ids) => {
return request({
url: '/api/blade-martial/live-update/remove',
method: 'post',
params: { ids }
})
}
/**
* bnv<6E>
* @param {Number} id - <20><>ID
* @param {Boolean} isTop - /&nv
*/
export const toggleTop = (id, isTop) => {
return request({
url: '/api/blade-martial/live-update/toggle-top',
method: 'post',
data: { id, isTop }
})
}
/**
*
<20><><EFBFBD>G
* @param {File} file - <20>G<EFBFBD><47>
*/
export const uploadLiveImage = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/live-update/upload-image',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
*
<20><>Ƒ
* @param {File} file - Ƒ<><C691>
* @param {Function} onProgress -
ۦ<>
*/
export const uploadLiveVideo = (file, onProgress) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/live-update/upload-video',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: onProgress
})
}
/**
* y<>
<20>G
* @param {Array} files - <20>G<EFBFBD><47>p<EFBFBD>
*/
export const batchUploadImages = (files) => {
const formData = new FormData()
files.forEach(file => {
formData.append('files', file)
})
return request({
url: '/api/blade-martial/live-update/batch-upload-images',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* <20><><EFBFBD><EFBFBD>ߡpn
* @param {Number} competitionId - [<5B>ID
*/
export const getLiveStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/live-update/statistics',
method: 'get',
params: { competitionId }
})
}
/**
* <20>^<5E><><EFBFBD><EFBFBD>
* @param {Number} id - <20><>ID
*/
export const likeLiveUpdate = (id) => {
return request({
url: '/api/blade-martial/live-update/like',
method: 'post',
data: { id }
})
}
/**
* ֈ<>^
* @param {Number} id - <20><>ID
*/
export const unlikeLiveUpdate = (id) => {
return request({
url: '/api/blade-martial/live-update/unlike',
method: 'post',
data: { id }
})
}
/**
* <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
* @param {Number} competitionId - [<5B>ID
* @param {Number} limit - p<>P6
*/
export const getHotLiveUpdates = (competitionId, limit = 10) => {
return request({
url: '/api/blade-martial/live-update/hot',
method: 'get',
params: { competitionId, limit }
})
}

View File

@@ -0,0 +1,221 @@
import request from '@/axios';
// ==================== 武术赛事直播更新管理接口 ====================
/**
* 直播更新分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {Number} params.venueId - 场地ID可选
* @param {Number} params.updateType - 更新类型(可选)
*/
export const getLiveUpdateList = (current, size, params) => {
return request({
url: '/api/blade-martial/liveUpdate/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取直播更新详情
* @param {Number} id - 更新ID
*/
export const getLiveUpdateDetail = (id) => {
return request({
url: '/api/blade-martial/liveUpdate/detail',
method: 'get',
params: { id }
})
}
/**
* 发布直播更新
* @param {Object} data - 更新数据
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.projectId - 项目ID可选
* @param {Number} data.venueId - 场地ID可选
* @param {Number} data.updateType - 更新类型1赛况2成绩3通知4其他
* @param {String} data.title - 标题
* @param {String} data.content - 内容
* @param {Array} data.images - 图片URL数组可选
* @param {String} data.videoUrl - 视频URL可选
* @param {Number} data.isTop - 是否置顶0否1是
*/
export const publishLiveUpdate = (data) => {
return request({
url: '/api/blade-martial/liveUpdate/publish',
method: 'post',
data
})
}
/**
* 修改直播更新
* @param {Object} data - 更新数据
*/
export const updateLiveUpdate = (data) => {
return request({
url: '/api/blade-martial/liveUpdate/update',
method: 'post',
data
})
}
/**
* 删除直播更新
* @param {String} ids - 更新ID,多个用逗号分隔
*/
export const removeLiveUpdate = (ids) => {
return request({
url: '/api/blade-martial/liveUpdate/remove',
method: 'post',
params: { ids }
})
}
/**
* 批量发布直播更新
* @param {Array} data - 更新数据数组
*/
export const batchPublishLiveUpdates = (data) => {
return request({
url: '/api/blade-martial/liveUpdate/batch-publish',
method: 'post',
data
})
}
/**
* 置顶/取消置顶直播更新
* @param {Number} id - 更新ID
* @param {Number} isTop - 是否置顶0否1是
*/
export const toggleTop = (id, isTop) => {
return request({
url: '/api/blade-martial/liveUpdate/toggle-top',
method: 'post',
params: { id, isTop }
})
}
/**
* 获取最新直播更新列表(不分页)
* @param {Number} competitionId - 赛事ID
* @param {Number} limit - 获取数量默认10
*/
export const getLatestUpdates = (competitionId, limit = 10) => {
return request({
url: '/api/blade-martial/liveUpdate/latest',
method: 'get',
params: { competitionId, limit }
})
}
/**
* 获取置顶直播更新列表
* @param {Number} competitionId - 赛事ID
*/
export const getTopUpdates = (competitionId) => {
return request({
url: '/api/blade-martial/liveUpdate/top-updates',
method: 'get',
params: { competitionId }
})
}
/**
* 获取项目的直播更新
* @param {Number} projectId - 项目ID
* @param {Number} limit - 获取数量默认20
*/
export const getProjectUpdates = (projectId, limit = 20) => {
return request({
url: '/api/blade-martial/liveUpdate/project-updates',
method: 'get',
params: { projectId, limit }
})
}
/**
* 获取场地的直播更新
* @param {Number} venueId - 场地ID
* @param {Number} limit - 获取数量默认20
*/
export const getVenueUpdates = (venueId, limit = 20) => {
return request({
url: '/api/blade-martial/liveUpdate/venue-updates',
method: 'get',
params: { venueId, limit }
})
}
/**
* 搜索直播更新
* @param {Object} params - 搜索参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.keyword - 关键词
* @param {Number} params.updateType - 更新类型(可选)
* @param {String} params.startTime - 开始时间(可选)
* @param {String} params.endTime - 结束时间(可选)
*/
export const searchLiveUpdates = (params) => {
return request({
url: '/api/blade-martial/liveUpdate/search',
method: 'get',
params
})
}
/**
* 上传直播图片
* @param {File} file - 图片文件
*/
export const uploadLiveImage = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/liveUpdate/upload-image',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 上传直播视频
* @param {File} file - 视频文件
*/
export const uploadLiveVideo = (file) => {
const formData = new FormData()
formData.append('file', file)
return request({
url: '/api/blade-martial/liveUpdate/upload-video',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 获取直播统计
* @param {Number} competitionId - 赛事ID
*/
export const getLiveStatistics = (competitionId) => {
return request({
url: '/api/blade-martial/liveUpdate/statistics',
method: 'get',
params: { competitionId }
})
}

156
src/api/martial/order.js Normal file
View File

@@ -0,0 +1,156 @@
import request from '@/axios';
// ==================== 订单管理接口 ====================
// 注意:后端实际路径为 /martial/registrationOrder
/**
* 订单分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {String} params.keyword - 关键词(订单号/用户名)
* @param {Number} params.status - 订单状态(0-待支付,1-已支付,2-已取消,3-已退款)
* @param {Number} params.competitionId - 赛事ID
*/
export const getOrderList = (current, size, params = {}) => {
return request({
url: '/api/martial/registrationOrder/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取订单详情
* @param {Number} id - 订单主键ID
*/
export const getOrderDetail = (id) => {
return request({
url: '/api/martial/registrationOrder/detail',
method: 'get',
params: { id }
})
}
/**
* 创建订单
* @param {Object} data - 订单数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.userName - 用户名
* @param {String} data.userPhone - 用户手机号
* @param {Number} data.amount - 订单金额
* @param {Array} data.participants - 参赛人员列表
*/
export const createOrder = (data) => {
return request({
url: '/api/martial/registrationOrder/submit',
method: 'post',
data
})
}
/**
* 更新订单状态
* @param {Number} id - 订单ID
* @param {Number} status - 订单状态
*/
export const updateOrderStatus = (id, status) => {
return request({
url: '/api/martial/registrationOrder/update-status',
method: 'post',
params: { id, status }
})
}
/**
* 删除订单
* @param {String} ids - 订单ID,多个用逗号分隔
*/
export const removeOrder = (ids) => {
return request({
url: '/api/martial/registrationOrder/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取订单报名详情(包含参赛人员、项目统计等)
* @param {Number} orderId - 订单ID
* 注意:此接口后端暂未实现,需要添加
*/
export const getOrderRegistrationDetail = (orderId) => {
return request({
url: '/api/martial/registrationOrder/registration-detail',
method: 'get',
params: { orderId }
})
}
/**
* 获取订单的参赛人员列表
* @param {Number} orderId - 订单ID可选
* @param {Number} competitionId - 赛事ID可选
* 注意:此接口后端暂未实现,可以使用 martial/athlete/list 接口替代
*/
export const getOrderParticipants = (orderIdOrCompetitionId) => {
// 支持传入订单ID或赛事ID
const params = { current: 1, size: 10000 }
// 判断参数类型如果是对象直接使用否则判断是orderId还是competitionId
if (typeof orderIdOrCompetitionId === 'object') {
Object.assign(params, orderIdOrCompetitionId)
} else if (orderIdOrCompetitionId) {
// 默认作为competitionId使用
params.competitionId = orderIdOrCompetitionId
}
return request({
url: '/api/martial/athlete/list',
method: 'get',
params
})
}
/**
* 获取订单的项目统计
* @param {Number} orderId - 订单ID
* 注意:此接口后端暂未实现,需要添加
*/
export const getOrderProjectStats = (orderId) => {
return request({
url: '/api/martial/registrationOrder/project-stats',
method: 'get',
params: { orderId }
})
}
/**
* 获取订单的金额统计
* @param {Number} orderId - 订单ID
* 注意:此接口后端暂未实现,需要添加
*/
export const getOrderAmountStats = (orderId) => {
return request({
url: '/api/martial/registrationOrder/amount-stats',
method: 'get',
params: { orderId }
})
}
/**
* 获取单位统计
* @param {Number} competitionId - 赛事ID
*/
export const getOrganizationStats = (competitionId) => {
return request({
url: '/api/martial/registrationOrder/organization-stats',
method: 'get',
params: { competitionId }
})
}

View File

@@ -0,0 +1,142 @@
import request from '@/axios';
// ==================== 参赛选手管理接口 ====================
/**
* 参赛选手分页查询
* @param {Number} competitionId - 赛事ID
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
*/
export const getParticipantList = (competitionId, current, size, params = {}) => {
return request({
url: '/api/martial/athlete/list',
method: 'get',
params: {
competitionId,
current,
size,
...params
}
})
}
/**
* 获取参赛选手详情
* @param {Number} id - 选手主键ID
*/
export const getParticipantDetail = (id) => {
return request({
url: '/api/martial/athlete/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改参赛选手
* @param {Object} data - 选手数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.playerName - 选手姓名
* @param {Number} data.gender - 性别1-男2-女)
* @param {Number} data.age - 年龄
* @param {String} data.contactPhone - 联系电话
* @param {String} data.organization - 所属单位
* @param {String} data.idCard - 身份证号
* @param {String} data.projectName - 参赛项目
* @param {String} data.category - 组别
* @param {Number} data.orderNum - 出场顺序
* @param {String} data.introduction - 选手简介
* @param {Array} data.attachments - 附件列表
* @param {String} data.remark - 备注
*/
export const addParticipant = (data) => {
return request({
url: '/api/martial/athlete/submit',
method: 'post',
data
})
}
/**
* 修改参赛选手
* @param {Object} data - 选手数据
*/
export const updateParticipant = (data) => {
return request({
url: '/api/martial/athlete/submit',
method: 'post',
data
})
}
/**
* 删除参赛选手
* @param {String} ids - 选手ID,多个用逗号分隔
*/
export const removeParticipant = (ids) => {
return request({
url: '/api/martial/athlete/remove',
method: 'post',
params: { ids }
})
}
/**
* 更新出场顺序
* @param {Number} id - 选手ID
* @param {Number} orderNum - 出场顺序
*/
export const updateOrder = (id, orderNum) => {
return request({
url: '/api/martial/athlete/update-order',
method: 'post',
params: { id, orderNum }
})
}
/**
* 批量导入参赛选手
* @param {Number} competitionId - 赛事ID
* @param {File} file - Excel文件
*/
export const importParticipants = (competitionId, file) => {
const formData = new FormData()
formData.append('competitionId', competitionId)
formData.append('file', file)
return request({
url: '/api/martial/athlete/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
/**
* 导出参赛选手名单
* @param {Number} competitionId - 赛事ID
*/
export const exportParticipants = (competitionId) => {
return request({
url: '/api/martial/athlete/export',
method: 'get',
params: { competitionId },
responseType: 'blob'
})
}
/**
* 批量更新出场顺序
* @param {Array} data - 选手顺序数据 [{id: 1, orderNum: 1}, {id: 2, orderNum: 2}]
*/
export const batchUpdateOrder = (data) => {
return request({
url: '/api/martial/athlete/batch-update-order',
method: 'post',
data
})
}

140
src/api/martial/project.js Normal file
View File

@@ -0,0 +1,140 @@
import request from '@/axios';
// ==================== 武术赛事项目管理接口 ====================
/**
* 项目分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {String} params.projectName - 项目名称(可选)
* @param {Number} params.category - 分组类别(可选)
* @param {Number} params.eventType - 项目类型(可选)
* @param {Number} params.participantType - 参赛类型(可选,1-单人,2-集体)
*/
export const getProjectList = (current, size, params) => {
return request({
url: '/api/martial/project/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取项目详情
* @param {Number} id - 项目ID
*/
export const getProjectDetail = (id) => {
return request({
url: '/api/martial/project/detail',
method: 'get',
params: { id }
})
}
/**
* 新增项目
* @param {Object} data - 项目数据
*/
export const addProject = (data) => {
return request({
url: '/api/martial/project/save',
method: 'post',
data
})
}
/**
* 修改项目
* @param {Object} data - 项目数据
*/
export const updateProject = (data) => {
return request({
url: '/api/martial/project/update',
method: 'post',
data
})
}
/**
* 新增或修改项目
* @param {Object} data - 项目数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.projectName - 项目名称
* @param {String} data.projectCode - 项目编码
* @param {Number} data.category - 分组类别(1-男子,2-女子,3-团体,4-混合)
* @param {Number} data.eventType - 项目类型(1-套路,2-散打,3-器械,4-对练)
* @param {Number} data.participantType - 参赛类型(1-单人,2-集体)
* @param {Number} data.registrationFee - 报名费用
* @param {String} data.registrationStartTime - 报名开始时间
* @param {String} data.registrationEndTime - 报名结束时间
* @param {Number} data.maxParticipants - 最大参赛人数
* @param {Number} data.sortOrder - 排序序号
* @param {String} data.rules - 比赛规则
* @param {String} data.remark - 备注
*/
export const submitProject = (data) => {
return request({
url: '/api/martial/project/submit',
method: 'post',
data
})
}
/**
* 删除项目
* @param {String} ids - 项目ID,多个用逗号分隔
*/
export const removeProject = (ids) => {
return request({
url: '/api/martial/project/remove',
method: 'post',
params: { ids }
})
}
/**
* 导入项目
* @param {Object} data - 导入数据
*/
export const importProjects = (data) => {
return request({
url: '/api/martial/project/import',
method: 'post',
data
})
}
/**
* 导出项目
* @param {Object} params - 导出参数
*/
export const exportProjects = (params) => {
return request({
url: '/api/martial/project/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 获取赛事的项目列表(不分页,用于下拉选择)
* @param {Number} competitionId - 赛事ID
*/
export const getProjectsByCompetition = (competitionId) => {
return request({
url: '/api/martial/project/list',
method: 'get',
params: {
competitionId,
current: 1,
size: 1000 // 获取全部项目
}
})
}

View File

@@ -0,0 +1,70 @@
import request from '@/axios';
// ==================== 裁判管理接口 ====================
/**
* 裁判分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {String} params.name - 裁判姓名
* @param {String} params.phone - 手机号
* @param {Number} params.refereeType - 裁判类型1-主裁判2-裁判员)
*/
export const getRefereeList = (current, size, params) => {
return request({
url: '/api/martial/judge/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取裁判详情
* @param {Number} id - 裁判主键ID
*/
export const getRefereeDetail = (id) => {
return request({
url: '/api/martial/judge/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改裁判(统一提交接口)
* @param {Object} data - 裁判数据
* @param {Number} data.id - 主键ID编辑时传入
* @param {String} data.name - 姓名
* @param {Number} data.gender - 性别1-男2-女)
* @param {String} data.phone - 手机号
* @param {String} data.idCard - 身份证号
* @param {Number} data.refereeType - 裁判类型1-主裁判2-裁判员)
* @param {String} data.level - 等级/职称
* @param {String} data.specialty - 擅长项目
* @param {String} data.photoUrl - 照片URL
* @param {String} data.remark - 备注
*/
export const submitReferee = (data) => {
return request({
url: '/api/martial/judge/submit',
method: 'post',
data
})
}
/**
* 删除裁判
* @param {String} ids - 裁判ID,多个用逗号分隔
*/
export const removeReferee = (ids) => {
return request({
url: '/api/martial/judge/remove',
method: 'post',
params: { ids }
})
}

273
src/api/martial/result.js Normal file
View File

@@ -0,0 +1,273 @@
import request from '@/axios';
// ==================== 武术赛事成绩管理接口 ====================
/**
* 成绩分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID可选
* @param {Number} params.athleteId - 运动员ID可选
* @param {String} params.playerName - 运动员姓名(可选)
* @param {String} params.teamName - 团队名称(可选)
* @param {Number} params.isFinal - 是否最终成绩(可选)
*/
export const getResultList = (current, size, params) => {
return request({
url: '/api/blade-martial/result/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取成绩详情
* @param {Number} id - 成绩ID
*/
export const getResultDetail = (id) => {
return request({
url: '/api/blade-martial/result/detail',
method: 'get',
params: { id }
})
}
/**
* 新增成绩
* @param {Object} data - 成绩数据
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.athleteId - 运动员ID
* @param {Number} data.projectId - 项目ID
* @param {Number} data.venueId - 场地ID
* @param {String} data.playerName - 运动员姓名
* @param {String} data.teamName - 团队名称
* @param {Number} data.totalScore - 总分
* @param {Number} data.difficultyCoefficient - 难度系数
* @param {Number} data.finalScore - 最终成绩
*/
export const addResult = (data) => {
return request({
url: '/api/blade-martial/result/save',
method: 'post',
data
})
}
/**
* 修改成绩
* @param {Object} data - 成绩数据
*/
export const updateResult = (data) => {
return request({
url: '/api/blade-martial/result/update',
method: 'post',
data
})
}
/**
* 删除成绩
* @param {String} ids - 成绩ID,多个用逗号分隔
*/
export const removeResult = (ids) => {
return request({
url: '/api/blade-martial/result/remove',
method: 'post',
params: { ids }
})
}
// ==================== 成绩高级功能接口 ====================
/**
* 计算成绩
* @param {Object} data - 计算参数
* @param {Number} data.athleteId - 运动员ID
* @param {Number} data.projectId - 项目ID
* @param {Number} data.competitionId - 赛事ID
* @param {Boolean} data.autoRanking - 是否自动排名(可选)
*/
export const calculateResult = (data) => {
return request({
url: '/api/blade-martial/result/calculate',
method: 'post',
data
})
}
/**
* 批量计算成绩
* @param {Object} data - 计算参数
* @param {Number} data.projectId - 项目ID
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.athleteIds - 运动员ID数组可选为空时计算所有
*/
export const batchCalculateResults = (data) => {
return request({
url: '/api/blade-martial/result/batch-calculate',
method: 'post',
data
})
}
/**
* 自动排名
* @param {Object} data - 排名参数
* @param {Number} data.projectId - 项目ID
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.category - 分组类别(可选)
*/
export const autoRanking = (data) => {
return request({
url: '/api/blade-martial/result/ranking',
method: 'post',
data
})
}
/**
* 分配奖牌
* @param {Object} data - 奖牌分配参数
* @param {Number} data.projectId - 项目ID
* @param {Number} data.competitionId - 赛事ID
* @param {Number} data.goldCount - 金牌数量
* @param {Number} data.silverCount - 银牌数量
* @param {Number} data.bronzeCount - 铜牌数量
*/
export const allocateMedals = (data) => {
return request({
url: '/api/blade-martial/result/medals',
method: 'post',
data
})
}
/**
* 成绩复核
* @param {Object} data - 复核参数
* @param {Number} data.resultId - 成绩ID
* @param {String} data.reviewNote - 复核说明
* @param {Number} data.reviewStatus - 复核状态1通过2驳回
*/
export const reviewResult = (data) => {
return request({
url: '/api/blade-martial/result/review',
method: 'post',
data
})
}
/**
* 发布成绩
* @param {Object} data - 发布参数
* @param {Number} data.projectId - 项目ID可选
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.resultIds - 成绩ID数组可选
* @param {Boolean} data.publishAll - 是否发布全部(可选)
*/
export const publishResult = (data) => {
return request({
url: '/api/blade-martial/result/publish',
method: 'post',
data
})
}
/**
* 撤销发布成绩
* @param {Object} data - 撤销参数
* @param {Number} data.projectId - 项目ID可选
* @param {Number} data.competitionId - 赛事ID
* @param {Array} data.resultIds - 成绩ID数组可选
*/
export const unpublishResult = (data) => {
return request({
url: '/api/blade-martial/result/unpublish',
method: 'post',
data
})
}
/**
* 获取项目成绩统计
* @param {Number} projectId - 项目ID
* @param {Number} competitionId - 赛事ID
*/
export const getResultStatistics = (projectId, competitionId) => {
return request({
url: '/api/blade-martial/result/statistics',
method: 'get',
params: { projectId, competitionId }
})
}
/**
* 获取奖牌榜
* @param {Number} competitionId - 赛事ID
* @param {String} groupBy - 分组方式team团队/region地区
*/
export const getMedalRanking = (competitionId, groupBy = 'team') => {
return request({
url: '/api/blade-martial/result/medal-ranking',
method: 'get',
params: { competitionId, groupBy }
})
}
/**
* 导出成绩单
* @param {Object} params - 查询参数
*/
export const exportResults = (params) => {
return request({
url: '/api/blade-martial/result/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 导出获奖名单
* @param {Object} params - 查询参数
*/
export const exportAwardList = (params) => {
return request({
url: '/api/blade-martial/result/export-award',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 生成单个证书
* @param {Object} data - 证书参数
*/
export const generateCertificate = (data) => {
return request({
url: '/api/blade-martial/result/certificate/generate',
method: 'post',
data,
responseType: 'blob'
})
}
/**
* 批量生成证书
* @param {Object} data - 批量证书参数
*/
export const batchGenerateCertificates = (data) => {
return request({
url: '/api/blade-martial/result/certificate/batch-generate',
method: 'post',
data,
responseType: 'blob'
})
}

115
src/api/martial/rules.js Normal file
View File

@@ -0,0 +1,115 @@
import request from '@/axios'
// 获取赛事列表
export const getCompetitionList = (params) => {
return request({
url: '/api/martial/competition/list',
method: 'get',
params
})
}
// 获取赛事规程(小程序端)
export const getCompetitionRules = (params) => {
return request({
url: '/api/martial/competition/rules',
method: 'get',
params
})
}
// ==================== 附件管理 ====================
// 获取附件列表
export const getAttachmentList = (params) => {
return request({
url: '/api/martial/competition/rules/attachment/list',
method: 'get',
params
})
}
// 保存附件
export const saveAttachment = (data) => {
return request({
url: '/api/martial/competition/rules/attachment/save',
method: 'post',
data
})
}
// 删除附件
export const removeAttachment = (params) => {
return request({
url: '/api/martial/competition/rules/attachment/remove',
method: 'post',
params
})
}
// ==================== 章节管理 ====================
// 获取章节列表
export const getChapterList = (params) => {
return request({
url: '/api/martial/competition/rules/chapter/list',
method: 'get',
params
})
}
// 保存章节
export const saveChapter = (data) => {
return request({
url: '/api/martial/competition/rules/chapter/save',
method: 'post',
data
})
}
// 删除章节
export const removeChapter = (params) => {
return request({
url: '/api/martial/competition/rules/chapter/remove',
method: 'post',
params
})
}
// ==================== 章节内容管理 ====================
// 获取章节内容列表
export const getContentList = (params) => {
return request({
url: '/api/martial/competition/rules/content/list',
method: 'get',
params
})
}
// 保存章节内容
export const saveContent = (data) => {
return request({
url: '/api/martial/competition/rules/content/save',
method: 'post',
data
})
}
// 批量保存章节内容
export const batchSaveContents = (data) => {
return request({
url: '/api/martial/competition/rules/content/batch-save',
method: 'post',
data
})
}
// 删除章节内容
export const removeContent = (params) => {
return request({
url: '/api/martial/competition/rules/content/remove',
method: 'post',
params
})
}

View File

@@ -0,0 +1,239 @@
import request from '@/axios';
// ==================== 武术赛事赛程选手关联管理接口 ====================
/**
* 赛程选手关联分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.scheduleId - 赛程ID
* @param {Number} params.schedulePlanId - 赛程计划ID可选
* @param {Number} params.athleteId - 运动员ID可选
* @param {Number} params.status - 状态(可选)
*/
export const getScheduleAthleteList = (current, size, params) => {
return request({
url: '/api/blade-martial/scheduleAthlete/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取赛程选手关联详情
* @param {Number} id - 关联ID
*/
export const getScheduleAthleteDetail = (id) => {
return request({
url: '/api/blade-martial/scheduleAthlete/detail',
method: 'get',
params: { id }
})
}
/**
* 新增赛程选手关联
* @param {Object} data - 关联数据
* @param {Number} data.scheduleId - 赛程ID
* @param {Number} data.schedulePlanId - 赛程计划ID
* @param {Number} data.athleteId - 运动员ID
* @param {String} data.athleteName - 运动员姓名
* @param {Number} data.competitionOrder - 出场顺序
* @param {Number} data.status - 状态0待出场1进行中2已完成
*/
export const addScheduleAthlete = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/save',
method: 'post',
data
})
}
/**
* 修改赛程选手关联
* @param {Object} data - 关联数据
*/
export const updateScheduleAthlete = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/update',
method: 'post',
data
})
}
/**
* 删除赛程选手关联
* @param {String} ids - 关联ID,多个用逗号分隔
*/
export const removeScheduleAthlete = (ids) => {
return request({
url: '/api/blade-martial/scheduleAthlete/remove',
method: 'post',
params: { ids }
})
}
/**
* 批量添加赛程选手
* @param {Object} data - 批量添加参数
* @param {Number} data.schedulePlanId - 赛程计划ID
* @param {Array} data.athleteIds - 运动员ID数组
* @param {Boolean} data.autoOrder - 是否自动排序默认true
*/
export const batchAddScheduleAthletes = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/batch-save',
method: 'post',
data
})
}
/**
* 自动分配选手到赛程
* @param {Object} data - 分配参数
* @param {Number} data.scheduleId - 赛程ID
* @param {Number} data.projectId - 项目ID
* @param {String} data.allocateStrategy - 分配策略random随机/order顺序
*/
export const autoAllocateAthletes = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/auto-allocate',
method: 'post',
data
})
}
/**
* 调整选手出场顺序
* @param {Object} data - 调整参数
* @param {Number} data.id - 关联ID
* @param {Number} data.targetOrder - 目标顺序
*/
export const adjustAthleteOrder = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/adjust-order',
method: 'post',
data
})
}
/**
* 交换两个选手的出场顺序
* @param {Object} data - 交换参数
* @param {Number} data.athleteId1 - 选手1的关联ID
* @param {Number} data.athleteId2 - 选手2的关联ID
*/
export const swapAthleteOrder = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/swap-order',
method: 'post',
data
})
}
/**
* 随机排序选手出场顺序
* @param {Number} schedulePlanId - 赛程计划ID
*/
export const randomizeAthleteOrder = (schedulePlanId) => {
return request({
url: '/api/blade-martial/scheduleAthlete/randomize',
method: 'post',
params: { schedulePlanId }
})
}
/**
* 更新选手状态
* @param {Object} data - 状态更新参数
* @param {Number} data.id - 关联ID
* @param {Number} data.status - 状态0待出场1进行中2已完成
*/
export const updateAthleteStatus = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/update-status',
method: 'post',
data
})
}
/**
* 获取赛程计划的选手列表(不分页)
* @param {Number} schedulePlanId - 赛程计划ID
*/
export const getAthletesBySchedulePlan = (schedulePlanId) => {
return request({
url: '/api/blade-martial/scheduleAthlete/list-by-plan',
method: 'get',
params: { schedulePlanId }
})
}
/**
* 获取运动员的赛程安排
* @param {Number} athleteId - 运动员ID
* @param {Number} competitionId - 赛事ID
*/
export const getAthleteSchedules = (athleteId, competitionId) => {
return request({
url: '/api/blade-martial/scheduleAthlete/athlete-schedules',
method: 'get',
params: { athleteId, competitionId }
})
}
/**
* 检查选手时间冲突
* @param {Object} data - 检查参数
* @param {Number} data.athleteId - 运动员ID
* @param {Number} data.schedulePlanId - 赛程计划ID
*/
export const checkAthleteConflict = (data) => {
return request({
url: '/api/blade-martial/scheduleAthlete/check-conflict',
method: 'post',
data
})
}
/**
* 签到选手
* @param {Number} id - 关联ID
*/
export const checkInAthlete = (id) => {
return request({
url: '/api/blade-martial/scheduleAthlete/check-in',
method: 'post',
params: { id }
})
}
/**
* 批量签到选手
* @param {Array} ids - 关联ID数组
*/
export const batchCheckInAthletes = (ids) => {
return request({
url: '/api/blade-martial/scheduleAthlete/batch-check-in',
method: 'post',
data: ids
})
}
/**
* 导出赛程选手名单
* @param {Object} params - 导出参数
*/
export const exportScheduleAthletes = (params) => {
return request({
url: '/api/blade-martial/scheduleAthlete/export',
method: 'get',
params,
responseType: 'blob'
})
}

View File

@@ -0,0 +1,220 @@
import request from '@/axios';
// ==================== 武术赛事赛程计划管理接口 ====================
/**
* 赛程计划分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.scheduleId - 赛程ID
* @param {Number} params.venueId - 场地ID可选
* @param {Number} params.projectId - 项目ID可选
* @param {String} params.planDate - 计划日期(可选)
*/
export const getSchedulePlanList = (current, size, params) => {
return request({
url: '/api/blade-martial/schedule-plan/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取赛程计划详情
* @param {Number} id - 赛程计划ID
*/
export const getSchedulePlanDetail = (id) => {
return request({
url: '/api/blade-martial/schedule-plan/detail',
method: 'get',
params: { id }
})
}
/**
* 新增赛程计划
* @param {Object} data - 赛程计划数据
* @param {Number} data.scheduleId - 赛程ID
* @param {String} data.planDate - 计划日期
* @param {String} data.startTime - 开始时间
* @param {String} data.endTime - 结束时间
* @param {Number} data.venueId - 场地ID
* @param {String} data.venueName - 场地名称
* @param {Number} data.projectId - 项目ID
* @param {String} data.projectName - 项目名称
* @param {Number} data.planOrder - 计划顺序
*/
export const addSchedulePlan = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/save',
method: 'post',
data
})
}
/**
* 修改赛程计划
* @param {Object} data - 赛程计划数据
*/
export const updateSchedulePlan = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/update',
method: 'post',
data
})
}
/**
* 删除赛程计划
* @param {String} ids - 赛程计划ID,多个用逗号分隔
*/
export const removeSchedulePlan = (ids) => {
return request({
url: '/api/blade-martial/schedule-plan/remove',
method: 'post',
params: { ids }
})
}
/**
* 批量添加赛程计划
* @param {Array} data - 赛程计划数据数组
*/
export const batchAddSchedulePlans = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/batch-save',
method: 'post',
data
})
}
/**
* 自动编排赛程
* @param {Object} data - 编排参数
* @param {Number} data.scheduleId - 赛程ID
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.startDate - 开始日期
* @param {String} data.endDate - 结束日期
* @param {Array} data.venueIds - 场地ID数组
* @param {Array} data.projectIds - 项目ID数组
*/
export const autoArrangeSchedule = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/auto-arrange',
method: 'post',
data
})
}
/**
* 调整赛程计划顺序
* @param {Object} data - 调整参数
* @param {Number} data.id - 赛程计划ID
* @param {Number} data.targetOrder - 目标顺序
*/
export const adjustScheduleOrder = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/adjust-order',
method: 'post',
data
})
}
/**
* 获取某日期的赛程计划
* @param {Number} scheduleId - 赛程ID
* @param {String} planDate - 计划日期
*/
export const getSchedulePlansByDate = (scheduleId, planDate) => {
return request({
url: '/api/blade-martial/schedule-plan/list-by-date',
method: 'get',
params: { scheduleId, planDate }
})
}
/**
* 获取某场地的赛程计划
* @param {Number} venueId - 场地ID
* @param {String} planDate - 计划日期(可选)
*/
export const getSchedulePlansByVenue = (venueId, planDate) => {
return request({
url: '/api/blade-martial/schedule-plan/list-by-venue',
method: 'get',
params: { venueId, planDate }
})
}
/**
* 检查时间冲突
* @param {Object} data - 检查参数
* @param {Number} data.venueId - 场地ID
* @param {String} data.planDate - 计划日期
* @param {String} data.startTime - 开始时间
* @param {String} data.endTime - 结束时间
* @param {Number} data.excludeId - 排除的赛程计划ID编辑时使用
*/
export const checkTimeConflict = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/check-conflict',
method: 'post',
data
})
}
/**
* 复制赛程计划到其他日期
* @param {Object} data - 复制参数
* @param {Number} data.sourcePlanId - 源赛程计划ID
* @param {String} data.targetDate - 目标日期
*/
export const copySchedulePlan = (data) => {
return request({
url: '/api/blade-martial/schedule-plan/copy',
method: 'post',
data
})
}
/**
* 导出赛程计划
* @param {Object} params - 导出参数
*/
export const exportSchedulePlans = (params) => {
return request({
url: '/api/blade-martial/schedule-plan/export',
method: 'get',
params,
responseType: 'blob'
})
}
/**
* 更新参赛者签到状态
* @param {Number} participantId - 参赛者ID
* @param {String} status - 状态:未签到/已签到/异常
*/
export const updateCheckInStatus = (participantId, status) => {
return request({
url: '/api/martial/schedule/update-check-in-status',
method: 'post',
data: { participantId, status }
})
}
/**
* 获取赛程配置
* @returns {Promise} 返回赛程配置信息
*/
export const getScheduleConfig = () => {
return request({
url: '/api/martial/schedule/config',
method: 'get'
})
}

105
src/api/martial/score.js Normal file
View File

@@ -0,0 +1,105 @@
import request from '@/axios';
// ==================== 评分管理接口 ====================
/**
* 评分分页查询
* @param {Number} current - 当前页,默认1
* @param {Number} size - 每页条数,默认10
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
* @param {Number} params.projectId - 项目ID
* @param {Number} params.venueId - 场地ID
* @param {Number} params.athleteId - 选手ID
*/
export const getScoreList = (current, size, params) => {
return request({
url: '/api/martial/score/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取评分详情
* @param {Number} id - 评分主键ID
*/
export const getScoreDetail = (id) => {
return request({
url: '/api/martial/score/detail',
method: 'get',
params: { id }
})
}
/**
* 获取选手的所有裁判评分
* @param {Number} athleteId - 选手ID
* @param {Number} projectId - 项目ID
*/
export const getAthleteScores = (athleteId, projectId) => {
return request({
url: '/api/martial/score/list',
method: 'get',
params: {
athleteId,
projectId,
current: 1,
size: 1000
}
})
}
/**
* 提交评分
* @param {Object} data - 评分数据
*/
export const submitScore = (data) => {
return request({
url: '/api/martial/score/submit',
method: 'post',
data
})
}
/**
* 删除评分
* @param {String} ids - 评分ID,多个用逗号分隔
*/
export const removeScore = (ids) => {
return request({
url: '/api/martial/score/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取异常评分列表
* @param {Number} athleteId - 选手ID
* @param {Number} projectId - 项目ID
*/
export const getAnomalies = (athleteId, projectId) => {
return request({
url: '/api/martial/score/anomalies',
method: 'get',
params: { athleteId, projectId }
})
}
/**
* 验证评分
* @param {Number} athleteId - 选手ID
* @param {Number} projectId - 项目ID
*/
export const validateScores = (athleteId, projectId) => {
return request({
url: '/api/martial/score/validate',
method: 'post',
params: { athleteId, projectId }
})
}

79
src/api/martial/venue.js Normal file
View File

@@ -0,0 +1,79 @@
import request from '@/axios';
// ==================== 场地管理接口 ====================
/**
* 场地列表查询
* @param {Number} current - 当前页
* @param {Number} size - 每页条数
* @param {Object} params - 查询参数
* @param {Number} params.competitionId - 赛事ID
*/
export const getVenueList = (current, size, params) => {
return request({
url: '/api/martial/venue/list',
method: 'get',
params: {
current,
size,
...params
}
})
}
/**
* 获取场地详情
* @param {Number} id - 场地ID
*/
export const getVenueDetail = (id) => {
return request({
url: '/api/martial/venue/detail',
method: 'get',
params: { id }
})
}
/**
* 新增或修改场地
* @param {Object} data - 场地数据
* @param {Number} data.competitionId - 赛事ID
* @param {String} data.venueName - 场地名称
* @param {Number} data.capacity - 容纳人数
* @param {String} data.location - 位置
* @param {String} data.description - 描述
*/
export const submitVenue = (data) => {
return request({
url: '/api/martial/venue/submit',
method: 'post',
data
})
}
/**
* 删除场地
* @param {String} ids - 场地ID,多个用逗号分隔
*/
export const removeVenue = (ids) => {
return request({
url: '/api/martial/venue/remove',
method: 'post',
params: { ids }
})
}
/**
* 获取赛事的场地列表(不分页)
* @param {Number} competitionId - 赛事ID
*/
export const getVenuesByCompetition = (competitionId) => {
return request({
url: '/api/martial/venue/list',
method: 'get',
params: {
competitionId,
current: 1,
size: 1000
}
})
}

View File

@@ -2,7 +2,7 @@ import request from '@/axios';
export const getList = (current, size, params) => {
return request({
url: '/blade-system/menu/list',
url: '/api/blade-system/menu/list',
method: 'get',
params: {
...params,
@@ -14,7 +14,7 @@ export const getList = (current, size, params) => {
export const getLazyList = (parentId, params) => {
return request({
url: '/blade-system/menu/lazy-list',
url: '/api/blade-system/menu/lazy-list',
method: 'get',
params: {
...params,
@@ -25,7 +25,7 @@ export const getLazyList = (parentId, params) => {
export const getLazyMenuList = (parentId, params) => {
return request({
url: '/blade-system/menu/lazy-menu-list',
url: '/api/blade-system/menu/lazy-menu-list',
method: 'get',
params: {
...params,
@@ -36,7 +36,7 @@ export const getLazyMenuList = (parentId, params) => {
export const getMenuList = (current, size, params) => {
return request({
url: '/blade-system/menu/menu-list',
url: '/api/blade-system/menu/menu-list',
method: 'get',
params: {
...params,
@@ -48,7 +48,7 @@ export const getMenuList = (current, size, params) => {
export const getMenuTree = tenantId => {
return request({
url: '/blade-system/menu/tree',
url: '/api/blade-system/menu/tree',
method: 'get',
params: {
tenantId,
@@ -58,7 +58,7 @@ export const getMenuTree = tenantId => {
export const remove = ids => {
return request({
url: '/blade-system/menu/remove',
url: '/api/blade-system/menu/remove',
method: 'post',
params: {
ids,
@@ -68,7 +68,7 @@ export const remove = ids => {
export const add = row => {
return request({
url: '/blade-system/menu/submit',
url: '/api/blade-system/menu/submit',
method: 'post',
data: row,
});
@@ -76,7 +76,7 @@ export const add = row => {
export const update = row => {
return request({
url: '/blade-system/menu/submit',
url: '/api/blade-system/menu/submit',
method: 'post',
data: row,
});
@@ -84,7 +84,7 @@ export const update = row => {
export const getMenu = id => {
return request({
url: '/blade-system/menu/detail',
url: '/api/blade-system/menu/detail',
method: 'get',
params: {
id,
@@ -94,13 +94,13 @@ export const getMenu = id => {
export const getTopMenu = () =>
request({
url: '/blade-system/menu/top-menu',
url: '/api/blade-system/menu/top-menu',
method: 'get',
});
export const getRoutes = topMenuId =>
request({
url: '/blade-system/menu/routes',
url: '/api/blade-system/menu/routes',
method: 'get',
params: {
topMenuId,

View File

@@ -4,7 +4,7 @@ import website from '@/config/website';
export const loginByUsername = (tenantId, deptId, roleId, username, password, type, key, code) =>
request({
url: '/blade-auth/oauth/token',
url: '/api/blade-auth/oauth/token',
method: 'post',
headers: {
'Tenant-Id': tenantId,
@@ -25,7 +25,7 @@ export const loginByUsername = (tenantId, deptId, roleId, username, password, ty
export const loginBySocial = (tenantId, source, code, state) =>
request({
url: '/blade-auth/oauth/token',
url: '/api/blade-auth/oauth/token',
method: 'post',
headers: {
'Tenant-Id': tenantId,
@@ -42,7 +42,7 @@ export const loginBySocial = (tenantId, source, code, state) =>
export const loginBySso = (state, code) =>
request({
url: '/blade-auth/oauth/token',
url: '/api/blade-auth/oauth/token',
method: 'post',
headers: {
'Tenant-Id': state,
@@ -58,7 +58,7 @@ export const loginBySso = (state, code) =>
export const refreshToken = (refresh_token, tenantId, deptId, roleId) =>
request({
url: '/blade-auth/oauth/token',
url: '/api/blade-auth/oauth/token',
method: 'post',
headers: {
'Tenant-Id': tenantId,
@@ -75,7 +75,7 @@ export const refreshToken = (refresh_token, tenantId, deptId, roleId) =>
export const registerUser = (tenantId, name, account, password, phone, email) =>
request({
url: '/blade-auth/oauth/token',
url: '/api/blade-auth/oauth/token',
method: 'post',
headers: {
'Tenant-Id': tenantId,
@@ -94,7 +94,7 @@ export const registerUser = (tenantId, name, account, password, phone, email) =>
export const registerGuest = (form, oauthId) =>
request({
url: '/blade-system/user/register-guest',
url: '/api/blade-system/user/register-guest',
method: 'post',
params: {
tenantId: form.tenantId,
@@ -107,40 +107,40 @@ export const registerGuest = (form, oauthId) =>
export const getButtons = () =>
request({
url: '/blade-system/menu/buttons',
url: '/api/blade-system/menu/buttons',
method: 'get',
});
export const getCaptcha = () =>
request({
url: '/blade-auth/oauth/captcha',
url: '/api/blade-auth/oauth/captcha',
method: 'get',
authorization: false,
});
export const logout = () =>
request({
url: '/blade-auth/oauth/logout',
url: '/api/blade-auth/oauth/logout',
method: 'get',
authorization: false,
});
export const getUserInfo = () =>
request({
url: '/blade-auth/oauth/user-info',
url: '/api/blade-auth/oauth/user-info',
method: 'get',
});
export const sendLogs = list =>
request({
url: '/blade-auth/oauth/logout',
url: '/api/blade-auth/oauth/logout',
method: 'post',
data: list,
});
export const clearCache = () =>
request({
url: '/blade-auth/oauth/clear-cache',
url: '/api/blade-auth/oauth/clear-cache',
method: 'get',
authorization: false,
});

View File

@@ -19,7 +19,7 @@ import { Base64 } from 'js-base64';
import { baseUrl } from '@/config/env';
import crypto from '@/utils/crypto';
axios.defaults.timeout = 10000;
axios.defaults.timeout = 60000; // 60秒超时支持编排等耗时操作
//返回其他状态吗
axios.defaults.validateStatus = function (status) {
return status >= 200 && status <= 500; // 默认的
@@ -98,6 +98,10 @@ axios.interceptors.request.use(
axios.interceptors.response.use(
res => {
NProgress.done();
// 如果是 blob 类型响应(文件下载),直接返回
if (res.config.responseType === 'blob') {
return res;
}
const status = res.data.code || res.status;
const statusWhiteList = website.statusWhiteList || [];
const message = res.data.msg || res.data.error_description || '系统错误';

View File

@@ -0,0 +1,186 @@
<template>
<el-select
v-model="selectedValue"
:placeholder="placeholder"
:multiple="multiple"
:disabled="disabled"
:filterable="filterable"
:clearable="clearable"
:loading="loading"
@change="handleChange"
class="competition-selector"
>
<el-option
v-for="item in filteredList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
>
<span class="option-label">{{ item.name }}</span>
<span class="option-status">
<el-tag :type="getStatusType(item.status)" size="small">
{{ getStatusText(item.status) }}
</el-tag>
</span>
</el-option>
</el-select>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
export default {
name: 'CompetitionSelector',
props: {
modelValue: {
type: [Number, Array],
default: null
},
multiple: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择赛事'
},
filterable: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: true
},
// 过滤状态: 0-未开始, 1-报名中, 2-进行中, 3-已结束
status: {
type: Array,
default: null
}
},
emits: ['update:modelValue', 'change'],
data() {
return {
loading: false,
competitionList: [],
selectedValue: this.modelValue
}
},
computed: {
filteredList() {
if (!this.status || this.status.length === 0) {
return this.competitionList
}
return this.competitionList.filter(item =>
this.status.includes(item.status)
)
}
},
watch: {
modelValue(newVal) {
this.selectedValue = newVal
}
},
mounted() {
this.loadCompetitions()
},
methods: {
async loadCompetitions() {
this.loading = true
try {
const res = await getCompetitionList({
current: 1,
size: 1000
})
if (res.data && res.data.records) {
this.competitionList = res.data.records.map(item => ({
id: item.id,
name: item.name,
status: item.status,
disabled: false
}))
}
} catch (error) {
console.error('加载赛事列表失败:', error)
this.$message.error('加载赛事列表失败')
} finally {
this.loading = false
}
},
handleChange(value) {
this.$emit('update:modelValue', value)
// 获取选中的选项
let selectedOptions = null
if (this.multiple) {
selectedOptions = this.competitionList.filter(item =>
value.includes(item.id)
)
} else {
selectedOptions = this.competitionList.find(item =>
item.id === value
)
}
this.$emit('change', value, selectedOptions)
},
getStatusType(status) {
const typeMap = {
0: 'info',
1: 'success',
2: 'warning',
3: 'info'
}
return typeMap[status] || 'info'
},
getStatusText(status) {
const textMap = {
0: '未开始',
1: '报名中',
2: '进行中',
3: '已结束'
}
return textMap[status] || '未知'
}
}
}
</script>
<style lang="scss" scoped>
.competition-selector {
width: 100%;
:deep(.el-select-dropdown__item) {
display: flex;
justify-content: space-between;
align-items: center;
}
.option-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-status {
margin-left: 10px;
flex-shrink: 0;
}
}
</style>

View File

@@ -0,0 +1,330 @@
<template>
<el-dialog
v-model="visible"
title="分配奖牌"
width="800px"
:close-on-click-modal="false"
@close="handleClose"
>
<!-- 赛事和项目信息 -->
<div class="medal-info">
<el-descriptions :column="2" border>
<el-descriptions-item label="赛事名称">{{ competitionName }}</el-descriptions-item>
<el-descriptions-item label="项目名称">{{ projectName }}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 奖牌分配表单 -->
<div class="medal-form">
<!-- 金牌 -->
<div class="medal-section">
<div class="section-header">
<span class="medal-icon gold">🥇</span>
<span class="medal-title">金牌</span>
</div>
<el-select
v-model="form.goldMedal"
placeholder="请选择金牌获得者"
filterable
clearable
class="medal-select"
>
<el-option
v-for="item in athleteList"
:key="item.id"
:label="`${item.name} (${item.number}) - ${item.score}分`"
:value="item.id"
:disabled="isDisabled(item.id, 'gold')"
></el-option>
</el-select>
</div>
<!-- 银牌 -->
<div class="medal-section">
<div class="section-header">
<span class="medal-icon silver">🥈</span>
<span class="medal-title">银牌</span>
</div>
<el-select
v-model="form.silverMedal"
placeholder="请选择银牌获得者"
filterable
clearable
class="medal-select"
>
<el-option
v-for="item in athleteList"
:key="item.id"
:label="`${item.name} (${item.number}) - ${item.score}分`"
:value="item.id"
:disabled="isDisabled(item.id, 'silver')"
></el-option>
</el-select>
</div>
<!-- 铜牌 -->
<div class="medal-section">
<div class="section-header">
<span class="medal-icon bronze">🥉</span>
<span class="medal-title">铜牌</span>
</div>
<el-select
v-model="form.bronzeMedals"
placeholder="请选择铜牌获得者(可多选)"
filterable
clearable
multiple
class="medal-select"
>
<el-option
v-for="item in athleteList"
:key="item.id"
:label="`${item.name} (${item.number}) - ${item.score}分`"
:value="item.id"
:disabled="isDisabled(item.id, 'bronze')"
></el-option>
</el-select>
</div>
</div>
<!-- 自动分配建议 -->
<el-alert
v-if="autoSuggestion"
:title="autoSuggestion"
type="info"
:closable="false"
class="auto-suggestion"
>
<template #default>
<div>{{ autoSuggestion }}</div>
<el-button type="primary" size="small" @click="applyAutoSuggestion">
应用建议
</el-button>
</template>
</el-alert>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">
确定分配
</el-button>
</div>
</template>
</el-dialog>
</template>
<script>
import { allocateMedals } from '@/api/martial/result'
export default {
name: 'MedalDialog',
props: {
modelValue: {
type: Boolean,
default: false
},
competitionId: {
type: Number,
required: true
},
projectId: {
type: Number,
required: true
},
competitionName: {
type: String,
default: ''
},
projectName: {
type: String,
default: ''
},
athleteList: {
type: Array,
default: () => []
}
},
emits: ['update:modelValue', 'success'],
data() {
return {
visible: this.modelValue,
submitting: false,
form: {
goldMedal: null,
silverMedal: null,
bronzeMedals: []
}
}
},
computed: {
autoSuggestion() {
if (this.athleteList.length < 3) {
return null
}
// 按分数排序
const sorted = [...this.athleteList].sort((a, b) => b.score - a.score)
return `建议: 金牌-${sorted[0].name}(${sorted[0].score}分), 银牌-${sorted[1].name}(${sorted[1].score}分), 铜牌-${sorted[2].name}(${sorted[2].score}分)`
}
},
watch: {
modelValue(newVal) {
this.visible = newVal
if (newVal) {
this.resetForm()
}
},
visible(newVal) {
this.$emit('update:modelValue', newVal)
}
},
methods: {
isDisabled(athleteId, medalType) {
// 同一选手不能获得多个奖牌
if (medalType === 'gold') {
return this.form.silverMedal === athleteId ||
this.form.bronzeMedals.includes(athleteId)
}
if (medalType === 'silver') {
return this.form.goldMedal === athleteId ||
this.form.bronzeMedals.includes(athleteId)
}
if (medalType === 'bronze') {
return this.form.goldMedal === athleteId ||
this.form.silverMedal === athleteId
}
return false
},
applyAutoSuggestion() {
if (this.athleteList.length < 3) {
return
}
const sorted = [...this.athleteList].sort((a, b) => b.score - a.score)
this.form.goldMedal = sorted[0].id
this.form.silverMedal = sorted[1].id
this.form.bronzeMedals = [sorted[2].id]
this.$message.success('已应用自动分配建议')
},
resetForm() {
this.form = {
goldMedal: null,
silverMedal: null,
bronzeMedals: []
}
},
handleClose() {
this.visible = false
},
async handleSubmit() {
// 验证
if (!this.form.goldMedal && !this.form.silverMedal && this.form.bronzeMedals.length === 0) {
this.$message.warning('请至少分配一个奖牌')
return
}
this.submitting = true
try {
await allocateMedals({
competitionId: this.competitionId,
projectId: this.projectId,
goldMedal: this.form.goldMedal,
silverMedal: this.form.silverMedal,
bronzeMedals: this.form.bronzeMedals
})
this.$message.success('奖牌分配成功')
this.$emit('success')
this.handleClose()
} catch (error) {
console.error('奖牌分配失败:', error)
this.$message.error('奖牌分配失败')
} finally {
this.submitting = false
}
}
}
}
</script>
<style lang="scss" scoped>
.medal-info {
margin-bottom: 20px;
}
.medal-form {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.medal-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.section-header {
display: flex;
align-items: center;
gap: 10px;
}
.medal-icon {
font-size: 24px;
&.gold {
filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}
&.silver {
filter: drop-shadow(0 0 5px rgba(192, 192, 192, 0.5));
}
&.bronze {
filter: drop-shadow(0 0 5px rgba(205, 127, 50, 0.5));
}
}
.medal-title {
font-size: 16px;
font-weight: bold;
color: #303133;
}
.medal-select {
width: 100%;
}
.auto-suggestion {
margin-top: 20px;
:deep(.el-alert__content) {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
}
</style>

View File

@@ -0,0 +1,186 @@
<template>
<el-select
v-model="selectedValue"
:placeholder="placeholder"
:multiple="multiple"
:disabled="disabled"
:filterable="filterable"
:clearable="clearable"
:loading="loading"
@change="handleChange"
class="project-selector"
>
<el-option
v-for="item in filteredList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
>
<span class="option-label">{{ item.name }}</span>
<span class="option-type" v-if="item.type">
<el-tag size="small">{{ item.type }}</el-tag>
</span>
</el-option>
</el-select>
</template>
<script>
import { getProjectList } from '@/api/martial/project'
export default {
name: 'ProjectSelector',
props: {
modelValue: {
type: [Number, Array],
default: null
},
multiple: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择项目'
},
filterable: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: true
},
// 赛事ID,用于过滤项目
competitionId: {
type: Number,
default: null
},
// 项目类型过滤
projectType: {
type: String,
default: null
}
},
emits: ['update:modelValue', 'change'],
data() {
return {
loading: false,
projectList: [],
selectedValue: this.modelValue
}
},
computed: {
filteredList() {
let list = this.projectList
if (this.projectType) {
list = list.filter(item => item.type === this.projectType)
}
return list
}
},
watch: {
modelValue(newVal) {
this.selectedValue = newVal
},
competitionId(newVal) {
if (newVal) {
this.loadProjects()
} else {
this.projectList = []
}
}
},
mounted() {
if (this.competitionId) {
this.loadProjects()
}
},
methods: {
async loadProjects() {
if (!this.competitionId) {
this.projectList = []
return
}
this.loading = true
try {
const res = await getProjectList({
competitionId: this.competitionId,
current: 1,
size: 1000
})
if (res.data && res.data.records) {
this.projectList = res.data.records.map(item => ({
id: item.id,
name: item.name,
type: item.type,
disabled: false
}))
}
} catch (error) {
console.error('加载项目列表失败:', error)
this.$message.error('加载项目列表失败')
} finally {
this.loading = false
}
},
handleChange(value) {
this.$emit('update:modelValue', value)
// 获取选中的选项
let selectedOptions = null
if (this.multiple) {
selectedOptions = this.projectList.filter(item =>
value.includes(item.id)
)
} else {
selectedOptions = this.projectList.find(item =>
item.id === value
)
}
this.$emit('change', value, selectedOptions)
}
}
}
</script>
<style lang="scss" scoped>
.project-selector {
width: 100%;
:deep(.el-select-dropdown__item) {
display: flex;
justify-content: space-between;
align-items: center;
}
.option-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-type {
margin-left: 10px;
flex-shrink: 0;
}
}
</style>

View File

@@ -0,0 +1,268 @@
<template>
<div class="score-input">
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
<!-- 基础分 -->
<el-form-item label="基础分" prop="baseScore">
<el-input-number
v-model="form.baseScore"
:min="0"
:max="10"
:step="0.1"
:precision="2"
controls-position="right"
@change="handleCalculate"
></el-input-number>
</el-form-item>
<!-- 扣分项 -->
<el-form-item label="扣分项">
<el-tag
v-for="(deduction, index) in form.deductions"
:key="index"
closable
@close="handleRemoveDeduction(index)"
class="deduction-tag"
>
{{ deduction.name }} (-{{ deduction.score }})
</el-tag>
<el-button
size="small"
type="primary"
plain
@click="showDeductionSelector"
>
添加扣分项
</el-button>
</el-form-item>
<!-- 总扣分 -->
<el-form-item label="总扣分">
<el-tag type="danger">-{{ totalDeduction }}</el-tag>
</el-form-item>
<!-- 最终得分 -->
<el-form-item label="最终得分">
<el-tag :type="getScoreType(finalScore)" size="large" class="final-score-tag">
{{ finalScore }}
</el-tag>
</el-form-item>
<!-- 备注 -->
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
:rows="3"
placeholder="请输入备注信息"
></el-input>
</el-form-item>
</el-form>
<!-- 扣分项选择器弹窗 -->
<el-dialog
v-model="deductionDialogVisible"
title="选择扣分项"
width="600px"
>
<el-checkbox-group v-model="selectedDeductions">
<div class="deduction-list">
<el-checkbox
v-for="item in deductionList"
:key="item.id"
:label="item.id"
class="deduction-item"
>
<span class="deduction-name">{{ item.name }}</span>
<span class="deduction-score">-{{ item.score }}</span>
</el-checkbox>
</div>
</el-checkbox-group>
<template #footer>
<el-button @click="deductionDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirmDeductions">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { getDeductionList } from '@/api/martial/deduction'
export default {
name: 'ScoreInput',
props: {
modelValue: {
type: Object,
default: () => ({
baseScore: 10,
deductions: [],
remark: ''
})
},
projectId: {
type: Number,
required: true
}
},
emits: ['update:modelValue', 'change'],
data() {
return {
form: {
baseScore: 10,
deductions: [],
remark: ''
},
rules: {
baseScore: [
{ required: true, message: '请输入基础分', trigger: 'blur' }
]
},
deductionDialogVisible: false,
deductionList: [],
selectedDeductions: []
}
},
computed: {
totalDeduction() {
return this.form.deductions.reduce((sum, item) => sum + item.score, 0)
},
finalScore() {
const score = this.form.baseScore - this.totalDeduction
return Math.max(0, parseFloat(score.toFixed(2)))
}
},
watch: {
modelValue: {
handler(newVal) {
if (newVal) {
this.form = { ...newVal }
}
},
immediate: true,
deep: true
},
projectId: {
handler(newVal) {
if (newVal) {
this.loadDeductions()
}
},
immediate: true
}
},
methods: {
async loadDeductions() {
try {
const res = await getDeductionList({
projectId: this.projectId
})
if (res.data && res.data.records) {
this.deductionList = res.data.records
}
} catch (error) {
console.error('加载扣分项失败:', error)
}
},
handleCalculate() {
this.emitChange()
},
showDeductionSelector() {
this.selectedDeductions = this.form.deductions.map(item => item.id)
this.deductionDialogVisible = true
},
handleConfirmDeductions() {
this.form.deductions = this.deductionList.filter(item =>
this.selectedDeductions.includes(item.id)
).map(item => ({
id: item.id,
name: item.name,
score: item.score
}))
this.deductionDialogVisible = false
this.emitChange()
},
handleRemoveDeduction(index) {
this.form.deductions.splice(index, 1)
this.emitChange()
},
emitChange() {
const value = {
...this.form,
totalDeduction: this.totalDeduction,
finalScore: this.finalScore
}
this.$emit('update:modelValue', value)
this.$emit('change', value)
},
getScoreType(score) {
if (score >= 9) return 'success'
if (score >= 8) return 'warning'
if (score >= 7) return 'info'
return 'danger'
},
async validate() {
return await this.$refs.formRef.validate()
}
}
}
</script>
<style lang="scss" scoped>
.score-input {
.deduction-tag {
margin-right: 8px;
margin-bottom: 8px;
}
.final-score-tag {
font-size: 24px;
font-weight: bold;
padding: 10px 20px;
}
.deduction-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 400px;
overflow-y: auto;
}
.deduction-item {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #dcdfe6;
border-radius: 4px;
&:hover {
background-color: #f5f7fa;
}
}
.deduction-name {
flex: 1;
}
.deduction-score {
color: #f56c6c;
font-weight: bold;
}
}
</style>

View File

@@ -1,44 +1,58 @@
<template>
<div class="login-container" ref="login" @keyup.enter="handleLogin">
<div class="stars"></div>
<div class="stars2"></div>
<div class="stars3"></div>
<div class="login-weaper animated bounceInDown">
<div class="login-wrapper animated bounceInDown">
<!-- 左侧图形装饰区 -->
<div class="login-left">
<div class="login-time">
{{ time }}
<div class="decoration-bg">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
<div class="login-left-content">
<h1 class="title">武术赛事通</h1>
<p class="subtitle">专业的武术赛事管理平台</p>
<div class="feature-box">
<div class="feature-item">
<span>赛事报名管理</span>
<div class="content-wrapper">
<div class="logo-area">
<div class="logo-circle">
<div class="logo-icon"></div>
</div>
<div class="feature-item">
<span>赛程编排</span>
<h1 class="brand-title">武术赛事通</h1>
<p class="brand-subtitle">专业的武术赛事管理平台</p>
</div>
<div class="feature-item">
<span>赛事调度</span>
<div class="feature-points">
<div class="point-item">
<i class="el-icon-trophy"></i>
<span>专业赛事管理</span>
</div>
<div class="feature-item">
<span>数据统计分析</span>
<div class="point-item">
<i class="el-icon-s-flag"></i>
<span>智能编排调度</span>
</div>
<div class="point-item">
<i class="el-icon-medal"></i>
<span>权威评分系统</span>
</div>
</div>
</div>
</div>
<div class="login-border">
<div class="login-main">
<h4 class="login-title">
登录 武术赛事通
<!-- 右侧登录表单区 -->
<div class="login-right">
<div class="login-form-container">
<h2 class="login-title">
系统登录
<top-lang></top-lang>
</h4>
</h2>
<userLogin></userLogin>
</div>
<div class="copyright">
© 2025 武术赛事通 All Rights Reserved
</div>
</div>
</div>
</div>
</template>
<script>
import userLogin from './userlogin.vue';
import codeLogin from './codelogin.vue';
@@ -117,7 +131,6 @@ export default {
.dispatch('LoginBySocial', this.socialForm)
.then(() => {
window.location.href = topUrl.split(redirectUrl)[0];
//加载工作流路由集
this.loadFlowRoutes();
this.$router.push(this.tagWel);
loading.close();
@@ -139,7 +152,6 @@ export default {
.dispatch('LoginBySso', this.socialForm)
.then(() => {
window.location.href = topUrl.split(ssoCode)[0];
//加载工作流路由集
this.loadFlowRoutes();
this.$router.push(this.tagWel);
loading.close();
@@ -156,220 +168,256 @@ export default {
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.login-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
}
@function multiple-box-shadow($n) {
$value: '#{random(2000)}px #{random(2000)}px #FFF';
@for $i from 2 through $n {
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
}
@return unquote($value);
}
$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-big: multiple-box-shadow(100);
.stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: $shadows-small;
animation: animateStars 50s linear infinite;
&:after {
content: ' ';
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: $shadows-small;
}
}
.stars2 {
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-medium;
animation: animateStars 100s linear infinite;
&:after {
content: ' ';
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-medium;
}
}
.stars3 {
width: 3px;
height: 3px;
background: transparent;
box-shadow: $shadows-big;
animation: animateStars 150s linear infinite;
&:after {
content: ' ';
position: absolute;
top: 2000px;
width: 3px;
height: 3px;
background: transparent;
box-shadow: $shadows-big;
}
}
@keyframes animateStars {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
.login-weaper {
position: relative;
z-index: 2;
width: 1000px;
.login-wrapper {
display: flex;
border-radius: 8px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.95);
width: 1000px;
max-width: 100%;
min-height: 600px;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
overflow: hidden;
backdrop-filter: blur(10px);
}
// 左侧图形装饰区
.login-left {
width: 50%;
background: linear-gradient(135deg, rgba(27, 39, 53, 0.95) 0%, rgba(9, 10, 15, 0.95) 100%);
padding: 40px;
position: relative;
color: #fff;
width: 50%;
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 40px;
overflow: hidden;
}
&::before {
content: '';
.decoration-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(33, 147, 176, 0.3) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(40, 60, 190, 0.3) 0%, transparent 50%);
pointer-events: none;
}
}
overflow: hidden;
.login-time {
.circle {
position: absolute;
top: 20px;
left: 20px;
font-size: 14px;
opacity: 0.8;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
&.circle-1 {
width: 400px;
height: 400px;
top: -100px;
right: -100px;
animation: float 8s ease-in-out infinite;
}
.login-left-content {
height: 100%;
&.circle-2 {
width: 300px;
height: 300px;
bottom: -80px;
left: -80px;
animation: float 10s ease-in-out infinite reverse;
}
&.circle-3 {
width: 200px;
height: 200px;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
animation: float 6s ease-in-out infinite;
}
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20px) scale(1.05);
}
}
.content-wrapper {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
width: 100%;
}
.logo-area {
margin-bottom: 50px;
}
.logo-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.15);
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
margin-bottom: 30px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.logo-icon {
font-size: 56px;
font-weight: 900;
color: #fff;
}
.brand-title {
font-size: 36px;
font-weight: 700;
margin: 0 0 12px 0;
letter-spacing: 4px;
}
.brand-subtitle {
font-size: 14px;
margin: 0;
opacity: 0.9;
font-weight: 300;
letter-spacing: 1px;
}
.feature-points {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
max-width: 280px;
margin: 0 auto;
}
.point-item {
display: flex;
align-items: center;
text-align: center;
}
.title {
font-size: 28px;
font-weight: 500;
margin-bottom: 10px;
}
.subtitle {
font-size: 16px;
opacity: 0.8;
margin-bottom: 40px;
}
.feature-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
width: 100%;
max-width: 400px;
}
.feature-item {
padding: 16px 20px;
background: rgba(255, 255, 255, 0.1);
padding: 15px 10px;
border-radius: 4px;
text-align: center;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
font-size: 15px;
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
i {
font-size: 22px;
}
&:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
&::before {
left: 100%;
}
transform: translateX(8px);
}
}
.login-border {
// 右侧登录表单区
.login-right {
width: 50%;
padding: 40px;
background: #fff;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
padding: 60px 50px 30px;
background: #fff;
}
.login-main {
width: 100%;
max-width: 360px;
margin: 0 auto;
.login-form-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.login-title {
font-size: 20px;
font-size: 28px;
color: #333;
margin-bottom: 30px;
font-weight: 700;
margin: 0 0 40px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: 12px;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
border-radius: 2px;
}
}
.copyright {
text-align: center;
font-size: 12px;
color: #999;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
margin-top: 30px;
}
// 响应式设计
@media (max-width: 768px) {
.login-wrapper {
flex-direction: column;
min-height: auto;
}
.login-left,
.login-right {
width: 100%;
}
.login-left {
padding: 40px 30px;
}
.login-right {
padding: 40px 30px 25px;
}
.logo-circle {
width: 90px;
height: 90px;
margin-bottom: 20px;
}
.logo-icon {
font-size: 42px;
}
.brand-title {
font-size: 28px;
}
.logo-area {
margin-bottom: 30px;
}
.feature-points {
max-width: 100%;
}
}
</style>

View File

@@ -412,4 +412,102 @@ export default {
};
</script>
<style></style>
<style lang="scss" scoped>
.login-form {
:deep(.el-form-item) {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
}
:deep(.el-input) {
.el-input__wrapper {
border-radius: 8px;
padding: 8px 15px;
box-shadow: 0 0 0 1px #e0e0e0 inset;
transition: all 0.3s;
&:hover {
box-shadow: 0 0 0 1px #dc2626 inset;
}
&.is-focus {
box-shadow: 0 0 0 2px #dc2626 inset;
}
}
.el-input__inner {
height: 40px;
line-height: 40px;
font-size: 14px;
color: #333;
&::placeholder {
color: #999;
}
}
.el-input__prefix {
font-size: 16px;
color: #666;
}
.el-input__suffix {
.el-icon-view {
color: #666;
cursor: pointer;
font-size: 16px;
&:hover {
color: #dc2626;
}
}
}
}
.login-code {
height: 40px;
margin-left: 8px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: all 0.3s;
&:hover {
border-color: #dc2626;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}
.login-code-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.login-submit {
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
border: none;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}
&:active {
transform: translateY(0);
}
}
}
</style>

View File

@@ -47,13 +47,61 @@ export default [
component: Layout,
redirect: '/martial/order/list',
children: [
{
path: 'competition/index',
name: '赛事管理',
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/competition/index.vue'),
},
{
path: 'registration/detail',
name: '报名详情',
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/registration/detail.vue'),
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/registration/index.vue'),
},
{
path: 'order/list',
name: '赛事管理',
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/order/index.vue'),
},
{
path: 'banner/index',
name: '轮播图管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/banner/index.vue'),
},
{
path: 'referee/list',
name: '评委管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/referee/index.vue'),
},
{
path: 'score/index',
name: '评分管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/score/index.vue'),
},
{
path: 'participant/list',
name: '参赛选手管理',
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/participant/index.vue'),
},
{
path: 'schedule/list',
@@ -61,7 +109,7 @@ export default [
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/schedule/list.vue'),
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/schedule/index.vue'),
},
{
path: 'dispatch/list',
@@ -69,7 +117,114 @@ export default [
meta: {
keepAlive: false,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/dispatch/list.vue'),
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/dispatch/index.vue'),
},
// 新增页面 - P0核心页面
{
path: 'project/list',
name: '项目管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/project/index.vue'),
},
{
path: 'deduction/list',
name: '扣分项管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/deduction/index.vue'),
},
{
path: 'result/list',
name: '成绩管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/result/index.vue'),
},
{
path: 'export/index',
name: '导出中心',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/export/index.vue'),
},
// P1重要页面
{
path: 'schedulePlan/list',
name: '赛程计划',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/schedulePlan/index.vue'),
},
{
path: 'scheduleAthlete/list',
name: '选手关联',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/scheduleAthlete/index.vue'),
},
{
path: 'judgeInvite/list',
name: '裁判邀请',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/judgeInvite/index.vue'),
},
{
path: 'judgeProject/list',
name: '裁判分配',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/judgeProject/index.vue'),
},
// P2增强页面
{
path: 'live/list',
name: '直播管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/live/index.vue'),
},
{
path: 'info/list',
name: '信息发布',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/info/index.vue'),
},
{
path: 'exception/list',
name: '异常事件',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/exception/index.vue'),
},
{
path: 'activity/list',
name: '活动日程',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/activity/index.vue'),
},
{
path: 'rules/index',
name: '赛事规程管理',
meta: {
keepAlive: true,
},
component: () => import(/* webpackChunkName: "martial" */ '@/views/martial/rules/index.vue'),
},
],
},

View File

@@ -1,3 +1,14 @@
// Element Plus 主题色覆盖 - 改为红色主题
:root {
--el-color-primary: #dc2626;
--el-color-primary-light-3: #ef4444;
--el-color-primary-light-5: #f87171;
--el-color-primary-light-7: #fca5a5;
--el-color-primary-light-8: #fecaca;
--el-color-primary-light-9: #fee2e2;
--el-color-primary-dark-2: #b91c1c;
}
.el-card.is-always-shadow {
box-shadow: none;
border: none !important;

View File

@@ -6,10 +6,10 @@
position: relative;
height: 100%;
position: relative;
background-color: #031527;
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
transition: width .2s;
box-sizing: border-box;
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
box-shadow: 2px 0 6px rgba(0, 0, 0, .15);
.el-scrollbar__wrap {
overflow-x: hidden;
@@ -60,11 +60,11 @@
left: 0;
bottom: 0;
width: 4px;
background: #409eff;
background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
position: absolute;
}
background-color: rgba(0, 0, 0, .8);
background-color: rgba(220, 38, 38, .12);
i, span {
color: #fff;

View File

@@ -32,8 +32,8 @@
color: #ccc;
&.is-active {
color: #409EFF;
border-bottom: 3px solid #409EFF;
color: #dc2626;
border-bottom: 3px solid #dc2626;
}
}
@@ -85,7 +85,7 @@
}
&:hover {
background-color: #409EFF;
background-color: #dc2626;
color: #fff;
}
}

View File

@@ -116,11 +116,11 @@
.avue-logo {
height: $top_height;
line-height: $top_height;
background-color: #031527;
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
font-size: 20px;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 4px 0 rgba(220, 38, 38, 0.2);
color: #fff;
&_title {

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,565 @@
<template>
<div class="banner-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">轮播图管理</h2>
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">
新增轮播图
</el-button>
</div>
<!-- 搜索表单 -->
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.title"
placeholder="搜索轮播图标题"
clearable
size="small"
style="width: 240px"
>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-select v-model="searchForm.position" placeholder="显示位置" clearable size="small" style="width: 120px">
<el-option label="全部" :value="null"></el-option>
<el-option label="首页" :value="1"></el-option>
<el-option label="赛事详情" :value="2"></el-option>
<el-option label="其他" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
stripe
size="small"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="title" label="轮播图标题" min-width="150"></el-table-column>
<el-table-column prop="imageUrl" label="轮播图图片" width="150" align="center">
<template #default="scope">
<el-image
v-if="scope.row.imageUrl"
:src="scope.row.imageUrl"
:preview-src-list="[scope.row.imageUrl]"
style="width: 100px; height: 50px; cursor: pointer;"
fit="cover"
:hide-on-click-modal="false"
:preview-teleported="true"
>
<template #error>
<div class="image-error">
<el-icon><Picture /></el-icon>
<div>加载失败</div>
</div>
</template>
</el-image>
<span v-else>暂无图片</span>
</template>
</el-table-column>
<el-table-column prop="position" label="显示位置" width="100" align="center">
<template #default="scope">
<el-tag :type="getPositionType(scope.row.position)" size="small">
{{ getPositionText(scope.row.position) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="linkUrl" label="跳转链接" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column prop="sortOrder" label="排序" width="80" align="center"></el-table-column>
<el-table-column prop="clickCount" label="点击次数" width="100" align="center"></el-table-column>
<el-table-column prop="startTime" label="开始时间" width="160"></el-table-column>
<el-table-column prop="endTime" label="结束时间" width="160"></el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template #default="scope">
<el-button type="primary" link size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination.total > 0"
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
></el-pagination>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
:close-on-click-modal="false"
@close="handleDialogClose"
>
<el-form ref="bannerForm" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入轮播图标题" clearable></el-input>
</el-form-item>
<el-form-item label="显示位置" prop="position">
<el-select v-model="formData.position" placeholder="请选择显示位置" style="width: 100%">
<el-option label="首页" :value="1"></el-option>
<el-option label="赛事详情" :value="2"></el-option>
<el-option label="其他" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="图片" prop="imageUrl">
<div class="image-upload-wrapper">
<div v-if="formData.imageUrl" class="image-preview">
<el-image
:src="formData.imageUrl"
class="preview-image"
fit="cover"
:preview-src-list="[formData.imageUrl]"
/>
<div class="image-actions">
<el-button type="primary" size="small" @click.stop="handleChangeImage">更换图片</el-button>
<el-button type="danger" size="small" @click.stop="handleRemoveImage">删除图片</el-button>
</div>
</div>
<el-button v-else type="primary" icon="el-icon-upload" @click.stop="handleOpenUpload">
上传图片
</el-button>
</div>
</el-form-item>
<el-form-item label="跳转链接" prop="linkUrl">
<el-input v-model="formData.linkUrl" placeholder="选填,点击轮播图跳转的链接地址" clearable></el-input>
</el-form-item>
<el-form-item label="排序" prop="sortOrder">
<el-input-number v-model="formData.sortOrder" :min="0" :max="999" style="width: 100%"></el-input-number>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="formData.startTime"
type="datetime"
placeholder="选择开始显示时间"
style="width: 100%"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="formData.endTime"
type="datetime"
placeholder="选择结束显示时间"
style="width: 100%"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
</div>
</template>
</el-dialog>
<!-- 图片上传对话框 -->
<el-dialog
title="上传轮播图"
v-model="uploadDialogVisible"
width="555px"
append-to-body
:close-on-click-modal="false"
>
<avue-form
ref="uploadForm"
:option="uploadOption"
v-model="uploadForm"
:upload-after="uploadAfter"
/>
</el-dialog>
</div>
</template>
<script>
import { getBannerList, submitBanner, removeBanner } from '@/api/martial/banner'
import { Picture } from '@element-plus/icons-vue'
export default {
name: 'BannerList',
components: {
Picture
},
data() {
return {
loading: false,
submitLoading: false,
dialogVisible: false,
dialogTitle: '新增轮播图',
isEdit: false,
uploadDialogVisible: false,
uploadForm: {},
searchForm: {
title: '',
position: null
},
tableData: [],
pagination: {
current: 1,
size: 10,
total: 0
},
formData: {
id: null,
title: '',
position: 1,
imageUrl: '',
linkUrl: '',
sortOrder: 0,
startTime: '',
endTime: ''
},
rules: {
title: [
{ required: true, message: '请输入轮播图标题', trigger: 'blur' }
],
position: [
{ required: true, message: '请选择显示位置', trigger: 'change' }
],
imageUrl: [
{ required: true, message: '请输入图片链接', trigger: 'blur' }
],
sortOrder: [
{ required: true, message: '请输入排序', trigger: 'blur' }
]
},
uploadOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: '轮播图上传',
prop: 'bannerImage',
type: 'upload',
drag: true,
loadText: '图片上传中,请稍等',
span: 24,
accept: 'image/*',
tip: '建议尺寸800x400像素支持 JPG、PNG 格式,大小不超过 2MB',
propsHttp: {
res: 'data',
},
action: '/blade-resource/oss/endpoint/put-file'
}
]
}
}
},
mounted() {
this.loadBannerList()
},
methods: {
// 加载轮播图列表
loadBannerList() {
this.loading = true
const params = {}
if (this.searchForm.title) {
params.title = this.searchForm.title
}
if (this.searchForm.position !== null && this.searchForm.position !== '') {
params.position = this.searchForm.position
}
getBannerList(this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('轮播图列表返回数据:', res)
const responseData = res.data?.data
if (responseData && responseData.records) {
this.tableData = responseData.records
this.pagination.total = responseData.total || 0
// 调试:打印每条记录的 imageUrl
this.tableData.forEach((item, index) => {
console.log(`记录 ${index + 1} - imageUrl:`, item.imageUrl)
})
}
})
.catch(err => {
console.error('加载轮播图列表失败', err)
this.$message.error('加载轮播图列表失败')
})
.finally(() => {
this.loading = false
})
},
// 获取位置文本
getPositionText(position) {
const positionMap = {
1: '首页',
2: '赛事详情',
3: '其他'
}
return positionMap[position] || '未知'
},
// 获取位置标签类型
getPositionType(position) {
const typeMap = {
1: 'success',
2: 'primary',
3: 'info'
}
return typeMap[position] || ''
},
// 搜索
handleSearch() {
this.pagination.current = 1
this.loadBannerList()
},
// 重置
handleReset() {
this.searchForm = {
title: '',
position: null
}
this.pagination.current = 1
this.loadBannerList()
},
// 分页
handleSizeChange(size) {
this.pagination.size = size
this.loadBannerList()
},
handleCurrentChange(current) {
this.pagination.current = current
this.loadBannerList()
},
// 新增
handleAdd() {
this.dialogTitle = '新增轮播图'
this.isEdit = false
this.dialogVisible = true
},
// 编辑
handleEdit(row) {
this.dialogTitle = '编辑轮播图'
this.isEdit = true
this.formData = { ...row }
this.dialogVisible = true
},
// 删除
handleDelete(row) {
this.$confirm('确定删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true
removeBanner(row.id.toString())
.then(res => {
this.$message.success('删除成功')
this.loadBannerList()
})
.catch(err => {
console.error('删除失败', err)
this.$message.error('删除失败')
})
.finally(() => {
this.loading = false
})
}).catch(() => {})
},
// 提交表单
handleSubmit() {
this.$refs.bannerForm.validate((valid) => {
if (valid) {
this.submitLoading = true
const submitData = { ...this.formData }
// 如果是编辑模式,需要传入 id
if (!this.isEdit) {
delete submitData.id
}
submitBanner(submitData)
.then(res => {
this.$message.success(this.isEdit ? '修改成功' : '新增成功')
this.dialogVisible = false
this.loadBannerList()
})
.catch(err => {
console.error('保存失败', err)
this.$message.error(this.isEdit ? '修改失败' : '新增失败')
})
.finally(() => {
this.submitLoading = false
})
}
})
},
// 关闭弹窗
handleDialogClose() {
this.$refs.bannerForm.resetFields()
this.formData = {
id: null,
title: '',
position: 1,
imageUrl: '',
linkUrl: '',
sortOrder: 0,
startTime: '',
endTime: ''
}
},
// 打开上传对话框
handleOpenUpload() {
console.log('打开上传对话框')
this.uploadDialogVisible = true
this.uploadForm = {}
},
// 更换图片
handleChangeImage() {
console.log('更换图片')
this.uploadDialogVisible = true
this.uploadForm = {}
},
// 删除图片
handleRemoveImage() {
console.log('删除图片')
this.$confirm('确定删除当前图片吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.formData.imageUrl = ''
this.$message.success('删除成功')
}).catch(() => {})
},
// 上传成功回调
uploadAfter(res, done, loading, column) {
console.log('uploadAfter 触发')
console.log('上传响应:', res)
console.log('done:', done)
console.log('loading:', loading)
console.log('column:', column)
if (res && res.link) {
this.formData.imageUrl = res.link
this.$message.success('图片上传成功')
this.uploadDialogVisible = false
} else if (res && res.url) {
this.formData.imageUrl = res.url
this.$message.success('图片上传成功')
this.uploadDialogVisible = false
} else {
this.$message.error('上传失败,未获取到图片地址')
}
done()
}
}
}
</script>
<style lang="scss" scoped>
.banner-container {
min-height: 100%;
padding: 15px;
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
}
.search-form {
margin-bottom: 15px;
}
.pagination {
margin-top: 15px;
text-align: right;
}
.dialog-footer {
text-align: right;
}
.image-upload-wrapper {
.image-preview {
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
.preview-image {
width: 100%;
height: 200px;
display: block;
margin-bottom: 10px;
border-radius: 4px;
}
.image-actions {
display: flex;
gap: 10px;
justify-content: center;
}
}
}
.image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 12px;
color: #999;
background-color: #f5f7fa;
.el-icon {
font-size: 24px;
margin-bottom: 5px;
}
}
}
</style>

View File

@@ -0,0 +1,794 @@
<template>
<div class="competition-create">
<div class="page-header">
<el-button
icon="el-icon-arrow-left"
@click="handleBack"
>
返回列表
</el-button>
<h2 class="page-title">{{ pageTitle }}</h2>
<div class="header-actions" v-if="mode !== 'view'">
<el-button @click="handleBack">取消</el-button>
<el-button type="primary" @click="handleSave">
{{ mode === 'create' ? '创建' : '保存' }}
</el-button>
</div>
<div class="header-actions" v-else>
<el-button type="primary" @click="switchToEdit">编辑</el-button>
</div>
</div>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="mode === 'view'"
class="competition-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="赛事名称" prop="competitionName">
<el-input
v-model="formData.competitionName"
placeholder="请输入赛事名称"
maxlength="100"
show-word-limit
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主办单位" prop="organizer">
<el-input
v-model="formData.organizer"
placeholder="请输入主办单位"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="举办地点" prop="location">
<el-input
v-model="formData.location"
placeholder="请输入举办地点"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="比赛场馆" prop="venue">
<el-input
v-model="formData.venue"
placeholder="请输入比赛场馆"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="报名时间" prop="registrationTime">
<el-input
v-model="formData.registrationTime"
placeholder="例如2025-01-01 至 2025-02-28"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="比赛时间" prop="competitionTime">
<el-input
v-model="formData.competitionTime"
placeholder="例如2025-03-15 至 2025-03-20"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="赛事状态" prop="status">
<el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
<el-option label="未开始" :value="1" />
<el-option label="报名中" :value="2" />
<el-option label="进行中" :value="3" />
<el-option label="已结束" :value="4" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 信息发布 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-reading"></i>
信息发布
</div>
<el-form-item label="赛事简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入赛事简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="联系人" prop="contactPerson">
<el-input
v-model="formData.contactPerson"
placeholder="请输入联系人姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系邮箱" prop="contactEmail">
<el-input
v-model="formData.contactEmail"
placeholder="请输入联系邮箱"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 赛事规程 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document-checked"></i>
赛事规程
</div>
<el-form-item label="比赛规则" prop="rules">
<el-input
v-model="formData.rules"
type="textarea"
:rows="4"
placeholder="请输入比赛规则"
/>
</el-form-item>
<el-form-item label="参赛要求" prop="requirements">
<el-input
v-model="formData.requirements"
type="textarea"
:rows="4"
placeholder="请输入参赛要求"
/>
</el-form-item>
<el-form-item label="奖项设置" prop="awards">
<el-input
v-model="formData.awards"
type="textarea"
:rows="4"
placeholder="请输入奖项设置"
/>
</el-form-item>
</div>
<!-- 活动日程 -->
<!-- <div class="form-section">
<div class="section-title">
<i class="el-icon-date"></i>
活动日程
</div>
<el-form-item label="">
<el-button
v-if="mode !== 'view'"
type="primary"
icon="el-icon-plus"
size="small"
@click="handleAddSchedule"
>
添加日程
</el-button>
</el-form-item>
<el-table
:data="formData.schedule"
border
style="width: 100%"
>
<el-table-column
label="日期"
width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.date"
placeholder="2025-03-15"
size="small"
/>
<span v-else>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="时间"
width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.time"
placeholder="09:00-12:00"
size="small"
/>
<span v-else>{{ scope.row.time }}</span>
</template>
</el-table-column>
<el-table-column
label="赛事项目"
min-width="200"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.event"
placeholder="请输入赛事项目"
size="small"
/>
<span v-else>{{ scope.row.event }}</span>
</template>
</el-table-column>
<el-table-column
label="比赛场馆"
width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.venue"
placeholder="请输入场馆"
size="small"
/>
<span v-else>{{ scope.row.venue }}</span>
</template>
</el-table-column>
<el-table-column
v-if="mode !== 'view'"
label="操作"
width="80"
align="center"
>
<template #default="scope">
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDeleteSchedule(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div> -->
<!-- 项目列表 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-medal"></i>
项目列表
</div>
<el-form-item label="">
<el-button
v-if="mode !== 'view'"
type="primary"
icon="el-icon-plus"
size="small"
@click="handleAddProject"
>
添加项目
</el-button>
</el-form-item>
<el-table
:data="formData.projects"
border
style="width: 100%"
>
<el-table-column
label="项目名称"
min-width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.projectName"
placeholder="例如:太极拳"
size="small"
/>
<span v-else>{{ scope.row.projectName }}</span>
</template>
</el-table-column>
<el-table-column
label="项目代码"
width="120"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.projectCode"
placeholder="例如TJQ001"
size="small"
/>
<span v-else>{{ scope.row.projectCode }}</span>
</template>
</el-table-column>
<el-table-column
label="组别"
width="120"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.category"
placeholder="例如:成年男子组"
size="small"
/>
<span v-else>{{ scope.row.category }}</span>
</template>
</el-table-column>
<el-table-column
label="项目说明"
min-width="200"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.description"
placeholder="请输入项目说明"
size="small"
/>
<span v-else>{{ scope.row.description }}</span>
</template>
</el-table-column>
<el-table-column
v-if="mode !== 'view'"
label="操作"
width="80"
align="center"
>
<template #default="scope">
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDeleteProject(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 场地配置 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-office-building"></i>
场地配置
</div>
<el-form-item label="">
<el-button
v-if="mode !== 'view'"
type="primary"
icon="el-icon-plus"
size="small"
@click="handleAddVenue"
>
添加场地
</el-button>
</el-form-item>
<el-table
:data="formData.venues"
border
style="width: 100%"
>
<el-table-column
label="场地名称"
width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.venueName"
placeholder="例如主比赛场A"
size="small"
/>
<span v-else>{{ scope.row.venueName }}</span>
</template>
</el-table-column>
<el-table-column
label="场地编号"
width="120"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.venueCode"
placeholder="例如A001"
size="small"
/>
<span v-else>{{ scope.row.venueCode }}</span>
</template>
</el-table-column>
<el-table-column
label="场地类型"
width="120"
>
<template #default="scope">
<el-select
v-if="mode !== 'view'"
v-model="scope.row.venueType"
placeholder="请选择"
size="small"
style="width: 100%"
>
<el-option label="室内" value="indoor" />
<el-option label="室外" value="outdoor" />
</el-select>
<span v-else>{{ scope.row.venueType === 'indoor' ? '室内' : '室外' }}</span>
</template>
</el-table-column>
<el-table-column
label="容纳人数"
width="120"
align="center"
>
<template #default="scope">
<el-input-number
v-if="mode !== 'view'"
v-model="scope.row.capacity"
:min="1"
:max="99999"
size="small"
style="width: 100%"
/>
<span v-else>{{ scope.row.capacity }}</span>
</template>
</el-table-column>
<el-table-column
label="位置"
min-width="150"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.location"
placeholder="例如体育馆1楼东侧"
size="small"
/>
<span v-else>{{ scope.row.location }}</span>
</template>
</el-table-column>
<el-table-column
label="备注"
min-width="200"
>
<template #default="scope">
<el-input
v-if="mode !== 'view'"
v-model="scope.row.remark"
placeholder="请输入备注"
size="small"
/>
<span v-else>{{ scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column
v-if="mode !== 'view'"
label="操作"
width="80"
align="center"
>
<template #default="scope">
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDeleteVenue(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: 'CompetitionCreate',
data() {
return {
mode: 'create', // create, edit, view
competitionId: null,
formData: {
competitionName: '',
organizer: '',
location: '',
venue: '',
registrationTime: '',
competitionTime: '',
status: 1,
introduction: '',
contactPerson: '',
contactPhone: '',
contactEmail: '',
rules: '',
requirements: '',
awards: '',
schedule: [],
projects: [],
venues: []
},
formRules: {
competitionName: [
{ required: true, message: '请输入赛事名称', trigger: 'blur' }
],
organizer: [
{ required: true, message: '请输入主办单位', trigger: 'blur' }
],
location: [
{ required: true, message: '请输入举办地点', trigger: 'blur' }
]
}
};
},
computed: {
pageTitle() {
const titleMap = {
create: '新建赛事',
edit: '编辑赛事',
view: '查看赛事'
};
return titleMap[this.mode] || '赛事信息';
}
},
created() {
this.initPage();
},
methods: {
initPage() {
const { mode, id } = this.$route.query;
this.mode = mode || 'create';
this.competitionId = id ? parseInt(id) : null;
if (this.mode !== 'create' && this.competitionId) {
this.loadCompetitionData();
}
},
loadCompetitionData() {
// 从 localStorage 加载数据
const savedData = localStorage.getItem('competitionList');
if (savedData) {
try {
const list = JSON.parse(savedData);
const competition = list.find(item => item.id === this.competitionId);
if (competition) {
this.formData = { ...competition };
}
} catch (e) {
console.error('加载数据失败', e);
this.$message.error('加载数据失败');
}
}
},
handleAddSchedule() {
this.formData.schedule.push({
date: '',
time: '',
event: '',
venue: ''
});
},
handleDeleteSchedule(index) {
this.formData.schedule.splice(index, 1);
},
// 项目列表管理
handleAddProject() {
this.formData.projects.push({
projectName: '',
projectCode: '',
category: '',
maxParticipants: null,
description: ''
});
},
handleDeleteProject(index) {
this.formData.projects.splice(index, 1);
},
// 场地配置管理
handleAddVenue() {
this.formData.venues.push({
venueName: '',
venueCode: '',
venueType: 'indoor',
capacity: null,
location: '',
remark: ''
});
},
handleDeleteVenue(index) {
this.formData.venues.splice(index, 1);
},
handleSave() {
this.$refs.formRef.validate((valid) => {
if (valid) {
const savedData = localStorage.getItem('competitionList');
let list = savedData ? JSON.parse(savedData) : [];
if (this.mode === 'create') {
// 新建
const newId = list.length > 0 ? Math.max(...list.map(item => item.id)) + 1 : 1;
const newCompetition = {
...this.formData,
id: newId,
posterImages: [],
regulationFiles: []
};
list.push(newCompetition);
this.$message.success('创建成功');
} else if (this.mode === 'edit') {
// 编辑
const index = list.findIndex(item => item.id === this.competitionId);
if (index !== -1) {
list[index] = {
...list[index],
...this.formData
};
this.$message.success('保存成功');
}
}
localStorage.setItem('competitionList', JSON.stringify(list));
// 返回列表页
setTimeout(() => {
this.handleBack();
}, 500);
} else {
this.$message.error('请完善必填信息');
}
});
},
switchToEdit() {
this.$router.push({
path: '/martial/competition/create',
query: { mode: 'edit', id: this.competitionId }
});
},
handleBack() {
this.$router.push('/martial/competition/list');
}
}
};
</script>
<style lang="scss" scoped>
.competition-create {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.page-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
.page-title {
flex: 1;
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 10px;
}
}
.competition-form {
max-width: 1200px;
}
.form-section {
margin-bottom: 40px;
padding: 24px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 18px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 20px;
}
}
:deep(.el-form-item) {
margin-bottom: 22px;
}
:deep(.el-table) {
.el-input {
width: 100%;
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,712 @@
<template>
<div class="competition-list">
<div class="list-header">
<h2 class="page-title">赛事管理</h2>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">
新建赛事
</el-button>
</div>
<el-table
:data="competitionList"
border
stripe
style="width: 100%"
class="data-table"
>
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
prop="competitionName"
label="赛事名称"
min-width="200"
show-overflow-tooltip
/>
<el-table-column
prop="organizer"
label="主办单位"
min-width="150"
show-overflow-tooltip
/>
<el-table-column
prop="location"
label="举办地点"
width="120"
/>
<el-table-column
prop="competitionTime"
label="比赛时间"
width="180"
/>
<el-table-column
prop="registrationTime"
label="报名时间"
width="180"
/>
<el-table-column
label="状态"
width="100"
align="center"
>
<template #default="scope">
<el-tag
:type="getStatusType(scope.row.status)"
size="small"
>
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作"
width="220"
fixed="right"
align="center"
>
<template #default="scope">
<el-button
type="primary"
link
size="small"
icon="el-icon-view"
@click="handleView(scope.row)"
>
查看
</el-button>
<el-button
type="warning"
link
size="small"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增/编辑/查看弹窗 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
@close="handleDialogClose"
top="5vh"
>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="dialogMode === 'view'"
class="competition-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="赛事名称" prop="competitionName">
<el-input
v-model="formData.competitionName"
placeholder="请输入赛事名称"
maxlength="100"
show-word-limit
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主办单位" prop="organizer">
<el-input
v-model="formData.organizer"
placeholder="请输入主办单位"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="举办地点" prop="location">
<el-input
v-model="formData.location"
placeholder="请输入举办地点"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="比赛场馆" prop="venue">
<el-input
v-model="formData.venue"
placeholder="请输入比赛场馆"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="报名时间" prop="registrationTime">
<el-input
v-model="formData.registrationTime"
placeholder="例如2025-01-01 至 2025-02-28"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="比赛时间" prop="competitionTime">
<el-input
v-model="formData.competitionTime"
placeholder="例如2025-03-15 至 2025-03-20"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="赛事状态" prop="status">
<el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
<el-option label="未开始" :value="1" />
<el-option label="报名中" :value="2" />
<el-option label="进行中" :value="3" />
<el-option label="已结束" :value="4" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 信息发布 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-reading"></i>
信息发布
</div>
<el-form-item label="赛事简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入赛事简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="联系人" prop="contactPerson">
<el-input
v-model="formData.contactPerson"
placeholder="请输入联系人姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系邮箱" prop="contactEmail">
<el-input
v-model="formData.contactEmail"
placeholder="请输入联系邮箱"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 赛事规程 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document-checked"></i>
赛事规程
</div>
<el-form-item label="比赛规则" prop="rules">
<el-input
v-model="formData.rules"
type="textarea"
:rows="4"
placeholder="请输入比赛规则"
/>
</el-form-item>
<el-form-item label="参赛要求" prop="requirements">
<el-input
v-model="formData.requirements"
type="textarea"
:rows="4"
placeholder="请输入参赛要求"
/>
</el-form-item>
<el-form-item label="奖项设置" prop="awards">
<el-input
v-model="formData.awards"
type="textarea"
:rows="4"
placeholder="请输入奖项设置"
/>
</el-form-item>
</div>
<!-- 活动日程 -->
<!-- <div class="form-section">
<div class="section-title">
<i class="el-icon-date"></i>
活动日程
</div>
<el-form-item label="">
<el-button
v-if="dialogMode !== 'view'"
type="primary"
icon="el-icon-plus"
size="small"
@click="handleAddSchedule"
>
添加日程
</el-button>
</el-form-item>
<el-table
:data="formData.schedule"
border
style="width: 100%"
>
<el-table-column
label="日期"
width="150"
>
<template #default="scope">
<el-input
v-if="dialogMode !== 'view'"
v-model="scope.row.date"
placeholder="2025-03-15"
size="small"
/>
<span v-else>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="时间"
width="150"
>
<template #default="scope">
<el-input
v-if="dialogMode !== 'view'"
v-model="scope.row.time"
placeholder="09:00-12:00"
size="small"
/>
<span v-else>{{ scope.row.time }}</span>
</template>
</el-table-column>
<el-table-column
label="赛事项目"
min-width="200"
>
<template #default="scope">
<el-input
v-if="dialogMode !== 'view'"
v-model="scope.row.event"
placeholder="请输入赛事项目"
size="small"
/>
<span v-else>{{ scope.row.event }}</span>
</template>
</el-table-column>
<el-table-column
label="比赛场馆"
width="150"
>
<template #default="scope">
<el-input
v-if="dialogMode !== 'view'"
v-model="scope.row.venue"
placeholder="请输入场馆"
size="small"
/>
<span v-else>{{ scope.row.venue }}</span>
</template>
</el-table-column>
<el-table-column
v-if="dialogMode !== 'view'"
label="操作"
width="80"
align="center"
>
<template #default="scope">
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDeleteSchedule(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button
v-if="dialogMode !== 'view'"
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>
确定
</el-button>
<el-button
v-else
type="primary"
@click="switchToEdit"
>
编辑
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'CompetitionList',
data() {
return {
competitionList: [
],
dialogVisible: false,
dialogMode: 'create', // create, edit, view
submitLoading: false,
currentCompetitionId: null,
formData: {
competitionName: '',
organizer: '',
location: '',
venue: '',
registrationTime: '',
competitionTime: '',
status: 1,
introduction: '',
contactPerson: '',
contactPhone: '',
contactEmail: '',
rules: '',
requirements: '',
awards: '',
schedule: []
},
formRules: {
competitionName: [
{ required: true, message: '请输入赛事名称', trigger: 'blur' }
],
organizer: [
{ required: true, message: '请输入主办单位', trigger: 'blur' }
],
location: [
{ required: true, message: '请输入举办地点', trigger: 'blur' }
]
}
};
},
computed: {
dialogTitle() {
const titleMap = {
create: '新建赛事',
edit: '编辑赛事',
view: '查看赛事'
};
return titleMap[this.dialogMode] || '赛事信息';
}
},
mounted() {
this.loadCompetitionList();
},
methods: {
loadCompetitionList() {
// 从 localStorage 加载数据
const savedData = localStorage.getItem('competitionList');
if (savedData) {
try {
this.competitionList = JSON.parse(savedData);
} catch (e) {
console.error('加载数据失败', e);
}
} else {
// 首次加载,保存默认数据
this.saveCompetitionList();
}
},
saveCompetitionList() {
localStorage.setItem('competitionList', JSON.stringify(this.competitionList));
},
getStatusText(status) {
const statusMap = {
1: '未开始',
2: '报名中',
3: '进行中',
4: '已结束'
};
return statusMap[status] || '未知';
},
getStatusType(status) {
const typeMap = {
1: 'info',
2: 'success',
3: 'warning',
4: 'danger'
};
return typeMap[status] || '';
},
handleCreate() {
this.dialogMode = 'create';
this.currentCompetitionId = null;
this.resetFormData();
this.dialogVisible = true;
},
handleView(row) {
this.dialogMode = 'view';
this.currentCompetitionId = row.id;
this.formData = { ...row };
this.dialogVisible = true;
},
handleEdit(row) {
this.dialogMode = 'edit';
this.currentCompetitionId = row.id;
this.formData = { ...row };
this.dialogVisible = true;
},
switchToEdit() {
this.dialogMode = 'edit';
},
handleDelete(row) {
this.$confirm('确定要删除该赛事吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.competitionList.findIndex(item => item.id === row.id);
if (index !== -1) {
this.competitionList.splice(index, 1);
this.saveCompetitionList();
this.$message.success('删除成功');
}
}).catch(() => {});
},
handleAddSchedule() {
this.formData.schedule.push({
date: '',
time: '',
event: '',
venue: ''
});
},
handleDeleteSchedule(index) {
this.formData.schedule.splice(index, 1);
},
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.submitLoading = true;
setTimeout(() => {
if (this.dialogMode === 'create') {
// 新建
const newId = this.competitionList.length > 0
? Math.max(...this.competitionList.map(item => item.id)) + 1
: 1;
const newCompetition = {
...this.formData,
id: newId,
posterImages: [],
regulationFiles: []
};
this.competitionList.push(newCompetition);
this.$message.success('创建成功');
} else if (this.dialogMode === 'edit') {
// 编辑
const index = this.competitionList.findIndex(item => item.id === this.currentCompetitionId);
if (index !== -1) {
this.competitionList[index] = {
...this.competitionList[index],
...this.formData
};
this.$message.success('保存成功');
}
}
this.saveCompetitionList();
this.dialogVisible = false;
this.submitLoading = false;
}, 500);
} else {
this.$message.error('请完善必填信息');
}
});
},
handleDialogClose() {
this.$refs.formRef.resetFields();
this.resetFormData();
},
resetFormData() {
this.formData = {
competitionName: '',
organizer: '',
location: '',
venue: '',
registrationTime: '',
competitionTime: '',
status: 1,
introduction: '',
contactPerson: '',
contactPhone: '',
contactEmail: '',
rules: '',
requirements: '',
awards: '',
schedule: []
};
}
}
};
</script>
<style lang="scss" scoped>
.competition-list {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.page-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.data-table {
:deep(.el-table__header) {
th {
background-color: #fafafa;
color: #333;
font-weight: 600;
}
}
:deep(.el-button--text) {
padding: 0 8px;
}
}
.competition-form {
max-height: 60vh;
overflow-y: auto;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 18px;
}
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
:deep(.el-table) {
.el-input {
width: 100%;
}
}
.dialog-footer {
text-align: right;
}
</style>

View File

@@ -0,0 +1,817 @@
<template>
<div class="deduction-container">
<!-- 搜索区域 -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="选择赛事" required>
<el-select
v-model="queryParams.competitionId"
placeholder="请选择赛事"
clearable
filterable
:loading="competitionLoading"
:disabled="competitionLoading"
style="width: 250px"
@change="handleCompetitionChange"
>
<template #empty>
<div style="padding: 20px; text-align: center; color: #909399;">
<p>暂无赛事数据</p>
<p style="font-size: 12px; margin-top: 5px;">
请先在"赛事管理"中创建赛事
</p>
</div>
</template>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="所属项目">
<el-select
v-model="queryParams.projectId"
placeholder="请选择项目"
clearable
filterable
:disabled="!queryParams.competitionId"
style="width: 250px"
>
<el-option
v-for="item in projectList"
:key="item.id"
:label="item.projectName"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="扣分项名称">
<el-input
v-model="queryParams.itemName"
placeholder="请输入扣分项名称"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">
查询
</el-button>
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 工具栏 -->
<el-card shadow="never" class="toolbar-card">
<div class="toolbar">
<div class="toolbar-left">
<el-button
type="primary"
:icon="Plus"
:disabled="!queryParams.competitionId"
@click="handleAdd"
>
新增扣分项
</el-button>
<el-button
type="danger"
:icon="Delete"
:disabled="!selection.length || !queryParams.competitionId"
@click="handleBatchDelete"
>
批量删除
</el-button>
<!-- <el-button type="success" :icon="DocumentCopy" @click="handleClone">
克隆扣分项
</el-button> -->
<el-button
type="warning"
:icon="Download"
:disabled="!queryParams.competitionId"
@click="handleExport"
>
导出模板
</el-button>
</div>
<div class="toolbar-right">
<el-tooltip content="拖拽行可调整顺序" placement="top">
<el-icon :size="20" color="#409EFF">
<InfoFilled />
</el-icon>
</el-tooltip>
<el-tooltip content="刷新" placement="top">
<el-button
circle
:icon="Refresh"
:disabled="!queryParams.competitionId"
@click="fetchData"
/>
</el-tooltip>
</div>
</div>
</el-card>
<!-- 数据表格 -->
<el-card shadow="never" class="table-card">
<el-table
v-loading="loading"
:data="tableData"
stripe
border
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="排序" width="80" align="center">
<template #default="{ row }">
<el-icon class="drag-handle" :size="20">
<Rank />
</el-icon>
<span style="margin-left: 5px">{{ row.sortOrder }}</span>
</template>
</el-table-column>
<el-table-column
prop="itemName"
label="扣分项名称"
min-width="200"
show-overflow-tooltip
/>
<el-table-column
prop="projectName"
label="所属项目"
min-width="180"
show-overflow-tooltip
/>
<el-table-column
prop="deductionPoint"
label="扣分值(分)"
width="120"
align="center"
>
<template #default="{ row }">
<el-tag type="danger" effect="dark">
-{{ row.deductionPoint }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="description"
label="描述说明"
min-width="250"
show-overflow-tooltip
/>
<el-table-column
prop="createTime"
label="创建时间"
width="160"
align="center"
>
<template #default="{ row }">
{{ formatDate(row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :icon="Edit" @click="handleEdit(row)">
编辑
</el-button>
<el-button link type="danger" :icon="Delete" @click="handleDelete(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="queryParams.current"
v-model:page-size="queryParams.size"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
/>
</div>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
:close-on-click-modal="false"
@close="handleDialogClose"
>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="120px"
>
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="form.competitionId"
placeholder="请选择赛事"
filterable
disabled
style="width: 100%"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="所属项目" prop="projectId">
<el-select
v-model="form.projectId"
placeholder="请选择所属项目"
filterable
style="width: 100%"
>
<el-option
v-for="item in projectList"
:key="item.id"
:label="item.projectName"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="扣分项名称" prop="itemName">
<el-input
v-model="form.itemName"
placeholder="请输入扣分项名称"
maxlength="100"
/>
</el-form-item>
<el-form-item label="扣分值(分)" prop="deductionPoint">
<el-input-number
v-model="form.deductionPoint"
:min="0.1"
:max="10"
:precision="1"
:step="0.1"
style="width: 100%"
/>
<div class="form-tip">扣分范围0.1 - 10.0 </div>
</el-form-item>
<el-form-item label="排序序号" prop="sortOrder">
<el-input-number
v-model="form.sortOrder"
:min="0"
:max="999"
style="width: 100%"
/>
<div class="form-tip">数字越小越靠前</div>
</el-form-item>
<el-form-item label="描述说明" prop="description">
<el-input
v-model="form.description"
type="textarea"
:rows="4"
placeholder="请输入描述说明"
maxlength="500"
show-word-limit
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
确定
</el-button>
</template>
</el-dialog>
<!-- 克隆扣分项弹窗 -->
<el-dialog
v-model="cloneDialogVisible"
title="克隆扣分项"
width="500px"
:close-on-click-modal="false"
>
<el-form
ref="cloneFormRef"
:model="cloneForm"
:rules="cloneRules"
label-width="120px"
>
<el-form-item label="源项目">
<el-input :value="cloneForm.sourceProjectName" disabled />
</el-form-item>
<el-form-item label="目标项目" prop="targetProjectId">
<el-select
v-model="cloneForm.targetProjectId"
placeholder="请选择目标项目"
filterable
style="width: 100%"
>
<el-option
v-for="item in projectList.filter(p => p.id !== cloneForm.sourceProjectId)"
:key="item.id"
:label="item.projectName"
:value="String(item.id)"
/>
</el-select>
</el-form-item>
<el-alert
type="info"
:closable="false"
show-icon
>
<template #title>
将复制 <strong>{{ cloneForm.itemCount }}</strong> 个扣分项到目标项目
</template>
</el-alert>
</el-form>
<template #footer>
<el-button @click="cloneDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="cloneLoading" @click="handleCloneSubmit">
确定克隆
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Search,
Refresh,
Plus,
Delete,
Edit,
Download,
InfoFilled,
Rank
} from '@element-plus/icons-vue'
import {
getDeductionList,
addDeduction,
updateDeduction,
removeDeduction,
cloneDeductions,
updateDeductionOrder
} from '@/api/martial/deduction'
import { getProjectList } from '@/api/martial/project'
import dayjs from 'dayjs'
import Sortable from 'sortablejs'
import { getCompetitionList } from '@/api/martial/competition'
// 数据定义
const loading = ref(false)
const submitLoading = ref(false)
const cloneLoading = ref(false)
const tableData = ref([])
const total = ref(0)
const selection = ref([])
const projectList = ref([])
const dialogVisible = ref(false)
const cloneDialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const cloneFormRef = ref(null)
const competitionList = ref([])
const competitionLoading = ref(false)
// 查询参数
const queryParams = reactive({
current: 1,
size: 10,
competitionId: null,
projectId: null,
itemName: '',
})
// 表单数据
const form = reactive({
id: null,
competitionId: null,
projectId: null,
itemName: '',
deductionPoint: 0.5,
sortOrder: 0,
description: ''
})
// 克隆表单
const cloneForm = reactive({
sourceProjectId: '',
sourceProjectName: '',
targetProjectId: '',
itemCount: 0
})
// 表单验证规则
const rules = {
competitionId: [
{ required: true, message: '请选择赛事', trigger: 'change' }
],
projectId: [
{ required: true, message: '请选择所属项目', trigger: 'change' }
],
itemName: [
{ required: true, message: '请输入扣分项名称', trigger: 'blur' },
{ min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
],
deductionPoint: [
{ required: true, message: '请输入扣分值', trigger: 'blur' }
],
sortOrder: [
{ required: true, message: '请输入排序序号', trigger: 'blur' }
]
}
// 克隆表单验证规则
const cloneRules = {
targetProjectId: [
{ required: true, message: '请选择目标项目', trigger: 'change' }
]
}
// 加载赛事列表
const loadCompetitionList = async () => {
competitionLoading.value = true
try {
const resCompe = await getCompetitionList(1, 1000, {})
const recordsCompe = resCompe.data?.data?.records || []
competitionList.value = recordsCompe
if (recordsCompe.length === 0) {
console.warn('赛事列表为空,请先在"赛事管理"中创建赛事')
}
} catch (error) {
console.error('加载赛事列表失败:', error)
ElMessage.error('加载赛事列表失败')
} finally {
competitionLoading.value = false
}
}
// 加载项目列表根据赛事ID
const loadProjectList = async (competitionId) => {
if (!competitionId) {
projectList.value = []
return
}
try {
const res = await getProjectList(1, 1000, { competitionId })
// 根据axios响应拦截器的处理数据在 res.data.data.records 中
const records = res.data?.data?.records || []
projectList.value = records
if (records.length === 0) {
console.warn('该赛事下暂无项目,请先在"轮编管理"中创建项目')
}
} catch (error) {
console.error('加载项目列表失败:', error)
ElMessage.error('加载项目列表失败')
}
}
// 赛事选择变化
const handleCompetitionChange = (competitionId) => {
// 清空项目选择和表格数据
queryParams.projectId = null
tableData.value = []
total.value = 0
// 加载该赛事下的项目
if (competitionId) {
loadProjectList(competitionId)
// 自动查询数据
fetchData()
} else {
projectList.value = []
}
}
// 查询数据
const fetchData = async () => {
// 必须选择赛事才能查询
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return
}
loading.value = true
try {
// 过滤掉空字符串的参数
const params = {}
Object.keys(queryParams).forEach(key => {
if (queryParams[key] !== '' && queryParams[key] !== null && queryParams[key] !== undefined) {
params[key] = queryParams[key]
}
})
const res = await getDeductionList(
queryParams.current,
queryParams.size,
params
)
// 根据axios响应拦截器的处理数据在 res.data.data 中
const data = res.data?.data || {}
tableData.value = data.records || []
total.value = data.total || 0
} catch (error) {
ElMessage.error('获取数据失败')
console.error(error)
} finally {
loading.value = false
}
}
// 搜索
const handleSearch = () => {
queryParams.current = 1
fetchData()
}
// 重置
const handleReset = () => {
const competitionId = queryParams.competitionId
Object.assign(queryParams, {
current: 1,
size: 10,
competitionId: competitionId,
projectId: null,
itemName: '',
})
if (competitionId) {
fetchData()
}
}
// 新增
const handleAdd = () => {
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return
}
dialogTitle.value = '新增扣分项'
resetForm()
form.competitionId = queryParams.competitionId
dialogVisible.value = true
}
// 编辑
const handleEdit = async (row) => {
dialogTitle.value = '编辑扣分项'
Object.keys(form).forEach((key) => {
form[key] = row[key]
})
// Convert competitionId to string for el-select matching
if (form.competitionId) {
form.competitionId = String(form.competitionId)
}
if (form.projectId) {
form.projectId = String(form.projectId)
}
// Load project list for the competition first
if (form.competitionId) {
await loadProjectList(form.competitionId)
}
dialogVisible.value = true
}
// 删除
const handleDelete = (row) => {
ElMessageBox.confirm('确定要删除该扣分项吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
await removeDeduction(row.id)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 批量删除
const handleBatchDelete = () => {
ElMessageBox.confirm(`确定要删除选中的 ${selection.value.length} 个扣分项吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id).join(',')
await removeDeduction(ids)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 提交克隆
const handleCloneSubmit = async () => {
if (!cloneFormRef.value) return
await cloneFormRef.value.validate(async (valid) => {
if (valid) {
cloneLoading.value = true
try {
await cloneDeductions({
sourceProjectId: cloneForm.sourceProjectId,
targetProjectId: cloneForm.targetProjectId
})
ElMessage.success('克隆成功')
cloneDialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error('克隆失败')
} finally {
cloneLoading.value = false
}
}
})
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
submitLoading.value = true
try {
if (form.id) {
await updateDeduction(form)
ElMessage.success('修改成功')
} else {
await addDeduction(form)
ElMessage.success('新增成功')
}
dialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error(form.id ? '修改失败' : '新增失败')
} finally {
submitLoading.value = false
}
}
})
}
// 选择变化
const handleSelectionChange = (val) => {
selection.value = val
}
// 关闭弹窗
const handleDialogClose = () => {
resetForm()
}
// 重置表单
const resetForm = () => {
Object.assign(form, {
id: null,
competitionId: null,
projectId: null,
itemName: '',
deductionPoint: 0.5,
sortOrder: 0,
description: ''
})
if (formRef.value) {
formRef.value.clearValidate()
}
}
// 导出模板
const handleExport = async () => {
try {
const csvContent = [
['项目ID', '扣分项名称', '扣分值', '描述说明', '排序序号'],
['1', '示例扣分项', '0.5', '这是一个示例', '1']
].map(row => row.join(',')).join('\n')
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `扣分项导入模板_${dayjs().format('YYYYMMDDHHmmss')}.csv`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
}
}
// 初始化拖拽排序
const initSortable = () => {
nextTick(() => {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
if (!tbody) return
Sortable.create(tbody, {
handle: '.drag-handle',
animation: 150,
onEnd: async ({ oldIndex, newIndex }) => {
if (oldIndex === newIndex) return
const movedItem = tableData.value.splice(oldIndex, 1)[0]
tableData.value.splice(newIndex, 0, movedItem)
// 更新排序
try {
const sortData = tableData.value.map((item, index) => ({
id: item.id,
sortOrder: index
}))
await updateDeductionOrder(sortData)
ElMessage.success('排序已更新')
} catch (error) {
ElMessage.error('排序更新失败')
fetchData() // 重新加载数据
}
}
})
})
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 生命周期
onMounted(() => {
loadCompetitionList()
initSortable()
})
</script>
<style scoped lang="scss">
.deduction-container {
padding: 20px;
.search-card,
.toolbar-card,
.table-card {
margin-bottom: 20px;
}
.search-form {
.el-form-item {
margin-bottom: 0;
}
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
.toolbar-left {
display: flex;
gap: 10px;
}
.toolbar-right {
display: flex;
gap: 10px;
align-items: center;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.drag-handle {
cursor: move;
vertical-align: middle;
}
.form-tip {
font-size: 12px;
color: #909399;
margin-top: 5px;
}
}
</style>

View File

@@ -0,0 +1,508 @@
<template>
<div class="martial-dispatch-container">
<div class="page-header">
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
<h2 class="page-title">调度</h2>
</div>
<div class="tabs-section">
<div class="tab-buttons">
<el-button size="small" type="primary">竞赛分组</el-button>
</div>
<div class="tab-content">
<!-- 场地选择器 -->
<div class="venue-selector">
<el-button
v-for="venue in venues"
:key="venue.id"
size="small"
:type="selectedVenueId === venue.id ? 'primary' : ''"
@click="selectedVenueId = venue.id; loadDispatchData()"
>
{{ venue.venueName }}
</el-button>
</div>
<!-- 时间段选择器 -->
<div class="time-selector">
<el-button
v-for="(time, index) in timeSlots"
:key="index"
size="small"
:type="selectedTime === index ? 'primary' : ''"
@click="selectedTime = index; loadDispatchData()"
>
{{ time }}
</el-button>
<el-button size="small" plain style="margin-left: auto;" @click="handleBatchComplete">
批次完赛
</el-button>
</div>
<div v-for="(group, index) in dispatchGroups" :key="index" class="dispatch-group">
<div class="group-header">
<div class="group-info">
<span class="group-title">{{ group.title }}</span>
<span class="group-meta">{{ group.type }}</span>
<span class="group-meta">{{ group.count }}</span>
<span class="group-meta">{{ group.code }}</span>
</div>
<div class="group-actions">
<div class="toggle-buttons">
<el-button size="small" :type="group.viewMode === 'dispatch' ? 'primary' : ''" @click="setViewMode(index, 'dispatch')">
调度列表
</el-button>
<el-button size="small" :type="group.viewMode === 'menu' ? 'primary' : 'success'" @click="setViewMode(index, 'menu')">
{{ group.venueType === 1 ? '一号场地' : '二号场地' }}
</el-button>
</div>
<el-button size="small" type="danger">赛程</el-button>
</div>
</div>
<el-table :data="group.items" border stripe size="small">
<el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
<el-table-column label="状态" width="100" align="center">
<template #default="scope">
<el-tag v-if="scope.row.completed" type="success" size="small">已完赛</el-tag>
<el-tag v-else type="warning" size="small">未完赛</el-tag>
</template>
</el-table-column>
<el-table-column label="裁判" width="100" align="center">
<template #default="scope">
<el-tag v-if="scope.row.refereed" type="success" size="small">已裁判</el-tag>
<el-tag v-else type="danger" size="small">未裁判</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button
link
size="small"
@click="handleMoveUp(index, scope.$index)"
:disabled="scope.$index === 0"
title="上移"
class="move-btn"
>
<img src="/img/图标 3@3x.png" class="move-icon" alt="上移" />
</el-button>
<el-button
link
size="small"
@click="handleMoveDown(index, scope.$index)"
:disabled="scope.$index === group.items.length - 1"
title="下移"
class="move-btn"
>
<img src="/img/图标 4@3x.png" class="move-icon" alt="下移" />
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 保存按钮 -->
<div class="dispatch-footer" v-if="dispatchGroups.length > 0">
<el-button @click="goBack">返回</el-button>
<el-button type="primary" @click="handleSaveDispatch" :disabled="!hasChanges">
保存调度
</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import { getVenuesByCompetition } from '@/api/martial/venue'
import { getCompetitionDetail } from '@/api/martial/competition'
import { getDispatchData, saveDispatch, getScheduleResult } from '@/api/martial/activitySchedule'
export default {
name: 'MartialDispatchList',
data() {
return {
competitionId: null,
loading: false,
selectedTime: 0,
selectedVenueId: null,
venues: [], // 场地列表
timeSlots: [], // 时间段列表
dispatchGroups: [], // 调度分组列表
hasChanges: false, // 是否有未保存的更改
originalData: null // 原始数据(用于取消时恢复)
}
},
async mounted() {
this.competitionId = this.$route.query.competitionId
if (this.competitionId) {
// 先检查编排状态
await this.checkScheduleStatus()
this.loadCompetitionInfo()
this.loadVenues()
} else {
this.$message.warning('未获取到赛事ID')
}
},
methods: {
goBack() {
this.$router.go(-1)
},
// 检查编排状态
async checkScheduleStatus() {
try {
const res = await getScheduleResult(this.competitionId)
const scheduleStatus = res.data?.data?.scheduleStatus || res.data?.scheduleStatus || 0
console.log('编排状态:', scheduleStatus)
// 如果编排未完成状态不是2提示用户并返回
if (scheduleStatus !== 2) {
this.$message.warning('请先完成编排并锁定后,才能进行调度操作')
// 延迟返回上一页
setTimeout(() => {
this.$router.go(-1)
}, 2000)
return false
}
return true
} catch (error) {
console.error('检查编排状态失败:', error)
this.$message.error('无法获取编排状态,请稍后重试')
setTimeout(() => {
this.$router.go(-1)
}, 2000)
return false
}
},
// 加载赛事信息
async loadCompetitionInfo() {
try {
this.loading = true
const res = await getCompetitionDetail(this.competitionId)
const data = res.data?.data
if (data) {
// 生成时间段
this.generateTimeSlots(data.competitionStartTime || data.competition_start_time, data.competitionEndTime || data.competition_end_time)
}
} catch (err) {
console.error('加载赛事信息失败', err)
this.$message.error('加载赛事信息失败')
} finally {
this.loading = false
}
},
// 生成时间段列表
generateTimeSlots(startTime, endTime) {
if (!startTime || !endTime) {
this.timeSlots = ['2025年11月6日 上午8:30', '2025年11月6日 下午13:30']
return
}
const slots = []
const start = new Date(startTime)
const end = new Date(endTime)
let currentDate = new Date(start)
while (currentDate <= end) {
const year = currentDate.getFullYear()
const month = currentDate.getMonth() + 1
const day = currentDate.getDate()
const dateStr = `${year}${month}${day}`
slots.push(`${dateStr} 上午8:30`)
slots.push(`${dateStr} 下午13:30`)
currentDate.setDate(currentDate.getDate() + 1)
}
this.timeSlots = slots
},
// 加载场地列表
async loadVenues() {
try {
this.loading = true
const res = await getVenuesByCompetition(this.competitionId)
const venuesData = res.data?.data?.records || res.data?.data || []
if (venuesData.length === 0) {
this.$message.warning('该赛事暂无场地信息')
this.venues = []
} else {
this.venues = venuesData.map(v => ({
id: v.id,
venueName: v.venueName || v.venue_name
}))
// 默认选中第一个场地
if (this.venues.length > 0) {
this.selectedVenueId = this.venues[0].id
this.loadDispatchData()
}
}
} catch (err) {
console.error('加载场地失败', err)
this.$message.error('加载场地失败')
this.venues = []
} finally {
this.loading = false
}
},
// 加载调度数据
async loadDispatchData() {
if (!this.selectedVenueId || this.selectedTime === null) {
this.dispatchGroups = []
return
}
try {
this.loading = true
const res = await getDispatchData({
competitionId: this.competitionId,
venueId: this.selectedVenueId,
timeSlotIndex: this.selectedTime
})
if (res.data.success) {
const groups = res.data.data.groups || []
this.dispatchGroups = groups.map(group => ({
...group,
viewMode: 'dispatch',
title: group.groupName,
items: group.participants.map(p => ({
...p,
schoolUnit: p.organization,
completed: false,
refereed: false
}))
}))
// 保存原始数据
this.originalData = JSON.parse(JSON.stringify(this.dispatchGroups))
this.hasChanges = false
} else {
this.$message.error(res.data.msg || '加载调度数据失败')
}
} catch (error) {
console.error('加载调度数据失败:', error)
this.$message.error('加载调度数据失败')
} finally {
this.loading = false
}
},
setViewMode(index, mode) {
this.dispatchGroups[index].viewMode = mode
this.$message.success(`已切换到${mode === 'dispatch' ? '调度列表' : '场地'}模式`)
},
handleMoveUp(groupIndex, itemIndex) {
if (itemIndex === 0) return
const group = this.dispatchGroups[groupIndex]
const temp = group.items[itemIndex]
group.items.splice(itemIndex, 1)
group.items.splice(itemIndex - 1, 0, temp)
// 更新顺序号
group.items.forEach((item, index) => {
item.performanceOrder = index + 1
})
this.hasChanges = true
this.$message.success('上移成功')
},
handleMoveDown(groupIndex, itemIndex) {
const group = this.dispatchGroups[groupIndex]
if (itemIndex === group.items.length - 1) return
const temp = group.items[itemIndex]
group.items.splice(itemIndex, 1)
group.items.splice(itemIndex + 1, 0, temp)
// 更新顺序号
group.items.forEach((item, index) => {
item.performanceOrder = index + 1
})
this.hasChanges = true
this.$message.success('下移成功')
},
handleBatchComplete() {
this.$confirm('确定要标记当前批次所有为完赛状态吗?', '批次完赛', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dispatchGroups.forEach(group => {
group.items.forEach(item => {
item.completed = true
})
})
this.$message.success('批次完赛成功')
}).catch(() => {})
},
// 保存调度
async handleSaveDispatch() {
if (!this.hasChanges) {
this.$message.info('没有需要保存的更改')
return
}
try {
this.loading = true
const adjustments = this.dispatchGroups.map(group => ({
detailId: group.detailId,
participants: group.items.map(p => ({
id: p.id,
performanceOrder: p.performanceOrder
}))
}))
const res = await saveDispatch({
competitionId: this.competitionId,
adjustments
})
if (res.data.success) {
this.$message.success('调度保存成功')
this.hasChanges = false
await this.loadDispatchData()
} else {
this.$message.error(res.data.msg || '保存失败')
}
} catch (error) {
console.error('保存调度失败:', error)
this.$message.error('保存失败,请稍后重试')
} finally {
this.loading = false
}
}
}
}
</script>
<style lang="scss" scoped>
.martial-dispatch-container {
padding: 15px;
background: #fff;
.page-header {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
}
.tabs-section {
.tab-buttons {
margin-bottom: 15px;
display: flex;
gap: 8px;
}
.tab-content {
.venue-selector {
margin-bottom: 15px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.time-selector {
margin-bottom: 15px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.dispatch-group {
margin-bottom: 15px;
.group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
border-bottom: none;
.group-info {
display: flex;
align-items: center;
gap: 12px;
.group-title {
font-weight: 600;
color: #2c3e50;
font-size: 13px;
}
.group-meta {
color: #909399;
font-size: 12px;
}
}
.group-actions {
display: flex;
gap: 8px;
align-items: center;
.toggle-buttons {
display: flex;
gap: 4px;
}
}
}
}
}
}
.move-btn {
padding: 4px;
&:disabled {
opacity: 0.4;
cursor: not-allowed;
}
}
.move-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
.dispatch-footer {
margin-top: 30px;
text-align: center;
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
.el-button {
min-width: 120px;
}
}
}
</style>

View File

@@ -1,294 +0,0 @@
<template>
<div class="martial-dispatch-container">
<div class="page-header">
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
<h2 class="page-title">调度</h2>
</div>
<div class="tabs-section">
<div class="tab-buttons">
<el-button size="small" type="primary">竞赛分组</el-button>
</div>
<div class="tab-content">
<div class="time-selector">
<el-button
v-for="(time, index) in timeSlots"
:key="index"
size="small"
:type="selectedTime === index ? 'primary' : ''"
@click="selectedTime = index"
>
{{ time }}
</el-button>
<el-button size="small" plain style="margin-left: auto;" @click="handleBatchComplete">
批次完赛
</el-button>
</div>
<div v-for="(group, index) in dispatchGroups" :key="index" class="dispatch-group">
<div class="group-header">
<div class="group-info">
<span class="group-title">{{ group.title }}</span>
<span class="group-meta">{{ group.type }}</span>
<span class="group-meta">{{ group.count }}</span>
<span class="group-meta">{{ group.code }}</span>
</div>
<div class="group-actions">
<div class="toggle-buttons">
<el-button size="small" :type="group.viewMode === 'dispatch' ? 'primary' : ''" @click="setViewMode(index, 'dispatch')">
调度列表
</el-button>
<el-button size="small" :type="group.viewMode === 'menu' ? 'primary' : 'success'" @click="setViewMode(index, 'menu')">
{{ group.venueType === 1 ? '一号场地' : '二号场地' }}
</el-button>
</div>
<el-button size="small" type="danger">赛程</el-button>
</div>
</div>
<el-table :data="group.items" border stripe size="small">
<el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
<el-table-column label="状态" width="100" align="center">
<template #default="scope">
<el-tag v-if="scope.row.completed" type="success" size="small">已完赛</el-tag>
<el-tag v-else type="warning" size="small">未完赛</el-tag>
</template>
</el-table-column>
<el-table-column label="裁判" width="100" align="center">
<template #default="scope">
<el-tag v-if="scope.row.refereed" type="success" size="small">已裁判</el-tag>
<el-tag v-else type="danger" size="small">未裁判</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template #default="scope">
<el-button
type="text"
size="small"
@click="handleMoveUp(index, scope.$index)"
:disabled="scope.$index === 0"
title="上移"
class="move-btn"
>
<img src="/img/图标 3@3x.png" class="move-icon" alt="上移" />
</el-button>
<el-button
type="text"
size="small"
@click="handleMoveDown(index, scope.$index)"
:disabled="scope.$index === group.items.length - 1"
title="下移"
class="move-btn"
>
<img src="/img/图标 4@3x.png" class="move-icon" alt="下移" />
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MartialDispatchList',
data() {
return {
orderId: null,
selectedTime: 1,
timeSlots: [
'2025年11月6日上午8:30',
'2025年11月6日下午13:00',
'2025年11月7日上午8:30'
],
dispatchGroups: [
{
title: '1. 小学组小组赛男女类',
type: '集体',
count: '2队',
code: '1101',
venueType: 1,
viewMode: 'dispatch',
items: [
{ schoolUnit: '少林寺武校', completed: true, refereed: false },
{ schoolUnit: '访河社区', completed: false, refereed: false }
]
},
{
title: '1. 小学组小组赛男女类',
type: '单人',
count: '3队',
code: '1组',
venueType: 2,
viewMode: 'dispatch',
items: [
{ schoolUnit: '少林寺武校', completed: true, refereed: true },
{ schoolUnit: '访河社区', completed: false, refereed: false },
{ schoolUnit: '少林寺武校', completed: true, refereed: true }
]
},
{
title: '2. 中学组决赛',
type: '集体',
count: '4队',
code: '2101',
venueType: 1,
viewMode: 'dispatch',
items: [
{ schoolUnit: '成都体育学院', completed: true, refereed: true },
{ schoolUnit: '武侯实验中学', completed: true, refereed: false },
{ schoolUnit: '石室中学', completed: false, refereed: false },
{ schoolUnit: '七中育才', completed: false, refereed: false }
]
}
]
}
},
mounted() {
this.orderId = this.$route.query.orderId
// 使用静态数据不调用API
},
methods: {
goBack() {
this.$router.push('/martial/order/list')
},
setViewMode(index, mode) {
this.dispatchGroups[index].viewMode = mode
this.$message.success(`已切换到${mode === 'dispatch' ? '调度列表' : '场地'}模式`)
},
handleMoveUp(groupIndex, itemIndex) {
if (itemIndex === 0) return
const group = this.dispatchGroups[groupIndex]
const temp = group.items[itemIndex]
group.items.splice(itemIndex, 1)
group.items.splice(itemIndex - 1, 0, temp)
this.$message.success('上移成功')
},
handleMoveDown(groupIndex, itemIndex) {
const group = this.dispatchGroups[groupIndex]
if (itemIndex === group.items.length - 1) return
const temp = group.items[itemIndex]
group.items.splice(itemIndex, 1)
group.items.splice(itemIndex + 1, 0, temp)
this.$message.success('下移成功')
},
handleBatchComplete() {
this.$confirm('确定要标记当前批次所有为完赛状态吗?', '批次完赛', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 标记当前时间段所有为完赛
this.dispatchGroups.forEach(group => {
group.items.forEach(item => {
item.completed = true
})
})
this.$message.success('批次完赛成功')
}).catch(() => {
// 取消操作
})
}
}
}
</script>
<style lang="scss" scoped>
.martial-dispatch-container {
padding: 15px;
background: #fff;
.page-header {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
}
.tabs-section {
.tab-buttons {
margin-bottom: 15px;
display: flex;
gap: 8px;
}
.tab-content {
.time-selector {
margin-bottom: 15px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.dispatch-group {
margin-bottom: 15px;
.group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
border-bottom: none;
.group-info {
display: flex;
align-items: center;
gap: 12px;
.group-title {
font-weight: 600;
color: #2c3e50;
font-size: 13px;
}
.group-meta {
color: #909399;
font-size: 12px;
}
}
.group-actions {
display: flex;
gap: 8px;
align-items: center;
.toggle-buttons {
display: flex;
gap: 4px;
}
}
}
}
}
}
.move-btn {
padding: 4px;
&:disabled {
opacity: 0.4;
cursor: not-allowed;
}
}
.move-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div class="exception-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">异常事件</h2>
</div>
<el-empty description="功能开发中,敬请期待" />
</el-card>
</div>
</template>
<script>
export default {
name: 'ExceptionList',
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.exception-container {
padding: 20px;
.page-header {
margin-bottom: 20px;
.page-title {
margin: 0;
font-size: 20px;
font-weight: 600;
}
}
}
</style>

View File

@@ -0,0 +1,698 @@
<template>
<div class="export-container">
<el-card shadow="never">
<el-tabs v-model="activeTab" type="border-card">
<!-- Tab 1: 成绩导出 -->
<el-tab-pane label="成绩导出" name="result">
<div class="tab-content">
<el-form :model="resultForm" label-width="120px" style="max-width: 800px">
<el-form-item label="选择赛事" required>
<el-select
v-model="resultForm.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 100%"
@change="handleCompetitionChange"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="选择项目">
<el-select
v-model="resultForm.projectId"
placeholder="请选择项目(不选则导出全部)"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="item in projectList"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="分组类别">
<el-select
v-model="resultForm.category"
placeholder="请选择分组类别(可选)"
clearable
style="width: 100%"
>
<el-option label="男子" value="1" />
<el-option label="女子" value="2" />
<el-option label="团体" value="3" />
<el-option label="混合" value="4" />
</el-select>
</el-form-item>
<el-form-item label="导出内容">
<el-checkbox-group v-model="resultForm.exportFields">
<el-checkbox label="ranking">排名</el-checkbox>
<el-checkbox label="athleteName">选手姓名</el-checkbox>
<el-checkbox label="teamName">团队名称</el-checkbox>
<el-checkbox label="projectName">项目</el-checkbox>
<el-checkbox label="totalScore">总分</el-checkbox>
<el-checkbox label="finalScore">最终成绩</el-checkbox>
<el-checkbox label="medal">奖牌</el-checkbox>
<el-checkbox label="judgeScores">裁判评分明细</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="导出格式">
<el-radio-group v-model="resultForm.format">
<el-radio label="xlsx">Excel (xlsx)</el-radio>
<el-radio label="pdf">PDF</el-radio>
<el-radio label="csv">CSV</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="Download"
:loading="resultLoading"
@click="handleExportResult"
>
导出成绩单
</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<!-- Tab 2: 名单导出 -->
<el-tab-pane label="名单导出" name="list">
<div class="tab-content">
<el-form :model="listForm" label-width="120px" style="max-width: 800px">
<el-form-item label="选择赛事" required>
<el-select
v-model="listForm.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="名单类型" required>
<el-radio-group v-model="listForm.type">
<el-radio label="athlete">运动员名单</el-radio>
<el-radio label="referee">裁判名单</el-radio>
<el-radio label="staff">工作人员名单</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出格式">
<el-radio-group v-model="listForm.format">
<el-radio label="xlsx">Excel (xlsx)</el-radio>
<el-radio label="pdf">PDF</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="Download"
:loading="listLoading"
@click="handleExportList"
>
导出名单
</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<!-- Tab 3: 证书生成 -->
<el-tab-pane label="证书生成" name="certificate">
<div class="tab-content">
<el-form :model="certForm" label-width="120px" style="max-width: 800px">
<el-form-item label="选择赛事" required>
<el-select
v-model="certForm.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 100%"
@change="handleCertCompetitionChange"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="选择项目">
<el-select
v-model="certForm.projectId"
placeholder="请选择项目"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="item in certProjectList"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="证书类型" required>
<el-radio-group v-model="certForm.certType">
<el-radio label="medal">获奖证书金银铜牌</el-radio>
<el-radio label="participation">参赛证书</el-radio>
<el-radio label="excellent">优秀运动员证书</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="证书模板" required>
<el-select
v-model="certForm.templateId"
placeholder="请选择证书模板"
style="width: 100%"
>
<el-option
v-for="item in certificateTemplates"
:key="item.id"
:label="item.templateName"
:value="item.id"
>
<span style="float: left">{{ item.templateName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">
{{ item.description }}
</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="导出格式">
<el-radio-group v-model="certForm.format">
<el-radio label="pdf">PDF</el-radio>
<el-radio label="jpg">JPG图片</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="批量生成">
<el-switch v-model="certForm.batch" />
<span style="margin-left: 10px; color: #909399; font-size: 13px">
开启后将根据筛选条件批量生成
</span>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="DocumentAdd"
:loading="certLoading"
@click="handleGenerateCertificate"
>
生成证书
</el-button>
<el-button
type="success"
:icon="View"
@click="handlePreviewCertificate"
>
预览模板
</el-button>
</el-form-item>
</el-form>
<!-- 证书列表 -->
<el-divider />
<h4>已生成证书</h4>
<el-table :data="certificateList" border stripe>
<el-table-column prop="athleteName" label="选手姓名" width="120" />
<el-table-column prop="projectName" label="项目" min-width="150" />
<el-table-column prop="ranking" label="排名" width="80" align="center" />
<el-table-column prop="medal" label="奖牌" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.medal === 'gold'" type="danger">🏅 金牌</el-tag>
<el-tag v-else-if="row.medal === 'silver'" type="warning">🥈 银牌</el-tag>
<el-tag v-else-if="row.medal === 'bronze'" type="success">🥉 铜牌</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="generateTime" label="生成时间" width="160" align="center">
<template #default="{ row }">
{{ formatDate(row.generateTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="{ row }">
<el-button link type="primary" :icon="View" @click="handleViewCertificate(row)">
预览
</el-button>
<el-button link type="success" :icon="Download" @click="handleDownloadCertificate(row)">
下载
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<!-- Tab 4: 报表导出 -->
<el-tab-pane label="报表导出" name="report">
<div class="tab-content">
<el-form :model="reportForm" label-width="120px" style="max-width: 800px">
<el-form-item label="报表类型" required>
<el-select
v-model="reportForm.reportType"
placeholder="请选择报表类型"
style="width: 100%"
@change="handleReportTypeChange"
>
<el-option
label="赛事统计报表"
value="competition"
description="包含赛事基本信息、参赛人数、项目数量等统计"
/>
<el-option
label="项目统计报表"
value="project"
description="各项目报名人数、参赛人数、获奖分布等"
/>
<el-option
label="裁判工作量报表"
value="referee"
description="裁判评分数量、工作时长等统计"
/>
<el-option
label="报名统计报表"
value="registration"
description="报名趋势、地域分布、团队排名等"
/>
<el-option
label="奖牌榜报表"
value="medal"
description="团队/地区奖牌榜"
/>
</el-select>
</el-form-item>
<el-form-item label="选择赛事" required>
<el-select
v-model="reportForm.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 100%"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="导出格式">
<el-radio-group v-model="reportForm.format">
<el-radio label="xlsx">Excel (xlsx)</el-radio>
<el-radio label="pdf">PDF</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="包含图表">
<el-switch v-model="reportForm.includeCharts" />
<span style="margin-left: 10px; color: #909399; font-size: 13px">
导出PDF时包含统计图表
</span>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="Download"
:loading="reportLoading"
@click="handleExportReport"
>
导出报表
</el-button>
</el-form-item>
</el-form>
<!-- 报表说明 -->
<el-divider />
<el-alert type="info" :closable="false" show-icon>
<template #title>
<strong>报表说明</strong>
</template>
<div style="margin-top: 10px">
<p><strong>赛事统计报表</strong>包含赛事基本信息时间地点参赛人数项目数量裁判数量等综合统计信息</p>
<p><strong>项目统计报表</strong>各项目报名人数实际参赛人数获奖分布平均分最高分最低分等详细数据</p>
<p><strong>裁判工作量报表</strong>每位裁判的评分数量负责项目工作时长评分准确性等统计</p>
<p><strong>报名统计报表</strong>报名趋势分析地域分布团队排名报名费收入统计等</p>
<p><strong>奖牌榜报表</strong>按团队或地区统计金银铜牌数量包含总积分排名</p>
</div>
</el-alert>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
<!-- 证书预览弹窗 -->
<el-dialog v-model="previewVisible" title="证书预览" width="900px">
<div class="certificate-preview">
<img v-if="previewUrl" :src="previewUrl" style="width: 100%" />
<el-empty v-else description="暂无预览" />
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
Download,
DocumentAdd,
View
} from '@element-plus/icons-vue'
import {
exportResults,
exportAwardList,
generateCertificate,
batchGenerateCertificates
} from '@/api/martial/result'
import { getCompetitionList } from '@/api/martial/competition'
import { getProjectsByCompetition } from '@/api/martial/project'
import {
exportAthletes,
exportReferees,
exportStaff
} from '@/api/martial/export'
import dayjs from 'dayjs'
// 数据定义
const activeTab = ref('result')
const resultLoading = ref(false)
const listLoading = ref(false)
const certLoading = ref(false)
const reportLoading = ref(false)
const previewVisible = ref(false)
const previewUrl = ref('')
const competitionList = ref([])
const projectList = ref([])
const certProjectList = ref([])
const certificateList = ref([])
const certificateTemplates = ref([
{ id: 1, templateName: '标准证书模板', description: '简洁大方' },
{ id: 2, templateName: '豪华证书模板', description: '精美设计' },
{ id: 3, templateName: '传统证书模板', description: '古典风格' }
])
// 成绩导出表单
const resultForm = reactive({
competitionId: '',
projectId: '',
category: '',
exportFields: ['ranking', 'athleteName', 'teamName', 'projectName', 'finalScore', 'medal'],
format: 'xlsx'
})
// 名单导出表单
const listForm = reactive({
competitionId: '',
type: 'athlete',
format: 'xlsx'
})
// 证书生成表单
const certForm = reactive({
competitionId: '',
projectId: '',
certType: 'medal',
templateId: null,
format: 'pdf',
batch: false
})
// 报表导出表单
const reportForm = reactive({
reportType: 'competition',
competitionId: '',
format: 'xlsx',
includeCharts: true
})
// 加载赛事列表
const loadCompetitionList = async () => {
try {
const res = await getCompetitionList(1, 1000, { status: 1 })
if (res.data && res.data.records) {
competitionList.value = res.data.records
}
} catch (error) {
console.error('加载赛事列表失败:', error)
}
}
// 赛事变化
const handleCompetitionChange = async (competitionId) => {
resultForm.projectId = ''
projectList.value = []
if (competitionId) {
try {
const res = await getProjectsByCompetition(competitionId)
if (res.data) {
projectList.value = res.data
}
} catch (error) {
console.error('加载项目列表失败:', error)
}
}
}
// 证书赛事变化
const handleCertCompetitionChange = async (competitionId) => {
certForm.projectId = ''
certProjectList.value = []
if (competitionId) {
try {
const res = await getProjectsByCompetition(competitionId)
if (res.data) {
certProjectList.value = res.data
}
} catch (error) {
console.error('加载项目列表失败:', error)
}
}
}
// 报表类型变化
const handleReportTypeChange = (type) => {
// 可根据不同报表类型显示不同的配置项
console.log('报表类型:', type)
}
// 导出成绩
const handleExportResult = async () => {
if (!resultForm.competitionId) {
ElMessage.warning('请选择赛事')
return
}
resultLoading.value = true
try {
const res = await exportResults(resultForm)
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `成绩单_${dayjs().format('YYYYMMDDHHmmss')}.${resultForm.format}`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
} finally {
resultLoading.value = false
}
}
// 导出名单
const handleExportList = async () => {
if (!listForm.competitionId) {
ElMessage.warning('请选择赛事')
return
}
listLoading.value = true
try {
let exportFunc
switch (listForm.type) {
case 'athlete':
exportFunc = exportAthletes
break
case 'referee':
exportFunc = exportReferees
break
case 'staff':
exportFunc = exportStaff
break
}
const res = await exportFunc({
competitionId: listForm.competitionId,
format: listForm.format
})
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `${listForm.type}_名单_${dayjs().format('YYYYMMDDHHmmss')}.${listForm.format}`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
} finally {
listLoading.value = false
}
}
// 生成证书
const handleGenerateCertificate = async () => {
if (!certForm.competitionId) {
ElMessage.warning('请选择赛事')
return
}
if (!certForm.templateId) {
ElMessage.warning('请选择证书模板')
return
}
certLoading.value = true
try {
let res
if (certForm.batch) {
res = await batchGenerateCertificates(certForm)
ElMessage.success('批量生成成功,正在下载...')
} else {
res = await generateCertificate(certForm)
ElMessage.success('生成成功,正在下载...')
}
const blob = new Blob([res], { type: 'application/pdf' })
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `证书_${dayjs().format('YYYYMMDDHHmmss')}.${certForm.format}`
link.click()
window.URL.revokeObjectURL(link.href)
} catch (error) {
ElMessage.error('生成失败')
} finally {
certLoading.value = false
}
}
// 预览证书模板
const handlePreviewCertificate = () => {
if (!certForm.templateId) {
ElMessage.warning('请先选择证书模板')
return
}
// 这里可以加载模板预览图
previewUrl.value = `/static/templates/cert_${certForm.templateId}.jpg`
previewVisible.value = true
}
// 查看证书
const handleViewCertificate = (row) => {
previewUrl.value = row.certificateUrl
previewVisible.value = true
}
// 下载证书
const handleDownloadCertificate = (row) => {
window.open(row.certificateUrl, '_blank')
}
// 导出报表
const handleExportReport = async () => {
if (!reportForm.competitionId) {
ElMessage.warning('请选择赛事')
return
}
reportLoading.value = true
try {
// 根据不同的报表类型调用不同的API
// 这里简化处理实际应该有不同的API接口
const res = await exportResults({
...reportForm,
reportType: reportForm.reportType
})
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `${reportForm.reportType}_报表_${dayjs().format('YYYYMMDDHHmmss')}.${reportForm.format}`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
} finally {
reportLoading.value = false
}
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 生命周期
onMounted(() => {
loadCompetitionList()
})
</script>
<style scoped lang="scss">
.export-container {
padding: 20px;
.tab-content {
padding: 20px 0;
}
.certificate-preview {
text-align: center;
padding: 20px;
}
:deep(.el-tabs__content) {
padding: 20px;
}
:deep(.el-checkbox-group) {
display: flex;
flex-direction: column;
gap: 8px;
}
:deep(.el-alert) {
p {
margin: 5px 0;
line-height: 1.8;
}
}
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div class="info-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">信息发布</h2>
</div>
<el-empty description="功能开发中,敬请期待" />
</el-card>
</div>
</template>
<script>
export default {
name: 'InfoList',
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.info-container {
padding: 20px;
.page-header {
margin-bottom: 20px;
.page-title {
margin: 0;
font-size: 20px;
font-weight: 600;
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,35 @@
<template>
<div class="judge-project-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">裁判分配</h2>
</div>
<el-empty description="功能开发中,敬请期待" />
</el-card>
</div>
</template>
<script>
export default {
name: 'JudgeProjectList',
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.judge-project-container {
padding: 20px;
.page-header {
margin-bottom: 20px;
.page-title {
margin: 0;
font-size: 20px;
font-weight: 600;
}
}
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div class="live-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">直播管理</h2>
</div>
<el-empty description="功能开发中,敬请期待" />
</el-card>
</div>
</template>
<script>
export default {
name: 'LiveList',
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.live-container {
padding: 20px;
.page-header {
margin-bottom: 20px;
.page-title {
margin: 0;
font-size: 20px;
font-weight: 600;
}
}
}
</style>

View File

@@ -0,0 +1,368 @@
<template>
<div class="martial-order-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">赛事管理</h2>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索赛事名称"
clearable
size="small"
style="width: 240px"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.status"
placeholder="赛事状态"
clearable
size="small"
style="width: 180px"
>
<el-option label="未开始" :value="1"></el-option>
<el-option label="报名中" :value="2"></el-option>
<el-option label="进行中" :value="3"></el-option>
<el-option label="已结束" :value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
size="small"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="competitionName" label="赛事名称" min-width="200" show-overflow-tooltip></el-table-column>
<el-table-column prop="competitionCode" label="赛事编号" width="150"></el-table-column>
<el-table-column prop="organizer" label="主办单位" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="location" label="举办地点" width="120"></el-table-column>
<el-table-column prop="registrationTime" label="报名时间" width="180" show-overflow-tooltip>
<template #default="scope">
<span>{{ formatDateRange(scope.row.registrationStartTime, scope.row.registrationEndTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="competitionTime" label="比赛时间" width="180" show-overflow-tooltip>
<template #default="scope">
<span>{{ formatDateRange(scope.row.competitionStartTime, scope.row.competitionEndTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90" align="center">
<template #default="scope">
<el-tag :type="getStatusType(calculateStatus(scope.row))" size="small">
{{ getStatusText(calculateStatus(scope.row)) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="320" align="center" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="handleRegistrationDetail(scope.row)">报名详情</el-button>
<el-button type="success" size="small" @click="handleSchedule(scope.row)">编排</el-button>
<el-button
type="warning"
size="small"
@click="handleDispatch(scope.row)"
:title="isScheduleCompleted(scope.row.id) ? '进入调度' : '请先完成编排'"
>
调度
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next"
:total="pagination.total"
small
></el-pagination>
</el-card>
</div>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
import { getScheduleResult } from '@/api/martial/activitySchedule'
export default {
name: 'MartialOrderList',
data() {
return {
loading: false,
searchForm: {
keyword: '',
status: null
},
tableData: [],
pagination: {
current: 1,
size: 10,
total: 0
},
scheduleStatusMap: {} // 存储每个赛事的编排状态
}
},
mounted() {
this.loadCompetitionList()
},
activated() {
// 当页面被激活时(从其他页面返回),重新加载编排状态
if (this.tableData.length > 0) {
this.loadScheduleStatus()
}
},
methods: {
// 加载赛事列表
loadCompetitionList() {
this.loading = true
const params = {}
if (this.searchForm.keyword) {
params.competitionName = this.searchForm.keyword
}
if (this.searchForm.status !== null && this.searchForm.status !== '') {
params.status = this.searchForm.status
}
getCompetitionList(this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('赛事列表返回数据:', res)
const responseData = res.data?.data
if (responseData && responseData.records) {
// 处理赛事数据,兼容驼峰和下划线命名
this.tableData = responseData.records.map(competition => ({
id: competition.id,
competitionName: competition.competitionName || competition.competition_name,
competitionCode: competition.competitionCode || competition.competition_code,
organizer: competition.organizer,
location: competition.location,
venue: competition.venue,
registrationStartTime: competition.registrationStartTime || competition.registration_start_time,
registrationEndTime: competition.registrationEndTime || competition.registration_end_time,
competitionStartTime: competition.competitionStartTime || competition.competition_start_time,
competitionEndTime: competition.competitionEndTime || competition.competition_end_time,
status: competition.status,
createTime: competition.createTime || competition.create_time
}))
this.pagination.total = responseData.total || 0
// 加载每个赛事的编排状态
this.loadScheduleStatus()
}
})
.catch(err => {
console.error('加载赛事列表失败', err)
this.$message.error('加载赛事列表失败')
})
.finally(() => {
this.loading = false
})
},
// 加载编排状态
async loadScheduleStatus() {
for (const competition of this.tableData) {
try {
const res = await getScheduleResult(competition.id)
if (res.data?.data) {
this.scheduleStatusMap[competition.id] = res.data.data.isCompleted || false
} else {
this.scheduleStatusMap[competition.id] = false
}
} catch (err) {
// 如果获取失败,默认为未完成
this.scheduleStatusMap[competition.id] = false
}
}
},
// 检查编排是否完成
isScheduleCompleted(competitionId) {
return this.scheduleStatusMap[competitionId] === true
},
handleSearch() {
this.pagination.current = 1
this.loadCompetitionList()
},
handleSizeChange(size) {
this.pagination.size = size
this.pagination.current = 1
this.loadCompetitionList()
},
handleCurrentChange(current) {
this.pagination.current = current
this.loadCompetitionList()
},
// 查看报名详情 - 传递赛事ID
handleRegistrationDetail(row) {
this.$router.push({
path: '/martial/registration/detail',
query: { competitionId: row.id }
})
},
// 编排 - 传递赛事ID
handleSchedule(row) {
this.$router.push({
path: '/martial/schedule/list',
query: { competitionId: row.id }
})
},
// 调度 - 传递赛事ID
handleDispatch(row) {
// 检查编排是否完成
if (!this.isScheduleCompleted(row.id)) {
this.$message.warning('请先完成编排后再进行调度')
return
}
this.$router.push({
path: '/martial/dispatch/list',
query: { competitionId: row.id }
})
},
// 格式化日期范围
formatDateRange(startTime, endTime) {
if (!startTime || !endTime) return '-'
// 简单格式化,只显示日期部分
const start = startTime.split(' ')[0]
const end = endTime.split(' ')[0]
return `${start} ~ ${end}`
},
// 根据时间计算赛事状态
calculateStatus(row) {
const now = new Date()
const regStart = row.registrationStartTime ? new Date(row.registrationStartTime) : null
const regEnd = row.registrationEndTime ? new Date(row.registrationEndTime) : null
const compStart = row.competitionStartTime ? new Date(row.competitionStartTime) : null
const compEnd = row.competitionEndTime ? new Date(row.competitionEndTime) : null
if (compEnd && now > compEnd) return 4
if (compStart && now >= compStart) return 3
if (regStart && regEnd && now >= regStart && now <= regEnd) return 2
return 1
},
getStatusType(status) {
const statusMap = {
1: 'info', // 未开始
2: 'success', // 报名中
3: 'warning', // 进行中
4: 'info' // 已结束
}
return statusMap[status] || 'info'
},
getStatusText(status) {
const statusMap = {
1: '未开始',
2: '报名中',
3: '进行中',
4: '已结束'
}
return statusMap[status] || '未知'
}
}
}
</script>
<style lang="scss" scoped>
.martial-order-container {
min-height: 100%;
padding: 15px;
background: #fff;
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
}
.tip-message {
display: flex;
gap: 12px;
padding: 10px 14px;
margin-bottom: 15px;
background: linear-gradient(90deg, #ffd54f 0%, #ffecb3 100%);
border: 1px solid #ffc107;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
.tip-header {
flex-shrink: 0;
.tip-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: #ff9800;
color: #fff;
font-size: 11px;
font-weight: bold;
border-radius: 50%;
}
}
.tip-content {
flex: 1;
color: #5d4037;
font-size: 12px;
line-height: 1.5;
.tip-subtitle {
margin-top: 3px;
color: #6d4c41;
font-size: 11px;
font-style: italic;
}
}
}
.search-form {
margin-bottom: 15px;
}
.amount-text {
color: #e6a23c;
font-weight: 600;
font-size: 14px;
}
.pagination {
margin-top: 15px;
text-align: right;
}
}
</style>

View File

@@ -0,0 +1,355 @@
<template>
<div class="martial-order-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">订单管理</h2>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索赛事名称"
clearable
size="small"
style="width: 240px"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.status"
placeholder="赛事状态"
clearable
size="small"
style="width: 180px"
>
<el-option label="未开始" :value="1"></el-option>
<el-option label="报名中" :value="2"></el-option>
<el-option label="进行中" :value="3"></el-option>
<el-option label="已结束" :value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
size="small"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="competitionName" label="赛事名称" min-width="200" show-overflow-tooltip></el-table-column>
<el-table-column prop="competitionCode" label="赛事编号" width="150"></el-table-column>
<el-table-column prop="organizer" label="主办单位" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="location" label="举办地点" width="120"></el-table-column>
<el-table-column prop="registrationTime" label="报名时间" width="180" show-overflow-tooltip>
<template #default="scope">
<span>{{ formatDateRange(scope.row.registrationStartTime, scope.row.registrationEndTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="competitionTime" label="比赛时间" width="180" show-overflow-tooltip>
<template #default="scope">
<span>{{ formatDateRange(scope.row.competitionStartTime, scope.row.competitionEndTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90" align="center">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)" size="small">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="320" align="center" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="handleRegistrationDetail(scope.row)">报名详情</el-button>
<el-button type="success" size="small" @click="handleSchedule(scope.row)">编排</el-button>
<el-button
type="warning"
size="small"
@click="handleDispatch(scope.row)"
:title="isScheduleCompleted(scope.row.id) ? '进入调度' : '请先完成编排'"
>
调度
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next"
:total="pagination.total"
small
></el-pagination>
</el-card>
</div>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
import { getScheduleResult } from '@/api/martial/activitySchedule'
export default {
name: 'MartialOrderList',
data() {
return {
loading: false,
searchForm: {
keyword: '',
status: null
},
tableData: [],
pagination: {
current: 1,
size: 10,
total: 0
},
scheduleStatusMap: {} // 存储每个赛事的编排状态
}
},
mounted() {
this.loadCompetitionList()
},
activated() {
// 当页面被激活时(从其他页面返回),重新加载编排状态
if (this.tableData.length > 0) {
this.loadScheduleStatus()
}
},
methods: {
// 加载赛事列表
loadCompetitionList() {
this.loading = true
const params = {}
if (this.searchForm.keyword) {
params.competitionName = this.searchForm.keyword
}
if (this.searchForm.status !== null && this.searchForm.status !== '') {
params.status = this.searchForm.status
}
getCompetitionList(this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('赛事列表返回数据:', res)
const responseData = res.data?.data
if (responseData && responseData.records) {
// 处理赛事数据,兼容驼峰和下划线命名
this.tableData = responseData.records.map(competition => ({
id: competition.id,
competitionName: competition.competitionName || competition.competition_name,
competitionCode: competition.competitionCode || competition.competition_code,
organizer: competition.organizer,
location: competition.location,
venue: competition.venue,
registrationStartTime: competition.registrationStartTime || competition.registration_start_time,
registrationEndTime: competition.registrationEndTime || competition.registration_end_time,
competitionStartTime: competition.competitionStartTime || competition.competition_start_time,
competitionEndTime: competition.competitionEndTime || competition.competition_end_time,
status: competition.status,
createTime: competition.createTime || competition.create_time
}))
this.pagination.total = responseData.total || 0
// 加载每个赛事的编排状态
this.loadScheduleStatus()
}
})
.catch(err => {
console.error('加载赛事列表失败', err)
this.$message.error('加载赛事列表失败')
})
.finally(() => {
this.loading = false
})
},
// 加载编排状态
async loadScheduleStatus() {
for (const competition of this.tableData) {
try {
const res = await getScheduleResult(competition.id)
if (res.data?.data) {
this.$set(this.scheduleStatusMap, competition.id, res.data.data.isCompleted || false)
} else {
this.$set(this.scheduleStatusMap, competition.id, false)
}
} catch (err) {
// 如果获取失败,默认为未完成
this.$set(this.scheduleStatusMap, competition.id, false)
}
}
},
// 检查编排是否完成
isScheduleCompleted(competitionId) {
return this.scheduleStatusMap[competitionId] === true
},
handleSearch() {
this.pagination.current = 1
this.loadCompetitionList()
},
handleSizeChange(size) {
this.pagination.size = size
this.pagination.current = 1
this.loadCompetitionList()
},
handleCurrentChange(current) {
this.pagination.current = current
this.loadCompetitionList()
},
// 查看报名详情 - 传递赛事ID
handleRegistrationDetail(row) {
this.$router.push({
path: '/martial/registration/detail',
query: { competitionId: row.id }
})
},
// 编排 - 传递赛事ID
handleSchedule(row) {
this.$router.push({
path: '/martial/schedule/list',
query: { competitionId: row.id }
})
},
// 调度 - 传递赛事ID
handleDispatch(row) {
// 检查编排是否完成
if (!this.isScheduleCompleted(row.id)) {
this.$message.warning('请先完成编排后再进行调度')
return
}
this.$router.push({
path: '/martial/dispatch/list',
query: { competitionId: row.id }
})
},
// 格式化日期范围
formatDateRange(startTime, endTime) {
if (!startTime || !endTime) return '-'
// 简单格式化,只显示日期部分
const start = startTime.split(' ')[0]
const end = endTime.split(' ')[0]
return `${start} ~ ${end}`
},
getStatusType(status) {
const statusMap = {
1: 'info', // 未开始
2: 'success', // 报名中
3: 'warning', // 进行中
4: 'info' // 已结束
}
return statusMap[status] || 'info'
},
getStatusText(status) {
const statusMap = {
1: '未开始',
2: '报名中',
3: '进行中',
4: '已结束'
}
return statusMap[status] || '未知'
}
}
}
</script>
<style lang="scss" scoped>
.martial-order-container {
min-height: 100%;
padding: 15px;
background: #fff;
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
}
.tip-message {
display: flex;
gap: 12px;
padding: 10px 14px;
margin-bottom: 15px;
background: linear-gradient(90deg, #ffd54f 0%, #ffecb3 100%);
border: 1px solid #ffc107;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
.tip-header {
flex-shrink: 0;
.tip-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: #ff9800;
color: #fff;
font-size: 11px;
font-weight: bold;
border-radius: 50%;
}
}
.tip-content {
flex: 1;
color: #5d4037;
font-size: 12px;
line-height: 1.5;
.tip-subtitle {
margin-top: 3px;
color: #6d4c41;
font-size: 11px;
font-style: italic;
}
}
}
.search-form {
margin-bottom: 15px;
}
.amount-text {
color: #e6a23c;
font-weight: 600;
font-size: 14px;
}
.pagination {
margin-top: 15px;
text-align: right;
}
}
</style>

View File

@@ -1,335 +0,0 @@
<template>
<div class="martial-order-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">订单管理</h2>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索订单号/用户"
clearable
size="small"
style="width: 240px"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="searchForm.status"
placeholder="状态"
clearable
size="small"
style="width: 180px"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
size="small"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="orderNo" label="订单号" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="userName" label="用户" width="100"></el-table-column>
<el-table-column prop="competitionName" label="赛事" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column prop="amount" label="金额" width="100" align="center">
<template #default="scope">
<span class="amount-text">¥{{ scope.row.amount }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90" align="center">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)" size="small">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
<el-table-column label="操作" width="320" align="center" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="handleRegistrationDetail(scope.row)">报名详情</el-button>
<el-button type="success" size="small" @click="handleSchedule(scope.row)" :disabled="!scope.row.canSchedule">编排</el-button>
<el-button type="warning" size="small" @click="handleDispatch(scope.row)" :disabled="!scope.row.canDispatch">调度</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next"
:total="pagination.total"
small
></el-pagination>
</el-card>
</div>
</template>
<script>
export default {
name: 'MartialOrderList',
data() {
return {
loading: false,
searchForm: {
keyword: '',
status: null
},
// 使用静态数据,方便演示功能
allTableData: [
{
id: 1,
orderNo: 'ORD20251127001',
userName: '张三',
competitionName: '第三十届武术大赛',
amount: 999.00,
status: 1,
createTime: '2025-11-27 10:30:00',
canSchedule: true, // 可以编排
canDispatch: false // 未完成编排,不可调度
},
{
id: 2,
orderNo: 'ORD20251127002',
userName: '李四',
competitionName: '第三十届武术大赛',
amount: 1245.00,
status: 1,
createTime: '2025-11-27 11:00:00',
canSchedule: true,
canDispatch: true // 已完成编排,可以调度
},
{
id: 3,
orderNo: 'ORD20251127003',
userName: '王五',
competitionName: '青少年武术锦标赛',
amount: 1580.00,
status: 1,
createTime: '2025-11-27 14:20:00',
canSchedule: true,
canDispatch: false
},
{
id: 4,
orderNo: 'ORD20251126001',
userName: '赵六',
competitionName: '第三十届武术大赛',
amount: 2300.00,
status: 0,
createTime: '2025-11-26 09:15:00',
canSchedule: false,
canDispatch: false
},
{
id: 5,
orderNo: 'ORD20251126002',
userName: '孙七',
competitionName: '全国武术公开赛',
amount: 1850.00,
status: 1,
createTime: '2025-11-26 16:45:00',
canSchedule: true,
canDispatch: false
}
],
tableData: [],
pagination: {
current: 1,
size: 10,
total: 0
}
}
},
mounted() {
// 初始化时直接加载数据
this.fetchData()
},
methods: {
fetchData() {
this.loading = true
// 模拟API请求延迟
setTimeout(() => {
// 过滤数据
let filteredData = [...this.allTableData]
// 搜索过滤
if (this.searchForm.keyword) {
const keyword = this.searchForm.keyword.toLowerCase()
filteredData = filteredData.filter(item =>
item.orderNo.toLowerCase().includes(keyword) ||
item.userName.toLowerCase().includes(keyword) ||
item.competitionName.toLowerCase().includes(keyword)
)
}
// 状态过滤
if (this.searchForm.status !== null && this.searchForm.status !== '') {
filteredData = filteredData.filter(item =>
item.status === parseInt(this.searchForm.status)
)
}
this.pagination.total = filteredData.length
// 分页处理
const start = (this.pagination.current - 1) * this.pagination.size
const end = start + this.pagination.size
this.tableData = filteredData.slice(start, end)
this.loading = false
}, 300)
},
handleSearch() {
this.pagination.current = 1
this.fetchData()
},
handleSizeChange(size) {
this.pagination.size = size
this.fetchData()
},
handleCurrentChange(current) {
this.pagination.current = current
this.fetchData()
},
// 查看报名详情
handleRegistrationDetail(row) {
this.$router.push({
path: '/martial/registration/detail',
query: { orderId: row.id }
})
},
// 编排
handleSchedule(row) {
if (!row.canSchedule) {
this.$message.warning('该订单暂不可编排')
return
}
this.$router.push({
path: '/martial/schedule/list',
query: { orderId: row.id }
})
},
// 调度
handleDispatch(row) {
if (!row.canDispatch) {
this.$message.warning('请先完成编排')
return
}
this.$router.push({
path: '/martial/dispatch/list',
query: { orderId: row.id }
})
},
getStatusType(status) {
const statusMap = {
0: 'warning',
1: 'success',
2: 'info',
3: 'danger'
}
return statusMap[status] || 'info'
},
getStatusText(status) {
const statusMap = {
0: '待支付',
1: '已支付',
2: '已取消',
3: '已退款'
}
return statusMap[status] || '未知'
}
}
}
</script>
<style lang="scss" scoped>
.martial-order-container {
min-height: 100%;
padding: 15px;
background: #fff;
.page-header {
margin-bottom: 15px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
}
.tip-message {
display: flex;
gap: 12px;
padding: 10px 14px;
margin-bottom: 15px;
background: linear-gradient(90deg, #ffd54f 0%, #ffecb3 100%);
border: 1px solid #ffc107;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
.tip-header {
flex-shrink: 0;
.tip-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: #ff9800;
color: #fff;
font-size: 11px;
font-weight: bold;
border-radius: 50%;
}
}
.tip-content {
flex: 1;
color: #5d4037;
font-size: 12px;
line-height: 1.5;
.tip-subtitle {
margin-top: 3px;
color: #6d4c41;
font-size: 11px;
font-style: italic;
}
}
}
.search-form {
margin-bottom: 15px;
}
.amount-text {
color: #e6a23c;
font-weight: 600;
font-size: 14px;
}
.pagination {
margin-top: 15px;
text-align: right;
}
}
</style>

View File

@@ -0,0 +1,993 @@
<template>
<div class="participant-container">
<!-- 列表视图 -->
<div v-if="currentView === 'list'" class="list-view">
<el-card shadow="hover">
<div class="list-header">
<h2 class="page-title">参赛选手管理</h2>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">
添加选手
</el-button>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索选手姓名"
clearable
size="small"
style="width: 240px"
>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-select v-model="searchForm.competitionId" placeholder="选择赛事" clearable size="small" style="width: 200px">
<el-option label="全部赛事" :value="null" />
<el-option
v-for="item in allCompetitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="displayList"
border
stripe
style="width: 100%"
class="data-table"
>
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
prop="playerName"
label="选手姓名"
width="120"
/>
<el-table-column
prop="competitionName"
label="所属赛事"
min-width="180"
show-overflow-tooltip
/>
<el-table-column
prop="projectName"
label="参赛项目"
width="120"
/>
<el-table-column
prop="category"
label="组别"
width="100"
/>
<el-table-column
label="性别"
width="80"
align="center"
>
<template #default="scope">
<el-tag :type="scope.row.gender === 1 ? 'primary' : 'danger'" size="small">
{{ scope.row.gender === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="年龄"
width="80"
align="center"
>
<template #default="scope">
{{ scope.row.age === -1 || scope.row.age === null || scope.row.age === undefined ? '--' : scope.row.age }}
</template>
</el-table-column>
<el-table-column
prop="organization"
label="所属单位"
min-width="150"
show-overflow-tooltip
/>
<el-table-column
prop="contactPhone"
label="联系电话"
width="120"
/>
<el-table-column
prop="orderNum"
label="出场顺序"
width="100"
align="center"
/>
<el-table-column
label="操作"
width="220"
fixed="right"
align="center"
>
<template #default="scope">
<el-button
type="primary"
link
size="small"
icon="el-icon-view"
@click="handleView(scope.row)"
>
查看
</el-button>
<el-button
type="warning"
link
size="small"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination.total > 0"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
style="margin-top: 20px; text-align: right"
/>
</el-card>
</div>
<!-- 表单视图 -->
<div v-else class="form-view">
<el-card shadow="hover" v-loading="loading">
<div class="page-header">
<el-button
icon="el-icon-arrow-left"
@click="backToList"
>
返回列表
</el-button>
<h2 class="page-title">{{ pageTitle }}</h2>
<div class="header-actions" v-if="currentView !== 'view'">
<el-button @click="backToList">取消</el-button>
<el-button type="primary" @click="handleSave">
{{ currentView === 'create' ? '创建' : '保存' }}
</el-button>
</div>
<div class="header-actions" v-else>
<el-button type="primary" @click="switchToEdit">编辑</el-button>
</div>
</div>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="currentView === 'view'"
class="participant-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-user"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="选手姓名" prop="playerName">
<el-input
v-model="formData.playerName"
placeholder="请输入选手姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄" prop="age">
<el-input-number
v-model="formData.age"
:min="6"
:max="100"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input
v-model="formData.idCard"
placeholder="请输入身份证号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所属单位" prop="organization">
<el-input
v-model="formData.organization"
placeholder="请输入所属单位"
/>
</el-form-item>
</div>
<!-- 赛事信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-trophy"></i>
赛事信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="formData.competitionId"
placeholder="请选择赛事"
style="width: 100%"
@change="handleCompetitionChange"
>
<el-option
v-for="item in availableCompetitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛项目" prop="projectId">
<el-select
v-model="formData.projectId"
placeholder="请选择参赛项目"
style="width: 100%"
@change="handleProjectChange"
>
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组别" prop="category">
<el-input
v-model="formData.category"
placeholder="例如:成年男子组"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出场顺序" prop="orderNum">
<el-input-number
v-model="formData.orderNum"
:min="1"
:max="9999"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 其他信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
其他信息
</div>
<el-form-item label="选手简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入选手简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注"
/>
</el-form-item>
</div>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
import { getInfoPublishList } from '@/api/martial/infoPublish'
import { getProjectsByCompetition } from '@/api/martial/project'
import {
getParticipantList,
getParticipantDetail,
addParticipant,
updateParticipant,
removeParticipant
} from '@/api/martial/participant'
export default {
name: 'ParticipantManagement',
data() {
return {
loading: false,
currentView: 'list', // list, create, edit, view
participantId: null,
searchForm: {
keyword: '',
competitionId: null
},
pagination: {
current: 1,
size: 10,
total: 0
},
competitionOptions: [], // 已发布的可报名赛事列表(用于新建)
allCompetitionOptions: [], // 所有赛事列表(用于搜索和编辑)
projectOptions: [], // 项目列表
participantList: [],
formData: {
orderId: null,
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
},
formRules: {
playerName: [
{ required: true, message: '请输入选手姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
competitionId: [
{ required: true, message: '请选择赛事', trigger: 'change' }
],
projectId: [
{ required: true, message: '请选择参赛项目', trigger: 'change' }
]
}
};
},
computed: {
pageTitle() {
const titleMap = {
create: '添加参赛选手',
edit: '编辑参赛选手',
view: '查看参赛选手'
};
return titleMap[this.currentView] || '参赛选手信息';
},
displayList() {
return this.participantList;
},
// 根据不同模式返回不同的赛事选项
availableCompetitionOptions() {
// 编辑和查看模式:显示所有赛事(因为可能编辑已过报名期的选手)
if (this.currentView === 'edit' || this.currentView === 'view') {
return this.allCompetitionOptions;
}
// 新建模式:只显示可报名的赛事
return this.competitionOptions;
}
},
watch: {
'$route.query': {
handler(query) {
this.initPage();
},
immediate: true
}
},
mounted() {
this.loadAvailableCompetitions();
this.loadAllCompetitions();
},
methods: {
initPage() {
const { mode, id } = this.$route.query;
this.currentView = mode || 'list';
// 不使用 parseInt保持 ID 为字符串避免精度丢失
this.participantId = id || null;
if (this.currentView === 'list') {
this.loadParticipantList();
} else if (this.currentView !== 'list' && this.participantId) {
this.loadParticipantData();
} else if (this.currentView === 'create') {
this.resetFormData();
}
},
// 加载可报名的赛事(从已发布的信息中获取)
loadAvailableCompetitions() {
getInfoPublishList(1, 100, { isPublished: 1 })
.then(res => {
console.log('已发布信息列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const publishedCompetitionIds = new Set(
responseData.records
.filter(item => item.competitionId)
.map(item => item.competitionId)
);
console.log('已发布的赛事ID列表:', Array.from(publishedCompetitionIds));
if (publishedCompetitionIds.size > 0) {
this.loadPublishedCompetitions(Array.from(publishedCompetitionIds));
} else {
// 如果没有发布信息,直接加载所有赛事作为可报名赛事
console.log('没有已发布信息,加载所有赛事');
this.loadPublishedCompetitions([]);
}
}
})
.catch(err => {
console.error('加载已发布信息列表失败', err);
// 出错时也加载所有赛事
this.loadPublishedCompetitions([]);
});
},
// 加载已发布的赛事详细信息,并过滤出可报名的赛事
loadPublishedCompetitions(competitionIds) {
getCompetitionList(1, 100, {})
.then(res => {
console.log('赛事列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const now = new Date();
this.competitionOptions = responseData.records
.filter(item => {
// 如果没有发布信息competitionIds为空数组则显示所有在报名期内的赛事
if (competitionIds.length > 0 && !competitionIds.includes(item.id)) {
return false;
}
// 检查报名时间
if (!item.registrationStartTime || !item.registrationEndTime) {
return false;
}
const regStart = new Date(item.registrationStartTime);
const regEnd = new Date(item.registrationEndTime);
return now >= regStart && now <= regEnd;
})
.map(item => ({
id: item.id,
competitionName: item.competitionName,
registrationStartTime: item.registrationStartTime,
registrationEndTime: item.registrationEndTime
}));
console.log('可报名的赛事列表:', this.competitionOptions);
if (this.competitionOptions.length === 0) {
console.log('当前没有可以报名的赛事(报名时间范围外)');
}
}
})
.catch(err => {
console.error('加载赛事列表失败', err);
this.$message.error('加载赛事列表失败');
});
},
// 加载所有赛事(用于搜索过滤)
loadAllCompetitions() {
getCompetitionList(1, 100, {})
.then(res => {
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.allCompetitionOptions = responseData.records.map(item => ({
id: item.id,
competitionName: item.competitionName
}));
}
})
.catch(err => {
console.error('加载所有赛事失败', err);
});
},
loadParticipantList() {
this.loading = true;
const params = {};
if (this.searchForm.keyword) {
params.playerName = this.searchForm.keyword;
}
if (this.searchForm.competitionId) {
params.competitionId = this.searchForm.competitionId;
}
getParticipantList(null, this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('参赛人员列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.participantList = responseData.records;
this.pagination.total = responseData.total || 0;
}
})
.catch(err => {
console.error('加载参赛人员列表失败', err);
this.$message.error('加载参赛人员列表失败');
})
.finally(() => {
this.loading = false;
});
},
loadParticipantData() {
if (!this.participantId) return;
this.loading = true;
getParticipantDetail(this.participantId)
.then(res => {
const detailData = res.data?.data;
if (detailData) {
this.formData = { ...detailData };
// 将 attachments 字符串转换为数组(前端需要数组格式)
if (typeof this.formData.attachments === 'string') {
try {
this.formData.attachments = JSON.parse(this.formData.attachments);
} catch (e) {
console.warn('解析 attachments 失败,使用空数组', e);
this.formData.attachments = [];
}
} else if (!this.formData.attachments) {
this.formData.attachments = [];
}
// 加载该赛事的项目列表
if (detailData.competitionId) {
this.loadProjectsByCompetition(detailData.competitionId);
}
}
})
.catch(err => {
console.error('加载参赛人员详情失败', err);
this.$message.error('加载参赛人员详情失败');
})
.finally(() => {
this.loading = false;
});
},
handlePageChange(current) {
this.pagination.current = current;
this.loadParticipantList();
},
handleSizeChange(size) {
this.pagination.size = size;
this.pagination.current = 1;
this.loadParticipantList();
},
handleSearch() {
this.pagination.current = 1;
this.loadParticipantList();
},
handleReset() {
this.searchForm = {
keyword: '',
competitionId: null
};
this.pagination.current = 1;
this.loadParticipantList();
},
handleCreate() {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'create' }
});
},
handleView(row) {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'view', id: row.id }
});
},
handleEdit(row) {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'edit', id: row.id }
});
},
switchToEdit() {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'edit', id: this.participantId }
});
},
handleDelete(row) {
this.$confirm('确定要删除该选手吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
removeParticipant(row.id.toString())
.then(res => {
this.$message.success('删除成功');
this.loadParticipantList();
})
.catch(err => {
console.error('删除失败', err);
this.$message.error('删除失败');
})
.finally(() => {
this.loading = false;
});
}).catch(() => {});
},
handleCompetitionChange(competitionId) {
// 从可用的选项列表中查找赛事
const competition = this.availableCompetitionOptions.find(item => item.id === competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
// 加载该赛事的项目列表
this.loadProjectsByCompetition(competitionId);
// 清空已选项目
this.formData.projectId = null;
},
handleProjectChange(projectId) {
const project = this.projectOptions.find(item => item.id === projectId);
if (project) {
// 自动填充组别信息
if (project.category && !this.formData.category) {
this.formData.category = project.category;
}
}
},
loadProjectsByCompetition(competitionId) {
if (!competitionId) {
this.projectOptions = [];
return;
}
console.log('加载赛事项目赛事ID:', competitionId);
getProjectsByCompetition(competitionId)
.then(res => {
console.log('项目列表返回数据:', res);
const responseData = res.data?.data;
// 兼容两种数据格式分页数据有records和直接数组
let projectList = [];
if (responseData) {
if (Array.isArray(responseData)) {
// 直接是数组
projectList = responseData;
console.log('返回的是直接数组,长度:', projectList.length);
} else if (responseData.records && Array.isArray(responseData.records)) {
// 分页数据
projectList = responseData.records;
console.log('返回的是分页数据,记录数:', projectList.length);
} else {
console.warn('未知的数据格式:', responseData);
}
}
if (projectList.length > 0) {
this.projectOptions = projectList.map(item => ({
id: item.id,
projectName: item.projectName,
projectCode: item.projectCode,
category: item.category
}));
console.log('可选项目列表:', this.projectOptions);
} else {
this.projectOptions = [];
console.log('该赛事没有项目数据');
this.$message.warning('该赛事还没有配置项目,请先添加项目');
}
})
.catch(err => {
console.error('加载项目列表失败', err);
this.$message.error('加载项目列表失败: ' + (err.message || '未知错误'));
this.projectOptions = [];
});
},
handleSave() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.loading = true;
// 确保有赛事名称
if (!this.formData.competitionName) {
const competition = this.availableCompetitionOptions.find(item => item.id === this.formData.competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
}
const submitData = { ...this.formData };
console.log('=== 提交前的 formData ===', this.formData);
console.log('formData.orderId:', this.formData.orderId);
// 将 attachments 数组转换为 JSON 字符串(后端需要 String 类型)
if (Array.isArray(submitData.attachments)) {
submitData.attachments = JSON.stringify(submitData.attachments);
}
// 临时方案: 如果没有 orderId使用 competitionId 作为 orderId
// 警告: 这是临时解决方案,后续应修改数据库表结构或后端逻辑
if (!submitData.orderId && submitData.competitionId) {
submitData.orderId = submitData.competitionId;
console.warn('⚠️ 临时方案: 使用 competitionId 作为 orderId', submitData.competitionId);
}
console.log('=== 提交的数据 submitData ===', submitData);
console.log('submitData.orderId:', submitData.orderId);
if (this.currentView === 'create') {
// 新建
addParticipant(submitData)
.then(res => {
this.$message.success('添加成功');
this.backToList();
})
.catch(err => {
console.error('添加失败', err);
this.$message.error('添加失败');
})
.finally(() => {
this.loading = false;
});
} else if (this.currentView === 'edit') {
// 编辑
submitData.id = this.participantId;
updateParticipant(submitData)
.then(res => {
this.$message.success('保存成功');
this.backToList();
})
.catch(err => {
console.error('保存失败', err);
this.$message.error('保存失败');
})
.finally(() => {
this.loading = false;
});
}
} else {
this.$message.error('请完善必填信息');
}
});
},
backToList() {
this.$router.push({
path: '/martial/participant/list'
});
},
resetFormData() {
this.formData = {
orderId: null,
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
};
}
}
};
</script>
<style lang="scss" scoped>
.participant-container {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.page-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.search-form {
margin-bottom: 20px;
}
.data-table {
:deep(.el-table__header) {
th {
background-color: #fafafa;
color: #333;
font-weight: 600;
}
}
:deep(.el-button--text) {
padding: 0 8px;
}
}
.page-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
.page-title {
flex: 1;
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 10px;
}
}
.participant-form {
max-width: 1200px;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 18px;
}
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
</style>

View File

@@ -0,0 +1,990 @@
<template>
<div class="participant-container">
<!-- 列表视图 -->
<div v-if="currentView === 'list'" class="list-view">
<el-card shadow="hover">
<div class="list-header">
<h2 class="page-title">参赛选手管理</h2>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">
添加选手
</el-button>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索选手姓名"
clearable
size="small"
style="width: 240px"
>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-select v-model="searchForm.competitionId" placeholder="选择赛事" clearable size="small" style="width: 200px">
<el-option label="全部赛事" :value="null" />
<el-option
v-for="item in allCompetitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="displayList"
border
stripe
style="width: 100%"
class="data-table"
>
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
prop="playerName"
label="选手姓名"
width="120"
/>
<el-table-column
prop="competitionName"
label="所属赛事"
min-width="180"
show-overflow-tooltip
/>
<el-table-column
prop="projectName"
label="参赛项目"
width="120"
/>
<el-table-column
prop="category"
label="组别"
width="100"
/>
<el-table-column
label="性别"
width="80"
align="center"
>
<template #default="scope">
<el-tag :type="scope.row.gender === 1 ? 'primary' : 'danger'" size="small">
{{ scope.row.gender === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="80"
align="center"
/>
<el-table-column
prop="organization"
label="所属单位"
min-width="150"
show-overflow-tooltip
/>
<el-table-column
prop="contactPhone"
label="联系电话"
width="120"
/>
<el-table-column
prop="orderNum"
label="出场顺序"
width="100"
align="center"
/>
<el-table-column
label="操作"
width="220"
fixed="right"
align="center"
>
<template #default="scope">
<el-button
type="primary"
link
size="small"
icon="el-icon-view"
@click="handleView(scope.row)"
>
查看
</el-button>
<el-button
type="warning"
link
size="small"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination.total > 0"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
style="margin-top: 20px; text-align: right"
/>
</el-card>
</div>
<!-- 表单视图 -->
<div v-else class="form-view">
<el-card shadow="hover" v-loading="loading">
<div class="page-header">
<el-button
icon="el-icon-arrow-left"
@click="backToList"
>
返回列表
</el-button>
<h2 class="page-title">{{ pageTitle }}</h2>
<div class="header-actions" v-if="currentView !== 'view'">
<el-button @click="backToList">取消</el-button>
<el-button type="primary" @click="handleSave">
{{ currentView === 'create' ? '创建' : '保存' }}
</el-button>
</div>
<div class="header-actions" v-else>
<el-button type="primary" @click="switchToEdit">编辑</el-button>
</div>
</div>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="currentView === 'view'"
class="participant-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-user"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="选手姓名" prop="playerName">
<el-input
v-model="formData.playerName"
placeholder="请输入选手姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄" prop="age">
<el-input-number
v-model="formData.age"
:min="6"
:max="100"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input
v-model="formData.idCard"
placeholder="请输入身份证号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所属单位" prop="organization">
<el-input
v-model="formData.organization"
placeholder="请输入所属单位"
/>
</el-form-item>
</div>
<!-- 赛事信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-trophy"></i>
赛事信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="formData.competitionId"
placeholder="请选择赛事"
style="width: 100%"
@change="handleCompetitionChange"
>
<el-option
v-for="item in availableCompetitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛项目" prop="projectId">
<el-select
v-model="formData.projectId"
placeholder="请选择参赛项目"
style="width: 100%"
@change="handleProjectChange"
>
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组别" prop="category">
<el-input
v-model="formData.category"
placeholder="例如:成年男子组"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出场顺序" prop="orderNum">
<el-input-number
v-model="formData.orderNum"
:min="1"
:max="9999"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 其他信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
其他信息
</div>
<el-form-item label="选手简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入选手简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注"
/>
</el-form-item>
</div>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
import { getInfoPublishList } from '@/api/martial/infoPublish'
import { getProjectsByCompetition } from '@/api/martial/project'
import {
getParticipantList,
getParticipantDetail,
addParticipant,
updateParticipant,
removeParticipant
} from '@/api/martial/participant'
export default {
name: 'ParticipantManagement',
data() {
return {
loading: false,
currentView: 'list', // list, create, edit, view
participantId: null,
searchForm: {
keyword: '',
competitionId: null
},
pagination: {
current: 1,
size: 10,
total: 0
},
competitionOptions: [], // 已发布的可报名赛事列表(用于新建)
allCompetitionOptions: [], // 所有赛事列表(用于搜索和编辑)
projectOptions: [], // 项目列表
participantList: [],
formData: {
orderId: null,
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
},
formRules: {
playerName: [
{ required: true, message: '请输入选手姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
competitionId: [
{ required: true, message: '请选择赛事', trigger: 'change' }
],
projectId: [
{ required: true, message: '请选择参赛项目', trigger: 'change' }
]
}
};
},
computed: {
pageTitle() {
const titleMap = {
create: '添加参赛选手',
edit: '编辑参赛选手',
view: '查看参赛选手'
};
return titleMap[this.currentView] || '参赛选手信息';
},
displayList() {
return this.participantList;
},
// 根据不同模式返回不同的赛事选项
availableCompetitionOptions() {
// 编辑和查看模式:显示所有赛事(因为可能编辑已过报名期的选手)
if (this.currentView === 'edit' || this.currentView === 'view') {
return this.allCompetitionOptions;
}
// 新建模式:只显示可报名的赛事
return this.competitionOptions;
}
},
watch: {
'$route.query': {
handler(query) {
this.initPage();
},
immediate: true
}
},
mounted() {
this.loadAvailableCompetitions();
this.loadAllCompetitions();
},
methods: {
initPage() {
const { mode, id } = this.$route.query;
this.currentView = mode || 'list';
// 不使用 parseInt保持 ID 为字符串避免精度丢失
this.participantId = id || null;
if (this.currentView === 'list') {
this.loadParticipantList();
} else if (this.currentView !== 'list' && this.participantId) {
this.loadParticipantData();
} else if (this.currentView === 'create') {
this.resetFormData();
}
},
// 加载可报名的赛事(从已发布的信息中获取)
loadAvailableCompetitions() {
getInfoPublishList(1, 100, { isPublished: 1 })
.then(res => {
console.log('已发布信息列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const publishedCompetitionIds = new Set(
responseData.records
.filter(item => item.competitionId)
.map(item => item.competitionId)
);
console.log('已发布的赛事ID列表:', Array.from(publishedCompetitionIds));
if (publishedCompetitionIds.size > 0) {
this.loadPublishedCompetitions(Array.from(publishedCompetitionIds));
} else {
// 如果没有发布信息,直接加载所有赛事作为可报名赛事
console.log('没有已发布信息,加载所有赛事');
this.loadPublishedCompetitions([]);
}
}
})
.catch(err => {
console.error('加载已发布信息列表失败', err);
// 出错时也加载所有赛事
this.loadPublishedCompetitions([]);
});
},
// 加载已发布的赛事详细信息,并过滤出可报名的赛事
loadPublishedCompetitions(competitionIds) {
getCompetitionList(1, 100, {})
.then(res => {
console.log('赛事列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const now = new Date();
this.competitionOptions = responseData.records
.filter(item => {
// 如果没有发布信息competitionIds为空数组则显示所有在报名期内的赛事
if (competitionIds.length > 0 && !competitionIds.includes(item.id)) {
return false;
}
// 检查报名时间
if (!item.registrationStartTime || !item.registrationEndTime) {
return false;
}
const regStart = new Date(item.registrationStartTime);
const regEnd = new Date(item.registrationEndTime);
return now >= regStart && now <= regEnd;
})
.map(item => ({
id: item.id,
competitionName: item.competitionName,
registrationStartTime: item.registrationStartTime,
registrationEndTime: item.registrationEndTime
}));
console.log('可报名的赛事列表:', this.competitionOptions);
if (this.competitionOptions.length === 0) {
console.log('当前没有可以报名的赛事(报名时间范围外)');
}
}
})
.catch(err => {
console.error('加载赛事列表失败', err);
this.$message.error('加载赛事列表失败');
});
},
// 加载所有赛事(用于搜索过滤)
loadAllCompetitions() {
getCompetitionList(1, 100, {})
.then(res => {
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.allCompetitionOptions = responseData.records.map(item => ({
id: item.id,
competitionName: item.competitionName
}));
}
})
.catch(err => {
console.error('加载所有赛事失败', err);
});
},
loadParticipantList() {
this.loading = true;
const params = {};
if (this.searchForm.keyword) {
params.playerName = this.searchForm.keyword;
}
if (this.searchForm.competitionId) {
params.competitionId = this.searchForm.competitionId;
}
getParticipantList(null, this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('参赛人员列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.participantList = responseData.records;
this.pagination.total = responseData.total || 0;
}
})
.catch(err => {
console.error('加载参赛人员列表失败', err);
this.$message.error('加载参赛人员列表失败');
})
.finally(() => {
this.loading = false;
});
},
loadParticipantData() {
if (!this.participantId) return;
this.loading = true;
getParticipantDetail(this.participantId)
.then(res => {
const detailData = res.data?.data;
if (detailData) {
this.formData = { ...detailData };
// 将 attachments 字符串转换为数组(前端需要数组格式)
if (typeof this.formData.attachments === 'string') {
try {
this.formData.attachments = JSON.parse(this.formData.attachments);
} catch (e) {
console.warn('解析 attachments 失败,使用空数组', e);
this.formData.attachments = [];
}
} else if (!this.formData.attachments) {
this.formData.attachments = [];
}
// 加载该赛事的项目列表
if (detailData.competitionId) {
this.loadProjectsByCompetition(detailData.competitionId);
}
}
})
.catch(err => {
console.error('加载参赛人员详情失败', err);
this.$message.error('加载参赛人员详情失败');
})
.finally(() => {
this.loading = false;
});
},
handlePageChange(current) {
this.pagination.current = current;
this.loadParticipantList();
},
handleSizeChange(size) {
this.pagination.size = size;
this.pagination.current = 1;
this.loadParticipantList();
},
handleSearch() {
this.pagination.current = 1;
this.loadParticipantList();
},
handleReset() {
this.searchForm = {
keyword: '',
competitionId: null
};
this.pagination.current = 1;
this.loadParticipantList();
},
handleCreate() {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'create' }
});
},
handleView(row) {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'view', id: row.id }
});
},
handleEdit(row) {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'edit', id: row.id }
});
},
switchToEdit() {
this.$router.push({
path: '/martial/participant/list',
query: { mode: 'edit', id: this.participantId }
});
},
handleDelete(row) {
this.$confirm('确定要删除该选手吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
removeParticipant(row.id.toString())
.then(res => {
this.$message.success('删除成功');
this.loadParticipantList();
})
.catch(err => {
console.error('删除失败', err);
this.$message.error('删除失败');
})
.finally(() => {
this.loading = false;
});
}).catch(() => {});
},
handleCompetitionChange(competitionId) {
// 从可用的选项列表中查找赛事
const competition = this.availableCompetitionOptions.find(item => item.id === competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
// 加载该赛事的项目列表
this.loadProjectsByCompetition(competitionId);
// 清空已选项目
this.formData.projectId = null;
},
handleProjectChange(projectId) {
const project = this.projectOptions.find(item => item.id === projectId);
if (project) {
// 自动填充组别信息
if (project.category && !this.formData.category) {
this.formData.category = project.category;
}
}
},
loadProjectsByCompetition(competitionId) {
if (!competitionId) {
this.projectOptions = [];
return;
}
console.log('加载赛事项目赛事ID:', competitionId);
getProjectsByCompetition(competitionId)
.then(res => {
console.log('项目列表返回数据:', res);
const responseData = res.data?.data;
// 兼容两种数据格式分页数据有records和直接数组
let projectList = [];
if (responseData) {
if (Array.isArray(responseData)) {
// 直接是数组
projectList = responseData;
console.log('返回的是直接数组,长度:', projectList.length);
} else if (responseData.records && Array.isArray(responseData.records)) {
// 分页数据
projectList = responseData.records;
console.log('返回的是分页数据,记录数:', projectList.length);
} else {
console.warn('未知的数据格式:', responseData);
}
}
if (projectList.length > 0) {
this.projectOptions = projectList.map(item => ({
id: item.id,
projectName: item.projectName,
projectCode: item.projectCode,
category: item.category
}));
console.log('可选项目列表:', this.projectOptions);
} else {
this.projectOptions = [];
console.log('该赛事没有项目数据');
this.$message.warning('该赛事还没有配置项目,请先添加项目');
}
})
.catch(err => {
console.error('加载项目列表失败', err);
this.$message.error('加载项目列表失败: ' + (err.message || '未知错误'));
this.projectOptions = [];
});
},
handleSave() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.loading = true;
// 确保有赛事名称
if (!this.formData.competitionName) {
const competition = this.availableCompetitionOptions.find(item => item.id === this.formData.competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
}
const submitData = { ...this.formData };
console.log('=== 提交前的 formData ===', this.formData);
console.log('formData.orderId:', this.formData.orderId);
// 将 attachments 数组转换为 JSON 字符串(后端需要 String 类型)
if (Array.isArray(submitData.attachments)) {
submitData.attachments = JSON.stringify(submitData.attachments);
}
// 临时方案: 如果没有 orderId使用 competitionId 作为 orderId
// 警告: 这是临时解决方案,后续应修改数据库表结构或后端逻辑
if (!submitData.orderId && submitData.competitionId) {
submitData.orderId = submitData.competitionId;
console.warn('⚠️ 临时方案: 使用 competitionId 作为 orderId', submitData.competitionId);
}
console.log('=== 提交的数据 submitData ===', submitData);
console.log('submitData.orderId:', submitData.orderId);
if (this.currentView === 'create') {
// 新建
addParticipant(submitData)
.then(res => {
this.$message.success('添加成功');
this.backToList();
})
.catch(err => {
console.error('添加失败', err);
this.$message.error('添加失败');
})
.finally(() => {
this.loading = false;
});
} else if (this.currentView === 'edit') {
// 编辑
submitData.id = this.participantId;
updateParticipant(submitData)
.then(res => {
this.$message.success('保存成功');
this.backToList();
})
.catch(err => {
console.error('保存失败', err);
this.$message.error('保存失败');
})
.finally(() => {
this.loading = false;
});
}
} else {
this.$message.error('请完善必填信息');
}
});
},
backToList() {
this.$router.push({
path: '/martial/participant/list'
});
},
resetFormData() {
this.formData = {
orderId: null,
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
};
}
}
};
</script>
<style lang="scss" scoped>
.participant-container {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.page-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.search-form {
margin-bottom: 20px;
}
.data-table {
:deep(.el-table__header) {
th {
background-color: #fafafa;
color: #333;
font-weight: 600;
}
}
:deep(.el-button--text) {
padding: 0 8px;
}
}
.page-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
.page-title {
flex: 1;
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 10px;
}
}
.participant-form {
max-width: 1200px;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 18px;
}
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
</style>

View File

@@ -0,0 +1,961 @@
<template>
<div class="participant-list">
<div class="list-header">
<h2 class="page-title">参赛选手管理</h2>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">
添加选手
</el-button>
</div>
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.keyword"
placeholder="搜索选手姓名"
clearable
size="small"
style="width: 240px"
>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-select v-model="searchForm.competitionId" placeholder="选择赛事" clearable size="small" style="width: 200px">
<el-option label="全部赛事" :value="null" />
<el-option
v-for="item in allCompetitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="displayList"
border
stripe
style="width: 100%"
class="data-table"
>
<el-table-column
type="index"
label="序号"
width="60"
align="center"
/>
<el-table-column
prop="playerName"
label="选手姓名"
width="120"
/>
<el-table-column
prop="competitionName"
label="所属赛事"
min-width="180"
show-overflow-tooltip
/>
<el-table-column
prop="projectName"
label="参赛项目"
width="120"
/>
<el-table-column
prop="category"
label="组别"
width="100"
/>
<el-table-column
label="性别"
width="80"
align="center"
>
<template #default="scope">
<el-tag :type="scope.row.gender === 1 ? 'primary' : 'danger'" size="small">
{{ scope.row.gender === 1 ? '男' : '女' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="80"
align="center"
/>
<el-table-column
prop="organization"
label="所属单位"
min-width="150"
show-overflow-tooltip
/>
<el-table-column
prop="contactPhone"
label="联系电话"
width="120"
/>
<el-table-column
prop="orderNum"
label="出场顺序"
width="100"
align="center"
/>
<el-table-column
label="操作"
width="180"
fixed="right"
align="center"
>
<template #default="scope">
<el-button
type="primary"
link
size="small"
icon="el-icon-view"
@click="handleView(scope.row)"
>
查看
</el-button>
<el-button
type="warning"
link
size="small"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-if="pagination.total > 0"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
style="margin-top: 20px; text-align: right"
/>
<!-- 新增/编辑/查看弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="800px"
:close-on-click-modal="false"
@close="handleDialogClose"
top="5vh"
>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="dialogMode === 'view'"
class="participant-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-user"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="选手姓名" prop="playerName">
<el-input
v-model="formData.playerName"
placeholder="请输入选手姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄" prop="age">
<el-input-number
v-model="formData.age"
:min="6"
:max="100"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input
v-model="formData.idCard"
placeholder="请输入身份证号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所属单位" prop="organization">
<el-input
v-model="formData.organization"
placeholder="请输入所属单位"
/>
</el-form-item>
</div>
<!-- 赛事信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-trophy"></i>
赛事信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="formData.competitionId"
placeholder="请选择赛事"
style="width: 100%"
@change="handleCompetitionChange"
>
<el-option
v-for="item in competitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛项目" prop="projectId">
<el-select
v-model="formData.projectId"
placeholder="请选择参赛项目"
style="width: 100%"
@change="handleProjectChange"
>
<el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组别" prop="category">
<el-input
v-model="formData.category"
placeholder="例如:成年男子组"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出场顺序" prop="orderNum">
<el-input-number
v-model="formData.orderNum"
:min="1"
:max="9999"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 其他信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
其他信息
</div>
<el-form-item label="选手简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入选手简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注"
/>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button
v-if="dialogMode !== 'view'"
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>
确定
</el-button>
<el-button
v-else
type="primary"
@click="switchToEdit"
>
编辑
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import { getCompetitionList } from '@/api/martial/competition'
import { getInfoPublishList } from '@/api/martial/infoPublish'
import { getProjectsByCompetition } from '@/api/martial/project'
import {
getParticipantList,
getParticipantDetail,
addParticipant,
updateParticipant,
removeParticipant
} from '@/api/martial/participant'
export default {
name: 'ParticipantList',
data() {
return {
loading: false,
searchForm: {
keyword: '',
competitionId: null
},
pagination: {
current: 1,
size: 10,
total: 0
},
competitionOptions: [], // 可报名的赛事列表
allCompetitionOptions: [], // 所有赛事列表(用于搜索过滤)
projectOptions: [], // 项目列表
participantList: [],
dialogVisible: false,
dialogMode: 'create', // create, edit, view
submitLoading: false,
currentParticipantId: null,
formData: {
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
},
formRules: {
playerName: [
{ required: true, message: '请输入选手姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
competitionId: [
{ required: true, message: '请选择赛事', trigger: 'change' }
],
projectId: [
{ required: true, message: '请选择参赛项目', trigger: 'change' }
]
}
};
},
computed: {
dialogTitle() {
const titleMap = {
create: '添加参赛选手',
edit: '编辑参赛选手',
view: '查看参赛选手'
};
return titleMap[this.dialogMode] || '参赛选手信息';
},
displayList() {
return this.participantList;
}
},
mounted() {
this.loadAvailableCompetitions();
this.loadAllCompetitions();
},
methods: {
// 加载可报名的赛事(从已发布的信息中获取)
loadAvailableCompetitions() {
// 获取已发布的赛事信息publishStatus = 1 表示已发布)
getInfoPublishList(1, 100, { publishStatus: 1 })
.then(res => {
console.log('已发布信息列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const now = new Date();
// 从已发布的信息中提取赛事ID
const publishedCompetitionIds = new Set(
responseData.records
.filter(item => item.competitionId)
.map(item => item.competitionId)
);
console.log('已发布的赛事ID列表:', Array.from(publishedCompetitionIds));
// 如果有已发布的赛事,加载这些赛事的详细信息
if (publishedCompetitionIds.size > 0) {
this.loadPublishedCompetitions(Array.from(publishedCompetitionIds));
} else {
this.$message.warning('当前没有已发布的赛事');
this.competitionOptions = [];
}
}
})
.catch(err => {
console.error('加载已发布信息列表失败', err);
this.$message.error('加载已发布信息列表失败');
});
},
// 加载已发布的赛事详细信息,并过滤出可报名的赛事
loadPublishedCompetitions(competitionIds) {
getCompetitionList(1, 100, {})
.then(res => {
console.log('赛事列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
const now = new Date();
// 筛选出已发布且可以报名的赛事
this.competitionOptions = responseData.records
.filter(item => {
// 必须是已发布的赛事
if (!competitionIds.includes(item.id)) {
return false;
}
// 检查报名开始时间和结束时间
if (!item.registrationStartTime || !item.registrationEndTime) {
return false;
}
const regStart = new Date(item.registrationStartTime);
const regEnd = new Date(item.registrationEndTime);
// 当前时间在报名时间段内
return now >= regStart && now <= regEnd;
})
.map(item => ({
id: item.id,
competitionName: item.competitionName,
registrationStartTime: item.registrationStartTime,
registrationEndTime: item.registrationEndTime
}));
console.log('可报名的已发布赛事列表:', this.competitionOptions);
if (this.competitionOptions.length === 0) {
this.$message.warning('当前没有可以报名的赛事');
}
}
})
.catch(err => {
console.error('加载赛事列表失败', err);
this.$message.error('加载赛事列表失败');
});
},
// 加载所有赛事(用于搜索过滤)
loadAllCompetitions() {
getCompetitionList(1, 100, {})
.then(res => {
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.allCompetitionOptions = responseData.records.map(item => ({
id: item.id,
competitionName: item.competitionName
}));
}
})
.catch(err => {
console.error('加载所有赛事失败', err);
});
},
// 编辑时加载所有赛事到下拉框
loadAllCompetitionsForEdit() {
return getCompetitionList(1, 100, {})
.then(res => {
const responseData = res.data?.data;
if (responseData && responseData.records) {
// 编辑模式下competitionOptions 应该包含所有赛事
this.competitionOptions = responseData.records.map(item => ({
id: item.id,
competitionName: item.competitionName,
registrationStartTime: item.registrationStartTime,
registrationEndTime: item.registrationEndTime
}));
console.log('编辑模式 - 所有赛事列表:', this.competitionOptions);
}
})
.catch(err => {
console.error('加载所有赛事失败', err);
this.$message.error('加载所有赛事失败');
throw err;
});
},
loadParticipantList() {
this.loading = true;
const params = {};
if (this.searchForm.keyword) {
params.playerName = this.searchForm.keyword;
}
if (this.searchForm.competitionId) {
params.competitionId = this.searchForm.competitionId;
}
getParticipantList(null, this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('参赛人员列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.participantList = responseData.records;
this.pagination.total = responseData.total || 0;
}
})
.catch(err => {
console.error('加载参赛人员列表失败', err);
this.$message.error('加载参赛人员列表失败');
})
.finally(() => {
this.loading = false;
});
},
handlePageChange(current) {
this.pagination.current = current;
this.loadParticipantList();
},
handleSizeChange(size) {
this.pagination.size = size;
this.pagination.current = 1;
this.loadParticipantList();
},
handleSearch() {
this.pagination.current = 1;
this.loadParticipantList();
},
handleReset() {
this.searchForm = {
keyword: '',
competitionId: null
};
this.pagination.current = 1;
this.loadParticipantList();
},
handleCreate() {
this.dialogMode = 'create';
this.currentParticipantId = null;
this.resetFormData();
// 新建模式:重新加载可报名的赛事
this.loadAvailableCompetitions();
this.dialogVisible = true;
},
handleView(row) {
this.dialogMode = 'view';
this.currentParticipantId = row.id;
this.loading = true;
// 先加载所有赛事
this.loadAllCompetitionsForEdit().then(() => {
// 赛事加载完成后,再加载参赛人员详情
return getParticipantDetail(row.id);
}).then(res => {
const detailData = res.data?.data;
console.log('查看模式 - 参赛人员详情数据:', detailData);
if (detailData) {
// 确保 ID 字段是数字类型
this.formData = {
...detailData,
competitionId: detailData.competitionId ? Number(detailData.competitionId) : null,
projectId: detailData.projectId ? Number(detailData.projectId) : null,
gender: detailData.gender ? Number(detailData.gender) : 1,
age: detailData.age ? Number(detailData.age) : null,
orderNum: detailData.orderNum ? Number(detailData.orderNum) : 1
};
// 加载该赛事的项目列表(即使是查看模式也需要显示项目名称)
if (this.formData.competitionId) {
return this.loadProjectsByCompetition(this.formData.competitionId);
}
}
}).then(() => {
this.dialogVisible = true;
this.loading = false;
}).catch(err => {
console.error('加载失败', err);
this.$message.error('加载参赛人员详情失败');
this.loading = false;
});
},
handleEdit(row) {
this.dialogMode = 'edit';
this.currentParticipantId = row.id;
this.loading = true;
// 先加载所有赛事
this.loadAllCompetitionsForEdit().then(() => {
// 赛事加载完成后,再加载参赛人员详情
return getParticipantDetail(row.id);
}).then(res => {
const detailData = res.data?.data;
console.log('参赛人员详情数据:', detailData);
if (detailData) {
// 确保 ID 字段是数字类型
this.formData = {
...detailData,
competitionId: detailData.competitionId ? Number(detailData.competitionId) : null,
projectId: detailData.projectId ? Number(detailData.projectId) : null,
gender: detailData.gender ? Number(detailData.gender) : 1,
age: detailData.age ? Number(detailData.age) : null,
orderNum: detailData.orderNum ? Number(detailData.orderNum) : 1
};
console.log('转换后的 formData.competitionId:', this.formData.competitionId);
console.log('转换后的 formData.projectId:', this.formData.projectId);
// 加载该赛事的项目列表
if (this.formData.competitionId) {
return this.loadProjectsByCompetition(this.formData.competitionId);
}
}
}).then(() => {
console.log('当前 competitionOptions:', this.competitionOptions);
console.log('当前 projectOptions:', this.projectOptions);
this.dialogVisible = true;
this.loading = false;
}).catch(err => {
console.error('加载失败', err);
this.$message.error('加载参赛人员详情失败');
this.loading = false;
});
},
switchToEdit() {
this.dialogMode = 'edit';
},
handleDelete(row) {
this.$confirm('确定要删除该选手吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
removeParticipant(row.id.toString())
.then(res => {
this.$message.success('删除成功');
this.loadParticipantList();
})
.catch(err => {
console.error('删除失败', err);
this.$message.error('删除失败');
})
.finally(() => {
this.loading = false;
});
}).catch(() => {});
},
handleCompetitionChange(competitionId) {
const competition = this.competitionOptions.find(item => item.id === competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
// 加载该赛事的项目列表
this.loadProjectsByCompetition(competitionId);
// 清空已选项目
this.formData.projectId = null;
},
handleProjectChange(projectId) {
const project = this.projectOptions.find(item => item.id === projectId);
if (project) {
// 自动填充组别信息
if (project.category && !this.formData.category) {
this.formData.category = project.category;
}
}
},
loadProjectsByCompetition(competitionId) {
if (!competitionId) {
this.projectOptions = [];
return Promise.resolve();
}
return getProjectsByCompetition(competitionId)
.then(res => {
console.log('项目列表返回数据:', res);
const responseData = res.data?.data;
if (responseData && responseData.records) {
this.projectOptions = responseData.records.map(item => ({
id: item.id,
projectName: item.projectName,
projectCode: item.projectCode,
category: item.category
}));
console.log('可选项目列表:', this.projectOptions);
}
})
.catch(err => {
console.error('加载项目列表失败', err);
this.$message.error('加载项目列表失败');
throw err;
});
},
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.submitLoading = true;
// 确保有赛事名称
if (!this.formData.competitionName) {
const competition = this.competitionOptions.find(item => item.id === this.formData.competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
}
const submitData = { ...this.formData };
if (this.dialogMode === 'create') {
// 新建
addParticipant(submitData)
.then(res => {
this.$message.success('添加成功');
this.dialogVisible = false;
this.loadParticipantList();
})
.catch(err => {
console.error('添加失败', err);
this.$message.error('添加失败');
})
.finally(() => {
this.submitLoading = false;
});
} else if (this.dialogMode === 'edit') {
// 编辑
submitData.id = this.currentParticipantId;
updateParticipant(submitData)
.then(res => {
this.$message.success('保存成功');
this.dialogVisible = false;
this.loadParticipantList();
})
.catch(err => {
console.error('保存失败', err);
this.$message.error('保存失败');
})
.finally(() => {
this.submitLoading = false;
});
}
} else {
this.$message.error('请完善必填信息');
}
});
},
handleDialogClose() {
this.$refs.formRef.resetFields();
this.resetFormData();
},
resetFormData() {
this.formData = {
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectId: null,
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
};
}
}
};
</script>
<style lang="scss" scoped>
.participant-list {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.page-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.search-form {
margin-bottom: 20px;
}
.data-table {
:deep(.el-table__header) {
th {
background-color: #fafafa;
color: #333;
font-weight: 600;
}
}
:deep(.el-button--text) {
padding: 0 8px;
}
}
.participant-form {
max-height: 60vh;
overflow-y: auto;
}
.form-section {
margin-bottom: 30px;
padding: 20px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 18px;
}
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
.dialog-footer {
text-align: right;
}
</style>

View File

@@ -0,0 +1,412 @@
<template>
<div class="participant-manage">
<div class="page-header">
<el-button
icon="el-icon-arrow-left"
@click="handleBack"
>
返回列表
</el-button>
<h2 class="page-title">{{ pageTitle }}</h2>
<div class="header-actions" v-if="mode !== 'view'">
<el-button @click="handleBack">取消</el-button>
<el-button type="primary" @click="handleSave">
{{ mode === 'create' ? '添加' : '保存' }}
</el-button>
</div>
<div class="header-actions" v-else>
<el-button type="primary" @click="switchToEdit">编辑</el-button>
</div>
</div>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
:disabled="mode === 'view'"
class="participant-form"
>
<!-- 基本信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-user"></i>
基本信息
</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="选手姓名" prop="playerName">
<el-input
v-model="formData.playerName"
placeholder="请输入选手姓名"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="年龄" prop="age">
<el-input-number
v-model="formData.age"
:min="6"
:max="100"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input
v-model="formData.idCard"
placeholder="请输入身份证号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="contactPhone">
<el-input
v-model="formData.contactPhone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="所属单位" prop="organization">
<el-input
v-model="formData.organization"
placeholder="请输入所属单位"
/>
</el-form-item>
</div>
<!-- 赛事信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-trophy"></i>
赛事信息
</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="formData.competitionId"
placeholder="请选择赛事"
style="width: 100%"
@change="handleCompetitionChange"
>
<el-option
v-for="item in competitionOptions"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛项目" prop="projectName">
<el-input
v-model="formData.projectName"
placeholder="请输入参赛项目"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="组别" prop="category">
<el-input
v-model="formData.category"
placeholder="例如:成年男子组"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出场顺序" prop="orderNum">
<el-input-number
v-model="formData.orderNum"
:min="1"
:max="9999"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 其他信息 -->
<div class="form-section">
<div class="section-title">
<i class="el-icon-document"></i>
其他信息
</div>
<el-form-item label="选手简介" prop="introduction">
<el-input
v-model="formData.introduction"
type="textarea"
:rows="4"
placeholder="请输入选手简介"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注"
/>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: 'ParticipantManage',
data() {
return {
mode: 'create', // create, edit, view
participantId: null,
competitionOptions: [],
formData: {
competitionId: null,
competitionName: '',
playerName: '',
gender: 1,
age: null,
contactPhone: '',
organization: '',
idCard: '',
projectName: '',
category: '',
orderNum: 1,
introduction: '',
remark: '',
attachments: []
},
formRules: {
playerName: [
{ required: true, message: '请输入选手姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
competitionId: [
{ required: true, message: '请选择赛事', trigger: 'change' }
],
projectName: [
{ required: true, message: '请输入参赛项目', trigger: 'blur' }
]
}
};
},
computed: {
pageTitle() {
const titleMap = {
create: '添加参赛选手',
edit: '编辑参赛选手',
view: '查看参赛选手'
};
return titleMap[this.mode] || '参赛选手信息';
}
},
created() {
this.initPage();
},
methods: {
initPage() {
const { mode, id } = this.$route.query;
this.mode = mode || 'create';
this.participantId = id ? parseInt(id) : null;
// 加载赛事选项
this.loadCompetitionOptions();
if (this.mode !== 'create' && this.participantId) {
this.loadParticipantData();
}
},
loadCompetitionOptions() {
const savedData = localStorage.getItem('competitionList');
if (savedData) {
try {
this.competitionOptions = JSON.parse(savedData);
} catch (e) {
console.error('加载赛事数据失败', e);
}
}
},
loadParticipantData() {
// 从 localStorage 加载数据
const savedData = localStorage.getItem('participantList');
if (savedData) {
try {
const list = JSON.parse(savedData);
const participant = list.find(item => item.id === this.participantId);
if (participant) {
this.formData = { ...participant };
}
} catch (e) {
console.error('加载数据失败', e);
this.$message.error('加载数据失败');
}
}
},
handleCompetitionChange(competitionId) {
const competition = this.competitionOptions.find(item => item.id === competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
},
handleSave() {
this.$refs.formRef.validate((valid) => {
if (valid) {
const savedData = localStorage.getItem('participantList');
let list = savedData ? JSON.parse(savedData) : [];
// 确保有赛事名称
if (!this.formData.competitionName) {
const competition = this.competitionOptions.find(item => item.id === this.formData.competitionId);
if (competition) {
this.formData.competitionName = competition.competitionName;
}
}
if (this.mode === 'create') {
// 新建
const newId = list.length > 0 ? Math.max(...list.map(item => item.id)) + 1 : 1;
const newParticipant = {
...this.formData,
id: newId
};
list.push(newParticipant);
this.$message.success('添加成功');
} else if (this.mode === 'edit') {
// 编辑
const index = list.findIndex(item => item.id === this.participantId);
if (index !== -1) {
list[index] = {
...list[index],
...this.formData
};
this.$message.success('保存成功');
}
}
localStorage.setItem('participantList', JSON.stringify(list));
// 返回列表页
setTimeout(() => {
this.handleBack();
}, 500);
} else {
this.$message.error('请完善必填信息');
}
});
},
switchToEdit() {
this.$router.push({
path: '/martial/participant/manage',
query: { mode: 'edit', id: this.participantId }
});
},
handleBack() {
this.$router.push('/martial/participant/list');
}
}
};
</script>
<style lang="scss" scoped>
.participant-manage {
padding: 20px;
background: #fff;
border-radius: 8px;
min-height: calc(100vh - 120px);
}
.page-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
.page-title {
flex: 1;
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 10px;
}
}
.participant-form {
max-width: 1200px;
}
.form-section {
margin-bottom: 40px;
padding: 24px;
background: #fafafa;
border-radius: 8px;
&:last-child {
margin-bottom: 0;
}
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 18px;
font-weight: 600;
color: #333;
i {
color: #dc2626;
font-size: 20px;
}
}
:deep(.el-form-item) {
margin-bottom: 22px;
}
</style>

View File

@@ -0,0 +1,835 @@
<template>
<div class="project-container">
<!-- 搜索区域 -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="赛事">
<el-select
v-model="queryParams.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="项目名称">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="分组类别">
<el-input
v-model="queryParams.category"
placeholder="请输入分组类别"
clearable
style="width: 150px"
/>
</el-form-item>
<el-form-item label="项目类型">
<el-select
v-model="queryParams.eventType"
placeholder="请选择项目类型"
clearable
style="width: 150px"
>
<el-option label="套路" :value="1" />
<el-option label="散打" :value="2" />
<el-option label="器械" :value="3" />
<el-option label="对练" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="参赛类型">
<el-select
v-model="queryParams.type"
placeholder="请选择参赛类型"
clearable
style="width: 150px"
>
<el-option label="单人" :value="1" />
<el-option label="集体" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">
查询
</el-button>
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 工具栏 -->
<el-card shadow="never" class="toolbar-card">
<div class="toolbar">
<div class="toolbar-left">
<el-button type="primary" :icon="Plus" @click="handleAdd">
新增项目
</el-button>
<el-button
type="danger"
:icon="Delete"
:disabled="!selection.length"
@click="handleBatchDelete"
>
批量删除
</el-button>
<el-upload
:action="uploadUrl"
:headers="uploadHeaders"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:show-file-list="false"
accept=".xlsx,.xls"
>
<el-button type="success" :icon="Upload">导入Excel</el-button>
</el-upload>
<el-button type="warning" :icon="Download" @click="handleExport">
导出Excel
</el-button>
</div>
<div class="toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button circle :icon="Refresh" @click="fetchData" />
</el-tooltip>
</div>
</div>
</el-card>
<!-- 数据表格 -->
<el-card shadow="never" class="table-card">
<el-table
v-loading="loading"
:data="tableData"
stripe
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
prop="projectCode"
label="项目编码"
width="120"
align="center"
/>
<el-table-column
prop="projectName"
label="项目名称"
min-width="180"
show-overflow-tooltip
/>
<el-table-column label="所属赛事" min-width="150" show-overflow-tooltip>
<template #default="{ row }">
{{ getCompetitionName(row.competitionId) }}
</template>
</el-table-column>
<el-table-column prop="category" label="分组类别" width="100" align="center">
<template #default="{ row }">
<span>{{ row.category || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="eventType" label="项目类型" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.eventType === 1" type="primary" size="small">套路</el-tag>
<el-tag v-else-if="row.eventType === 2" type="danger" size="small">散打</el-tag>
<el-tag v-else-if="row.eventType === 3" type="success" size="small">器械</el-tag>
<el-tag v-else-if="row.eventType === 4" type="warning" size="small">对练</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="type" label="参赛类型" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.type === 1" type="success" size="small">单人</el-tag>
<el-tag v-else-if="row.type === 2" type="warning" size="small">集体</el-tag>
</template>
</el-table-column>
<el-table-column
prop="price"
label="报名费(元)"
width="110"
align="center"
>
<template #default="{ row }">
<span style="color: #f56c6c">¥{{ row.price || 0 }}</span>
</template>
</el-table-column>
<el-table-column prop="estimatedDuration" label="预计时长" width="100" align="center">
<template #default="{ row }">
<span>{{ row.estimatedDuration || 5 }}分钟</span>
</template>
</el-table-column>
<el-table-column label="单位容纳人数" width="120" align="center">
<template #default="{ row }">
{{ row.maxParticipants || 0 }}
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="160"
align="center"
>
<template #default="{ row }">
{{ formatDate(row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :icon="Edit" @click="handleEdit(row)">
编辑
</el-button>
<el-button link type="primary" :icon="View" @click="handleView(row)">
查看
</el-button>
<el-button link type="danger" :icon="Delete" @click="handleDelete(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="queryParams.current"
v-model:page-size="queryParams.size"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
/>
</div>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="800px"
:close-on-click-modal="false"
@close="handleDialogClose"
>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="120px"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="form.competitionId"
placeholder="请选择赛事"
filterable
style="width: 100%"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
maxlength="100"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分组类别" prop="category">
<el-select
v-model="form.category"
placeholder="请选择分组类别"
style="width: 100%"
>
<el-option label="男子" :value="1" />
<el-option label="女子" :value="2" />
<el-option label="团体" :value="3" />
<el-option label="混合" :value="4" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目类型" prop="eventType">
<el-select
v-model="form.eventType"
placeholder="请选择项目类型"
style="width: 100%"
>
<el-option label="套路" :value="1" />
<el-option label="散打" :value="2" />
<el-option label="器械" :value="3" />
<el-option label="对练" :value="4" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛类型" prop="type">
<el-select
v-model="form.type"
placeholder="请选择参赛类型"
style="width: 100%"
>
<el-option label="单人" :value="1" />
<el-option label="集体" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="预计时长(分钟)" prop="estimatedDuration">
<el-input-number
v-model="form.estimatedDuration"
:min="1"
:max="120"
placeholder="每人/队预计比赛时长"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报名费(元)" prop="registrationFee">
<el-input-number
v-model="form.registrationFee"
:min="0"
:precision="2"
:step="10"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单位容纳人数" prop="maxParticipants">
<el-input-number
v-model="form.maxParticipants"
:min="1"
:max="1000"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序序号" prop="sortOrder">
<el-input-number
v-model="form.sortOrder"
:min="0"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="比赛规则" prop="rules">
<el-input
v-model="form.rules"
type="textarea"
:rows="4"
placeholder="请输入比赛规则说明"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
:rows="3"
placeholder="请输入备注信息"
maxlength="200"
show-word-limit
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
确定
</el-button>
</template>
</el-dialog>
<!-- 查看详情弹窗 -->
<el-dialog v-model="detailVisible" title="项目详情" width="700px">
<el-descriptions :column="2" border>
<el-descriptions-item label="项目编码">
{{ detailData.projectCode }}
</el-descriptions-item>
<el-descriptions-item label="项目名称">
{{ detailData.projectName }}
</el-descriptions-item>
<el-descriptions-item label="所属赛事">
{{ getCompetitionName(detailData.competitionId) }}
</el-descriptions-item>
<el-descriptions-item label="分组类别">
<el-tag v-if="detailData.category === 1" type="primary">男子</el-tag>
<el-tag v-else-if="detailData.category === 2" type="danger">女子</el-tag>
<el-tag v-else-if="detailData.category === 3" type="success">团体</el-tag>
<el-tag v-else-if="detailData.category === 4" type="warning">混合</el-tag>
</el-descriptions-item>
<el-descriptions-item label="项目类型">
<span v-if="detailData.eventType === 1">套路</span>
<span v-else-if="detailData.eventType === 2">散打</span>
<span v-else-if="detailData.eventType === 3">器械</span>
<span v-else-if="detailData.eventType === 4">对练</span>
</el-descriptions-item>
<el-descriptions-item label="参赛类型">
<el-tag v-if="detailData.type === 1" type="success" size="small">单人</el-tag>
<el-tag v-else-if="detailData.type === 2" type="warning" size="small">集体</el-tag>
</el-descriptions-item>
<el-descriptions-item label="报名费">
<span style="color: #f56c6c; font-weight: bold">
¥{{ detailData.registrationFee || 0 }}
</span>
</el-descriptions-item>
<el-descriptions-item label="单位容纳人数">
{{ detailData.maxParticipants }}
</el-descriptions-item>
<el-descriptions-item label="已报名人数">
<span :style="{
color: detailData.currentCount >= detailData.maxParticipants ? '#f56c6c' : '#67c23a',
fontWeight: 'bold'
}">
{{ detailData.currentCount || 0 }}
</span>
</el-descriptions-item>
<el-descriptions-item label="创建时间" :span="2">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="比赛规则" :span="2">
{{ detailData.rules || '暂无' }}
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">
{{ detailData.remark || '暂无' }}
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Search,
Refresh,
Plus,
Delete,
Edit,
View,
Upload,
Download
} from '@element-plus/icons-vue'
import {
getProjectList,
submitProject,
removeProject,
importProjects,
exportProjects
} from '@/api/martial/project'
import { getCompetitionList } from '@/api/martial/competition'
import { getToken } from '@/utils/auth'
import dayjs from 'dayjs'
// 数据定义
const loading = ref(false)
const submitLoading = ref(false)
const tableData = ref([])
const total = ref(0)
const selection = ref([])
const competitionList = ref([])
const dialogVisible = ref(false)
const detailVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const detailData = ref({})
// 查询参数
const queryParams = reactive({
current: 1,
size: 10,
competitionId: '',
projectName: '',
category: '',
eventType: '',
type: ''
})
// 表单数据
const form = reactive({
id: null,
competitionId: '',
projectCode: '',
projectName: '',
category: null,
eventType: null,
type: null,
estimatedDuration: 5,
registrationFee: 0,
maxParticipants: 100,
sortOrder: 0,
rules: '',
remark: ''
})
// 上传配置
const uploadUrl = computed(() => {
return import.meta.env.VITE_APP_BASE_URL + '/api/blade-martial/project/import'
})
const uploadHeaders = computed(() => {
return {
'Blade-Auth': 'bearer ' + getToken()
}
})
// 表单验证规则
const rules = {
competitionId: [
{ required: true, message: '请选择所属赛事', trigger: 'change' }
],
projectName: [
{ required: true, message: '请输入项目名称', trigger: 'blur' },
{ min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
],
category: [
{ required: true, message: '请选择分组类别', trigger: 'change' }
],
eventType: [
{ required: true, message: '请选择项目类型', trigger: 'change' }
],
estimatedDuration: [
{ required: true, message: '请输入预计时长', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择参赛类型', trigger: 'change' }
],
registrationFee: [
{ required: true, message: '请输入报名费', trigger: 'blur' }
],
maxParticipants: [
{ required: true, message: '请输入单位容纳人数', trigger: 'blur' }
]
}
// 加载赛事列表
const loadCompetitionList = async () => {
try {
const res = await getCompetitionList(1, 1000, {})
if (res.data && res.data.data && res.data.data.records) {
competitionList.value = res.data.data.records
}
} catch (error) {
console.error('加载赛事列表失败:', error)
}
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
// Only pass parameters that backend supports
const params = {
competitionId: queryParams.competitionId || undefined,
projectName: queryParams.projectName || undefined,
category: queryParams.category || undefined,
eventType: queryParams.eventType || undefined,
type: queryParams.type || undefined
}
const res = await getProjectList(
queryParams.current,
queryParams.size,
params
)
if (res.data && res.data.data) {
tableData.value = res.data.data.records || []
total.value = res.data.data.total || 0
}
} catch (error) {
ElMessage.error('获取数据失败')
console.error(error)
} finally {
loading.value = false
}
}
// 搜索
const handleSearch = () => {
queryParams.current = 1
fetchData()
}
// 重置
const handleReset = () => {
Object.assign(queryParams, {
current: 1,
size: 10,
competitionId: '',
projectName: '',
category: '',
eventType: '',
type: ''
})
fetchData()
}
// 新增
const handleAdd = () => {
dialogTitle.value = '新增项目'
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = async (row) => {
dialogTitle.value = '编辑项目'
Object.keys(form).forEach((key) => {
form[key] = row[key]
})
// 处理字段名映射:后端返回 price表单使用 registrationFee
if (row.price !== undefined) {
form.registrationFee = row.price
}
dialogVisible.value = true
}
// 查看
const handleView = (row) => {
detailData.value = { ...row }
detailVisible.value = true
}
// 删除
const handleDelete = (row) => {
ElMessageBox.confirm('确定要删除该项目吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
await removeProject(row.id)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 批量删除
const handleBatchDelete = () => {
ElMessageBox.confirm(`确定要删除选中的 ${selection.value.length} 个项目吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id).join(',')
await removeProject(ids)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
submitLoading.value = true
try {
// 构建提交数据,确保字段名与后端一致
const submitData = {
...form,
price: form.registrationFee // 后端使用 price 字段
}
if (form.id) {
await submitProject(submitData)
ElMessage.success('修改成功')
} else {
await submitProject(submitData)
ElMessage.success('新增成功')
}
dialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error(form.id ? '修改失败' : '新增失败')
} finally {
submitLoading.value = false
}
}
})
}
// 选择变化
const handleSelectionChange = (val) => {
selection.value = val
}
// 关闭弹窗
const handleDialogClose = () => {
resetForm()
}
// 重置表单
const resetForm = () => {
Object.assign(form, {
id: null,
competitionId: '',
projectCode: '',
projectName: '',
category: null,
eventType: null,
type: null,
estimatedDuration: 5,
registrationFee: 0,
maxParticipants: 100,
sortOrder: 0,
rules: '',
remark: ''
})
if (formRef.value) {
formRef.value.clearValidate()
}
}
// 上传前检查
const beforeUpload = (file) => {
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return false
}
const isExcel =
file.type === 'application/vnd.ms-excel' ||
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isExcel) {
ElMessage.error('只能上传 Excel 文件!')
return false
}
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
ElMessage.error('文件大小不能超过 5MB!')
return false
}
return true
}
// 上传成功
const handleUploadSuccess = (response) => {
if (response.success) {
ElMessage.success('导入成功')
fetchData()
} else {
ElMessage.error(response.msg || '导入失败')
}
}
// 上传失败
const handleUploadError = () => {
ElMessage.error('导入失败')
}
// 导出
const handleExport = async () => {
try {
const res = await exportProjects(queryParams)
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `项目列表_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
}
}
// 根据ID获取赛事名称
const getCompetitionName = (competitionId) => {
if (!competitionId) return '-'
const competition = competitionList.value.find(item => item.id === competitionId)
return competition ? competition.competitionName : '-'
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 生命周期
onMounted(() => {
loadCompetitionList()
fetchData()
})
</script>
<style scoped lang="scss">
.project-container {
padding: 20px;
.search-card,
.toolbar-card,
.table-card {
margin-bottom: 20px;
}
.search-form {
.el-form-item {
margin-bottom: 0;
}
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
.toolbar-left {
display: flex;
gap: 10px;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
}
</style>

View File

@@ -0,0 +1,931 @@
<template>
<div class="project-container">
<!-- 搜索区域 -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="赛事">
<el-select
v-model="queryParams.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="项目名称">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="分组类别">
<el-input
v-model="queryParams.category"
placeholder="请输入分组类别"
clearable
style="width: 150px"
/>
</el-form-item>
<el-form-item label="项目类型">
<el-select
v-model="queryParams.eventType"
placeholder="请选择项目类型"
clearable
style="width: 150px"
>
<el-option label="套路" :value="1" />
<el-option label="散打" :value="2" />
<el-option label="器械" :value="3" />
<el-option label="对练" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="参赛类型">
<el-select
v-model="queryParams.type"
placeholder="请选择参赛类型"
clearable
style="width: 150px"
>
<el-option label="单人" :value="1" />
<el-option label="集体" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">
查询
</el-button>
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 工具栏 -->
<el-card shadow="never" class="toolbar-card">
<div class="toolbar">
<div class="toolbar-left">
<el-button type="primary" :icon="Plus" @click="handleAdd">
新增项目
</el-button>
<el-button
type="danger"
:icon="Delete"
:disabled="!selection.length"
@click="handleBatchDelete"
>
批量删除
</el-button>
<el-upload
:action="uploadUrl"
:headers="uploadHeaders"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
:show-file-list="false"
accept=".xlsx,.xls"
>
<el-button type="success" :icon="Upload">导入Excel</el-button>
</el-upload>
<el-button type="warning" :icon="Download" @click="handleExport">
导出Excel
</el-button>
</div>
<div class="toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button circle :icon="Refresh" @click="fetchData" />
</el-tooltip>
</div>
</div>
</el-card>
<!-- 数据表格 -->
<el-card shadow="never" class="table-card">
<el-table
v-loading="loading"
:data="tableData"
stripe
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
prop="projectCode"
label="项目编码"
width="120"
align="center"
/>
<el-table-column
prop="projectName"
label="项目名称"
min-width="180"
show-overflow-tooltip
/>
<el-table-column label="所属赛事" min-width="150" show-overflow-tooltip>
<template #default="{ row }">
{{ getCompetitionName(row.competitionId) }}
</template>
</el-table-column>
<el-table-column prop="category" label="分组类别" width="100" align="center">
<template #default="{ row }">
<span>{{ row.category || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="eventType" label="项目类型" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.eventType === 1" type="primary" size="small">套路</el-tag>
<el-tag v-else-if="row.eventType === 2" type="danger" size="small">散打</el-tag>
<el-tag v-else-if="row.eventType === 3" type="success" size="small">器械</el-tag>
<el-tag v-else-if="row.eventType === 4" type="warning" size="small">对练</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="type" label="参赛类型" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.type === 1" type="success" size="small">单人</el-tag>
<el-tag v-else-if="row.type === 2" type="warning" size="small">集体</el-tag>
</template>
</el-table-column>
<el-table-column
prop="price"
label="报名费(元)"
width="110"
align="center"
>
<template #default="{ row }">
<span style="color: #f56c6c">¥{{ row.price || 0 }}</span>
</template>
</el-table-column>
<el-table-column prop="estimatedDuration" label="预计时长" width="100" align="center">
<template #default="{ row }">
<span>{{ row.estimatedDuration || 5 }}分钟</span>
</template>
</el-table-column>
<el-table-column label="单位容纳人数" width="120" align="center">
<template #default="{ row }">
{{ row.maxParticipants || 0 }}
</template>
</el-table-column>
<el-table-column label="所属场地" width="120" align="center">
<template #default="{ row }">
<span>{{ getVenueName(row.venueId) }}</span>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="160"
align="center"
>
<template #default="{ row }">
{{ formatDate(row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :icon="Edit" @click="handleEdit(row)">
编辑
</el-button>
<el-button link type="primary" :icon="View" @click="handleView(row)">
查看
</el-button>
<el-button link type="danger" :icon="Delete" @click="handleDelete(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="queryParams.current"
v-model:page-size="queryParams.size"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
/>
</div>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="800px"
:close-on-click-modal="false"
@close="handleDialogClose"
>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="120px"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属赛事" prop="competitionId">
<el-select
v-model="form.competitionId"
placeholder="请选择赛事"
filterable
style="width: 100%"
@change="handleCompetitionChangeInForm"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属场地" prop="venueId">
<el-select
v-model="form.venueId"
placeholder="请选择场地"
clearable
style="width: 100%"
>
<el-option
v-for="item in venueList"
:key="item.id"
:label="item.venueName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目编码" prop="projectCode">
<el-input
v-model="form.projectCode"
placeholder="请输入项目编码"
maxlength="50"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
maxlength="100"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分组类别" prop="category">
<el-select
v-model="form.category"
placeholder="请选择分组类别"
style="width: 100%"
>
<el-option label="男子" :value="1" />
<el-option label="女子" :value="2" />
<el-option label="团体" :value="3" />
<el-option label="混合" :value="4" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目类型" prop="eventType">
<el-select
v-model="form.eventType"
placeholder="请选择项目类型"
style="width: 100%"
>
<el-option label="套路" :value="1" />
<el-option label="散打" :value="2" />
<el-option label="器械" :value="3" />
<el-option label="对练" :value="4" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="参赛类型" prop="type">
<el-select
v-model="form.type"
placeholder="请选择参赛类型"
style="width: 100%"
>
<el-option label="单人" :value="1" />
<el-option label="集体" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="预计时长(分钟)" prop="estimatedDuration">
<el-input-number
v-model="form.estimatedDuration"
:min="1"
:max="120"
placeholder="每人/队预计比赛时长"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报名费(元)" prop="registrationFee">
<el-input-number
v-model="form.registrationFee"
:min="0"
:precision="2"
:step="10"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单位容纳人数" prop="maxParticipants">
<el-input-number
v-model="form.maxParticipants"
:min="1"
:max="1000"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序序号" prop="sortOrder">
<el-input-number
v-model="form.sortOrder"
:min="0"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="比赛规则" prop="rules">
<el-input
v-model="form.rules"
type="textarea"
:rows="4"
placeholder="请输入比赛规则说明"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
:rows="3"
placeholder="请输入备注信息"
maxlength="200"
show-word-limit
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
确定
</el-button>
</template>
</el-dialog>
<!-- 查看详情弹窗 -->
<el-dialog v-model="detailVisible" title="项目详情" width="700px">
<el-descriptions :column="2" border>
<el-descriptions-item label="项目编码">
{{ detailData.projectCode }}
</el-descriptions-item>
<el-descriptions-item label="项目名称">
{{ detailData.projectName }}
</el-descriptions-item>
<el-descriptions-item label="所属赛事">
{{ getCompetitionName(detailData.competitionId) }}
</el-descriptions-item>
<el-descriptions-item label="分组类别">
<el-tag v-if="detailData.category === 1" type="primary">男子</el-tag>
<el-tag v-else-if="detailData.category === 2" type="danger">女子</el-tag>
<el-tag v-else-if="detailData.category === 3" type="success">团体</el-tag>
<el-tag v-else-if="detailData.category === 4" type="warning">混合</el-tag>
</el-descriptions-item>
<el-descriptions-item label="项目类型">
<span v-if="detailData.eventType === 1">套路</span>
<span v-else-if="detailData.eventType === 2">散打</span>
<span v-else-if="detailData.eventType === 3">器械</span>
<span v-else-if="detailData.eventType === 4">对练</span>
</el-descriptions-item>
<el-descriptions-item label="参赛类型">
<el-tag v-if="detailData.type === 1" type="success" size="small">单人</el-tag>
<el-tag v-else-if="detailData.type === 2" type="warning" size="small">集体</el-tag>
</el-descriptions-item>
<el-descriptions-item label="报名费">
<span style="color: #f56c6c; font-weight: bold">
¥{{ detailData.registrationFee || 0 }}
</span>
</el-descriptions-item>
<el-descriptions-item label="单位容纳人数">
{{ detailData.maxParticipants }}
</el-descriptions-item>
<el-descriptions-item label="已报名人数">
<span :style="{
color: detailData.currentCount >= detailData.maxParticipants ? '#f56c6c' : '#67c23a',
fontWeight: 'bold'
}">
{{ detailData.currentCount || 0 }}
</span>
</el-descriptions-item>
<el-descriptions-item label="创建时间" :span="2">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="比赛规则" :span="2">
{{ detailData.rules || '暂无' }}
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">
{{ detailData.remark || '暂无' }}
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Search,
Refresh,
Plus,
Delete,
Edit,
View,
Upload,
Download
} from '@element-plus/icons-vue'
import {
getProjectList,
submitProject,
removeProject,
importProjects,
exportProjects
} from '@/api/martial/project'
import { getCompetitionList } from '@/api/martial/competition'
import { getVenuesByCompetition } from '@/api/martial/venue'
import { getToken } from '@/utils/auth'
import dayjs from 'dayjs'
// 数据定义
const loading = ref(false)
const submitLoading = ref(false)
const tableData = ref([])
const total = ref(0)
const selection = ref([])
const competitionList = ref([])
const venueList = ref([])
const allVenuesCache = ref(new Map()) // 全局场地缓存
const dialogVisible = ref(false)
const detailVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const detailData = ref({})
// 查询参数
const queryParams = reactive({
current: 1,
size: 10,
competitionId: '',
projectName: '',
category: '',
eventType: '',
type: ''
})
// 表单数据
const form = reactive({
id: null,
competitionId: '',
venueId: null,
projectCode: '',
projectName: '',
category: null,
eventType: null,
type: null,
estimatedDuration: 5,
registrationFee: 0,
maxParticipants: 100,
sortOrder: 0,
rules: '',
remark: ''
})
// 上传配置
const uploadUrl = computed(() => {
return import.meta.env.VITE_APP_BASE_URL + '/api/blade-martial/project/import'
})
const uploadHeaders = computed(() => {
return {
'Blade-Auth': 'bearer ' + getToken()
}
})
// 表单验证规则
const rules = {
competitionId: [
{ required: true, message: '请选择所属赛事', trigger: 'change' }
],
projectCode: [
{ required: true, message: '请输入项目编码', trigger: 'blur' },
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
],
projectName: [
{ required: true, message: '请输入项目名称', trigger: 'blur' },
{ min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
],
category: [
{ required: true, message: '请选择分组类别', trigger: 'change' }
],
eventType: [
{ required: true, message: '请选择项目类型', trigger: 'change' }
],
estimatedDuration: [
{ required: true, message: '请输入预计时长', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择参赛类型', trigger: 'change' }
],
registrationFee: [
{ required: true, message: '请输入报名费', trigger: 'blur' }
],
maxParticipants: [
{ required: true, message: '请输入单位容纳人数', trigger: 'blur' }
]
}
// 加载赛事列表
const loadCompetitionList = async () => {
try {
const res = await getCompetitionList(1, 1000, {})
if (res.data && res.data.data && res.data.data.records) {
competitionList.value = res.data.data.records
}
} catch (error) {
console.error('加载赛事列表失败:', error)
}
}
// 表单中赛事变更时加载场地列表
const handleCompetitionChangeInForm = async (competitionId) => {
form.venueId = null
venueList.value = []
if (competitionId) {
try {
const res = await getVenuesByCompetition(competitionId)
venueList.value = res.data?.data?.records || []
} catch (error) {
console.error('加载场地列表失败:', error)
}
}
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
// Only pass parameters that backend supports
const params = {
competitionId: queryParams.competitionId || undefined,
projectName: queryParams.projectName || undefined,
category: queryParams.category || undefined,
eventType: queryParams.eventType || undefined,
type: queryParams.type || undefined
}
const res = await getProjectList(
queryParams.current,
queryParams.size,
params
)
if (res.data && res.data.data) {
tableData.value = res.data.data.records || []
total.value = res.data.data.total || 0
// 加载项目对应的场地信息
await loadVenuesForProjects(tableData.value)
}
} catch (error) {
ElMessage.error('获取数据失败')
console.error(error)
} finally {
loading.value = false
}
}
// 加载项目对应的场地信息
const loadVenuesForProjects = async (projects) => {
// 获取所有不同的赛事ID
const competitionIds = [...new Set(projects.map(p => p.competitionId).filter(Boolean))]
for (const compId of competitionIds) {
try {
const res = await getVenuesByCompetition(compId)
const venues = res.data?.data?.records || []
// 缓存场地信息
venues.forEach(v => {
allVenuesCache.value.set(v.id, v.venueName)
})
} catch (err) {
console.error('加载场地失败:', err)
}
}
}
// 搜索
const handleSearch = () => {
queryParams.current = 1
fetchData()
}
// 重置
const handleReset = () => {
Object.assign(queryParams, {
current: 1,
size: 10,
competitionId: '',
projectName: '',
category: '',
eventType: '',
type: ''
})
fetchData()
}
// 新增
const handleAdd = () => {
dialogTitle.value = '新增项目'
resetForm()
dialogVisible.value = true
}
// 编辑
const handleEdit = async (row) => {
dialogTitle.value = '编辑项目'
Object.keys(form).forEach((key) => {
form[key] = row[key]
})
// 处理字段名映射:后端返回 price表单使用 registrationFee
if (row.price !== undefined) {
form.registrationFee = row.price
}
// 加载该赛事的场地列表
if (row.competitionId) {
try {
const res = await getVenuesByCompetition(row.competitionId)
venueList.value = res.data?.data?.records || []
} catch (error) {
console.error('加载场地列表失败:', error)
}
}
dialogVisible.value = true
}
// 查看
const handleView = (row) => {
detailData.value = { ...row }
detailVisible.value = true
}
// 删除
const handleDelete = (row) => {
ElMessageBox.confirm('确定要删除该项目吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
await removeProject(row.id)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 批量删除
const handleBatchDelete = () => {
ElMessageBox.confirm(`确定要删除选中的 ${selection.value.length} 个项目吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id).join(',')
await removeProject(ids)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
ElMessage.error('删除失败')
}
})
.catch(() => {})
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
submitLoading.value = true
try {
// 构建提交数据,确保字段名与后端一致
const submitData = {
...form,
price: form.registrationFee // 后端使用 price 字段
}
if (form.id) {
await submitProject(submitData)
ElMessage.success('修改成功')
} else {
await submitProject(submitData)
ElMessage.success('新增成功')
}
dialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error(form.id ? '修改失败' : '新增失败')
} finally {
submitLoading.value = false
}
}
})
}
// 选择变化
const handleSelectionChange = (val) => {
selection.value = val
}
// 关闭弹窗
const handleDialogClose = () => {
resetForm()
}
// 重置表单
const resetForm = () => {
Object.assign(form, {
id: null,
competitionId: '',
projectCode: '',
projectName: '',
category: null,
eventType: null,
type: null,
estimatedDuration: 5,
registrationFee: 0,
maxParticipants: 100,
sortOrder: 0,
rules: '',
remark: ''
})
if (formRef.value) {
formRef.value.clearValidate()
}
}
// 上传前检查
const beforeUpload = (file) => {
if (!queryParams.competitionId) {
ElMessage.warning('请先选择赛事')
return false
}
const isExcel =
file.type === 'application/vnd.ms-excel' ||
file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isExcel) {
ElMessage.error('只能上传 Excel 文件!')
return false
}
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
ElMessage.error('文件大小不能超过 5MB!')
return false
}
return true
}
// 上传成功
const handleUploadSuccess = (response) => {
if (response.success) {
ElMessage.success('导入成功')
fetchData()
} else {
ElMessage.error(response.msg || '导入失败')
}
}
// 上传失败
const handleUploadError = () => {
ElMessage.error('导入失败')
}
// 导出
const handleExport = async () => {
try {
const res = await exportProjects(queryParams)
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `项目列表_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
}
}
// 根据ID获取赛事名称
const getCompetitionName = (competitionId) => {
if (!competitionId) return '-'
const competition = competitionList.value.find(item => item.id === competitionId)
return competition ? competition.competitionName : '-'
}
const getVenueName = (venueId) => {
if (!venueId) return '-'
// 先从当前场地列表查找
let venue = venueList.value.find(item => item.id === venueId)
if (venue) return venue.venueName
// 再从全局缓存查找
if (allVenuesCache.value.has(venueId)) {
return allVenuesCache.value.get(venueId)
}
return '-'
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 生命周期
onMounted(() => {
loadCompetitionList()
fetchData()
})
</script>
<style scoped lang="scss">
.project-container {
padding: 20px;
.search-card,
.toolbar-card,
.table-card {
margin-bottom: 20px;
}
.search-form {
.el-form-item {
margin-bottom: 0;
}
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
.toolbar-left {
display: flex;
gap: 10px;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
}
</style>

View File

@@ -0,0 +1,440 @@
<template>
<div class="referee-container">
<el-card shadow="hover">
<div class="page-header">
<h2 class="page-title">评委管理</h2>
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增评委</el-button>
</div>
<!-- 搜索表单 -->
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item>
<el-input
v-model="searchForm.name"
placeholder="搜索姓名"
clearable
size="small"
style="width: 200px"
>
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="searchForm.phone"
placeholder="搜索手机号"
clearable
size="small"
style="width: 180px"
/>
</el-form-item>
<el-form-item>
<el-select v-model="searchForm.refereeType" placeholder="裁判类型" clearable size="small" style="width: 150px">
<el-option label="全部" :value="null"></el-option>
<el-option label="主裁判" :value="1"></el-option>
<el-option label="裁判员" :value="2"></el-option>
<el-option label="总裁" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleSearch">查询</el-button>
<el-button size="small" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
stripe
size="small"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="gender" label="性别" width="60" align="center">
<template #default="scope">
{{ scope.row.gender === 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="phone" label="手机号" width="130"></el-table-column>
<el-table-column prop="idCard" label="身份证号" width="180" show-overflow-tooltip></el-table-column>
<el-table-column prop="refereeType" label="裁判类型" width="100" align="center">
<template #default="scope">
<el-tag :type="scope.row.refereeType === 1 ? 'danger' : (scope.row.refereeType === 3 ? 'warning' : 'primary')" size="small">
{{ scope.row.refereeType === 1 ? '主裁判' : (scope.row.refereeType === 3 ? '总裁' : '裁判员') }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="level" label="等级/职称" width="120"></el-table-column>
<el-table-column prop="specialty" label="擅长项目" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagination.size"
layout="total, sizes, prev, pager, next"
:total="pagination.total"
small
></el-pagination>
</el-card>
<!-- 新增/编辑弹窗 -->
<el-dialog
:title="dialogTitle"
v-model="dialogVisible"
width="600px"
:close-on-click-modal="false"
@close="handleDialogClose"
>
<el-form ref="refereeForm" :model="formData" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="formData.gender">
<el-radio :label="1"></el-radio>
<el-radio :label="2"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机号" clearable maxlength="11"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="formData.idCard" placeholder="请输入身份证号" clearable maxlength="18"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="裁判类型" prop="refereeType">
<el-select v-model="formData.refereeType" placeholder="请选择裁判类型" style="width: 100%">
<el-option label="主裁判" :value="1"></el-option>
<el-option label="裁判员" :value="2"></el-option>
<el-option label="总裁" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="等级/职称" prop="level">
<el-select
v-model="formData.level"
placeholder="请选择等级"
clearable
style="width: 130px"
>
<el-option label="国家级" value="国家级" />
<el-option label="一级" value="一级" />
<el-option label="二级" value="二级" />
<el-option label="三级" value="三级" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="擅长项目" prop="specialty">
<el-input v-model="formData.specialty" placeholder="请输入擅长项目,多个用逗号分隔" clearable></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="3"
placeholder="请输入备注信息"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import { getRefereeList, submitReferee, removeReferee } from '@/api/martial/referee'
export default {
name: 'RefereeList',
data() {
return {
loading: false,
submitLoading: false,
dialogVisible: false,
dialogTitle: '新增评委',
isEdit: false,
searchForm: {
name: '',
phone: '',
refereeType: null
},
tableData: [],
pagination: {
current: 1,
size: 10,
total: 0
},
formData: {
id: null,
name: '',
gender: 1,
phone: '',
idCard: '',
refereeType: null,
level: '',
specialty: '',
remark: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
idCard: [
{ pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
],
refereeType: [
{ required: true, message: '请选择裁判类型', trigger: 'change' }
]
}
}
},
mounted() {
this.loadRefereeList()
},
methods: {
// 加载裁判列表
loadRefereeList() {
this.loading = true
const params = {}
// 搜索条件
if (this.searchForm.name) {
params.name = this.searchForm.name
}
if (this.searchForm.phone) {
params.phone = this.searchForm.phone
}
if (this.searchForm.refereeType !== null && this.searchForm.refereeType !== '') {
params.refereeType = this.searchForm.refereeType
}
getRefereeList(this.pagination.current, this.pagination.size, params)
.then(res => {
console.log('裁判列表返回数据:', res)
const responseData = res.data?.data
if (responseData && responseData.records) {
this.tableData = responseData.records
this.pagination.total = responseData.total || 0
}
})
.catch(err => {
console.error('加载裁判列表失败', err)
this.$message.error('加载裁判列表失败')
})
.finally(() => {
this.loading = false
})
},
// 搜索
handleSearch() {
this.pagination.current = 1
this.loadRefereeList()
},
// 重置
handleReset() {
this.searchForm = {
name: '',
phone: '',
refereeType: null
}
this.pagination.current = 1
this.loadRefereeList()
},
// 分页
handleSizeChange(size) {
this.pagination.size = size
this.pagination.current = 1
this.loadRefereeList()
},
handleCurrentChange(current) {
this.pagination.current = current
this.loadRefereeList()
},
// 新增
handleAdd() {
this.dialogTitle = '新增评委'
this.isEdit = false
this.resetFormData()
this.dialogVisible = true
},
// 编辑
handleEdit(row) {
this.dialogTitle = '编辑评委'
this.isEdit = true
this.formData = { ...row }
this.dialogVisible = true
},
// 删除
handleDelete(row) {
this.$confirm('确定删除该评委吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true
removeReferee(row.id.toString())
.then(res => {
this.$message.success('删除成功')
this.loadRefereeList()
})
.catch(err => {
console.error('删除失败', err)
this.$message.error('删除失败')
})
.finally(() => {
this.loading = false
})
}).catch(() => {})
},
// 提交表单
handleSubmit() {
this.$refs.refereeForm.validate((valid) => {
if (valid) {
this.submitLoading = true
const submitData = { ...this.formData }
// 如果是编辑,确保有 id
if (this.isEdit && !submitData.id) {
this.$message.error('编辑数据异常,请重新操作')
this.submitLoading = false
return
}
// 如果是新增,删除 id 字段
if (!this.isEdit) {
delete submitData.id
}
submitReferee(submitData)
.then(res => {
this.$message.success(this.isEdit ? '修改成功' : '新增成功')
this.dialogVisible = false
this.loadRefereeList()
})
.catch(err => {
console.error('提交失败', err)
this.$message.error('提交失败')
})
.finally(() => {
this.submitLoading = false
})
}
})
},
// 关闭弹窗
handleDialogClose() {
this.$refs.refereeForm.resetFields()
this.resetFormData()
},
// 重置表单数据
resetFormData() {
this.formData = {
id: null,
name: '',
gender: 1,
phone: '',
idCard: '',
refereeType: null,
level: '',
specialty: '',
remark: ''
}
}
}
}
</script>
<style lang="scss" scoped>
.referee-container {
min-height: 100%;
padding: 15px;
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
}
.search-form {
margin-bottom: 15px;
}
.pagination {
margin-top: 15px;
text-align: right;
}
.dialog-footer {
text-align: right;
}
}
</style>

View File

@@ -1,401 +0,0 @@
<template>
<div class="martial-registration-detail">
<div class="page-header">
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
<h2 class="page-title">报名详情</h2>
</div>
<div class="competition-info">
<h3 class="section-title">赛事名称</h3>
<p class="detail-id">ID: {{ competitionInfo.id }}</p>
<el-row :gutter="15" class="info-row">
<el-col :span="6">
<div class="info-item">
<label>主办单位</label>
<div class="info-value">{{ competitionInfo.organizer }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>地区</label>
<div class="info-value">{{ competitionInfo.location }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>详细地点</label>
<div class="info-value">{{ competitionInfo.venue }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>报名时间</label>
<div class="info-value">{{ competitionInfo.registrationTime }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="15" class="info-row">
<el-col :span="6">
<div class="info-item">
<label>比赛时间</label>
<div class="info-value">{{ competitionInfo.competitionTime }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>报名人数</label>
<div class="info-value">{{ competitionInfo.totalParticipants }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>总金额</label>
<div class="info-value amount">¥{{ competitionInfo.totalAmount }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>状态</label>
<div class="info-value">
<el-tag type="success" size="small">{{ competitionInfo.status }}</el-tag>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="tabs-section">
<div class="tab-buttons">
<el-button
size="small"
:type="activeTab === 'participants' ? 'primary' : ''"
@click="activeTab = 'participants'"
>
参赛人数统计
</el-button>
<el-button
size="small"
:type="activeTab === 'projectTime' ? 'primary' : ''"
@click="activeTab = 'projectTime'"
>
项目时间统计
</el-button>
<el-button
size="small"
:type="activeTab === 'amountStats' ? 'primary' : ''"
@click="activeTab = 'amountStats'"
>
全额统计
</el-button>
</div>
<!-- 参赛人数统计Tab -->
<div v-show="activeTab === 'participants'" class="tab-content">
<div class="tab-hint">
在营业分组: 本操作 提现栏标签 提名栏标签 比赛栏标签
</div>
<el-table :data="participantsData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="单位" min-width="180">
<template #default="scope">
<span>{{ scope.row.schoolUnit }}</span>
<div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
</template>
</el-table-column>
<el-table-column prop="category" label="类别" width="80"></el-table-column>
<el-table-column prop="individual" label="2队" width="60" align="center"></el-table-column>
<el-table-column prop="dual" label="2组" width="60" align="center"></el-table-column>
<el-table-column prop="team1101" label="1101" width="60" align="center"></el-table-column>
<el-table-column prop="workers" label="工作人员" width="90" align="center"></el-table-column>
<el-table-column prop="female" label="女性组别" width="90" align="center"></el-table-column>
<el-table-column prop="total" label="合计" width="60" align="center">
<template #default="scope">
<span class="total-num">+{{ scope.row.total }}</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 项目时间统计Tab -->
<div v-show="activeTab === 'projectTime'" class="tab-content">
<div class="tab-hint">
项目时间统计
</div>
<el-table :data="projectTimeData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目" min-width="150">
<template #default="scope">
<span>{{ scope.row.projectName }}</span>
<div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
</template>
</el-table-column>
<el-table-column prop="participantCategory" label="参人/单位" width="100"></el-table-column>
<el-table-column prop="teamCount" label="队伍" width="80" align="center"></el-table-column>
<el-table-column prop="singleTeamPeople" label="单位型号人数" width="120" align="center"></el-table-column>
<el-table-column prop="estimatedDuration" label="剩下显时(公共)" width="150" align="center"></el-table-column>
</el-table>
</div>
<!-- 全额统计Tab -->
<div v-show="activeTab === 'amountStats'" class="tab-content">
<el-table :data="amountStatsData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
<el-table-column prop="projectCount" label="项目" width="120" align="center"></el-table-column>
<el-table-column prop="totalAmount" label="全额" width="150" align="center">
<template #default="scope">
<span class="amount">¥{{ scope.row.totalAmount }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="footer-actions">
<el-button size="small" @click="handleExport">导出</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'MartialRegistrationDetail',
data() {
return {
orderId: null,
activeTab: 'participants',
competitionInfo: {
id: '123456889900',
organizer: '第三十届武术大赛主办单位',
location: '四川省 成都市',
venue: '武侯区人民医院',
registrationTime: '2025-11-10 16:00:00 - 2025-11-28 16:00:00',
competitionTime: '2025-11-10 16:00:00 - 2025-11-28 16:00:00',
totalParticipants: 99999,
totalAmount: 12345,
status: '进赛中'
},
participantsData: [
{
schoolUnit: '清河小学',
category: '集体',
hint: '剩余功能在提现上,显示栏标签',
individual: 1,
dual: 1,
team1101: 1,
workers: 4,
female: 5,
total: 12
},
{
schoolUnit: '方山镇小学校',
category: '',
individual: 0,
dual: 0,
team1101: 0,
workers: 0,
female: 0,
total: 0
},
{
schoolUnit: '少林寺武术学校',
category: '单人',
individual: 3,
dual: 2,
team1101: 2,
workers: 6,
female: 8,
total: 21
},
{
schoolUnit: '访河社区',
category: '集体',
individual: 2,
dual: 1,
team1101: 1,
workers: 3,
female: 4,
total: 11
}
],
projectTimeData: [
{
projectName: '小学组小组赛男女类',
hint: '剩余功能在位置提现上,显示出运动类别名称的位置',
participantCategory: '集体',
teamCount: 1,
singleTeamPeople: 10,
estimatedDuration: 4
},
{
projectName: '中学组个人赛',
participantCategory: '单人',
teamCount: 3,
singleTeamPeople: 1,
estimatedDuration: 2
},
{
projectName: '少年组对抗赛',
participantCategory: '双人',
teamCount: 2,
singleTeamPeople: 2,
estimatedDuration: 3
}
],
amountStatsData: [
{
schoolUnit: '清河小学',
projectCount: 5,
totalAmount: 9300
},
{
schoolUnit: '方山镇小学校',
projectCount: 0,
totalAmount: 0
},
{
schoolUnit: '少林寺武术学校',
projectCount: 8,
totalAmount: 15600
},
{
schoolUnit: '访河社区',
projectCount: 4,
totalAmount: 7200
}
]
}
},
mounted() {
this.orderId = this.$route.query.orderId
// 使用静态数据不调用API
},
methods: {
goBack() {
this.$router.push('/martial/order/list')
},
handleExport() {
this.$message.success('导出功能开发中')
}
}
}
</script>
<style lang="scss" scoped>
.martial-registration-detail {
padding: 15px;
background: #fff;
.page-header {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
}
.competition-info {
margin-bottom: 15px;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
.section-title {
margin-bottom: 8px;
font-size: 15px;
font-weight: 600;
padding-left: 8px;
border-left: 3px solid #409eff;
}
.detail-id {
margin-bottom: 15px;
padding-left: 8px;
color: #909399;
font-size: 11px;
}
.info-row {
margin-bottom: 12px;
}
.info-item {
padding: 8px;
background: #f5f7fa;
label {
display: block;
margin-bottom: 6px;
font-size: 11px;
color: #909399;
}
.info-value {
font-size: 12px;
color: #606266;
&.amount {
color: #e6a23c;
font-weight: 600;
}
}
}
}
.tabs-section {
margin-bottom: 15px;
.tab-buttons {
margin-bottom: 15px;
padding: 12px;
background: #fff;
border: 1px solid #dcdfe6;
}
.tab-content {
min-height: 300px;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
.tab-hint {
padding: 8px 12px;
margin-bottom: 12px;
background: #fff3e0;
border-left: 3px solid #ff9800;
color: #e65100;
font-size: 11px;
}
.row-hint {
margin-top: 4px;
padding: 2px 5px;
color: #f50057;
font-size: 11px;
background: rgba(245, 0, 87, 0.05);
display: inline-block;
}
}
}
.total-num,
.amount {
color: #e6a23c;
font-weight: 600;
}
.footer-actions {
text-align: center;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
}
}
</style>

View File

@@ -0,0 +1,616 @@
<template>
<div class="martial-registration-container" v-loading="loading">
<div class="page-header">
<el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
<h2 class="page-title">报名详情</h2>
</div>
<div class="competition-info">
<h3 class="section-title">{{ competitionInfo.competitionName || '赛事信息' }}</h3>
<p class="detail-id">ID: {{ competitionInfo.id }}</p>
<el-row :gutter="15" class="info-row">
<el-col :span="6">
<div class="info-item">
<label>主办单位</label>
<div class="info-value">{{ competitionInfo.organizer }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>地区</label>
<div class="info-value">{{ competitionInfo.location }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>详细地点</label>
<div class="info-value">{{ competitionInfo.venue }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>报名时间</label>
<div class="info-value">{{ competitionInfo.registrationTime }}</div>
</div>
</el-col>
</el-row>
<el-row :gutter="15" class="info-row">
<el-col :span="6">
<div class="info-item">
<label>比赛时间</label>
<div class="info-value">{{ competitionInfo.competitionTime }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>报名人数</label>
<div class="info-value">{{ competitionInfo.totalParticipants }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>总金额</label>
<div class="info-value amount">¥{{ competitionInfo.totalAmount }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<label>状态</label>
<div class="info-value">
<el-tag type="success" size="small">{{ competitionInfo.status }}</el-tag>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="tabs-section">
<div class="tab-buttons">
<el-button
size="small"
:type="activeTab === 'participants' ? 'primary' : ''"
@click="activeTab = 'participants'"
>
参赛人数统计
</el-button>
<el-button
size="small"
:type="activeTab === 'projectTime' ? 'primary' : ''"
@click="activeTab = 'projectTime'"
>
项目时间统计
</el-button>
<el-button
size="small"
:type="activeTab === 'amountStats' ? 'primary' : ''"
@click="activeTab = 'amountStats'"
>
全额统计
</el-button>
</div>
<!-- 参赛人数统计Tab -->
<div v-show="activeTab === 'participants'" class="tab-content">
<el-table :data="participantsData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="单位" min-width="180">
<template #default="scope">
<span>{{ scope.row.schoolUnit }}</span>
<div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
</template>
</el-table-column>
<el-table-column prop="singleCount" label="单人项目" width="100" align="center"></el-table-column>
<el-table-column prop="teamCount" label="集体项目" width="100" align="center"></el-table-column>
<el-table-column prop="male" label="男" width="60" align="center"></el-table-column>
<el-table-column prop="female" label="女" width="60" align="center"></el-table-column>
<el-table-column prop="total" label="合计" width="60" align="center">
<template #default="scope">
<span class="total-num">+{{ scope.row.total }}</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 项目时间统计Tab -->
<div v-show="activeTab === 'projectTime'" class="tab-content">
<el-table :data="projectTimeData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目" min-width="150">
<template #default="scope">
<span>{{ scope.row.projectName }}</span>
<div v-if="scope.row.hint" class="row-hint">{{ scope.row.hint }}</div>
</template>
</el-table-column>
<el-table-column prop="projectType" label="单人/集体" width="100" align="center"></el-table-column>
<el-table-column prop="athleteCount" label="人数/集体" width="100" align="center"></el-table-column>
<el-table-column prop="groupCount" label="组数" width="80" align="center"></el-table-column>
<el-table-column prop="estimatedDuration" label="时长(分)" width="100" align="center"></el-table-column>
<el-table-column prop="projectCode" label="项目编码" width="120" align="center"></el-table-column>
</el-table>
</div>
<!-- 全额统计Tab -->
<div v-show="activeTab === 'amountStats'" class="tab-content">
<el-table :data="amountStatsData" border stripe size="small">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="schoolUnit" label="学校/单位" min-width="200"></el-table-column>
<el-table-column prop="projectCount" label="项目" width="120" align="center"></el-table-column>
<el-table-column prop="totalAmount" label="全额" width="150" align="center">
<template #default="scope">
<span class="amount">¥{{ scope.row.totalAmount }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="footer-actions">
<el-button size="small" @click="handleExport">导出</el-button>
</div>
</div>
</template>
<script>
import {
getOrderDetail,
getOrderRegistrationDetail,
getOrderProjectStats,
getOrderAmountStats
} from '@/api/martial/order'
import { getCompetitionDetail } from '@/api/martial/competition'
import { getProjectDetail } from '@/api/martial/project'
import { getParticipantList } from '@/api/martial/participant'
export default {
name: 'MartialRegistrationDetail',
data() {
return {
competitionId: null, // 改为赛事ID
loading: false,
activeTab: 'participants',
competitionInfo: {
id: '',
competitionName: '', // 添加赛事名称
organizer: '',
location: '',
venue: '',
registrationTime: '',
competitionTime: '',
totalParticipants: 0,
totalAmount: 0,
status: ''
},
participantsData: [],
projectTimeData: [],
amountStatsData: [],
projectCache: new Map(), // 添加项目信息缓存避免重复API调用
participantsCache: null // 缓存参赛者列表,避免重复查询
}
},
mounted() {
this.competitionId = this.$route.query.competitionId // 改为获取赛事ID
if (this.competitionId) {
this.loadCompetitionInfo(this.competitionId)
this.loadRegistrationStats()
this.loadParticipantsStats()
this.loadProjectTimeStats()
this.loadAmountStats()
} else {
this.$message.warning('未获取到赛事ID')
}
},
methods: {
// 统一获取参赛者列表(带缓存)
async getParticipants() {
if (this.participantsCache !== null) {
return this.participantsCache
}
try {
const res = await getParticipantList(this.competitionId, 1, 10000)
const participants = res.data?.data?.records || res.data?.data || []
this.participantsCache = participants
return participants
} catch (err) {
console.error('查询参赛者列表失败:', err)
return []
}
},
// 统一的项目信息获取方法(带缓存)
async getProjectInfo(projectId) {
if (!projectId) return null
// 先从缓存中查找
if (this.projectCache.has(projectId)) {
return this.projectCache.get(projectId)
}
// 缓存中没有则调用API
try {
const projectRes = await getProjectDetail(projectId)
const projectInfo = projectRes.data?.data
if (projectInfo) {
// 存入缓存
this.projectCache.set(projectId, projectInfo)
return projectInfo
}
} catch (err) {
console.error(`查询项目${projectId}详情失败:`, err)
}
return null
},
// 批量预加载项目信息(一次性加载所有需要的项目)
async preloadProjectInfo(participants) {
const projectIds = new Set()
participants.forEach(p => {
const projectId = p.projectId || p.project_id
if (projectId && !this.projectCache.has(projectId)) {
projectIds.add(projectId)
}
})
// 并行加载所有项目信息
if (projectIds.size > 0) {
const promises = Array.from(projectIds).map(id => this.getProjectInfo(id))
await Promise.all(promises)
}
},
// 加载赛事信息
async loadCompetitionInfo(competitionId) {
try {
const res = await getCompetitionDetail(competitionId)
console.log('赛事详情返回:', res)
const compData = res.data?.data
if (compData) {
this.competitionInfo.id = compData.id
this.competitionInfo.competitionName = compData.competitionName || compData.competition_name || ''
this.competitionInfo.organizer = compData.organizer || ''
this.competitionInfo.location = compData.location || ''
this.competitionInfo.venue = compData.venue || ''
// 格式化时间范围(兼容驼峰和下划线命名)
const regStartTime = compData.registrationStartTime || compData.registration_start_time
const regEndTime = compData.registrationEndTime || compData.registration_end_time
const compStartTime = compData.competitionStartTime || compData.competition_start_time
const compEndTime = compData.competitionEndTime || compData.competition_end_time
if (regStartTime && regEndTime) {
this.competitionInfo.registrationTime = `${regStartTime} - ${regEndTime}`
}
if (compStartTime && compEndTime) {
this.competitionInfo.competitionTime = `${compStartTime} - ${compEndTime}`
}
// 设置赛事状态
this.competitionInfo.status = this.getCompetitionStatus(compData.status)
}
} catch (err) {
console.error('加载赛事信息失败', err)
this.$message.error('加载赛事信息失败')
}
},
// 加载报名统计信息(统计该赛事下所有订单)
async loadRegistrationStats() {
try {
// 使用缓存的参赛者列表
const participants = await this.getParticipants()
console.log('运动员列表返回:', participants)
this.competitionInfo.totalParticipants = participants.length
// 预加载所有项目信息(一次性并行加载)
await this.preloadProjectInfo(participants)
// 计算总金额(从缓存中获取)
let totalAmount = 0
for (const athlete of participants) {
const projectId = athlete.projectId || athlete.project_id
if (projectId) {
const project = this.projectCache.get(projectId)
if (project) {
totalAmount += parseFloat(project.price || 0)
}
}
}
this.competitionInfo.totalAmount = totalAmount.toFixed(2)
} catch (err) {
console.error('加载报名统计失败', err)
this.$message.warning('加载报名统计数据失败,请稍后重试')
}
},
// 加载参赛人数统计(该赛事的所有运动员)
async loadParticipantsStats() {
try {
// 使用缓存的参赛者列表
const participants = await this.getParticipants()
console.log('参赛人员列表返回:', participants)
// 预加载项目信息
await this.preloadProjectInfo(participants)
// 按单位分组统计
const unitMap = new Map()
participants.forEach(p => {
// 兼容驼峰和下划线命名
const unit = p.organization || p.teamName || p.team_name || '未知单位'
const projectId = p.projectId || p.project_id
const project = this.projectCache.get(projectId)
const projectType = project ? (project.type || 1) : 1 // 1=单人, 2=集体
if (!unitMap.has(unit)) {
unitMap.set(unit, {
schoolUnit: unit,
singleCount: 0,
teamCount: 0,
male: 0,
female: 0,
total: 0
})
}
const stat = unitMap.get(unit)
stat.total++
// 按项目类型统计
if (projectType === 1) {
stat.singleCount++
} else {
stat.teamCount++
}
// 按性别统计
if (p.gender === 1) {
stat.male++
} else if (p.gender === 2) {
stat.female++
}
})
this.participantsData = Array.from(unitMap.values())
} catch (err) {
console.error('加载参赛人员统计失败', err)
this.$message.warning('加载参赛人员统计失败')
this.participantsData = []
}
},
// 加载项目时间统计(该赛事的所有项目及参赛人数)
async loadProjectTimeStats() {
try {
// 使用缓存的参赛者列表
const participants = await this.getParticipants()
// 预加载项目信息
await this.preloadProjectInfo(participants)
// 按项目ID分组统计人数
const projectAthleteCount = new Map()
participants.forEach(athlete => {
const projectId = athlete.projectId || athlete.project_id
if (projectId) {
projectAthleteCount.set(projectId, (projectAthleteCount.get(projectId) || 0) + 1)
}
})
// 从缓存中获取项目信息并构建统计数据
const projectStats = []
for (const [projectId, count] of projectAthleteCount) {
const project = this.projectCache.get(projectId)
if (project) {
const projectType = project.type || 1 // 1=单人, 2=集体
projectStats.push({
projectName: project.projectName || project.project_name || '未知项目',
projectType: projectType === 1 ? '单人' : '集体',
athleteCount: count,
groupCount: projectType === 2 ? count : '-', // 集体项目显示组数,单人显示-
estimatedDuration: project.estimatedDuration || project.estimated_duration || 0,
projectCode: project.projectCode || project.project_code || ''
})
}
}
this.projectTimeData = projectStats
} catch (err) {
console.error('加载项目统计失败', err)
this.$message.warning('加载项目统计失败')
this.projectTimeData = []
}
},
// 加载金额统计(该赛事所有单位的报名金额)
async loadAmountStats() {
try {
// 使用缓存的参赛者列表
const participants = await this.getParticipants()
// 2. 按单位分组并统计
const unitMap = new Map()
for (const athlete of participants) {
// 兼容驼峰和下划线命名
const unit = athlete.organization || '未知单位'
const projectId = athlete.projectId || athlete.project_id
if (!unitMap.has(unit)) {
unitMap.set(unit, {
projectIds: new Set(),
totalAmount: 0
})
}
const stat = unitMap.get(unit)
// 添加项目IDSet自动去重用于统计项目数量
if (projectId) {
stat.projectIds.add(projectId)
// 从缓存中获取价格并累加到总金额
const project = this.projectCache.get(projectId)
const price = project ? (project.price || 0) : 0
stat.totalAmount += parseFloat(price)
}
}
// 3. 计算每个单位的总金额
const amountStats = []
for (const [unit, stat] of unitMap) {
amountStats.push({
schoolUnit: unit,
projectCount: stat.projectIds.size,
totalAmount: stat.totalAmount.toFixed(2)
})
}
this.amountStatsData = amountStats
} catch (err) {
console.error('加载金额统计失败', err)
this.$message.warning('加载金额统计失败')
this.amountStatsData = []
}
},
getCompetitionStatus(status) {
const statusMap = {
1: '未开始',
2: '报名中',
3: '进行中',
4: '已结束'
}
return statusMap[status] || '未知'
},
goBack() {
this.$router.go(-1)
},
handleExport() {
this.$message.success('导出功能开发中')
}
}
}
</script>
<style lang="scss" scoped>
.martial-registration-container {
padding: 15px;
background: #fff;
.page-header {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
.page-title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
}
.competition-info {
margin-bottom: 15px;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
.section-title {
margin-bottom: 8px;
font-size: 15px;
font-weight: 600;
padding-left: 8px;
border-left: 3px solid #409eff;
}
.detail-id {
margin-bottom: 15px;
padding-left: 8px;
color: #909399;
font-size: 11px;
}
.info-row {
margin-bottom: 12px;
}
.info-item {
padding: 8px;
background: #f5f7fa;
label {
display: block;
margin-bottom: 6px;
font-size: 11px;
color: #909399;
}
.info-value {
font-size: 12px;
color: #606266;
&.amount {
color: #e6a23c;
font-weight: 600;
}
}
}
}
.tabs-section {
margin-bottom: 15px;
.tab-buttons {
margin-bottom: 15px;
padding: 12px;
background: #fff;
border: 1px solid #dcdfe6;
}
.tab-content {
min-height: 300px;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
.tab-hint {
padding: 8px 12px;
margin-bottom: 12px;
background: #fff3e0;
border-left: 3px solid #ff9800;
color: #e65100;
font-size: 11px;
}
.row-hint {
margin-top: 4px;
padding: 2px 5px;
color: #f50057;
font-size: 11px;
background: rgba(245, 0, 87, 0.05);
display: inline-block;
}
}
}
.total-num,
.amount {
color: #e6a23c;
font-weight: 600;
}
.footer-actions {
text-align: center;
padding: 15px;
background: #fff;
border: 1px solid #dcdfe6;
}
}
</style>

View File

@@ -0,0 +1,786 @@
<template>
<div class="result-container">
<!-- 搜索区域 -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="赛事">
<el-select
v-model="queryParams.competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 200px"
@change="handleCompetitionChange"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="项目">
<el-select
v-model="queryParams.projectId"
placeholder="请选择项目"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="item in projectList"
:key="item.id"
:label="item.projectName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="选手姓名">
<el-input
v-model="queryParams.athleteName"
placeholder="请输入选手姓名"
clearable
style="width: 150px"
/>
</el-form-item>
<el-form-item label="团队名称">
<el-input
v-model="queryParams.teamName"
placeholder="请输入团队名称"
clearable
style="width: 150px"
/>
</el-form-item>
<el-form-item label="是否最终成绩">
<el-select
v-model="queryParams.isFinal"
placeholder="请选择"
clearable
style="width: 130px"
>
<el-option label="是" :value="1" />
<el-option label="否" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">
查询
</el-button>
<el-button :icon="Refresh" @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 统计卡片 -->
<el-row :gutter="20" class="stats-row">
<el-col :span="6">
<el-card shadow="hover" class="stats-card">
<div class="stats-content">
<div class="stats-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
<el-icon :size="30"><User /></el-icon>
</div>
<div class="stats-info">
<div class="stats-value">{{ statistics.totalCount || 0 }}</div>
<div class="stats-label">总参赛人数</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stats-card">
<div class="stats-content">
<div class="stats-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
<el-icon :size="30"><Finished /></el-icon>
</div>
<div class="stats-info">
<div class="stats-value">{{ statistics.calculatedCount || 0 }}</div>
<div class="stats-label">已计算成绩</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stats-card">
<div class="stats-content">
<div class="stats-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
<el-icon :size="30"><Trophy /></el-icon>
</div>
<div class="stats-info">
<div class="stats-value">{{ statistics.medalCount || 0 }}</div>
<div class="stats-label">已分配奖牌</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="stats-card">
<div class="stats-content">
<div class="stats-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
<el-icon :size="30"><Document /></el-icon>
</div>
<div class="stats-info">
<div class="stats-value">{{ statistics.publishedCount || 0 }}</div>
<div class="stats-label">已发布成绩</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 工具栏 -->
<el-card shadow="never" class="toolbar-card">
<div class="toolbar">
<div class="toolbar-left">
<el-button
type="primary"
:icon="Operation"
:disabled="!selection.length"
@click="handleBatchCalculate"
>
批量计算成绩
</el-button>
<el-button
type="success"
:icon="Sort"
:disabled="!queryParams.projectId"
@click="handleAutoRanking"
>
自动排名
</el-button>
<el-button
type="warning"
:icon="Medal"
:disabled="!queryParams.projectId"
@click="handleAllocateMedals"
>
分配奖牌
</el-button>
<el-button
type="info"
:icon="Promotion"
:disabled="!selection.length"
@click="handlePublish"
>
发布成绩
</el-button>
<el-button
:icon="Remove"
:disabled="!selection.length"
@click="handleUnpublish"
>
撤销发布
</el-button>
<el-button
type="danger"
:icon="Download"
@click="handleExport"
>
导出成绩单
</el-button>
</div>
<div class="toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button circle :icon="Refresh" @click="fetchData" />
</el-tooltip>
</div>
</div>
</el-card>
<!-- 数据表格 -->
<el-card shadow="never" class="table-card">
<el-table
v-loading="loading"
:data="tableData"
stripe
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="ranking" label="排名" width="80" align="center">
<template #default="{ row }">
<el-tag v-if="row.ranking === 1" type="danger" effect="dark">🥇 {{ row.ranking }}</el-tag>
<el-tag v-else-if="row.ranking === 2" type="warning" effect="dark">🥈 {{ row.ranking }}</el-tag>
<el-tag v-else-if="row.ranking === 3" type="success" effect="dark">🥉 {{ row.ranking }}</el-tag>
<span v-else>{{ row.ranking || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="athleteName" label="选手姓名" width="120" />
<el-table-column prop="teamName" label="团队名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="projectName" label="项目" min-width="150" show-overflow-tooltip />
<el-table-column prop="totalScore" label="总分" width="100" align="center">
<template #default="{ row }">
{{ row.totalScore !== null ? row.totalScore.toFixed(2) : '-' }}
</template>
</el-table-column>
<el-table-column prop="highestScore" label="最高分" width="100" align="center">
<template #default="{ row }">
<span style="color: #f56c6c">{{ row.highestScore !== null ? row.highestScore.toFixed(2) : '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="lowestScore" label="最低分" width="100" align="center">
<template #default="{ row }">
<span style="color: #909399">{{ row.lowestScore !== null ? row.lowestScore.toFixed(2) : '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="validScoreCount" label="有效评分数" width="110" align="center" />
<el-table-column prop="difficultyCoefficient" label="难度系数" width="100" align="center">
<template #default="{ row }">
×{{ row.difficultyCoefficient || 1 }}
</template>
</el-table-column>
<el-table-column prop="finalScore" label="最终成绩" width="110" align="center">
<template #default="{ row }">
<span v-if="row.finalScore !== null" style="color: #409eff; font-weight: bold; font-size: 16px">
{{ row.finalScore.toFixed(2) }}
</span>
<span v-else style="color: #909399">未计算</span>
</template>
</el-table-column>
<el-table-column prop="medal" label="奖牌" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.medal === 'gold'" type="danger" effect="dark">🏅 金牌</el-tag>
<el-tag v-else-if="row.medal === 'silver'" type="warning" effect="dark">🥈 银牌</el-tag>
<el-tag v-else-if="row.medal === 'bronze'" type="success" effect="dark">🥉 铜牌</el-tag>
<span v-else style="color: #909399">-</span>
</template>
</el-table-column>
<el-table-column prop="isPublished" label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.isPublished === 1" type="success">已发布</el-tag>
<el-tag v-else type="info">未发布</el-tag>
</template>
</el-table-column>
<el-table-column prop="publishTime" label="发布时间" width="160" align="center">
<template #default="{ row }">
{{ row.publishTime ? formatDate(row.publishTime) : '-' }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" :icon="View" @click="handleView(row)">
查看详情
</el-button>
<el-button link type="success" :icon="Edit" @click="handleCalculate(row)">
重新计算
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="queryParams.current"
v-model:page-size="queryParams.size"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
/>
</div>
</el-card>
<!-- 成绩详情弹窗 -->
<el-dialog v-model="detailVisible" title="成绩详情" width="900px">
<el-descriptions :column="3" border>
<el-descriptions-item label="选手姓名">{{ detailData.athleteName }}</el-descriptions-item>
<el-descriptions-item label="团队名称">{{ detailData.teamName }}</el-descriptions-item>
<el-descriptions-item label="项目">{{ detailData.projectName }}</el-descriptions-item>
<el-descriptions-item label="排名">
<el-tag v-if="detailData.ranking === 1" type="danger" effect="dark">🥇 第1名</el-tag>
<el-tag v-else-if="detailData.ranking === 2" type="warning" effect="dark">🥈 第2名</el-tag>
<el-tag v-else-if="detailData.ranking === 3" type="success" effect="dark">🥉 第3名</el-tag>
<span v-else>{{ detailData.ranking }}</span>
</el-descriptions-item>
<el-descriptions-item label="总分">{{ detailData.totalScore?.toFixed(2) || '-' }}</el-descriptions-item>
<el-descriptions-item label="最终成绩">
<span style="color: #409eff; font-weight: bold; font-size: 18px">
{{ detailData.finalScore?.toFixed(2) || '-' }}
</span>
</el-descriptions-item>
<el-descriptions-item label="最高分">
<span style="color: #f56c6c">{{ detailData.highestScore?.toFixed(2) || '-' }}</span>
</el-descriptions-item>
<el-descriptions-item label="最低分">
<span style="color: #909399">{{ detailData.lowestScore?.toFixed(2) || '-' }}</span>
</el-descriptions-item>
<el-descriptions-item label="有效评分数">{{ detailData.validScoreCount || 0 }}</el-descriptions-item>
<el-descriptions-item label="难度系数">×{{ detailData.difficultyCoefficient || 1 }}</el-descriptions-item>
<el-descriptions-item label="奖牌">
<el-tag v-if="detailData.medal === 'gold'" type="danger" effect="dark">🏅 金牌</el-tag>
<el-tag v-else-if="detailData.medal === 'silver'" type="warning" effect="dark">🥈 银牌</el-tag>
<el-tag v-else-if="detailData.medal === 'bronze'" type="success" effect="dark">🥉 铜牌</el-tag>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="发布状态">
<el-tag v-if="detailData.isPublished === 1" type="success">已发布</el-tag>
<el-tag v-else type="info">未发布</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-divider />
<h4>评分明细</h4>
<el-table :data="detailData.scoreList" border size="small">
<el-table-column prop="judgeName" label="裁判" width="120" />
<el-table-column prop="score" label="评分" width="100" align="center">
<template #default="{ row }">
{{ row.score?.toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="deductionPoints" label="扣分" width="100" align="center">
<template #default="{ row }">
<span style="color: #f56c6c">-{{ row.deductionPoints?.toFixed(2) || 0 }}</span>
</template>
</el-table-column>
<el-table-column prop="isExcluded" label="是否去除" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="row.isExcluded" type="info" size="small">已去除</el-tag>
<el-tag v-else type="success" size="small">有效</el-tag>
</template>
</el-table-column>
<el-table-column prop="scoreTime" label="评分时间" width="160" align="center">
<template #default="{ row }">
{{ formatDate(row.scoreTime) }}
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
</el-table>
</el-dialog>
<!-- 奖牌分配弹窗 -->
<el-dialog v-model="medalDialogVisible" title="奖牌分配" width="500px">
<el-form :model="medalForm" label-width="100px">
<el-form-item label="金牌数量">
<el-input-number v-model="medalForm.goldCount" :min="0" :max="20" />
</el-form-item>
<el-form-item label="银牌数量">
<el-input-number v-model="medalForm.silverCount" :min="0" :max="20" />
</el-form-item>
<el-form-item label="铜牌数量">
<el-input-number v-model="medalForm.bronzeCount" :min="0" :max="20" />
</el-form-item>
<el-alert type="info" :closable="false" show-icon>
<template #title>
将根据当前项目的排名自动分配奖牌
</template>
</el-alert>
</el-form>
<template #footer>
<el-button @click="medalDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="medalLoading" @click="handleMedalSubmit">
确认分配
</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Search,
Refresh,
View,
Edit,
Operation,
Sort,
Medal,
Promotion,
Remove,
Download,
User,
Finished,
Trophy,
Document
} from '@element-plus/icons-vue'
import {
getResultList,
calculateResult,
batchCalculateResults,
autoRanking,
allocateMedals,
publishResult,
unpublishResult,
getResultDetail,
getResultStatistics,
exportResults
} from '@/api/martial/result'
import { getCompetitionList } from '@/api/martial/competition'
import { getProjectsByCompetition } from '@/api/martial/project'
import dayjs from 'dayjs'
// 数据定义
const loading = ref(false)
const medalLoading = ref(false)
const tableData = ref([])
const total = ref(0)
const selection = ref([])
const competitionList = ref([])
const projectList = ref([])
const detailVisible = ref(false)
const medalDialogVisible = ref(false)
const detailData = ref({})
const statistics = ref({
totalCount: 0,
calculatedCount: 0,
medalCount: 0,
publishedCount: 0
})
// 查询参数
const queryParams = reactive({
current: 1,
size: 10,
competitionId: '',
projectId: '',
athleteName: '',
teamName: '',
isFinal: ''
})
// 奖牌分配表单
const medalForm = reactive({
goldCount: 1,
silverCount: 2,
bronzeCount: 3
})
// 加载赛事列表
const loadCompetitionList = async () => {
try {
const res = await getCompetitionList(1, 1000, { status: 1 })
if (res.data && res.data.records) {
competitionList.value = res.data.records
}
} catch (error) {
console.error('加载赛事列表失败:', error)
}
}
// 赛事变化
const handleCompetitionChange = async (competitionId) => {
queryParams.projectId = ''
projectList.value = []
if (competitionId) {
try {
const res = await getProjectsByCompetition(competitionId)
if (res.data) {
projectList.value = res.data
}
} catch (error) {
console.error('加载项目列表失败:', error)
}
}
}
// 加载统计数据
const loadStatistics = async () => {
if (!queryParams.projectId && !queryParams.competitionId) return
try {
const res = await getResultStatistics({
projectId: queryParams.projectId,
competitionId: queryParams.competitionId
})
if (res.data) {
statistics.value = res.data
}
} catch (error) {
console.error('加载统计数据失败:', error)
}
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
const res = await getResultList(
queryParams.current,
queryParams.size,
queryParams
)
if (res.data) {
tableData.value = res.data.records || []
total.value = res.data.total || 0
}
await loadStatistics()
} catch (error) {
ElMessage.error('获取数据失败')
console.error(error)
} finally {
loading.value = false
}
}
// 搜索
const handleSearch = () => {
queryParams.current = 1
fetchData()
}
// 重置
const handleReset = () => {
Object.assign(queryParams, {
current: 1,
size: 10,
competitionId: '',
projectId: '',
athleteName: '',
teamName: '',
isFinal: ''
})
projectList.value = []
fetchData()
}
// 查看详情
const handleView = async (row) => {
try {
const res = await getResultDetail(row.id)
if (res.data) {
detailData.value = res.data
detailVisible.value = true
}
} catch (error) {
ElMessage.error('获取详情失败')
}
}
// 计算单个成绩
const handleCalculate = async (row) => {
try {
await calculateResult({ resultId: row.id })
ElMessage.success('计算成功')
fetchData()
} catch (error) {
ElMessage.error('计算失败')
}
}
// 批量计算成绩
const handleBatchCalculate = () => {
ElMessageBox.confirm(`确定要计算选中的 ${selection.value.length} 个选手的成绩吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id)
await batchCalculateResults({ resultIds: ids })
ElMessage.success('批量计算成功')
fetchData()
} catch (error) {
ElMessage.error('批量计算失败')
}
})
.catch(() => {})
}
// 自动排名
const handleAutoRanking = () => {
if (!queryParams.projectId) {
ElMessage.warning('请先选择项目')
return
}
ElMessageBox.confirm('确定要对当前项目的所有选手自动排名吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
await autoRanking({ projectId: queryParams.projectId })
ElMessage.success('自动排名成功')
fetchData()
} catch (error) {
ElMessage.error('自动排名失败')
}
})
.catch(() => {})
}
// 分配奖牌
const handleAllocateMedals = () => {
if (!queryParams.projectId) {
ElMessage.warning('请先选择项目')
return
}
medalDialogVisible.value = true
}
// 提交奖牌分配
const handleMedalSubmit = async () => {
medalLoading.value = true
try {
await allocateMedals({
projectId: queryParams.projectId,
...medalForm
})
ElMessage.success('奖牌分配成功')
medalDialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error('奖牌分配失败')
} finally {
medalLoading.value = false
}
}
// 发布成绩
const handlePublish = () => {
ElMessageBox.confirm(`确定要发布选中的 ${selection.value.length} 个选手的成绩吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id)
await publishResult({ resultIds: ids })
ElMessage.success('发布成功')
fetchData()
} catch (error) {
ElMessage.error('发布失败')
}
})
.catch(() => {})
}
// 撤销发布
const handleUnpublish = () => {
ElMessageBox.confirm(`确定要撤销选中的 ${selection.value.length} 个选手的成绩发布吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
const ids = selection.value.map((item) => item.id)
await unpublishResult({ resultIds: ids })
ElMessage.success('撤销成功')
fetchData()
} catch (error) {
ElMessage.error('撤销失败')
}
})
.catch(() => {})
}
// 导出成绩单
const handleExport = async () => {
try {
const res = await exportResults(queryParams)
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
})
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `成绩单_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`
link.click()
window.URL.revokeObjectURL(link.href)
ElMessage.success('导出成功')
} catch (error) {
ElMessage.error('导出失败')
}
}
// 选择变化
const handleSelectionChange = (val) => {
selection.value = val
}
// 格式化日期
const formatDate = (date) => {
if (!date) return '-'
return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 生命周期
onMounted(() => {
loadCompetitionList()
fetchData()
})
</script>
<style scoped lang="scss">
.result-container {
padding: 20px;
.search-card,
.toolbar-card,
.table-card {
margin-bottom: 20px;
}
.search-form {
.el-form-item {
margin-bottom: 0;
}
}
.stats-row {
margin-bottom: 20px;
.stats-card {
.stats-content {
display: flex;
align-items: center;
padding: 10px 0;
.stats-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-right: 20px;
}
.stats-info {
flex: 1;
.stats-value {
font-size: 28px;
font-weight: bold;
color: #303133;
line-height: 1;
margin-bottom: 8px;
}
.stats-label {
font-size: 14px;
color: #909399;
}
}
}
}
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
.toolbar-left {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
}
</style>

View File

@@ -0,0 +1,625 @@
<template>
<div class="rules-container">
<!-- 赛事选择 -->
<el-card shadow="never" class="search-card">
<el-form :inline="true" class="search-form">
<el-form-item label="选择赛事">
<el-select
v-model="competitionId"
placeholder="请选择赛事"
clearable
filterable
style="width: 300px"
@change="handleCompetitionChange"
>
<el-option
v-for="item in competitionList"
:key="item.id"
:label="item.competitionName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</el-card>
<div v-if="competitionId" class="content-wrapper">
<!-- 附件管理 -->
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header">
<span class="card-title">📎 规程附件</span>
<el-button type="primary" size="small" :icon="Plus" @click="handleAddAttachment">
添加附件
</el-button>
</div>
</template>
<el-table :data="attachmentList" border stripe>
<el-table-column prop="fileName" label="文件名称" min-width="200" />
<el-table-column prop="fileType" label="文件类型" width="100" align="center">
<template #default="{ row }">
<el-tag>{{ row.fileType }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fileSize" label="文件大小" width="120" align="center">
<template #default="{ row }">
{{ formatFileSize(row.fileSize) }}
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" width="80" align="center" />
<el-table-column prop="status" label="状态" width="80" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="handleEditAttachment(row)">
编辑
</el-button>
<el-button link type="primary" size="small" @click="handlePreviewFile(row)">
预览
</el-button>
<el-button link type="danger" size="small" @click="handleDeleteAttachment(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 章节管理 -->
<el-card shadow="never" class="section-card">
<template #header>
<div class="card-header">
<span class="card-title">📄 规程章节</span>
<el-button type="primary" size="small" :icon="Plus" @click="handleAddChapter">
添加章节
</el-button>
</div>
</template>
<el-table :data="chapterList" border stripe>
<el-table-column prop="chapterNumber" label="章节编号" width="120" />
<el-table-column prop="title" label="章节标题" min-width="200" />
<el-table-column prop="orderNum" label="排序" width="80" align="center" />
<el-table-column prop="status" label="状态" width="80" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="220" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="handleEditChapter(row)">
编辑
</el-button>
<el-button link type="success" size="small" @click="handleManageContent(row)">
管理内容
</el-button>
<el-button link type="danger" size="small" @click="handleDeleteChapter(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<el-empty v-else description="请先选择赛事" />
<!-- 附件编辑对话框 -->
<el-dialog
v-model="attachmentDialogVisible"
:title="attachmentForm.id ? '编辑附件' : '添加附件'"
width="600px"
>
<el-form :model="attachmentForm" :rules="attachmentRules" ref="attachmentFormRef" label-width="100px">
<el-form-item label="文件上传" prop="fileUrl">
<el-upload
class="upload-demo"
:action="uploadUrl"
:headers="uploadHeaders"
:on-success="handleFileUploadSuccess"
:before-upload="beforeFileUpload"
:file-list="fileList"
:limit="1"
>
<el-button type="primary">点击上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持 pdf/doc/docx/xls/xlsx/ppt/pptx 等文档格式文件大小不超过50MB
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="文件名称" prop="fileName">
<el-input v-model="attachmentForm.fileName" placeholder="请输入文件名称" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input-number v-model="attachmentForm.orderNum" :min="0" :max="999" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="attachmentForm.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="attachmentDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSaveAttachment">确定</el-button>
</template>
</el-dialog>
<!-- 章节编辑对话框 -->
<el-dialog
v-model="chapterDialogVisible"
:title="chapterForm.id ? '编辑章节' : '添加章节'"
width="600px"
>
<el-form :model="chapterForm" :rules="chapterRules" ref="chapterFormRef" label-width="100px">
<el-form-item label="章节编号" prop="chapterNumber">
<el-input v-model="chapterForm.chapterNumber" placeholder="如:第一章" />
</el-form-item>
<el-form-item label="章节标题" prop="title">
<el-input v-model="chapterForm.title" placeholder="请输入章节标题" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input-number v-model="chapterForm.orderNum" :min="0" :max="999" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="chapterForm.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="chapterDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSaveChapter">确定</el-button>
</template>
</el-dialog>
<!-- 章节内容管理对话框 -->
<el-dialog
v-model="contentDialogVisible"
title="管理章节内容"
width="800px"
>
<div class="content-header">
<span class="content-title">{{ currentChapter.chapterNumber }} {{ currentChapter.title }}</span>
<el-button type="primary" size="small" :icon="Plus" @click="handleAddContent">
添加内容
</el-button>
</div>
<el-table :data="contentList" border stripe class="content-table">
<el-table-column prop="content" label="内容" min-width="400">
<template #default="{ row, $index }">
<el-input
v-if="row.editing"
v-model="row.content"
type="textarea"
:rows="2"
placeholder="请输入内容"
/>
<span v-else>{{ row.content }}</span>
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" width="80" align="center" />
<el-table-column label="操作" width="150" align="center">
<template #default="{ row, $index }">
<el-button
v-if="!row.editing"
link
type="primary"
size="small"
@click="handleEditContent(row, $index)"
>
编辑
</el-button>
<el-button
v-else
link
type="success"
size="small"
@click="handleSaveContent(row, $index)"
>
保存
</el-button>
<el-button link type="danger" size="small" @click="handleDeleteContent($index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<el-button @click="contentDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleBatchSaveContents">保存全部</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Upload, Download, Refresh, Search } from '@element-plus/icons-vue'
import { getToken } from '@/utils/auth'
import {
getCompetitionList,
getAttachmentList,
saveAttachment,
removeAttachment,
getChapterList,
saveChapter,
removeChapter,
getContentList,
batchSaveContents
} from '@/api/martial/rules'
// 赛事列表
const competitionList = ref([])
const competitionId = ref(null)
// 附件相关
const attachmentList = ref([])
const attachmentDialogVisible = ref(false)
const attachmentFormRef = ref(null)
const attachmentForm = reactive({
id: null,
competitionId: null,
fileName: '',
fileUrl: '',
fileSize: null,
fileType: '',
orderNum: 0,
status: 1
})
const attachmentRules = {
fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
fileUrl: [{ required: true, message: '请上传文件', trigger: 'change' }]
}
const fileList = ref([])
// 章节相关
const chapterList = ref([])
const chapterDialogVisible = ref(false)
const chapterFormRef = ref(null)
const chapterForm = reactive({
id: null,
competitionId: null,
chapterNumber: '',
title: '',
orderNum: 0,
status: 1
})
const chapterRules = {
chapterNumber: [{ required: true, message: '请输入章节编号', trigger: 'blur' }],
title: [{ required: true, message: '请输入章节标题', trigger: 'blur' }]
}
// 章节内容相关
const contentDialogVisible = ref(false)
const currentChapter = ref({})
const contentList = ref([])
// 文件上传配置
const uploadUrl = ref(import.meta.env.VITE_API_URL + '/blade-resource/oss/endpoint/put-file')
const uploadHeaders = ref({
'Blade-Auth': 'bearer ' + getToken()
})
// 初始化
onMounted(() => {
fetchCompetitionList()
})
// 获取赛事列表
const fetchCompetitionList = async () => {
try {
const res = await getCompetitionList({ current: 1, size: 1000 })
competitionList.value = res.data.records || []
} catch (error) {
ElMessage.error('获取赛事列表失败')
}
}
// 赛事切换
const handleCompetitionChange = () => {
if (competitionId.value) {
fetchAttachmentList()
fetchChapterList()
}
}
// 获取附件列表
const fetchAttachmentList = async () => {
try {
const res = await getAttachmentList({ competitionId: competitionId.value })
attachmentList.value = res.data || []
} catch (error) {
ElMessage.error('获取附件列表失败')
}
}
// 添加附件
const handleAddAttachment = () => {
Object.assign(attachmentForm, {
id: null,
competitionId: competitionId.value,
fileName: '',
fileUrl: '',
fileSize: null,
fileType: '',
orderNum: 0,
status: 1
})
fileList.value = []
attachmentDialogVisible.value = true
}
// 编辑附件
const handleEditAttachment = (row) => {
Object.assign(attachmentForm, { ...row })
fileList.value = row.fileUrl ? [{ name: row.fileName, url: row.fileUrl }] : []
attachmentDialogVisible.value = true
}
// 文件上传前校验
const beforeFileUpload = (file) => {
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
const isAllowed = allowedTypes.includes(file.type)
const isLt50M = file.size / 1024 / 1024 < 50
if (!isAllowed) {
ElMessage.error('只能上传文档格式文件!')
}
if (!isLt50M) {
ElMessage.error('文件大小不能超过 50MB')
}
return isAllowed && isLt50M
}
// 文件上传成功
const handleFileUploadSuccess = (response) => {
if (response.code === 200) {
attachmentForm.fileUrl = response.data.link
attachmentForm.fileName = response.data.originalName
attachmentForm.fileSize = response.data.size
attachmentForm.fileType = response.data.extension
ElMessage.success('文件上传成功')
} else {
ElMessage.error('文件上传失败')
}
}
// 保存附件
const handleSaveAttachment = async () => {
await attachmentFormRef.value.validate()
try {
await saveAttachment(attachmentForm)
ElMessage.success('保存成功')
attachmentDialogVisible.value = false
fetchAttachmentList()
} catch (error) {
ElMessage.error('保存失败')
}
}
// 删除附件
const handleDeleteAttachment = async (row) => {
try {
await ElMessageBox.confirm('确定要删除该附件吗?', '提示', {
type: 'warning'
})
await removeAttachment({ id: row.id })
ElMessage.success('删除成功')
fetchAttachmentList()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 预览文件
const handlePreviewFile = (row) => {
window.open(row.fileUrl, '_blank')
}
// 格式化文件大小
const formatFileSize = (bytes) => {
if (!bytes || 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 (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
}
// 获取章节列表
const fetchChapterList = async () => {
try {
const res = await getChapterList({ competitionId: competitionId.value })
chapterList.value = res.data || []
} catch (error) {
ElMessage.error('获取章节列表失败')
}
}
// 添加章节
const handleAddChapter = () => {
Object.assign(chapterForm, {
id: null,
competitionId: competitionId.value,
chapterNumber: '',
title: '',
orderNum: 0,
status: 1
})
chapterDialogVisible.value = true
}
// 编辑章节
const handleEditChapter = (row) => {
Object.assign(chapterForm, { ...row })
chapterDialogVisible.value = true
}
// 保存章节
const handleSaveChapter = async () => {
await chapterFormRef.value.validate()
try {
await saveChapter(chapterForm)
ElMessage.success('保存成功')
chapterDialogVisible.value = false
fetchChapterList()
} catch (error) {
ElMessage.error('保存失败')
}
}
// 删除章节
const handleDeleteChapter = async (row) => {
try {
await ElMessageBox.confirm('确定要删除该章节吗?删除后章节下的所有内容也将被删除!', '提示', {
type: 'warning'
})
await removeChapter({ id: row.id })
ElMessage.success('删除成功')
fetchChapterList()
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 管理章节内容
const handleManageContent = async (row) => {
currentChapter.value = row
await fetchContentList(row.id)
contentDialogVisible.value = true
}
// 获取章节内容列表
const fetchContentList = async (chapterId) => {
try {
const res = await getContentList({ chapterId })
contentList.value = (res.data || []).map(item => ({
...item,
editing: false
}))
} catch (error) {
ElMessage.error('获取章节内容失败')
}
}
// 添加内容
const handleAddContent = () => {
contentList.value.push({
id: null,
chapterId: currentChapter.value.id,
content: '',
orderNum: contentList.value.length + 1,
status: 1,
editing: true
})
}
// 编辑内容
const handleEditContent = (row, index) => {
row.editing = true
}
// 保存单个内容
const handleSaveContent = (row, index) => {
if (!row.content.trim()) {
ElMessage.warning('内容不能为空')
return
}
row.editing = false
}
// 删除内容
const handleDeleteContent = (index) => {
contentList.value.splice(index, 1)
// 重新排序
contentList.value.forEach((item, idx) => {
item.orderNum = idx + 1
})
}
// 批量保存内容
const handleBatchSaveContents = async () => {
const contents = contentList.value.map(item => item.content).filter(c => c.trim())
if (contents.length === 0) {
ElMessage.warning('请至少添加一条内容')
return
}
try {
await batchSaveContents({
chapterId: currentChapter.value.id,
contents
})
ElMessage.success('保存成功')
contentDialogVisible.value = false
} catch (error) {
ElMessage.error('保存失败')
}
}
</script>
<style lang="scss" scoped>
.rules-container {
padding: 20px;
}
.search-card {
margin-bottom: 20px;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.section-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 16px;
font-weight: bold;
}
}
}
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
.content-title {
font-size: 16px;
font-weight: bold;
}
}
.content-table {
margin-top: 10px;
}
</style>

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More