任务跟踪系统

任务跟踪系统

项目简介

基于 Vue3 + Element Plus + Go (Gin) + GORM + MySQL 的任务跟踪系统，支持多级机构管理和任务全生命周期管理。

✅ 已完成功能

• 用户管理：用户注册、登录、权限管理
• 机构管理：多级机构结构，支持组织层级管理
• 任务管理：
  • ✅ 任务创建、分配、状态更新、评论等
  • ✅ 任务附件上传、下载、删除
  • ✅ 支持多种格式附件（Office文档、PDF、图片等）
  • ✅ 任务列表搜索、筛选、分页
  • ✅ 任务看板视图
• 附件管理：
  • ✅ 文件上传接口
  • ✅ 附件与任务关联
  • ✅ 附件下载和删除
  • ✅ 文件大小限制和格式验证
• 统计分析：任务统计、用户工作量统计
• API 设计：RESTful API，仅支持 GET 和 POST 方法
• 数据库：GORM 自动迁移，MySQL 数据库
• 前端测试页面：完整的 API 测试界面

技术栈

前端

• Vue 3.x + TypeScript
• Element Plus UI 框架
• Vue Router + Vuex
• Vite 构建工具
• Axios HTTP 客户端

后端

• Go 1.19+ + Gin Framework
• GORM ORM + MySQL 8.0+
• JWT 认证 + CORS 支持
• 结构化日志 + 配置管理

项目结构

task_track/
├── frontend/                    # 前端项目
│   ├── src/
│   │   ├── views/
│   │   │   ├── ApiTest.vue     # ✅ API 测试页面
│   │   │   ├── Task/           # 任务相关页面
│   │   │   ├── Statistics/     # 统计页面
│   │   │   └── Profile/        # 个人中心
│   │   ├── router/             # 路由配置
│   │   └── store/              # 状态管理
│   └── package.json
├── backend/                     # 后端项目
│   ├── internal/
│   │   ├── handler/            # ✅ 完整业务逻辑
│   │   │   ├── handlers.go     # 用户/机构/任务/统计
│   │   │   └── auth.go         # 认证处理
│   │   ├── middleware/         # 中间件
│   │   ├── router/             # ✅ 路由配置(仅GET/POST)
│   │   └── config/             # 配置管理
│   ├── model/                  # ✅ 完整数据模型
│   ├── pkg/database/           # ✅ 数据库自动迁移
│   ├── main.go                 # 程序入口
│   └── config.yaml             # 配置文件
├── database/init.sql           # 数据库初始化脚本
├── api_test.http              # ✅ REST Client 测试文件
└── README.md

新功能说明

任务创建与附件管理

1. 创建任务：

   • 在任务管理页面点击"创建任务"按钮
   • 填写任务基本信息（标题、描述、类型、优先级等）
   • 选择执行者和时间安排

2. 上传附件：

   • 在任务创建对话框中，使用拖拽上传组件
   • 支持多文件上传，格式包括：
     • Office文档：.doc, .docx, .xls, .xlsx, .ppt, .pptx
     • PDF文档：.pdf
     • 图片文件：.png, .jpg, .jpeg, .gif
     • 文本文件：.txt
   • 文件大小限制：10MB以内

3. 管理附件：

   • 在任务列表中点击"附件"列查看任务附件
   • 支持附件下载和删除操作
   • 实时显示附件数量

API端点

新增的附件管理API：

POST   /api/upload                    # 上传文件
GET    /api/tasks/:id/attachments     # 获取任务附件列表
POST   /api/tasks/:id/attachments     # 添加任务附件关联
DELETE /api/attachments/:id           # 删除附件
GET    /api/download/:id              # 下载附件

任务管理API增强：

GET    /api/tasks                     # 支持标题搜索、状态/优先级筛选
POST   /api/tasks                     # 创建任务（支持附件关联）

快速开始

环境要求

• Node.js 16+, Go 1.19+, MySQL 8.0+

1. 数据库配置

mysql -u root -p
CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 启动后端 (端口 8080)

cd backend
go mod tidy
# 编辑 config.yaml 配置数据库连接
go run main.go

3. 启动前端 (端口 5174)

cd frontend
npm install
npm run dev

4. 访问应用

