xuqiuyun/cattleTransportation

Fork 0

Files

xuqiuyun d1d0b62184 基本完成，修复细节

2025-10-29 17:33:32 +08:00

6.0 KiB

Raw Blame History

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

问题描述

用户反馈：车辆管理页面的车牌号搜索功能不起作用。

问题根源

错误的实现方式

在 vehicle.vue 中，getDataList() 方法没有从 baseSearch 组件获取搜索参数：

// ❌ 错误：只使用 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);
    // ...
};

问题分析

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

后端日志确认

=== 查询车辆列表 ===
参数: {pageNum=1, pageSize=10, licensePlate=}

可以看到 licensePlate 确实是空的

解决方案

修改前后对比

修改前（错误）

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);
        // ...
    }
};

修改后（正确）

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);
        // ...
    }
};

关键改动点

移除 form.licensePlate 字段
- 不再在 form 中定义 licensePlate
- 避免与 baseSearch 组件的状态冲突
使用 baseSearchRef.value.penetrateParams()
- 这个方法会返回 baseSearch 组件中用户输入的所有搜索参数
- 返回格式：{ licensePlate: '用户输入的车牌号' }

使用扩展运算符合并参数

const params = {
    ...form,                              // { pageNum: 1, pageSize: 10 }
    ...baseSearchRef.value.penetrateParams(), // { licensePlate: '鄂A 66662' }
};
// 结果: { pageNum: 1, pageSize: 10, licensePlate: '鄂A 66662' }

参考其他页面的正确实现

driver.vue（司机管理）

const form = reactive({
    pageNum: 1,
    pageSize: 10,
});

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

attestation.vue（入境检疫）

const searchForm = reactive({
    pageNum: 1,
    pageSize: 10,
});

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

baseSearch 组件工作原理

组件定义

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

formItemList 配置

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

penetrateParams() 返回值

当用户在搜索框输入 "鄂A 66662" 并点击搜索时：

baseSearchRef.value.penetrateParams()
// 返回: { licensePlate: '鄂A 66662' }

测试步骤

1. 刷新浏览器

清除前端缓存，重新加载 vehicle.vue 组件。

2. 测试搜索功能

进入"车辆管理"页面
在车牌号搜索框输入：鄂A 66662
点击"搜索"按钮

3. 查看控制台日志

[VEHICLE-SEARCH] 查询参数: { pageNum: 1, pageSize: 10, licensePlate: '鄂A 66662' }

4. 查看后端日志

=== 查询车辆列表 ===
参数: {pageNum=1, pageSize=10, licensePlate=鄂A 66662}

5. 验证搜索结果

✅ 表格应该只显示车牌号为 "鄂A 66662" 的车辆
✅ 如果没有匹配结果，显示"暂无数据"

常见问题排查

Q1: 搜索框输入后点击搜索，表格没有变化？

检查:

浏览器控制台是否有报错
控制台日志中 licensePlate 的值是否正确
baseSearchRef.value 是否为 null（组件未正确引用）

Q2: 后端收到的 licensePlate 还是空？

可能原因:

前端代码没有正确保存（检查文件是否保存）
浏览器缓存未清除（强制刷新：Ctrl+F5）
baseSearch 组件版本过旧（检查组件定义）

Q3: 搜索时报错 "Cannot read property 'penetrateParams' of undefined"？

原因: baseSearchRef.value 为空

解决:

确认组件引用正确：
```
<base-search ref="baseSearchRef" ...>
```
确认 ref 声明：
```
const baseSearchRef = ref();
```

总结

✅ 问题已修复：

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

✅ 用户体验改善：

车牌号搜索功能正常工作
支持模糊搜索（后端已实现 LIKE 查询）
搜索结果实时更新

6.0 KiB Raw Blame History Unescape Escape