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

车辆管理界面部门功能优化说明

优化内容

1. 查询条件优化

✅ 新增部门查询：添加了"归属部门"查询条件
✅ 车辆类型优化：将车辆类型从输入框改为下拉选择
✅ 字典支持：车辆类型使用字典标签显示

2. 表格显示优化

✅ 新增部门列：在表格中添加"归属部门"列显示
✅ 车辆类型显示：使用字典标签显示车辆类型
✅ 信息完整：显示车辆的完整信息包括归属部门

3. 编辑功能优化

✅ 部门选择：在新增/编辑对话框中添加部门选择
✅ 车辆类型选择：将车辆类型改为下拉选择
✅ 表单验证：保持原有的表单验证规则

技术实现

1. 前端界面优化

<!-- 查询条件 -->
<el-form-item label="归属部门" prop="deptId">
  <el-select v-model="queryParams.deptId" placeholder="请选择部门" clearable size="small">
    <el-option
      v-for="dept in deptList"
      :key="dept.deptId"
      :label="dept.deptName"
      :value="dept.deptId"
    />
  </el-select>
</el-form-item>

<!-- 表格显示 -->
<el-table-column label="归属部门" align="center" prop="deptName" />

<!-- 编辑表单 -->
<el-form-item label="归属部门" prop="deptId">
  <el-select v-model="form.deptId" placeholder="请选择归属部门" clearable style="width: 100%">
    <el-option
      v-for="dept in deptList"
      :key="dept.deptId"
      :label="dept.deptName"
      :value="dept.deptId"
    />
  </el-select>
</el-form-item>

2. 数据管理

// 导入部门API
import { listDept } from "@/api/system/dept";

// 数据定义
data() {
  return {
    // 部门列表数据
    deptList: [],
    // 查询参数
    queryParams: {
      // ... 其他参数
      deptId: null
    },
    // 表单参数
    form: {
      // ... 其他字段
      deptId: null
    }
  };
}

// 获取部门列表
getDeptList() {
  listDept().then(response => {
    this.deptList = response.data;
  });
}

3. 字典配置

// 添加车辆类型字典
dicts: ['sys_normal_disable', 'sys_platform', 'sys_vehicle_type']

// 车辆类型显示
<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>

功能特性

1. 查询功能

多条件查询：支持按车牌号、车辆类型、状态、平台标识、归属部门查询
部门筛选：可以按部门筛选车辆
类型筛选：可以按车辆类型筛选

2. 显示功能

部门信息：表格中显示车辆归属部门
类型标签：车辆类型使用彩色标签显示
状态标签：车辆状态使用彩色标签显示

3. 编辑功能

部门分配：可以为车辆分配归属部门
类型选择：车辆类型通过下拉选择
数据完整性：保持所有字段的数据完整性

界面效果

查询条件区域

┌─────────────────────────────────────────────────────────┐
│ 车牌号: [输入框]  车辆类型: [下拉选择]  状态: [下拉选择]  │
│ 平台标识: [下拉选择]  归属部门: [下拉选择]              │
│ [搜索] [重置]                                          │
└─────────────────────────────────────────────────────────┘

表格显示

┌─────────────────────────────────────────────────────────┐
│ 车辆ID │ 车牌号 │ 车辆类型 │ 品牌 │ 型号 │ 平台 │ 状态 │ 归属部门 │ 创建时间 │ 操作 │
├─────────────────────────────────────────────────────────┤
│ 1      │ 粤A12345 │ 救护车 │ 奔驰 │ S350 │ A平台 │ 正常 │ 急救中心 │ 2024-01-01 │ 修改删除 │
│ 2      │ 粤A67890 │ 转运车 │ 丰田 │ 海狮 │ B平台 │ 正常 │ 转运中心 │ 2024-01-02 │ 修改删除 │
└─────────────────────────────────────────────────────────┘

编辑对话框

┌─────────────────────────────────────────────────────────┐
│ 车牌号: [输入框]                                        │
│ 车辆类型: [下拉选择]                                    │
│ 车辆品牌: [输入框]                                      │
│ 车辆型号: [输入框]                                      │
│ 平台标识: [下拉选择]                                    │
│ 状态: [单选按钮]                                        │
│ 归属部门: [下拉选择]                                    │
│ 备注: [文本域]                                          │
│ [确定] [取消]                                           │
└─────────────────────────────────────────────────────────┘

用户体验提升

查询便捷：支持按部门查询车辆，便于管理
信息完整：显示车辆归属部门，信息更完整
操作友好：车辆类型和部门都使用下拉选择，避免输入错误
视觉清晰：使用字典标签显示类型和状态，视觉效果更好
数据一致：与任务车辆关联功能保持一致的数据结构

注意事项

数据依赖：需要确保部门数据存在
权限控制：需要相应的权限才能进行增删改查操作
数据完整性：部门字段可以为空，但建议为车辆分配部门
性能考虑：部门列表在页面加载时获取，如果部门很多可考虑分页

后续优化建议

部门树形结构：如果部门有层级关系，可以显示为树形结构
批量操作：支持批量修改车辆部门
部门统计：显示各部门的车辆数量统计
权限细化：按部门控制车辆管理权限
导入导出：支持包含部门信息的批量导入导出