编辑界面优化说明
优化内容
1. 任务选择优化
- 显示信息：任务编号 + 任务类型 + 任务描述
- 详细信息：
- 左侧：任务编号（粗体）+ 任务ID
- 右侧：任务类型（蓝色）+ 任务描述（灰色）
- 搜索支持：支持按任务编号、任务类型、任务描述搜索
2. 车辆选择优化
- 显示信息：车牌号 + 车辆类型 + 归属部门
- 详细信息：
- 左侧：车牌号（粗体）+ 车辆ID
- 右侧：车辆类型（绿色）+ 归属部门（橙色）
- 搜索支持：支持按车牌号、车辆类型、部门名称搜索
3. 后端数据支持
- 车辆实体类：添加了
deptId 和 deptName 字段
- 数据库查询：车辆查询联表查询部门信息
- 字典支持：添加了任务类型字典支持
技术实现
1. 前端界面优化
<!-- 任务选择 -->
<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. 后端数据支持
// 车辆实体类添加字段
public class VehicleInfo extends BaseEntity {
// ... 其他字段
/** 归属部门ID */
@Excel(name = "归属部门ID")
private Long deptId;
/** 归属部门名称 */
@Excel(name = "归属部门")
private String deptName;
// getter和setter方法
}
<!-- 车辆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. 字典支持
// 添加任务类型字典
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 │ 转运中心 │
└─────────────────────────────────────────────────────────┘
用户体验提升
- 信息丰富：显示更多有用信息，便于用户选择
- 视觉层次：使用不同颜色和字体大小区分信息重要性
- 搜索友好：支持多字段搜索，提高查找效率
- 数据完整：显示ID信息，便于技术用户识别
- 状态清晰：明确显示任务类型和车辆归属部门
注意事项
- 数据依赖：需要确保车辆数据包含部门信息
- 字典配置：需要配置任务类型字典数据
- 性能考虑：联表查询可能影响性能，建议添加索引
- 兼容性：保持与现有功能的兼容性
后续优化建议
- 缓存机制：对字典数据进行缓存
- 分页加载：如果数据量大，考虑分页加载
- 实时更新：支持数据实时更新
- 自定义显示：允许用户自定义显示字段
- 批量操作：支持批量选择任务和车辆
