cattleTransportation/pc-cattle-transportation/AUTO_FILL_IMPLEMENTATION.md

# 装车信息表单自动填充功能实现

## 功能概述

已成功实现装车信息表单的自动填充功能，可以根据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` 中集成了自动填充功能