编辑 | blame | 历史 | 原始文档

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

问题描述

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

问题原因

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

修复方案

1. 后端Service层修复

添加依赖注入

文件：SysTaskServiceImpl.java

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

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

实现getAvailableVehicles方法

@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

<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>

添加车辆类型名称方法

/** 获取车辆类型名称 */
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. 数据转换

// 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. 后端Service层修复

添加依赖注入

实现getAvailableVehicles方法

2. 前端界面优化

优化车辆选择下拉框

添加车辆类型名称方法

技术实现细节

1. 数据流程

2. 查询条件

3. 数据转换

界面效果

修复前

修复后

功能特性

1. 查询功能

2. 显示功能

3. 用户体验

注意事项

后续优化建议

相关文件