156 lines
5.9 KiB
Markdown
156 lines
5.9 KiB
Markdown
# 装车信息表单自动填充功能实现
|
||
|
||
## 功能概述
|
||
|
||
已成功实现装车信息表单的自动填充功能，可以根据API返回的数据自动映射并填充表单字段。
|
||
|
||
## 实现的功能
|
||
|
||
### 1. 数据映射字段
|
||
|
||
根据提供的API响应数据，实现了以下字段的自动映射：
|
||
|
||
#### 基础信息
|
||
- `deliveryId` ← `id`
|
||
- `estimatedDeliveryTime` ← `estimatedDeliveryTime`
|
||
- `serverDeviceSn` ← `serverDeviceId`
|
||
|
||
#### 重量信息
|
||
- `emptyWeight` ← `emptyWeight`
|
||
- `entruckWeight` ← `entruckWeight`
|
||
- `landingEntruckWeight` ← `landingEntruckWeight`
|
||
|
||
#### 照片URL
|
||
- `quarantineTickeyUrl` ← `quarantineTickeyUrl`
|
||
- `poundListImg` ← `poundListImg`
|
||
- `emptyVehicleFrontPhoto` ← `emptyVehicleFrontPhoto`
|
||
- `loadedVehicleFrontPhoto` ← `loadedVehicleFrontPhoto`
|
||
- `loadedVehicleWeightPhoto` ← `loadedVehicleWeightPhoto`
|
||
- `driverIdCardPhoto` ← `driverIdCardPhoto`
|
||
|
||
#### 视频URL
|
||
- `entruckWeightVideo` ← `entruckWeightVideo`
|
||
- `emptyWeightVideo` ← `emptyWeightVideo`
|
||
- `entruckVideo` ← `entruckVideo`
|
||
- `controlSlotVideo` ← `controlSlotVideo`
|
||
- `cattleLoadingCircleVideo` ← `cattleLoadingCircleVideo`
|
||
|
||
### 2. 核心实现
|
||
|
||
#### 自动填充函数
|
||
```javascript
|
||
const autoFillFormData = (apiData) => {
|
||
if (!apiData) return;
|
||
|
||
// 基础信息映射
|
||
ruleForm.deliveryId = apiData.id || '';
|
||
ruleForm.estimatedDeliveryTime = apiData.estimatedDeliveryTime || '';
|
||
ruleForm.serverDeviceSn = apiData.serverDeviceId || '';
|
||
|
||
// 重量信息映射
|
||
ruleForm.emptyWeight = apiData.emptyWeight || '';
|
||
ruleForm.entruckWeight = apiData.entruckWeight || '';
|
||
ruleForm.landingEntruckWeight = apiData.landingEntruckWeight || '';
|
||
|
||
// 照片URL映射
|
||
ruleForm.quarantineTickeyUrl = apiData.quarantineTickeyUrl || '';
|
||
ruleForm.poundListImg = apiData.poundListImg || '';
|
||
ruleForm.emptyVehicleFrontPhoto = apiData.emptyVehicleFrontPhoto || '';
|
||
ruleForm.loadedVehicleFrontPhoto = apiData.loadedVehicleFrontPhoto || '';
|
||
ruleForm.loadedVehicleWeightPhoto = apiData.loadedVehicleWeightPhoto || '';
|
||
ruleForm.driverIdCardPhoto = apiData.driverIdCardPhoto || '';
|
||
|
||
// 视频URL映射
|
||
ruleForm.entruckWeightVideo = apiData.entruckWeightVideo || '';
|
||
ruleForm.emptyWeightVideo = apiData.emptyWeightVideo || '';
|
||
ruleForm.entruckVideo = apiData.entruckVideo || '';
|
||
ruleForm.controlSlotVideo = apiData.controlSlotVideo || '';
|
||
ruleForm.cattleLoadingCircleVideo = apiData.cattleLoadingCircleVideo || '';
|
||
|
||
console.log('表单数据已自动填充:', ruleForm);
|
||
};
|
||
```
|
||
|
||
#### 更新后的对话框调用函数
|
||
```javascript
|
||
const onShowDialog = (row, apiData = null) => {
|
||
data.dialogVisible = true;
|
||
if (formDataRef.value) {
|
||
formDataRef.value.resetFields();
|
||
}
|
||
if (row) {
|
||
nextTick(() => {
|
||
data.deliveryId = row.id;
|
||
ruleForm.deliveryId = row.id;
|
||
|
||
// 如果提供了API数据，直接填充表单
|
||
if (apiData) {
|
||
autoFillFormData(apiData);
|
||
} else {
|
||
// 否则从服务器获取详情
|
||
getOrderDetail();
|
||
}
|
||
|
||
getHostList();
|
||
});
|
||
}
|
||
};
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 方法1：直接传递API数据
|
||
```javascript
|
||
// 在调用装车对话框时，直接传递API响应数据
|
||
const loadClick = (row, apiData) => {
|
||
if (LoadDialogRef.value) {
|
||
LoadDialogRef.value.onShowDialog(row, apiData);
|
||
}
|
||
};
|
||
```
|
||
|
||
### 方法2：在API响应中自动填充
|
||
当调用 `getOrderDetail()` 函数时，会自动调用 `autoFillFormData(res.data)` 来填充表单。
|
||
|
||
## 示例数据映射
|
||
|
||
基于提供的API响应数据：
|
||
```javascript
|
||
{
|
||
id: 85,
|
||
deliveryNumber: "ZC20251020105111",
|
||
deliveryTitle: "1",
|
||
estimatedDeliveryTime: "2025-10-31 00:00:00",
|
||
emptyWeight: "1000.00",
|
||
entruckWeight: "2000.00",
|
||
quarantineTickeyUrl: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/4c4e20251021100838.jpg",
|
||
poundListImg: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/cows20251021100841.jpg",
|
||
emptyVehicleFrontPhoto: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/4c4e20251021100847.jpg",
|
||
loadedVehicleFrontPhoto: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/cows20251021100849.jpg",
|
||
loadedVehicleWeightPhoto: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/4c4e20251021100854.jpg",
|
||
driverIdCardPhoto: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/cows20251021100857.jpg",
|
||
entruckWeightVideo: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/normal_video20251021100901.mp4",
|
||
emptyWeightVideo: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/normal_video20251021100904.mp4",
|
||
entruckVideo: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/normal_video20251021101046.mp4",
|
||
controlSlotVideo: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/normal_video20251021101049.mp4",
|
||
cattleLoadingCircleVideo: "https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iotPlateform/2025/10/21/normal_video20251021101052.mp4"
|
||
}
|
||
```
|
||
|
||
这些数据会自动映射到表单的相应字段中。
|
||
|
||
## 注意事项
|
||
|
||
1. **数据安全**：所有字段都使用了 `|| ''` 来确保空值安全
|
||
2. **向后兼容**：保持了原有的 `getOrderDetail()` 功能
|
||
3. **调试支持**：添加了 `console.log` 来帮助调试数据填充过程
|
||
4. **响应式更新**：使用 Vue 3 的 reactive 系统确保数据变化时UI自动更新
|
||
|
||
## 文件修改
|
||
|
||
- `pc-cattle-transportation/src/views/shipping/loadDialog.vue`
|
||
- 添加了 `landingEntruckWeight` 字段
|
||
- 实现了 `autoFillFormData` 函数
|
||
- 更新了 `onShowDialog` 函数支持API数据参数
|
||
- 在 `getOrderDetail` 中集成了自动填充功能
|