# 车辆管理 - 车牌号搜索功能修复

## 问题描述
用户反馈：**车辆管理页面的车牌号搜索功能不起作用**。

## 问题根源

### 错误的实现方式
在 `vehicle.vue` 中，`getDataList()` 方法**没有从 `baseSearch` 组件获取搜索参数**：

```javascript
// ❌ 错误：只使用 form 中的固定字段
const form = reactive({
    pageNum: 1,
    pageSize: 10,
    licensePlate: '',  // 这个字段永远是空字符串！
});

const getDataList = async () => {
    const params = {
        pageNum: form.pageNum,
        pageSize: form.pageSize,
        licensePlate: form.licensePlate,  // ❌ 永远传空字符串
    };
    console.log('查询参数:', params);
    const res = await vehicleList(params);
    // ...
};
```

### 问题分析
1. **`form.licensePlate` 字段从未更新**
   - 初始化为空字符串
   - 用户在搜索框输入车牌号时，这个值不会改变
   
2. **没有使用 `baseSearchRef.value.penetrateParams()`**
   - `baseSearch` 组件通过 `penetrateParams()` 方法返回用户输入的搜索参数
   - 其他页面（如 `driver.vue`, `attestation.vue`）都正确使用了这个方法
   - 但 `vehicle.vue` 没有调用它

3. **后端日志确认**
   ```
   === 查询车辆列表 ===
   参数: {pageNum=1, pageSize=10, licensePlate=}
   ```
   可以看到 `licensePlate` 确实是空的

## 解决方案

### 修改前后对比

#### 修改前（错误）
```javascript
const form = reactive({
    pageNum: 1,
    pageSize: 10,
    licensePlate: '',  // ❌ 多余的字段
});

const getDataList = async () => {
    data.dataListLoading = true;
    try {
        const params = {
            pageNum: form.pageNum,
            pageSize: form.pageSize,
            licensePlate: form.licensePlate,  // ❌ 永远是空字符串
        };
        console.log('查询参数:', params);
        // ...
    }
};
```

#### 修改后（正确）
```javascript
const form = reactive({
    pageNum: 1,
    pageSize: 10,
    // ✅ 移除 licensePlate 字段，改用 baseSearchRef 获取
});

const getDataList = async () => {
    data.dataListLoading = true;
    try {
        // ✅ 使用 baseSearchRef 获取搜索参数
        const params = {
            ...form,
            ...baseSearchRef.value.penetrateParams(),
        };
        console.log('[VEHICLE-SEARCH] 查询参数:', params);
        // ...
    }
};
```

### 关键改动点

1. **移除 `form.licensePlate` 字段**
   - 不再在 `form` 中定义 `licensePlate`
   - 避免与 `baseSearch` 组件的状态冲突

2. **使用 `baseSearchRef.value.penetrateParams()`**
   - 这个方法会返回 `baseSearch` 组件中用户输入的所有搜索参数
   - 返回格式：`{ licensePlate: '用户输入的车牌号' }`

3. **使用扩展运算符合并参数**
   ```javascript
   const params = {
       ...form,                              // { pageNum: 1, pageSize: 10 }
       ...baseSearchRef.value.penetrateParams(), // { licensePlate: '鄂A 66662' }
   };
   // 结果: { pageNum: 1, pageSize: 10, licensePlate: '鄂A 66662' }
   ```

## 参考其他页面的正确实现

### driver.vue（司机管理）
```javascript
const form = reactive({
    pageNum: 1,
    pageSize: 10,
});

const getDataList = () => {
    data.dataListLoading = true;
    const params = {
        ...form,
        ...baseSearchRef.value.penetrateParams(),  // ✅ 正确用法
    };
    // ...
};
```

### attestation.vue（入境检疫）
```javascript
const searchForm = reactive({
    pageNum: 1,
    pageSize: 10,
});

const getDataList = () => {
    const params = {
        ...searchForm,
        ...baseSearchRef.value.penetrateParams(),  // ✅ 正确用法
    };
    // ...
};
```

## baseSearch 组件工作原理

### 组件定义
```vue
<!-- formItemList 定义搜索项 -->
<base-search 
    :formItemList="formItemList" 
    @search="searchFrom" 
    ref="baseSearchRef">
</base-search>
```

### formItemList 配置
```javascript
const formItemList = reactive([
    {
        label: '车牌号',
        param: 'licensePlate',  // ← 参数名
        type: 'input',
        placeholder: '请输入车牌号',
        span: 7,
        labelWidth: 100,
    },
]);
```

### penetrateParams() 返回值
当用户在搜索框输入 "鄂A 66662" 并点击搜索时：
```javascript
baseSearchRef.value.penetrateParams()
// 返回: { licensePlate: '鄂A 66662' }
```

## 测试步骤

### 1. 刷新浏览器
清除前端缓存，重新加载 `vehicle.vue` 组件。

### 2. 测试搜索功能
1. 进入"车辆管理"页面
2. 在车牌号搜索框输入：`鄂A 66662`
3. 点击"搜索"按钮

### 3. 查看控制台日志
```
[VEHICLE-SEARCH] 查询参数: { pageNum: 1, pageSize: 10, licensePlate: '鄂A 66662' }
```

### 4. 查看后端日志
```
=== 查询车辆列表 ===
参数: {pageNum=1, pageSize=10, licensePlate=鄂A 66662}
```

### 5. 验证搜索结果
- ✅ 表格应该只显示车牌号为 "鄂A 66662" 的车辆
- ✅ 如果没有匹配结果，显示"暂无数据"

## 常见问题排查

### Q1: 搜索框输入后点击搜索，表格没有变化？
**检查**:
1. 浏览器控制台是否有报错
2. 控制台日志中 `licensePlate` 的值是否正确
3. `baseSearchRef.value` 是否为 `null`（组件未正确引用）

### Q2: 后端收到的 licensePlate 还是空？
**可能原因**:
1. 前端代码没有正确保存（检查文件是否保存）
2. 浏览器缓存未清除（强制刷新：Ctrl+F5）
3. `baseSearch` 组件版本过旧（检查组件定义）

### Q3: 搜索时报错 "Cannot read property 'penetrateParams' of undefined"？
**原因**: `baseSearchRef.value` 为空

**解决**:
1. 确认组件引用正确：
   ```vue
   <base-search ref="baseSearchRef" ...>
   ```
2. 确认 ref 声明：
   ```javascript
   const baseSearchRef = ref();
   ```

## 总结

✅ **问题已修复**：
- 使用 `baseSearchRef.value.penetrateParams()` 获取搜索参数
- 移除 `form.licensePlate` 避免状态冲突
- 增强日志便于排查问题

✅ **用户体验改善**：
- 车牌号搜索功能正常工作
- 支持模糊搜索（后端已实现 LIKE 查询）
- 搜索结果实时更新