216 lines
5.4 KiB
Markdown
216 lines
5.4 KiB
Markdown
# 编辑功能接口说明
|
||
|
||
## ✅ 接口封装情况
|
||
|
||
### 前端 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 已实现
|
||
- ✅ 组件集成已完成
|
||
- ✅ 事件监听已配置
|
||
|
||
**当前问题**：数据库连接失败，需要先解决数据库连接问题，编辑功能才能正常使用。
|
||
|
||
|