任务车辆默认显示功能说明

功能概述

在创建急救转运任务页面中，任务车辆字段需要默认显示当前登录用户绑定的车辆信息。如果用户未绑定车辆，则显示为空并允许用户手动选择。

实现位置

前端文件: app/pages/task/create-emergency.vue

技术实现

1. 模板部分

在车辆选择器中添加:value绑定，关联计算属性selectedVehicleIndex:

<picker mode="selector" :range="vehicles" :value="selectedVehicleIndex" @change="onVehicleChange">
  <view class="form-input picker-input">
    {{ selectedVehicle || '请选择任务车辆' }}
    <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
  </view>
</picker>

2. 计算属性

添加selectedVehicleIndex计算属性，动态计算绑定车辆在车辆列表中的索引：

computed: {
  // ...其他计算属性
  
  // 计算车辆在picker中的索引，用于默认选中
  selectedVehicleIndex() {
    if (!this.selectedVehicle || this.vehicles.length === 0) {
      return 0
    }
    const index = this.vehicles.findIndex(v => v === this.selectedVehicle)
    return index !== -1 ? index : 0
  }
}

3. 页面加载逻辑

在onLoad生命周期中，先加载可用车辆列表，然后获取并设置用户绑定的车辆：

onLoad(options) {
  // 先加载车辆列表，然后加载绑定车辆信息
  this.getAvailableVehicles().then(() => {
    this.getUserBoundVehicleInfo()
  })
  // ...其他初始化
}

4. 获取绑定车辆信息

getUserBoundVehicleInfo()方法实现车辆绑定逻辑：

getUserBoundVehicleInfo() {
  const userId = this.currentUser.userId
  if (!userId) {
    console.warn('用户ID不存在，无法获取绑定车辆')
    return
  }
  
  getUserBoundVehicle(userId).then(response => {
    const boundVehicle = response.data
    
    if (boundVehicle && boundVehicle.vehicleId) {
      const boundVehicleNo = boundVehicle.vehicleNo
      const boundVehicleId = boundVehicle.vehicleId
      
      console.log('用户绑定的车辆:', boundVehicleNo, 'ID:', boundVehicleId)
      
      // 在车辆列表中查找绑定的车辆
      const vehicleIndex = this.vehicleOptions.findIndex(v => 
        v.id === boundVehicleId || v.name === boundVehicleNo
      )
      
      if (vehicleIndex !== -1) {
        // 设置默认选中的车辆
        this.selectedVehicle = this.vehicleOptions[vehicleIndex].name
        this.selectedVehicleId = this.vehicleOptions[vehicleIndex].id
        console.log('默认选中车辆:', this.selectedVehicle)
      } else {
        console.warn('绑定的车辆不在可用车辆列表中')
      }
    } else {
      console.log('用户未绑定车辆')
    }
  }).catch(error => {
    console.error('获取用户绑定车辆信息失败:', error)
  })
}

工作流程

1. 页面加载时：

• 调用getAvailableVehicles()加载当前部门的可用车辆列表
• 车辆列表加载完成后，调用getUserBoundVehicleInfo()

1. 获取绑定车辆：

• 调用getUserProfile() API获取当前用户的个人信息
• 检查用户是否有绑定车辆（userInfo.boundVehicle）
• 如果有绑定车辆，提取车辆编号和ID

1. 匹配和设置：

• 在vehicleOptions中查找匹配的车辆（按ID或车辆编号匹配）
• 如果找到，设置selectedVehicle和selectedVehicleId
• 如果未找到，输出警告信息（可能车辆不在可用列表中）

1. UI显示：

• 通过selectedVehicleIndex计算属性自动计算索引
• picker组件通过:value绑定索引，显示默认选中状态
• 用户可以看到已绑定的车辆被自动选中

数据结构

用户绑定车辆信息（来自getUserBoundVehicle API）

{
  vehicleId: 123,           // 车辆ID
  vehicleNo: "粤A12345",     // 车辆编号
  vehicleType: "救护车",    // 车辆类型
  deptId: 100,              // 所属部门ID
  bindTime: "2025-01-25"     // 绑定时间
}

