基本完成，修复细节

2025-10-29 17:33:32 +08:00
parent 6c86963418
commit d1d0b62184
37 changed files with 5133 additions and 236 deletions
--- a/VEHICLE_SEARCH_FIX.md
+++ b/VEHICLE_SEARCH_FIX.md
@@ -0,0 +1,246 @@
+# 车辆管理 - 车牌号搜索功能修复
+
+## 问题描述
+用户反馈：**车辆管理页面的车牌号搜索功能不起作用**。
+
+## 问题根源
+
+### 错误的实现方式
+在 `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 查询）
+- 搜索结果实时更新
+