Browse Source

🛒 feat(order-management): 添加订单商品展示功能

- 更新多租户订单模块管理员路由,添加订单商品关联配置
- 在订单管理UI详情页面添加完整的商品信息展示
- 支持商品图片、名称、规格、单价、数量和小计显示
- 更新测试mock数据以包含订单商品信息

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 4 weeks ago
parent
commit
85ca690b58

+ 56 - 1
packages/order-management-ui-mt/src/components/OrderManagement.tsx

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { format } from 'date-fns';
 import { toast } from 'sonner';
-import { Search, Edit, Eye } from 'lucide-react';
+import { Search, Edit, Eye, Package } from 'lucide-react';
 
 // 使用共享UI组件包的具体路径导入
 import { Button } from '@d8d/shared-ui-components/components/ui/button';
@@ -670,6 +670,61 @@ export const OrderManagement = () => {
                 </div>
               </div>
 
+              {/* 订单商品信息 */}
+              <div>
+                <h4 className="font-medium mb-3 flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  订单商品
+                </h4>
+                <div className="border rounded-md overflow-hidden">
+                  <div className="bg-muted px-4 py-2 border-b">
+                    <div className="grid grid-cols-12 gap-4 text-sm font-medium">
+                      <div className="col-span-5">商品信息</div>
+                      <div className="col-span-2 text-center">单价</div>
+                      <div className="col-span-2 text-center">数量</div>
+                      <div className="col-span-3 text-right">小计</div>
+                    </div>
+                  </div>
+                  <div className="divide-y">
+                    {selectedOrder.orderGoods?.map((item, index) => (
+                      <div key={item.id || index} className="px-4 py-3">
+                        <div className="grid grid-cols-12 gap-4 items-center">
+                          <div className="col-span-5 flex items-center gap-3">
+                            {item.imageFile && (
+                              <img
+                                src={item.imageFile.fullUrl}
+                                alt={item.goodsName}
+                                className="w-12 h-12 rounded-md object-cover"
+                              />
+                            )}
+                            <div>
+                              <p className="font-medium text-sm">{item.goodsName}</p>
+                              {item.specification && (
+                                <p className="text-xs text-muted-foreground">{item.specification}</p>
+                              )}
+                            </div>
+                          </div>
+                          <div className="col-span-2 text-center text-sm">
+                            {formatAmount(item.price)}
+                          </div>
+                          <div className="col-span-2 text-center text-sm">
+                            {item.num}
+                          </div>
+                          <div className="col-span-3 text-right text-sm font-medium">
+                            {formatAmount(item.price * item.num)}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  {selectedOrder.orderGoods?.length === 0 && (
+                    <div className="text-center py-8 text-muted-foreground">
+                      暂无商品信息
+                    </div>
+                  )}
+                </div>
+              </div>
+
               {selectedOrder.remark && (
                 <div>
                   <h4 className="font-medium mb-2">管理员备注</h4>

+ 22 - 0
packages/order-management-ui-mt/tests/integration/order-management.integration.test.tsx

@@ -93,6 +93,28 @@ describe('订单管理集成测试', () => {
           address: '北京市朝阳区',
           remark: '测试订单',
           createdAt: '2024-01-01T00:00:00Z',
+          orderGoods: [
+            {
+              id: 1,
+              goodsName: '测试商品1',
+              price: 50.00,
+              num: 2,
+              specification: '红色/L',
+              imageFile: {
+                fullUrl: 'https://example.com/image1.jpg'
+              }
+            },
+            {
+              id: 2,
+              goodsName: '测试商品2',
+              price: 25.00,
+              num: 1,
+              specification: '蓝色/M',
+              imageFile: {
+                fullUrl: 'https://example.com/image2.jpg'
+              }
+            }
+          ]
         },
       ],
       pagination: {

+ 1 - 1
packages/orders-module-mt/src/routes/admin/orders.mt.ts

@@ -11,7 +11,7 @@ const adminOrderRoutes = createCrudRoutes({
   getSchema: OrderSchema,
   listSchema: OrderSchema,
   searchFields: ['orderNo', 'userPhone', 'recevierName'],
-  relations: ['user', 'merchant', 'supplier', 'deliveryAddress'],
+  relations: ['user', 'merchant', 'supplier', 'deliveryAddress', 'orderGoods.imageFile'],
   middleware: [authMiddleware],
   userTracking: {
     createdByField: 'createdBy',