one-pipe-system/openspec/changes/add-order-management/tasks.md

Implementation Tasks

1. Type Definitions

• 1.1 Create src/types/api/order.ts with order types, enums, and interfaces
• 1.2 Add order type exports to src/types/api/index.ts

2. API Service Layer

• 2.1 Create src/api/modules/order.ts with OrderService class
• 2.2 Implement getOrders() - list orders with pagination and filters
• 2.3 Implement getOrderById() - fetch single order details
• 2.4 Implement createOrder() - create new order
• 2.5 Implement cancelOrder() - cancel pending order
• 2.6 Add OrderService export to src/api/modules/index.ts

3. Internationalization

• 3.1 Add Chinese translations to src/locales/langs/zh.json under orderManagement namespace
• 3.2 Add English translations to src/locales/langs/en.json under orderManagement namespace
• 3.3 Include keys for: menu titles, page titles, table columns, search fields, statuses, actions, messages

4. Routing Configuration

• 4.1 Add OrderList route alias to src/router/routesAlias.ts
• 4.2 Add order management route group to src/router/routes/asyncRoutes.ts
• 4.3 Configure route with proper icon, title, and keepAlive settings

5. UI Components

• 5.1 Create src/views/order-management/order-list/index.vue component skeleton
• 5.2 Implement search bar with filters (order_no, payment_status, order_type, date range)
• 5.3 Implement data table with columns (ID, order_no, buyer info, order type, payment status, total amount, created_at, actions)
• 5.4 Add pagination controls
• 5.5 Implement view details action (navigate to detail view or show in dialog)
• 5.6 Implement cancel order action with confirmation dialog
• 5.7 Add status badges and formatters for payment status and order type
• 5.8 Format currency amounts (分 to 元 conversion)
• 5.9 Implement create order button and dialog (optional - can be phase 2)

6. Business Logic

• 6.1 Implement order list data fetching with loading states
• 6.2 Implement search and filter logic
• 6.3 Implement pagination handlers
• 6.4 Implement cancel order with optimistic UI updates
• 6.5 Add error handling and user feedback (ElMessage)
• 6.6 Implement date/time formatting using project utilities

7. Validation & Polish

• 7.1 Test search and filtering functionality
• 7.2 Test pagination and data refresh
• 7.3 Test cancel order flow
• 7.4 Verify i18n coverage (switch language and check all text)
• 7.5 Verify responsive layout and table column configuration
• 7.6 Code review and cleanup (remove console logs, verify TypeScript types)