# 任务详情页面分配车辆问题修复说明

## 问题描述

在任务详情页面的分配车辆对话框中，下拉列表中没有显示车辆选项，导致无法选择车辆进行分配。

## 问题原因

1. **后端Service层未实现**：`SysTaskServiceImpl.getAvailableVehicles()` 方法只是返回空列表，没有实际查询车辆数据
2. **缺少依赖注入**：没有注入 `VehicleInfoMapper` 来查询车辆信息
3. **前端显示优化**：车辆选择下拉框的显示格式可以进一步优化

## 修复方案

### 1. 后端Service层修复

#### 添加依赖注入
**文件**：`SysTaskServiceImpl.java`

```java
// 添加导入
import com.ruoyi.system.mapper.VehicleInfoMapper;
import com.ruoyi.system.domain.VehicleInfo;

// 添加依赖注入
@Autowired
private VehicleInfoMapper vehicleInfoMapper;
```

#### 实现getAvailableVehicles方法
```java
@Override
public List<SysTaskVehicle> getAvailableVehicles(Long deptId, String taskType) {
    List<SysTaskVehicle> availableVehicles = new ArrayList<>();
    
    try {
        // 查询指定部门下状态为正常的车辆
        VehicleInfo queryParam = new VehicleInfo();
        queryParam.setDeptId(deptId);
        queryParam.setStatus("0"); // 0表示正常状态
        
        List<VehicleInfo> vehicles = vehicleInfoMapper.selectVehicleInfoList(queryParam);
        
        // 转换为SysTaskVehicle对象
        for (VehicleInfo vehicle : vehicles) {
            SysTaskVehicle taskVehicle = new SysTaskVehicle();
            taskVehicle.setVehicleId(vehicle.getVehicleId());
            taskVehicle.setVehicleNo(vehicle.getVehicleNo());
            taskVehicle.setVehicleType(vehicle.getVehicleType());
            taskVehicle.setVehicleBrand(vehicle.getVehicleBrand());
            taskVehicle.setVehicleModel(vehicle.getVehicleModel());
            availableVehicles.add(taskVehicle);
        }
    } catch (Exception e) {
        // 如果查询失败，记录日志并返回空列表
        System.err.println("查询可用车辆失败: " + e.getMessage());
    }
    
    return availableVehicles;
}
```

### 2. 前端界面优化

#### 优化车辆选择下拉框
**文件**：`detail.vue`

```vue
<el-form-item label="车辆" prop="vehicleIds">
  <el-select v-model="vehicleAssignForm.vehicleIds" placeholder="请选择车辆" multiple clearable style="width: 100%">
    <el-option
      v-for="vehicle in availableVehicles"
      :key="vehicle.vehicleId"
      :label="vehicle.vehicleNo + ' - ' + getVehicleTypeName(vehicle.vehicleType)"
      :value="vehicle.vehicleId"
    >
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
          <div style="font-weight: bold; color: #303133;">{{ vehicle.vehicleNo }}</div>
          <div style="font-size: 12px; color: #909399;">ID: {{ vehicle.vehicleId }}</div>
        </div>
        <div style="text-align: right;">
          <div style="color: #67C23A; font-size: 13px;">{{ getVehicleTypeName(vehicle.vehicleType) }}</div>
          <div style="color: #8492a6; font-size: 12px;">{{ vehicle.vehicleBrand }} {{ vehicle.vehicleModel }}</div>
        </div>
      </div>
    </el-option>
  </el-select>
</el-form-item>
```

#### 添加车辆类型名称方法
```javascript
/** 获取车辆类型名称 */
getVehicleTypeName(vehicleType) {
  const typeDict = this.dict.type.sys_vehicle_type;
  if (typeDict && typeDict.length > 0) {
    const typeItem = typeDict.find(item => item.value === vehicleType);
    return typeItem ? typeItem.label : vehicleType;
  }
  return vehicleType;
}
```

