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

车辆任务关联管理页面改进说明

改进内容

1. 下拉选择优化

  • 任务选择：将原来的手动输入任务ID改为下拉选择
  • 车辆选择：将原来的手动输入车辆ID改为下拉选择
  • 支持搜索：两个下拉框都支持输入搜索功能
  • 支持清空：可以清空已选择的内容

2. 用户体验提升

  • 加载状态：下拉选择时显示加载状态
  • 友好显示：任务显示为"任务编号 - 任务描述"格式
  • 车辆显示：车辆显示为"车牌号 - 车辆类型"格式
  • 字典转换：车辆类型自动转换为中文显示

3. 数据验证增强

  • 重复检查：新增时检查是否已存在相同的任务车辆关联
  • 默认状态：新增时自动设置状态为"已分配"
  • 选择监听：添加任务和车辆选择变化的监听事件

4. 界面优化

  • 对话框宽度：将对话框宽度从500px增加到600px
  • 样式美化：优化下拉选项的显示样式
  • 错误提示：添加友好的错误提示信息

技术实现

1. API集成

// 导入任务和车辆API
import { listTask } from "@/api/task";
import { listVehicle } from "@/api/system/vehicle";

2. 数据获取

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

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

3. 下拉选择组件

<el-select 
  v-model="form.taskId" 
  placeholder="请选择任务" 
  filterable 
  clearable 
  style="width: 100%" 
  @change="handleTaskChange"
  :loading="taskListLoading"
>
  <el-option
    v-for="task in taskList"
    :key="task.taskId"
    :label="task.taskCode + ' - ' + (task.taskDescription || '无描述')"
    :value="task.taskId"
  >
    <span style="float: left; font-weight: bold">{{ task.taskCode }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ task.taskDescription || '无描述' }}</span>
  </el-option>
</el-select>

4. 重复检查逻辑

// 检查是否已存在相同的任务车辆关联
if (this.form.id == null) {
  const exists = this.taskVehicleList.find(item => 
    item.taskId === this.form.taskId && item.vehicleId === this.form.vehicleId
  );
  if (exists) {
    this.$modal.msgError("该任务和车辆的关联关系已存在，请勿重复添加");
    return;
  }
}

使用说明

1. 新增关联

  1. 点击"新增"按钮
  2. 从下拉列表中选择任务（支持搜索）
  3. 从下拉列表中选择车辆（支持搜索）
  4. 选择关联状态（默认为"已分配"）
  5. 填写备注（可选）
  6. 点击"确定"保存

2. 修改关联

  1. 点击表格中的"修改"按钮
  2. 在弹出的对话框中修改相关信息
  3. 点击"确定"保存修改

3. 搜索功能

  • 任务搜索：在任务下拉框中输入任务编号或描述进行搜索
  • 车辆搜索：在车辆下拉框中输入车牌号进行搜索

注意事项

  1. 数据加载：页面初始化时会自动加载任务和车辆列表
  2. 权限控制：需要相应的权限才能进行增删改查操作
  3. 数据完整性：系统会自动检查重复关联，防止数据重复
  4. 状态管理：关联状态变更需要相应的权限

后续优化建议

  1. 分页加载：如果任务和车辆数据量很大，可以考虑分页加载
  2. 缓存机制：可以添加本地缓存减少重复请求
  3. 实时更新：可以添加WebSocket实现数据实时更新
  4. 批量操作：可以添加批量分配车辆的功能
  5. 历史记录：可以添加操作历史记录功能