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

任务车辆关联列表显示优化说明

优化内容

1. 查询条件优化

✅ 任务选择：将"任务ID"改为"任务"下拉选择，显示任务编号和类型
✅ 车辆选择：将"车辆ID"改为"车辆"下拉选择，显示车牌号和类型
✅ 用户体验：支持搜索过滤，操作更便捷

2. 表格显示优化

✅ 移除关联ID：不再显示内部关联ID，界面更简洁
✅ 移除任务ID：不再显示任务ID，改为显示任务编号
✅ 新增任务编号：显示任务编号，便于识别
✅ 新增任务类型：显示任务类型，使用字典标签
✅ 新增车辆类型：显示车辆类型，使用字典标签

技术实现

1. 查询条件优化

任务选择下拉

<el-form-item label="任务" prop="taskId">
  <el-select v-model="queryParams.taskId" placeholder="请选择任务" clearable filterable style="width: 200px">
    <el-option
      v-for="task in taskList"
      :key="task.taskId"
      :label="task.taskCode + ' - ' + getTaskTypeName(task.taskType)"
      :value="task.taskId"
    />
  </el-select>
</el-form-item>

车辆选择下拉

<el-form-item label="车辆" prop="vehicleId">
  <el-select v-model="queryParams.vehicleId" placeholder="请选择车辆" clearable filterable style="width: 200px">
    <el-option
      v-for="vehicle in vehicleList"
      :key="vehicle.vehicleId"
      :label="vehicle.vehicleNo + ' - ' + getVehicleTypeName(vehicle.vehicleType)"
      :value="vehicle.vehicleId"
    />
  </el-select>
</el-form-item>

2. 表格显示优化

表格列定义

<el-table v-loading="loading" :data="taskVehicleList" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <!-- 移除：关联ID、任务ID -->
  <!-- 新增：任务编号、任务类型、车辆类型 -->
  <el-table-column label="任务编号" align="center" prop="taskCode" />
  <el-table-column label="任务类型" align="center" prop="taskType">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.sys_task_type" :value="scope.row.taskType"/>
    </template>
  </el-table-column>
  <el-table-column label="车牌号" align="center" prop="vehicleNo" />
  <el-table-column label="车辆类型" align="center" prop="vehicleType">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.sys_vehicle_type" :value="scope.row.vehicleType"/>
    </template>
  </el-table-column>
  <!-- 其他列保持不变 -->
</el-table>

3. 数据管理

数据定义

data() {
  return {
    // 任务列表
    taskList: [],
    // 车辆列表
    vehicleList: [],
    // 任务列表加载状态
    taskListLoading: false,
    // 车辆列表加载状态
    vehicleListLoading: false,
    // ... 其他数据
  };
}

数据加载

created() {
  this.getList();
  this.getTaskList();    // 加载任务列表
  this.getVehicleList(); // 加载车辆列表
}

/** 获取任务列表 */
getTaskList() {
  this.taskListLoading = true;
  listTask({ pageNum: 1, pageSize: 1000 }).then(response => {
    this.taskList = response.rows || [];
    this.taskListLoading = false;
  }).catch(() => {
    this.taskListLoading = false;
  });
}

/** 获取车辆列表 */
getVehicleList() {
  this.vehicleListLoading = true;
  listVehicle({ pageNum: 1, pageSize: 1000 }).then(response => {
    this.vehicleList = response.rows || [];
    this.vehicleListLoading = false;
  }).catch(() => {
    this.vehicleListLoading = false;
  });
}

字典方法

/** 获取任务类型名称 */
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;
}

/** 获取车辆类型名称 */
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;
}

界面效果

查询条件区域

┌─────────────────────────────────────────────────────────┐
│ 任务: [下拉选择-任务编号-任务类型]  车辆: [下拉选择-车牌号-车辆类型] │
│ 车牌号: [输入框]  关联状态: [下拉选择]  分配人: [输入框]        │
│ [搜索] [重置]                                          │
└─────────────────────────────────────────────────────────┘

表格显示

┌─────────────────────────────────────────────────────────┐
│ 选择 │ 任务编号 │ 任务类型 │ 车牌号 │ 车辆类型 │ 分配时间 │ 分配人 │ 关联状态 │ 备注 │ 操作 │
├─────────────────────────────────────────────────────────┤
│ ☐   │ TASK001  │ 维修保养 │ 粤A12345 │ 救护车 │ 2024-01-01 │ admin │ 已分配 │ 测试 │ 修改删除状态变更 │
│ ☐   │ TASK002  │ 加油任务 │ 粤A67890 │ 转运车 │ 2024-01-02 │ admin │ 执行中 │ 测试 │ 修改删除状态变更 │
└─────────────────────────────────────────────────────────┘

下拉选择效果

任务选择下拉

┌─────────────────────────────────────────────────────────┐
│ 任务: [TASK001 - 维修保养 ▼]                           │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ TASK001 - 维修保养                                  │ │
│ │ TASK002 - 加油任务                                  │ │
│ │ TASK003 - 其他任务                                  │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

车辆选择下拉

┌─────────────────────────────────────────────────────────┐
│ 车辆: [粤A12345 - 救护车 ▼]                            │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 粤A12345 - 救护车                                   │ │
│ │ 粤A67890 - 转运车                                   │ │
│ │ 粤A99999 - 救护车                                   │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

功能特性

1. 查询功能

任务筛选：支持按任务编号和类型筛选
车辆筛选：支持按车牌号和类型筛选
搜索过滤：下拉选择支持输入搜索
多条件查询：支持组合条件查询

2. 显示功能

信息完整：显示任务编号、类型、车牌号、车辆类型
类型标签：任务类型和车辆类型使用彩色标签显示
状态标签：关联状态使用彩色标签显示
界面简洁：移除不必要的ID字段

3. 用户体验

操作便捷：下拉选择比手动输入更便捷
信息清晰：显示有意义的业务信息而非技术ID
搜索友好：支持输入搜索快速定位
视觉美观：使用字典标签提升视觉效果

数据字典配置

1. 任务类型字典 (sys_task_type)

dicts: ['sys_task_vehicle_status', 'sys_vehicle_type', 'sys_task_type']

2. 车辆类型字典 (sys_vehicle_type)

救护车
转运车
其他

3. 任务车辆关联状态字典 (sys_task_vehicle_status)

ASSIGNED - 已分配
ACTIVE - 执行中
COMPLETED - 已完成
CANCELLED - 已取消

注意事项

数据加载：任务和车辆列表在页面加载时获取，如果数据很多可考虑分页
性能考虑：下拉选择支持搜索过滤，提升大数据量下的用户体验
数据一致性：确保任务和车辆数据与关联数据保持一致
权限控制：需要相应的权限才能进行查询和操作

后续优化建议

分页加载：如果任务或车辆数据很多，可考虑分页加载
缓存优化：对任务和车辆列表进行缓存，减少重复请求
搜索优化：支持更复杂的搜索条件，如按部门筛选
导出功能：支持导出包含任务编号和类型的数据
批量操作：支持批量修改任务车辆关联状态