# dispatch_system

**Repository Path**: yilubenpao/dispatch_system

## Basic Information

- **Project Name**: dispatch_system
- **Description**: # 派单管理系统

一个基于Vue3 + Python Flask的现代化派单管理系统，支持工单创建、分配、跟踪和管理。



- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-09
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 派单管理系统

一个基于Vue3 + Python Flask的现代化派单管理系统，支持工单创建、分配、跟踪和管理。

## 技术栈

### 前端
- **Vue 3** - 渐进式JavaScript框架
- **TypeScript** - 类型安全的JavaScript超集
- **Element Plus** - 基于Vue 3的组件库
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue的状态管理库
- **Axios** - HTTP客户端
- **Vite** - 现代化构建工具

### 后端
- **Python Flask** - 轻量级Web框架
- **SQLite** - 轻量级数据库
- **Flask-SQLAlchemy** - ORM框架
- **Flask-JWT-Extended** - JWT认证
- **Flask-CORS** - 跨域资源共享

## 功能特性

- 🔐 **用户认证** - 登录/登出，角色权限管理
- 📋 **工单管理** - 创建、编辑、查看、删除工单
- 👥 **人员管理** - 管理维修人员信息
- 📊 **仪表板** - 工单统计和快速操作
- 🔍 **搜索筛选** - 按状态、关键词搜索工单
- 📱 **响应式设计** - 支持移动端访问
- 🎨 **现代化UI** - 基于Element Plus的美观界面


## 待完善
- 系统管理添加工单配置页面，工单配置页面可以编辑工单表字段，
- 编辑后工单管理相关页面能正确显示字段变化
- 完善用户管理页面，用户管理页面只有管理员可以看到。

## 快速开始

### 环境要求

- Node.js 16+ 
- Python 3.8+
- npm 或 yarn

