# 编辑功能接口说明

## ✅ 接口封装情况

### 前端 API

**文件**: `pc-cattle-transportation/src/api/shipping.js`

已封装的接口：

1. **获取运单详情**
```javascript
// 获取运送清单详情（用于编辑）
export function getDeliveryDetail(id) {
    return request({
        url: `/delivery/detail?id=${id}`,
        method: 'GET',
    });
}
```

2. **更新运单信息**
```javascript
// 更新运送清单信息
export function updateDeliveryInfo(data) {
    return request({
        url: '/delivery/update',
        method: 'POST',
        data,
    });
}
```

**注意**: `editDialog.vue` 组件内部使用的是 `orderEdit` 接口：
```javascript
import { orderEdit } from '@/api/shipping.js';

// orderEdit 定义（第78行）
export function orderEdit(data) {
    return request({
        url: '/delivery/updateDeliveryInfo',
        method: 'POST',
        data,
    });
}
```

### 后端 API

**文件**: `tradeCattle/aiotagro-cattle-trade/src/main/java/com/aiotagro/cattletrade/business/controller/DeliveryController.java`

已实现的接口：

1. **获取运单详情**
```java
@GetMapping("/detail")
public AjaxResult detail(@RequestParam Integer id) {
    return deliveryService.detail(id);
}
```

2. **更新运单信息**

后端已有 `updateDeliveryInfo` 接口，但 `editDialog.vue` 调用的是这个接口，需要确认后端实现。

## 🔧 前端实现

### attestation.vue 中的编辑功能

```javascript
// 编辑运送清单
const editDelivery = async (row) => {
    try {
        console.log('编辑运送清单:', row);
        
        // 检查编辑对话框组件是否已加载
        if (!editDialogRef.value || !editDialogRef.value.onShowDialog) {
            ElMessage.warning('编辑功能暂不可用，请刷新页面重试');
            return;
        }
        
        // 获取运单详情
        const res = await getDeliveryDetail(row.id);
        if (res.code === 200 && res.data) {
            // 调用编辑对话框组件的 onShowDialog 方法
            editDialogRef.value.onShowDialog(res.data);
        } else {
            ElMessage.error(res.msg || '获取运单详情失败');
        }
    } catch (error) {
        console.error('打开编辑对话框失败:', error);
        ElMessage.error('打开编辑对话框失败，请重试');
    }
};
```

### 组件引用

```vue
<template>
    <!-- 编辑对话框 -->
    <editDialog ref="editDialogRef" @success="getDataList" />
</template>

<script setup>
import editDialog from '@/views/shipping/editDialog.vue';

const editDialogRef = ref();
</script>
```

## 📋 editDialog.vue 组件接口

### 暴露的方法

```javascript
defineExpose({
    onShowDialog,  // 打开对话框并填充数据
});
```

### 触发的事件

```javascript
emits('success');  // 保存成功后触发
```

### onShowDialog 方法签名

```javascript
const onShowDialog = (val) => {
    // val: 运单详情对象
    // 包含字段：
    // - id: 运单ID
    // - deliveryTitle: 订单标题
    // - ratedQuantity: 装车数量
    // - supplierId: 供应商ID（逗号分隔的字符串）
    // - fundId: 资金方ID
    // - buyerId: 采购商ID
    // - driverId: 司机ID
    // - startLon, startLat: 起始位置坐标
    // - endLon, endLat: 目的地坐标
    // ...
}
```

## ✨ 功能流程

1. 用户点击"编辑"按钮
2. 调用 `getDeliveryDetail(id)` 获取运单详情
3. 将详情数据传递给 `editDialog.onShowDialog(data)`
4. `editDialog` 打开并填充表单数据
5. 用户修改数据后点击保存
6. `editDialog` 调用 `orderEdit` 接口提交修改
7. 保存成功后触发 `success` 事件
8. `attestation.vue` 监听到 `success` 事件，刷新列表

## ⚠️ 注意事项

1. **数据库连接问题**：
   - 从终端日志看到数据库连接失败错误
   - 错误信息：`Communications link failure`
   - 需要检查数据库服务是否正常运行
   - 检查数据库连接配置（IP、端口、用户名、密码）

2. **编辑对话框加载延迟**：
   - `onShowDialog` 方法内部有 1 秒延迟（`setTimeout 1000ms`）
   - 用于等待下拉选项数据加载完成
   - 这是正常的设计

3. **权限控制**：
   - 编辑按钮需要 `entry:edit` 权限
   - 后端接口可能需要添加 `@SaCheckPermission` 注解

## 🎯 测试建议

1. 确保数据库服务正常运行
2. 点击"编辑"按钮，检查是否能获取运单详情
3. 检查对话框是否正常打开并填充数据
4. 修改数据后保存，检查是否成功更新
5. 检查列表是否自动刷新

## 📝 数据库连接问题排查

从日志看到的错误：
```
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago.
```

**可能原因**：
1. MySQL 服务未启动
2. 防火墙阻止连接
3. 数据库配置错误（IP、端口）
4. 数据库连接池配置问题
5. 网络问题（连接远程数据库 129.211.213.226:3306）

**解决方案**：
1. 检查 MySQL 服务状态
2. 验证数据库连接配置
3. 测试数据库连接（使用 MySQL 客户端）
4. 检查防火墙规则
5. 如果是远程数据库，检查网络连通性

## 🚀 总结

编辑功能的接口已经全部封装完成：
- ✅ 前端 API 已封装
- ✅ 后端 API 已实现
- ✅ 组件集成已完成
- ✅ 事件监听已配置

**当前问题**：数据库连接失败，需要先解决数据库连接问题，编辑功能才能正常使用。