• API 测试页面: http://localhost:5174/api-test
• 前端应用: http://localhost:5174/
• 后端API: http://localhost:8080/api/

API 接口

🔐 认证接口

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录
• POST /api/auth/logout - 用户登出
• GET /api/auth/me - 获取当前用户

👥 用户管理

• GET /api/users - 获取用户列表
• GET /api/users/:id - 获取用户详情
• POST /api/users/update/:id - 更新用户信息
• POST /api/users/delete/:id - 删除用户

🏢 机构管理

• GET /api/organizations - 获取机构列表
• POST /api/organizations - 创建机构
• GET /api/organizations/:id - 获取机构详情
• POST /api/organizations/update/:id - 更新机构
• POST /api/organizations/delete/:id - 删除机构

📋 任务管理

• GET /api/tasks - 获取任务列表
• POST /api/tasks - 创建任务
• GET /api/tasks/:id - 获取任务详情
• POST /api/tasks/update/:id - 更新任务
• POST /api/tasks/delete/:id - 删除任务
• POST /api/tasks/status/:id - 更新任务状态
• GET /api/tasks/:id/comments - 获取任务评论
• POST /api/tasks/:id/comments - 创建任务评论

📊 统计接口

• GET /api/statistics/overview - 获取统计概览
• GET /api/statistics/tasks - 获取任务统计
• GET /api/statistics/users - 获取用户统计

⚙️ API 设计原则

1. 仅支持 GET 和 POST 方法 - 所有更新删除操作使用 POST
2. 统一响应格式:

   {
     "code": 200,
     "message": "Success", 
     "data": {}
   }
   

3. GORM 自动迁移 - 数据库表结构自动创建和更新
4. 软删除支持 - 数据逻辑删除，可恢复
5. 分页查询 - 支持 page/limit 参数

🧪 测试

API 测试方法

1. 网页测试界面: 访问 http://localhost:5174/api-test
2. REST Client: 使用 api_test.http 文件（需要 VS Code REST Client 插件）
3. Postman/Insomnia: 导入 API 文档进行测试

测试步骤

1. 点击"测试连接"验证后端服务
2. 注册用户账号
3. 登录获取 Token
4. 测试各个功能模块的 API

📈 开发状态

• ✅ 后端服务: 完全实现，运行在端口 8080
• ✅ 数据库: GORM 自动迁移，所有表结构完成
• ✅ API 接口: 所有接口已实现业务逻辑
• ✅ 前端框架: Vue3 + Element Plus 基础架构
• ✅ API 测试: 完整的测试页面和工具
• 🚧 前端页面: 主要业务页面开发中
• 🚧 权限控制: 细粒度权限系统
• 🚧 文件上传: 任务附件功能

📋 下一步计划

1. 完善前端主要业务页面
2. 实现用户权限和角色管理
3. 添加任务看板拖拽功能
4. 实现文件上传和附件管理
5. 完善单元测试和集成测试
6. 部署文档和Docker支持

📄 许可证

MIT License

📁 项目结构

task_track/
├── frontend/                # 🎨 前端项目
│   ├── src/
│   │   ├── components/     # 🧩 可复用组件
│   │   ├── views/          # 📄 页面组件
│   │   │   ├── Login/      # 登录页面
│   │   │   ├── Dashboard/  # 仪表盘
│   │   │   ├── Task/       # 任务管理
│   │   │   └── Organization/ # 机构管理
│   │   ├── router/         # 🛣️ 路由配置
│   │   ├── store/          # 🗄️ 状态管理
│   │   └── api/            # 📡 API接口
│   ├── package.json        # 📦 依赖配置
│   └── vite.config.ts      # ⚙️ 构建配置
├── backend/                 # ⚙️ 后端项目
│   ├── internal/
│   │   ├── config/         # 📋 配置管理
│   │   ├── handler/        # 🎯 请求处理器
│   │   ├── middleware/     # 🔒 中间件
│   │   └── router/         # 🛣️ 路由配置
│   ├── model/              # 🗃️ 数据模型
│   ├── pkg/                # 📚 公共包
│   │   ├── auth/           # 🔐 认证相关
│   │   ├── database/       # 💾 数据库相关
│   │   └── logger/         # 📝 日志相关
│   ├── go.mod              # 📦 Go模块
│   └── main.go             # 🚀 程序入口
├── database/               # 💾 数据库文件
│   └── init.sql            # 📊 初始化脚本
├── .vscode/                # 🔧 VS Code配置
│   └── tasks.json          # ⚡ 任务配置
├── todo/                   # 📋 项目文档
│   └── todo1.md            # 项目规划
├── README.md               # 📖 项目说明
├── DEVELOPMENT.md          # 👨‍💻 开发指南
├── install.sh              # 🐧 Linux安装脚本
└── install.bat             # 🪟 Windows安装脚本

