xuqiuyun/cattleTransportation

Fork 0

Files

xuqiuyun d1d0b62184 基本完成，修复细节

2025-10-29 17:33:32 +08:00

5.4 KiB

Raw Blame History

编辑功能接口说明

✅ 接口封装情况

前端 API

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

已封装的接口：

获取运单详情

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

更新运单信息

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

注意: editDialog.vue 组件内部使用的是 orderEdit 接口：

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

已实现的接口：

获取运单详情

@GetMapping("/detail")
public AjaxResult detail(@RequestParam Integer id) {
    return deliveryService.detail(id);
}

更新运单信息

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

🔧 前端实现

attestation.vue 中的编辑功能

// 编辑运送清单
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('打开编辑对话框失败，请重试');
    }
};

组件引用

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

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

const editDialogRef = ref();
</script>

📋 editDialog.vue 组件接口

暴露的方法

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

触发的事件

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

onShowDialog 方法签名

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

✨ 功能流程

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

⚠️ 注意事项

数据库连接问题：
- 从终端日志看到数据库连接失败错误
- 错误信息：Communications link failure
- 需要检查数据库服务是否正常运行
- 检查数据库连接配置（IP、端口、用户名、密码）
编辑对话框加载延迟：
- onShowDialog 方法内部有 1 秒延迟（setTimeout 1000ms）
- 用于等待下拉选项数据加载完成
- 这是正常的设计
权限控制：
- 编辑按钮需要 entry:edit 权限
- 后端接口可能需要添加 @SaCheckPermission 注解

🎯 测试建议

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

📝 数据库连接问题排查

从日志看到的错误：

com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago.

可能原因：

MySQL 服务未启动
防火墙阻止连接
数据库配置错误（IP、端口）
数据库连接池配置问题
网络问题（连接远程数据库 129.211.213.226:3306）

解决方案：

检查 MySQL 服务状态
验证数据库连接配置
测试数据库连接（使用 MySQL 客户端）
检查防火墙规则
如果是远程数据库，检查网络连通性

🚀 总结

编辑功能的接口已经全部封装完成：

✅ 前端 API 已封装
✅ 后端 API 已实现
✅ 组件集成已完成
✅ 事件监听已配置

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

5.4 KiB Raw Blame History Unescape Escape