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. 核心实现

自动填充函数

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

更新后的对话框调用函数

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数据

// 在调用装车对话框时，直接传递API响应数据
const loadClick = (row, apiData) => {
    if (LoadDialogRef.value) {
        LoadDialogRef.value.onShowDialog(row, apiData);
    }
};

方法2：在API响应中自动填充

当调用 getOrderDetail() 函数时，会自动调用 autoFillFormData(res.data) 来填充表单。

示例数据映射

基于提供的API响应数据：

{
    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 中集成了自动填充功能