xuqiuyun/cattleTransportation

Fork 0

Files

xuqiuyun ecccd025d1 物联网问题解决，只差最后测试完善

2025-10-23 17:28:06 +08:00

4.8 KiB

Raw Blame History

运送清单与装车订单页面重复问题修复报告

问题描述

用户报告装车订单和运送清单两个页面一模一样，运送清单不是正确的页面。经过分析发现：

装车订单页面 (/shipping/loadingOrder) 使用的是 loadingOrder.vue 组件
运送清单页面 (/shipping/shippinglist) 错误地映射到了同一个 loadingOrder.vue 组件
两个页面显示相同的内容，但实际上应该是不同的功能

根本原因

在之前的路由修复中，我将 /shipping/shippinglist 路由错误地映射到了 loadingOrder.vue 组件，导致运送清单页面显示装车订单的内容。

业务逻辑分析

通过分析后端API和前端代码，发现：

装车订单 (Loading Order)

API: /delivery/pageDeliveryOrderList
功能: 管理装车订单，包括创建、编辑、删除装车订单
组件: loadingOrder.vue
路由: /shipping/loadingOrder

运送清单 (Shipping List)

API: /delivery/pageQueryList
功能: 管理运送清单，包括查看、管理运送状态
组件: shippingList.vue (新创建)
路由: /shipping/shippinglist

修复方案

1. 添加运送清单API函数

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

// 运送清单 - 列表查询
export function shippingList(data) {
    return request({
        url: '/delivery/pageQueryList',
        method: 'POST',
        data,
    });
}

2. 创建运送清单组件

文件: pc-cattle-transportation/src/views/shipping/shippingList.vue

创建了专门的运送清单组件，具有以下特点：

API调用: 使用 shippingList 函数调用 /delivery/pageQueryList API
界面标题: "运送清单" 而不是 "装车订单"
按钮文本: "新增运送清单" 而不是 "创建装车订单"
表格列: 包含运送清单相关的字段
权限控制: 使用 delivery:* 权限而不是 loading:* 权限

3. 修正路由配置

文件: pc-cattle-transportation/src/router/index.ts

// 运送清单路由
{
    path: '/shipping',
    component: LayoutIndex,
    meta: {
        title: '运送清单',
        keepAlive: true,
        requireAuth: true,
    },
    children: [
        {
            path: 'loadingOrder',
            name: 'LoadingOrder',
            meta: {
                title: '装车订单',
                keepAlive: true,
                requireAuth: true,
            },
            component: () => import('~/views/shipping/loadingOrder.vue'),
        },
        {
            path: 'shippinglist',
            name: 'ShippingList',
            meta: {
                title: '运送清单',
                keepAlive: true,
                requireAuth: true,
            },
            component: () => import('~/views/shipping/shippingList.vue'),
        },
    ],
},

功能对比

功能	装车订单	运送清单
API端点	`/delivery/pageDeliveryOrderList`	`/delivery/pageQueryList`
组件文件	`loadingOrder.vue`	`shippingList.vue`
路由路径	`/shipping/loadingOrder`	`/shipping/shippinglist`
主要功能	创建和管理装车订单	查看和管理运送清单
按钮文本	"创建装车订单"	"新增运送清单"
权限前缀	`loading:*`	`delivery:*`
表格标题	"装车订单编号"	"运送清单编号"

修复结果

✅ 已修复的问题

运送清单页面独立: 现在有专门的 shippingList.vue 组件
API调用正确: 运送清单使用正确的API端点
路由映射正确: /shipping/shippinglist 映射到正确的组件
功能区分明确: 装车订单和运送清单现在是两个独立的功能

🔧 技术实现

API层: 添加了 shippingList 函数调用运送清单API
组件层: 创建了专门的运送清单组件
路由层: 修正了路由配置，确保正确的组件映射
权限层: 使用了正确的权限控制

验证建议

建议测试以下功能：

装车订单页面 (/shipping/loadingOrder)
- 应该显示装车订单相关功能
- 按钮显示"创建装车订单"
- 使用装车订单API
运送清单页面 (/shipping/shippinglist)
- 应该显示运送清单相关功能
- 按钮显示"新增运送清单"
- 使用运送清单API
- 与装车订单页面内容不同

注意事项

数据一致性: 确保两个页面显示的数据来源正确
权限控制: 确保权限配置正确，避免权限混乱
用户体验: 两个页面应该有明确的业务区分
API兼容性: 确保后端API支持两个不同的端点

现在装车订单和运送清单是两个独立的功能页面，不再显示相同的内容。

4.8 KiB Raw Blame History Unescape Escape