# 任务创建页面重构说明

## 重构目的
将原本集成在单个文件中的多个任务表单拆分成独立文件,提高代码的可维护性和可扩展性。

## 文件结构

### 重构前
- `pages/task/create.vue` - 包含所有任务类型的表单(约1300行代码)

### 重构后
```
pages/task/
├── create.vue           # 任务类型选择页面(148行)
├── create-normal.vue    # 普通任务创建表单(596行)
├── create-emergency.vue # 急救转运任务创建表单(688行)
└── create-welfare.vue   # 福祉车任务创建表单(544行)
```

## 页面说明

### 1. create.vue - 任务类型选择页
**功能**: 展示四种任务类型供用户选择
- 维修保养任务
- 加油任务
- 急救转运任务
- 福祉车任务

**路由跳转**: 根据选择跳转到对应的创建页面,并传递参数:
- `categoryName`: 任务类别名称
- `categoryType`: 任务类别类型
- `taskType`: 任务类型值

### 2. create-normal.vue - 普通任务创建页
**适用任务**: 维修保养、加油等日常任务

**主要功能**:
- 车辆选择(自动填充用户绑定车辆)
- 任务类型选择(从字典加载)
- 任务描述
- 地址选择(出发地、目的地)
- 自动计算距离
- 时间选择(开始时间、结束时间)
- 备注信息

**特色功能**:
- 集成地图选择器
- GPS坐标记录
- 自动距离计算

### 3. create-emergency.vue - 急救转运任务创建页
**适用任务**: 急救转运、航空转运

**主要功能**:
- 车辆选择
- 执行人员管理(可添加多人)
- 归属机构选择
- 患者信息录入(姓名、性别、身份证、病情等)
- 转出医院信息(名称、科室、床号、地址)
- 转入医院信息(名称、科室、床号、地址)
- 转运距离自动计算
- 成交价录入

**特色功能**:
- 完整的患者信息管理
- 医院信息管理
- 多人员协作支持

### 4. create-welfare.vue - 福祉车任务创建页
**适用任务**: 老年人、残疾人等特殊群体用车服务

**主要功能**:
- 车辆选择
- 执行人员管理
- 归属机构选择
- 乘客信息录入(联系人、电话)
- 地址选择(出发地、目的地)
- 距离自动计算
- 成交价录入

**特色功能**:
- 简化的乘客信息录入
- 服务时间管理

## 共同特性

所有创建页面均具备:
1. **统一的UI设计** - 保持一致的用户体验
2. **表单验证** - 必填项校验
3. **地图选择器集成** - 可视化地址选择
4. **GPS坐标记录** - 精确位置信息
5. **自动距离计算** - 基于腾讯地图API
6. **返回导航** - 可返回任务类型选择页

## 技术栈

- **组件库**: uni-app官方组件
- **地图**: 腾讯地图API
- **状态管理**: Vuex
- **路由**: uni-app路由系统

## 优势

### 代码组织
- ✅ 单一职责原则 - 每个文件专注于一种任务类型
- ✅ 代码量控制 - 每个文件行数适中,易于理解
- ✅ 独立维护 - 修改某类任务不影响其他任务

### 可维护性
- ✅ 清晰的文件结构
- ✅ 易于定位和修复bug
- ✅ 便于功能扩展

### 可扩展性
- ✅ 新增任务类型只需添加新文件
- ✅ 不影响现有任务类型
- ✅ 易于复用通用组件

## 路由配置

在 `pages.json` 中已注册以下路由:

```json
{
  "path": "pages/task/create",
  "navigationBarTitleText": "选择任务类型"
},
{
  "path": "pages/task/create-normal",
  "navigationBarTitleText": "创建普通任务"
},
{
  "path": "pages/task/create-emergency",
  "navigationBarTitleText": "创建急救转运任务"
},
{
  "path": "pages/task/create-welfare",
  "navigationBarTitleText": "创建福祉车任务"
}
```

## 使用方式

### 从首页进入
```javascript
uni.navigateTo({
  url: '/pages/task/create'
})
```

### 直接创建特定任务类型
```javascript
// 创建维修保养任务
uni.navigateTo({
  url: '/pages/task/create-normal?taskType=MAINTENANCE&categoryName=维修保养'
})

// 创建急救转运任务
uni.navigateTo({
  url: '/pages/task/create-emergency'
})

// 创建福祉车任务
uni.navigateTo({
  url: '/pages/task/create-welfare'
})
```

## 注意事项

1. **兼容性**: 所有页面保持向后兼容,不影响现有功能
2. **数据提交**: 统一使用 `addTask` API接口
3. **用户体验**: 保持一致的交互逻辑和UI风格
4. **错误处理**: 完善的表单验证和错误提示

## 后续优化建议

1. 提取公共组件(如地址选择器、人员选择器)
2. 统一表单验证规则
3. 添加表单数据本地缓存(草稿功能)
4. 优化地图选择体验
5. 增加批量创建任务功能

## 更新日期
2025-10-16