车辆选项数据

vehicleOptions: [
  {
    id: 123,              // 车辆ID
    name: "粤A12345",      // 车辆编号
    type: "救护车",        // 车辆类型
    status: "AVAILABLE"   // 车辆状态
  }
]

vehicles: ["粤A12345", "粤B67890", ...]  // picker显示的车辆编号数组

异常处理

1. 用户未绑定车辆：

• 输出日志："用户未绑定车辆"
• 车辆选择器保持为空，允许用户手动选择

1. 绑定的车辆不在可用列表中：

• 输出警告："绑定的车辆不在可用车辆列表中"
• 可能原因：
  • 车辆已被删除
  • 车辆的car_id或dept_id为空（被过滤）
  • 车辆状态不可用
  • 车辆不属于当前部门

1. API调用失败：

• 捕获错误并输出："获取用户绑定车辆信息失败"
• 不影响页面其他功能正常使用

调试日志

功能包含完整的日志输出，便于调试：

console.log('用户绑定的车辆:', boundVehicleNo, 'ID:', boundVehicleId)
console.log('默认选中车辆:', this.selectedVehicle)
console.warn('绑定的车辆不在可用车辆列表中')
console.log('用户未绑定车辆')
console.error('获取用户绑定车辆信息失败:', error)

相关接口

GET /system/vehicle/user/bound/{userId}

获取指定用户当前绑定的车辆信息。

请求方式: GET

请求参数:
- userId: 用户ID（路径参数）

返回数据示例:
json { "code": 200, "msg": "查询成功", "data": { "vehicleId": 123, "vehicleNo": "粤A12345", "vehicleType": "救护车", "deptId": 100, "deptName": "广州分公司", "bindTime": "2025-01-25 10:30:00", "userId": 1 } }

异常情况:
json { "code": 200, "msg": "查询成功", "data": null // 用户未绑定车辆 }

依赖说明

API依赖

import { getUserBoundVehicle } from "@/api/vehicle"

前端API文件

文件: app/api/vehicle.js

export function getUserBoundVehicle(userId) {
  return request({
    url: '/system/vehicle/user/bound/' + userId,
    method: 'get'
  })
}

测试建议

测试场景1：用户已绑定车辆且车辆在可用列表中

预期结果：
- 页面加载后，任务车辆字段自动显示绑定的车辆编号
- picker选中状态正确
- 控制台输出成功日志

测试场景2：用户未绑定车辆

预期结果：
- 页面加载后，任务车辆字段显示"请选择任务车辆"
- picker未选中任何项
- 控制台输出"用户未绑定车辆"

测试场景3：用户绑定的车辆不在可用列表中

预期结果：
- 页面加载后，任务车辆字段显示"请选择任务车辆"
- 控制台输出警告信息
- 用户可以手动选择其他车辆

测试场景4：API调用失败

预期结果：
- 页面正常显示，不影响其他功能
- 控制台输出错误信息
- 任务车辆字段显示"请选择任务车辆"

优化建议

1. 加载提示：

• 在车辆列表加载时显示loading提示
• 提升用户体验

1. 车辆不可用提示：

• 当绑定车辆不在可用列表时，可以给用户友好提示
• 例如："您绑定的车辆当前不可用，请选择其他车辆"

1. 自动刷新：

• 当用户在其他页面更新绑定车辆后
• 返回此页面时自动刷新车辆选择

版本历史

• 2025-01-25 v2：修正API调用，使用专用的getUserBoundVehicle接口
• 更改为调用/system/vehicle/user/bound/{userId}接口
• 添加userId验证，确保用户ID存在
• 修正响应数据结构处理（vehicleNo而非vehicleNumber）

• 2025-01-25 v1：初始版本，实现任务车辆默认显示功能

• 添加picker的value绑定
• 新增selectedVehicleIndex计算属性
• 优化getUserBoundVehicleInfo方法，增加详细日志