任务创建页面重构说明

重构目的

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

文件结构

重构前

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 中已注册以下路由:

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

使用方式

从首页进入

uni.navigateTo({
  url: '/pages/task/create'
})

直接创建特定任务类型

// 创建维修保养任务
uni.navigateTo({
  url: '/pages/task/create-normal?taskType=MAINTENANCE&categoryName=维修保养'
})

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

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

注意事项

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

后续优化建议

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

更新日期

2025-10-16