🚀 快速开始

📋 环境要求

• Node.js >= 16.0
• Go >= 1.21
• MySQL >= 8.0

⚡ 一键安装

Windows用户:

.\install.bat

Linux/macOS用户:

chmod +x install.sh
./install.sh

📊 数据库配置

1. 创建数据库:

CREATE DATABASE task_track CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 导入初始数据:

mysql -u root -p task_track < database/init.sql

3. 修改配置文件 backend/config.yaml:

database:
  host: "localhost"
  port: "3306"
  username: "your_username"
  password: "your_password"
  database: "task_track"

🎯 启动服务

方法一：使用VS Code任务（推荐）

1. 打开VS Code
2. 按 Ctrl+Shift+P 打开命令面板
3. 输入 Tasks: Run Task
4. 选择 启动完整应用

方法二：手动启动

启动后端：

cd backend
go run main.go

启动前端：

cd frontend  
npm run dev

🌐 访问应用

• 前端应用: http://localhost:5173
• 后端API: http://localhost:8080
• 默认账号: admin / 123456

� API文档

� 认证接口

方法	路径	说明
POST	/api/auth/login	用户登录
POST	/api/auth/register	用户注册
POST	/api/auth/logout	用户登出
GET	/api/auth/me	获取当前用户

👥 用户管理

方法	路径	说明
GET	/api/users	获取用户列表
GET	/api/users/:id	获取用户详情
PUT	/api/users/:id	更新用户信息
DELETE	/api/users/:id	删除用户

🏢 机构管理

方法	路径	说明
GET	/api/organizations	获取机构列表
POST	/api/organizations	创建机构
PUT	/api/organizations/:id	更新机构
DELETE	/api/organizations/:id	删除机构

📋 任务管理

方法	路径	说明
GET	/api/tasks	获取任务列表
POST	/api/tasks	创建任务
GET	/api/tasks/:id	获取任务详情
PUT	/api/tasks/:id	更新任务
DELETE	/api/tasks/:id	删除任务
PUT	/api/tasks/:id/status	更新任务状态

🎨 界面预览

🏠 仪表盘

• 📊 数据统计概览
• ⚡ 快捷操作入口
• 📝 最近任务列表
• 🎯 工作量分布图

📋 任务管理

• 📝 任务列表视图
• 🔍 高级搜索筛选
• 📊 看板拖拽视图
• 💬 实时评论协作

🏢 机构管理

• 🌳 树形结构展示
• 👥 人员归属管理
• 🔐 权限分配设置
• 📈 层级关系维护

🚀 部署指南

🛠️ 开发环境

# 前端开发服务器
npm run dev

# 后端开发服务器  
go run main.go

🌐 生产环境

前端部署:

npm run build
# 将 dist/ 目录部署到 Nginx

后端部署:

go build -o task-track main.go
# 使用 systemd 或 PM2 管理进程

🐳 Docker部署

# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

🤝 贡献指南

我们欢迎所有形式的贡献！

1. 🍴 Fork 项目
2. 🌿 创建特性分支: git checkout -b feature/amazing-feature
3. 💍 提交更改: git commit -m 'Add amazing feature'
4. 📤 推送分支: git push origin feature/amazing-feature
5. 🎉 创建 Pull Request

📝 开发规范

• 遵循代码格式化标准
• 编写测试用例
• 更新相关文档
• 提交清晰的commit信息

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

感谢以下开源项目：

• Vue.js - 渐进式JavaScript框架
• Element Plus - Vue 3组件库
• Gin - Go Web框架
• GORM - Go ORM库

📞 联系我们

• 📧 邮箱: support@task-track.com
• 💬 QQ群: 123456789
• 🐛 问题反馈: GitHub Issues

---

⭐ 如果这个项目对你有帮助，请给它一个星标！