247 lines
6.0 KiB
Markdown
247 lines
6.0 KiB
Markdown
# 车辆管理 - 车牌号搜索功能修复
|
||
|
||
## 问题描述
|
||
用户反馈：**车辆管理页面的车牌号搜索功能不起作用**。
|
||
|
||
## 问题根源
|
||
|
||
### 错误的实现方式
|
||
在 `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 查询）
|
||
- 搜索结果实时更新
|
||
|