# 编辑界面优化说明

## 优化内容

### 1. 任务选择优化
- **显示信息**：任务编号 + 任务类型 + 任务描述
- **详细信息**：
  - 左侧：任务编号（粗体）+ 任务ID
  - 右侧：任务类型（蓝色）+ 任务描述（灰色）
- **搜索支持**：支持按任务编号、任务类型、任务描述搜索

### 2. 车辆选择优化
- **显示信息**：车牌号 + 车辆类型 + 归属部门
- **详细信息**：
  - 左侧：车牌号（粗体）+ 车辆ID
  - 右侧：车辆类型（绿色）+ 归属部门（橙色）
- **搜索支持**：支持按车牌号、车辆类型、部门名称搜索

### 3. 后端数据支持
- **车辆实体类**：添加了 `deptId` 和 `deptName` 字段
- **数据库查询**：车辆查询联表查询部门信息
- **字典支持**：添加了任务类型字典支持

## 技术实现

### 1. 前端界面优化
```vue
<!-- 任务选择 -->
<el-select v-model="form.taskId" placeholder="请选择任务" filterable clearable>
  <el-option
    v-for="task in taskList"
    :key="task.taskId"
    :label="task.taskCode + ' - ' + getTaskTypeName(task.taskType) + ' - ' + (task.taskDescription || '无描述')"
    :value="task.taskId"
  >
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <div style="font-weight: bold; color: #303133;">{{ task.taskCode }}</div>
        <div style="font-size: 12px; color: #909399;">ID: {{ task.taskId }}</div>
      </div>
      <div style="text-align: right;">
        <div style="color: #409EFF; font-size: 13px;">{{ getTaskTypeName(task.taskType) }}</div>
        <div style="color: #8492a6; font-size: 12px;">{{ task.taskDescription || '无描述' }}</div>
      </div>
    </div>
  </el-option>
</el-select>

<!-- 车辆选择 -->
<el-select v-model="form.vehicleId" placeholder="请选择车辆" filterable clearable>
  <el-option
    v-for="vehicle in vehicleList"
    :key="vehicle.vehicleId"
    :label="vehicle.vehicleNo + ' - ' + getVehicleTypeName(vehicle.vehicleType) + ' - ' + (vehicle.deptName || '未分配部门')"
    :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: #E6A23C; font-size: 12px;">{{ vehicle.deptName || '未分配部门' }}</div>
      </div>
    </div>
  </el-option>
</el-select>
```

### 2. 后端数据支持
```java
// 车辆实体类添加字段
public class VehicleInfo extends BaseEntity {
    // ... 其他字段
    
    /** 归属部门ID */
    @Excel(name = "归属部门ID")
    private Long deptId;

    /** 归属部门名称 */
    @Excel(name = "归属部门")
    private String deptName;
    
    // getter和setter方法
}
```

```xml
<!-- 车辆Mapper XML优化 -->
<resultMap type="com.ruoyi.system.domain.VehicleInfo" id="VehicleInfoResult">
    <!-- ... 其他字段映射 -->
    <result property="deptId"         column="dept_id"         />
    <result property="deptName"       column="dept_name"       />
</resultMap>

<sql id="selectVehicleInfoVo">
    select v.vehicle_id, v.device_id, v.vehicle_no, v.vehicle_type, v.vehicle_brand, v.vehicle_model, v.status, v.platform_code, v.dept_id, d.dept_name, v.create_by, v.create_time, v.update_by, v.update_time, v.remark
    from tb_vehicle_info v
    left join sys_dept d on v.dept_id = d.dept_id
</sql>
```

### 3. 字典支持
```javascript
// 添加任务类型字典
dicts: ['sys_task_vehicle_status', 'sys_vehicle_type', 'sys_task_type']

// 获取任务类型名称
getTaskTypeName(taskType) {
  const typeDict = this.dict.type.sys_task_type;
  if (typeDict && typeDict.length > 0) {
    const typeItem = typeDict.find(item => item.value === taskType);
    return typeItem ? typeItem.label : taskType;
  }
  return taskType;
}
```

## 显示效果

### 任务选择下拉框
```
┌─────────────────────────────────────────────────────────┐
│ 任务编号 - 任务类型 - 任务描述                           │
├─────────────────────────────────────────────────────────┤
│ TASK001                    │ 维修保养                   │
│ ID: 1                      │ 车辆定期保养维护           │
├─────────────────────────────────────────────────────────┤
│ TASK002                    │ 加油任务                   │
│ ID: 2                      │ 车辆加油任务               │
└─────────────────────────────────────────────────────────┘
```

### 车辆选择下拉框
```
┌─────────────────────────────────────────────────────────┐
│ 车牌号 - 车辆类型 - 归属部门                             │
├─────────────────────────────────────────────────────────┤
│ 粤A12345                  │ 救护车                     │
│ ID: 1                     │ 急救中心                   │
├─────────────────────────────────────────────────────────┤
│ 粤A67890                  │ 转运车                     │
│ ID: 2                     │ 转运中心                   │
└─────────────────────────────────────────────────────────┘
```

## 用户体验提升

1. **信息丰富**：显示更多有用信息，便于用户选择
2. **视觉层次**：使用不同颜色和字体大小区分信息重要性
3. **搜索友好**：支持多字段搜索，提高查找效率
4. **数据完整**：显示ID信息，便于技术用户识别
5. **状态清晰**：明确显示任务类型和车辆归属部门

## 注意事项

1. **数据依赖**：需要确保车辆数据包含部门信息
2. **字典配置**：需要配置任务类型字典数据
3. **性能考虑**：联表查询可能影响性能，建议添加索引
4. **兼容性**：保持与现有功能的兼容性

## 后续优化建议

1. **缓存机制**：对字典数据进行缓存
2. **分页加载**：如果数据量大，考虑分页加载
3. **实时更新**：支持数据实时更新
4. **自定义显示**：允许用户自定义显示字段
5. **批量操作**：支持批量选择任务和车辆