### 安装和运行

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd dispatch-system
   ```

2. **一键启动**
   ```bash
   chmod +x start.sh
   ./start.sh
   ```

3. **访问应用**
   - 前端地址: http://localhost:5173
   - 后端API: http://localhost:5000

### 手动启动

#### 启动后端
```bash
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python app.py
```

#### 启动前端
```bash
cd frontend
npm install
npm run dev
```

## 默认账户

系统预设了以下测试账户：

- **管理员**: admin / admin123
- **经理**: manager / manager123  
- **员工**: user / user123

## 项目结构

```
dispatch-system/
├── backend/                 # 后端代码
│   ├── app/                # 应用模块
│   │   ├── models/         # 数据模型
│   │   ├── routes/         # 路由处理
│   │   └── utils/          # 工具函数
│   ├── app.py              # 应用入口
│   └── requirements.txt    # Python依赖
├── frontend/               # 前端代码
│   ├── src/
│   │   ├── components/     # Vue组件
│   │   ├── views/          # 页面视图
│   │   ├── stores/         # Pinia状态管理
│   │   ├── router/         # 路由配置
│   │   └── assets/         # 静态资源
│   ├── package.json        # Node.js依赖
│   └── vite.config.ts      # Vite配置
├── start.sh                # 启动脚本
├── stop.sh                 # 停止脚本
└── README.md               # 项目说明
```

## 移动端工单查询代码架构

### 最新优化（2024年更新）

**后端权限控制优化**：
- 完善了基于用户角色和区域的工单过滤逻辑
- 新增 `area_filter` 参数，默认启用区域过滤
- 优化了管理员、经理、普通用户的权限控制
- 支持多区域用户权限管理

**前端查询优化**：
- 优化了 `getWorkOrders` API 接口，支持更多过滤参数
- 简化了前端过滤逻辑，主要依赖后端过滤
- 改进了 `useWorkOrders` 组合函数，支持按状态加载工单
- 优化了移动端页面的工单加载策略

**性能提升**：
- 减少了前端数据处理负担
- 提高了查询效率和响应速度
- 优化了网络请求和数据传输

### 核心文件定位

移动端登录后查询待办工单功能涉及以下关键代码文件：

#### 前端核心文件

**路由配置**
- `frontend/src/router/index.ts` - 前端路由配置，包含移动端路由定义和智能跳转逻辑
  - `/mobile/login` - 移动端登录页面
  - `/mobile/maintenance` - 移动端主页面
  - `/mobile/work-orders/:id` - 移动端工单详情页面

**移动端视图组件**
- `frontend/src/views/MobileMaintenanceView.vue` - 移动端主页面，展示待办工单列表
- `frontend/src/views/MobileLoginView.vue` - 移动端登录页面
- `frontend/src/views/MobileWorkOrderDetailView.vue` - 移动端工单详情页面
- `frontend/src/views/WorkOrderPendingView.vue` - 待办工单查询页面

**移动端组件**
- `frontend/src/components/MobileHeader.vue` - 移动端头部组件
- `frontend/src/components/WorkOrderList.vue` - 工单列表组件
- `frontend/src/components/FeedbackDialog.vue` - 反馈对话框组件
- `frontend/src/components/CompleteDialog.vue` - 完成对话框组件

**业务逻辑层**
- `frontend/src/composables/useWorkOrders.ts` - 工单查询核心业务逻辑
  - 工单数据管理和状态控制
  - 基于用户角色和区域的工单过滤
  - 统计数据计算和更新
  - 接单功能实现

**API接口层**
- `frontend/src/api/workOrders.ts` - 工单相关API接口定义
  - 获取工单列表、详情、统计数据
  - 工单创建、更新、删除操作
  - 工单处理记录和材料使用记录

**工具函数**
- `frontend/src/utils/device.ts` - 设备检测工具
  - 判断是否为移动设备
  - 获取移动端重定向路径

#### 后端核心文件

**工单路由**
- `backend/app/routes/work_orders.py` - 工单相关API路由
  - `GET /api/work-orders` - 获取工单列表
  - `GET /api/work-orders/{id}` - 获取工单详情
  - `POST /api/work-orders/{id}/accept` - 接单操作
  - `GET /api/work-orders/{id}/records` - 获取工单处理记录

**仪表板路由**
- `backend/app/routes/dashboard.py` - 仪表板相关API
  - `GET /api/dashboard/stats` - 获取统计数据
  - `GET /api/dashboard/recent-orders` - 获取最近工单

### 移动端工单查询流程

1. **设备检测与路由跳转**
   - `device.ts` 检测移动设备
   - 路由守卫自动跳转到移动端页面

2. **移动端登录**
   - `MobileLoginView.vue` 处理移动端登录
   - 登录成功后跳转到 `/mobile/maintenance`

3. **工单数据获取**
   - `MobileMaintenanceView.vue` 调用 `useWorkOrders` 组合函数
   - `useWorkOrders.ts` 通过 `workOrders.ts` API 获取数据
   - 后端 `work_orders.py` 处理API请求并返回数据

4. **工单过滤与展示**
   - `useWorkOrders.ts` 中的 `getFilteredOrders` 方法
   - 基于用户角色（管理员/经理/员工）过滤工单
   - 基于用户区域权限过滤工单
   - `WorkOrderList.vue` 组件展示过滤后的工单列表

5. **工单操作**
   - 点击工单跳转到 `MobileWorkOrderDetailView.vue`
   - 支持接单、反馈、完成等操作
   - 通过 `FeedbackDialog.vue` 和 `CompleteDialog.vue` 处理用户交互

### 关键查询逻辑

**前端过滤逻辑** (`useWorkOrders.ts`):
- 管理员和经理：可查看所有工单
- 普通员工：只能查看分配给自己且在其负责区域内的工单
- 按工单状态分类：待处理、进行中、已完成

**后端数据查询** (`work_orders.py`):
- 支持分页查询和条件过滤
- 包含工单基本信息、处理记录、材料使用等完整数据
- 提供统计数据接口支持仪表板展示

## 开发说明

### 前端开发

- 使用Vue 3 Composition API
- TypeScript提供类型安全
- Element Plus组件库
- 响应式设计，支持移动端

### 后端开发

- RESTful API设计
- JWT token认证
- SQLAlchemy ORM
- 角色权限控制

### 数据库

系统使用SQLite数据库，包含以下主要表：

- `users` - 用户表
- `work_orders` - 工单表  
- `personnel` - 人员表
- `process_records` - 处理记录表

## API文档

主要API端点：

- `POST /api/auth/login` - 用户登录
- `GET /api/auth/me` - 获取当前用户信息
- `GET /api/work-orders` - 获取工单列表
- `POST /api/work-orders` - 创建工单
- `GET /api/work-orders/{id}` - 获取工单详情
- `PUT /api/work-orders/{id}` - 更新工单
- `DELETE /api/work-orders/{id}` - 删除工单

## 部署

### 生产环境部署

1. **构建前端**
   ```bash
   cd frontend
   npm run build
   ```

2. **配置后端**
   - 修改数据库配置
   - 设置环境变量
   - 配置Web服务器(如Nginx)

3. **启动服务**
   ```bash
   # 使用gunicorn启动后端
   gunicorn -w 4 -b 0.0.0.0:5000 app:app
   ```

## 贡献

欢迎提交Issue和Pull Request来改进这个项目。

## 许可证

MIT License