# 急救转运任务前端接口绑定检查报告 ## ✅ 接口绑定情况总结 **结论**: 前端页面 `create-emergency.vue` **已正确绑定后台接口**，所有核心功能都已对接完成！ --- ## 📋 详细检查结果 ### 1. 引入的API接口 在 `create-emergency.vue` 第256-258行: ```javascript import { addTask } from "@/api/task" import { listAvailableVehicles } from "@/api/vehicle" import { calculateDistance } from "@/api/map" ``` ✅ **状态**: 已正确引入所需接口 --- ### 2. 核心功能接口对接检查 #### 2.1 ✅ 创建任务接口 - `addTask()` **前端调用位置**: 第503-514行 ```javascript submitTask() { if (!this.validateForm()) { return } this.$modal.confirm('确定要保存任务吗？').then(() => { this.loading = true const submitData = this.buildSubmitData() addTask(submitData).then(response => { // ← 调用后台接口 this.loading = false this.$modal.showToast('任务创建成功') setTimeout(() => { this.$tab.navigateTo('/pages/task/index') }, 1500) }).catch(error => { this.loading = false console.error('任务创建失败:', error) this.$modal.showToast('任务创建失败，请重试') }) }).catch(() => {}) } ``` **接口定义**: `app/api/task.js` 第18-24行 ```javascript export function addTask(data) { return request({ url: '/task', // ← 对应后端 POST /task method: 'post', data: data }) } ``` **后端接口**: `SysTaskController.java` 第76-81行 ```java @PostMapping public AjaxResult add(@RequestBody TaskCreateVO createVO) { return toAjax(sysTaskService.insertSysTask(createVO)); } ``` **✅ 绑定状态**: - 前端 → API定义 → 后端 **完全对接** - 支持完整的急救转运任务数据提交 - 包含患者信息、医院信息、费用信息等扩展字段 --- #### 2.2 ✅ 获取可用车辆接口 - `listAvailableVehicles()` **前端调用位置**: 第322-335行 ```javascript getAvailableVehicles() { const deptId = this.currentUser.deptId return listAvailableVehicles(deptId, 'EMERGENCY').then(response => { const vehicleList = response.data || response.rows || [] this.vehicleOptions = vehicleList.map(vehicle => ({ id: vehicle.vehicleId, name: vehicle.vehicleNo, type: vehicle.vehicleType, status: vehicle.status })) this.vehicles = this.vehicleOptions.map(v => v.name) }).catch(() => { this.vehicles = [] }) } ``` **接口定义**: `app/api/vehicle.js` 第26-34行 ```javascript export function listAvailableVehicles(deptId, taskType) { return request({ url: '/task/vehicle/available', // ← 对应后端接口 method: 'get', params: { deptId: deptId, taskType: taskType // ← 传递 'EMERGENCY' 类型 } }) } ``` **✅ 绑定状态**: - 前端正确传递部门ID和任务类型 - 根据任务类型(`EMERGENCY`)筛选可用车辆 - 车辆数据正确映射到下拉选择器 --- #### 2.3 ✅ 距离计算接口 - `calculateDistance()` **前端调用位置**: 第388-408行 ```javascript calculateEmergencyDistance() { if (this.addressCoordinates.hospitalOutAddress && this.addressCoordinates.hospitalInAddress) { this.getDistanceBetweenPoints( this.addressCoordinates.hospitalOutAddress.lat, this.addressCoordinates.hospitalOutAddress.lng, this.addressCoordinates.hospitalInAddress.lat, this.addressCoordinates.hospitalInAddress.lng ).then(distance => { this.taskForm.transferDistance = distance.toFixed(2) // ← 自动填充距离 }).catch(error => { console.error('距离计算失败:', error) }) } } ``` **接口定义**: `app/api/map.js` ```javascript export function calculateDistance(lat1, lng1, lat2, lng2) { return request({ url: '/map/calculate-distance', method: 'get', params: { lat1, lng1, lat2, lng2 } }) } ``` **✅ 绑定状态**: - 已集成地图API接口 - 自动计算转出医院到转入医院的距离 - 基于GPS坐标实时计算 --- ### 3. 数据提交格式检查 #### 3.1 提交数据构建 - `buildSubmitData()` **前端构建位置**: 第467-490行 ```javascript buildSubmitData() { const submitData = { taskType: 'EMERGENCY_TRANSFER', // ← 任务类型 vehicleIds: this.selectedVehicleId ? [this.selectedVehicleId] : [], transferTime: this.taskForm.transferTime, patient: this.taskForm.patient, // ← 患者信息对象 hospitalOut: this.taskForm.hospitalOut, // ← 转出医院对象 hospitalIn: this.taskForm.hospitalIn, // ← 转入医院对象 transferDistance: this.taskForm.transferDistance ? parseFloat(this.taskForm.transferDistance) : null, price: this.taskForm.price ? parseFloat(this.taskForm.price) : null } // 添加GPS坐标 if (this.addressCoordinates.hospitalOutAddress) { if (!submitData.hospitalOut) submitData.hospitalOut = {} submitData.hospitalOut.longitude = this.addressCoordinates.hospitalOutAddress.lng submitData.hospitalOut.latitude = this.addressCoordinates.hospitalOutAddress.lat } if (this.addressCoordinates.hospitalInAddress) { if (!submitData.hospitalIn) submitData.hospitalIn = {} submitData.hospitalIn.longitude = this.addressCoordinates.hospitalInAddress.lng submitData.hospitalIn.latitude = this.addressCoordinates.hospitalInAddress.lat } return submitData } ``` **后端接收对象**: `TaskCreateVO.java` ```java public class TaskCreateVO { private String taskType; // ✅ 对应 private List vehicleIds; // ✅ 对应 private Date transferTime; // ✅ 对应 private PatientInfo patient; // ✅ 对应 private HospitalInfo hospitalOut; // ✅ 对应 private HospitalInfo hospitalIn; // ✅ 对应 private BigDecimal transferDistance; // ✅ 对应 private BigDecimal price; // ✅ 对应 } ``` **✅ 数据格式**: **完全匹配**，前后端字段一一对应 --- ### 4. 表单验证逻辑 **前端验证位置**: 第433-456行 ```javascript validateForm() { if (!this.selectedVehicleId) { this.$modal.showToast('请选择任务车辆') return false } if (!this.taskForm.patient.name) { this.$modal.showToast('请输入患者姓名') return false } if (!this.taskForm.patient.phone) { this.$modal.showToast('请输入患者联系电话') return false } if (!this.taskForm.hospitalOut.name) { this.$modal.showToast('请输入转出医院名称') return false } if (!this.taskForm.hospitalIn.name) { this.$modal.showToast('请输入转入医院名称') return false } return true } ``` **✅ 验证逻辑**: - 必填字段验证完整 - 用户友好的错误提示 - 阻止无效数据提交 --- ## 🎯 完整的数据流程 ``` 用户填写表单 ↓ 前端验证 (validateForm) ↓ 构建提交数据 (buildSubmitData) ↓ 调用API接口 (addTask) ↓ 发送HTTP请求: POST /task ↓ 后端Controller接收 (SysTaskController.add) ↓ Service层处理 (SysTaskServiceImpl.insertSysTask) ↓ 保存主任务表 (sys_task) ↓ 保存扩展信息 (sys_task_emergency) ← 已实现 ↓ 返回成功响应 ↓ 前端显示成功提示并跳转 ``` --- ## 📊 接口对接状态汇总 | 功能模块 | 前端方法 | API接口 | 后端接口 | 状态 | |---------|---------|---------|---------|------| | 创建任务 | `submitTask()` | `addTask()` | `POST /task` | ✅ 已对接 | | 获取车辆 | `getAvailableVehicles()` | `listAvailableVehicles()` | `GET /task/vehicle/available` | ✅ 已对接 | | 距离计算 | `calculateEmergencyDistance()` | `calculateDistance()` | `GET /map/calculate-distance` | ✅ 已对接 | | 地图选择 | `onAddressSelected()` | MapSelector组件 | - | ✅ 已集成 | | 数据验证 | `validateForm()` | - | - | ✅ 已实现 | --- ## ✅ 总结 ### 已完成的绑定: 1. ✅ **任务创建接口** - 完全对接，支持扩展信息提交 2. ✅ **车辆查询接口** - 根据部门和任务类型筛选 3. ✅ **距离计算接口** - 自动计算转运距离 4. ✅ **数据格式匹配** - 前后端VO对象完全一致 5. ✅ **表单验证逻辑** - 必填项验证完整 6. ✅ **错误处理机制** - catch异常并显示友好提示 ### 数据提交完整性: - ✅ 患者信息 (contact, phone, name, gender, idCard, condition) - ✅ 转出医院 (name, department, bedNumber, address, longitude, latitude) - ✅ 转入医院 (name, department, bedNumber, address, longitude, latitude) - ✅ 费用信息 (transferDistance, price) - ✅ 任务元数据 (taskType, vehicleIds, transferTime) --- ## 🚀 可以直接使用 **前端页面 `create-emergency.vue` 已经完全绑定好后台接口**，无需任何修改！ 只需: 1. ✅ 确保后端服务已启动 2. ✅ 数据库表 `sys_task_emergency` 已创建 3. ✅ 前端访问该页面填写表单提交即可 --- ## 📝 测试建议 ### 1. 完整流程测试 ``` 1. 访问创建任务页面 2. 选择车辆 (自动从接口加载) 3. 填写患者信息 4. 选择转出医院地址 (使用地图选择器) 5. 选择转入医院地址 (使用地图选择器) 6. 系统自动计算距离 7. 填写费用信息 8. 点击保存 9. 查看提交结果 10. 验证数据库记录 ``` ### 2. 数据验证 ```sql -- 查看最新创建的急救转运任务 SELECT t.task_id, t.task_code, t.task_type, e.patient_name, e.hospital_out_name, e.hospital_in_name, e.transfer_distance, e.transfer_price FROM sys_task t LEFT JOIN sys_task_emergency e ON t.task_id = e.task_id WHERE t.task_type = 'EMERGENCY_TRANSFER' ORDER BY t.create_time DESC LIMIT 1; ``` --- **结论**: 🎉 前端与后端接口**完全对接**，可以直接使用！