## 技术实现细节

### 1. 数据流程

```
前端调用 getAvailableVehicles(deptId, taskType)
    ↓
后端Controller: /task/vehicle/available
    ↓
Service层: SysTaskServiceImpl.getAvailableVehicles()
    ↓
Mapper层: VehicleInfoMapper.selectVehicleInfoList()
    ↓
数据库查询: tb_vehicle_info表
    ↓
数据转换: VehicleInfo → SysTaskVehicle
    ↓
返回给前端
```

### 2. 查询条件

- **部门ID**：只查询指定部门的车辆
- **车辆状态**：只查询状态为"0"（正常）的车辆
- **任务类型**：预留参数，可根据任务类型筛选合适的车辆

### 3. 数据转换

```java
// VehicleInfo → SysTaskVehicle
SysTaskVehicle taskVehicle = new SysTaskVehicle();
taskVehicle.setVehicleId(vehicle.getVehicleId());
taskVehicle.setVehicleNo(vehicle.getVehicleNo());
taskVehicle.setVehicleType(vehicle.getVehicleType());
taskVehicle.setVehicleBrand(vehicle.getVehicleBrand());
taskVehicle.setVehicleModel(vehicle.getVehicleModel());
```

## 界面效果

### 修复前
```
┌─────────────────────────────────────────────────────────┐
│ 车辆: [请选择车辆 ▼]                                    │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ (无选项)                                            │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```

### 修复后
```
┌─────────────────────────────────────────────────────────┐
│ 车辆: [粤A12345 - 救护车 ▼]                            │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 粤A12345 - 救护车                                   │ │
│ │ ┌─────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ 粤A12345        │ │ 救护车                      │ │ │
│ │ │ ID: 1           │ │ 奔驰 S350                   │ │ │
│ │ └─────────────────┘ └─────────────────────────────┘ │ │
│ │ 粤A67890 - 转运车                                   │ │
│ │ ┌─────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ 粤A67890        │ │ 转运车                      │ │ │
│ │ │ ID: 2           │ │ 丰田 海狮                   │ │ │
│ │ └─────────────────┘ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```

## 功能特性

### 1. 查询功能
- **部门筛选**：只显示指定部门的车辆
- **状态筛选**：只显示正常状态的车辆
- **多选支持**：支持选择多辆车进行分配

### 2. 显示功能
- **详细信息**：显示车牌号、车辆类型、品牌型号
- **类型标签**：车辆类型使用字典标签显示
- **ID显示**：显示车辆ID便于识别
- **美观布局**：使用卡片式布局展示车辆信息

### 3. 用户体验
- **搜索友好**：支持输入搜索快速定位车辆
- **信息完整**：显示车辆的完整信息
- **操作便捷**：支持多选和清空操作

## 注意事项

1. **数据依赖**：需要确保车辆数据存在且状态正常
2. **部门权限**：只显示当前任务所属部门的车辆
3. **异常处理**：查询失败时返回空列表，不影响页面正常使用
4. **性能考虑**：如果车辆数据很多，可考虑分页或搜索优化

## 后续优化建议

1. **搜索功能**：添加车辆搜索功能，支持按车牌号、类型搜索
2. **分页加载**：如果车辆很多，可考虑分页加载
3. **缓存优化**：对车辆列表进行缓存，减少重复查询
4. **状态管理**：支持按车辆状态筛选（如：空闲、使用中）
5. **距离计算**：根据任务地址计算车辆距离，优先推荐就近车辆

## 相关文件

- ✅ `SysTaskServiceImpl.java` - Service层实现（已修复）
- ✅ `detail.vue` - 前端页面（已优化）
- ✅ `VehicleInfoMapper.java` - 车辆信息Mapper
- ✅ `VehicleInfo.java` - 车辆信息实体类
- ✅ `SysTaskVehicle.java` - 任务车辆关联实体类