结论: 前端页面 create-emergency.vue 已正确绑定后台接口,所有核心功能都已对接完成!
在 create-emergency.vue 第256-258行:
import { addTask } from "@/api/task"
import { listAvailableVehicles } from "@/api/vehicle"
import { calculateDistance } from "@/api/map"
✅ 状态: 已正确引入所需接口
addTask()前端调用位置: 第503-514行
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行
export function addTask(data) {
return request({
url: '/task', // ← 对应后端 POST /task
method: 'post',
data: data
})
}
后端接口: SysTaskController.java 第76-81行
@PostMapping
public AjaxResult add(@RequestBody TaskCreateVO createVO) {
return toAjax(sysTaskService.insertSysTask(createVO));
}
✅ 绑定状态:
- 前端 → API定义 → 后端 完全对接
- 支持完整的急救转运任务数据提交
- 包含患者信息、医院信息、费用信息等扩展字段
listAvailableVehicles()前端调用位置: 第322-335行
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行
export function listAvailableVehicles(deptId, taskType) {
return request({
url: '/task/vehicle/available', // ← 对应后端接口
method: 'get',
params: {
deptId: deptId,
taskType: taskType // ← 传递 'EMERGENCY' 类型
}
})
}
✅ 绑定状态:
- 前端正确传递部门ID和任务类型
- 根据任务类型(EMERGENCY)筛选可用车辆
- 车辆数据正确映射到下拉选择器
calculateDistance()前端调用位置: 第388-408行
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
export function calculateDistance(lat1, lng1, lat2, lng2) {
return request({
url: '/map/calculate-distance',
method: 'get',
params: { lat1, lng1, lat2, lng2 }
})
}
✅ 绑定状态:
- 已集成地图API接口
- 自动计算转出医院到转入医院的距离
- 基于GPS坐标实时计算
buildSubmitData()前端构建位置: 第467-490行
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
public class TaskCreateVO {
private String taskType; // ✅ 对应
private List<Long> vehicleIds; // ✅ 对应
private Date transferTime; // ✅ 对应
private PatientInfo patient; // ✅ 对应
private HospitalInfo hospitalOut; // ✅ 对应
private HospitalInfo hospitalIn; // ✅ 对应
private BigDecimal transferDistance; // ✅ 对应
private BigDecimal price; // ✅ 对应
}
✅ 数据格式: 完全匹配,前后端字段一一对应
前端验证位置: 第433-456行
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() | - | - | ✅ 已实现 |
前端页面 create-emergency.vue 已经完全绑定好后台接口,无需任何修改!
只需:
1. ✅ 确保后端服务已启动
2. ✅ 数据库表 sys_task_emergency 已创建
3. ✅ 前端访问该页面填写表单提交即可
1. 访问创建任务页面
2. 选择车辆 (自动从接口加载)
3. 填写患者信息
4. 选择转出医院地址 (使用地图选择器)
5. 选择转入医院地址 (使用地图选择器)
6. 系统自动计算距离
7. 填写费用信息
8. 点击保存
9. 查看提交结果
10. 验证数据库记录
-- 查看最新创建的急救转运任务
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;
结论: 🎉 前端与后端接口**完全对接**,可以直接使用!