fetch(add): 订单管理-企业设备

openspec/changes/add-order-management/proposal.md

@@ -0,0 +1,43 @@
+# Change: Add Order Management System
+
+## Why
+
+The IoT management platform currently lacks order management capabilities. Users need to:
+- View and query orders created by customers (personal and agent)
+- Track order payment status and details
+- Create orders for single card or device purchases
+- Cancel pending orders
+- View order history with filtering and search
+
+This capability is essential for financial tracking, commission calculation, and overall business operations transparency.
+
+## What Changes
+
+- **NEW**: Order list page with search, filtering, and pagination
+- **NEW**: Order API service with full CRUD operations
+- **NEW**: TypeScript types for order entities and API contracts
+- **NEW**: i18n keys for order management UI
+- **NEW**: Router configuration for order management module
+
+The order management module will support:
+- Listing orders with filters (payment status, order type, date range, order number)
+- Viewing order details including buyer information, order items (packages), and payment details
+- Creating orders for single card or device purchases with package selection
+- Canceling orders that are in pending payment status
+- Displaying payment method, commission status, and order totals
+
+## Impact
+
+- **Affected specs**: `order-management` (new capability)
+- **Affected code**:
+  - `src/types/api/order.ts` (new file - TypeScript types)
+  - `src/api/modules/order.ts` (new file - API service)
+  - `src/views/order-management/order-list/index.vue` (new file - order list page)
+  - `src/router/routes/asyncRoutes.ts` (route configuration)
+  - `src/router/routesAlias.ts` (route alias)
+  - `src/locales/langs/zh.json` (Chinese i18n)
+  - `src/locales/langs/en.json` (English i18n)
+  - `src/types/api/index.ts` (exports)
+  - `src/api/modules/index.ts` (exports)
+- **Dependencies**: Requires backend APIs at `/api/admin/orders` endpoints
+- **Breaking changes**: None (this is a new feature)

openspec/changes/add-order-management/specs/order-management/spec.md

@@ -0,0 +1,174 @@
+# Order Management Specification
+
+## ADDED Requirements
+
+### Requirement: Order List Display
+
+The system SHALL display a paginated list of orders with comprehensive filtering and search capabilities.
+
+#### Scenario: Display all orders with pagination
+
+- **GIVEN** the user navigates to the order management page
+- **WHEN** the page loads
+- **THEN** the system displays a table of orders with pagination controls
+- **AND** default page size is 20 items
+- **AND** table shows columns: ID, order number, buyer type, buyer ID, order type, payment status, total amount, created date, and actions
+
+#### Scenario: Filter orders by payment status
+
+- **GIVEN** the user is on the order list page
+- **WHEN** the user selects a payment status filter (pending=1, paid=2, cancelled=3, refunded=4)
+- **AND** clicks the search button
+- **THEN** the system displays only orders matching the selected payment status
+- **AND** pagination resets to page 1
+
+#### Scenario: Filter orders by order type
+
+- **GIVEN** the user is on the order list page
+- **WHEN** the user selects an order type filter (single_card or device)
+- **AND** clicks the search button
+- **THEN** the system displays only orders matching the selected order type
+
+#### Scenario: Search by order number
+
+- **GIVEN** the user is on the order list page
+- **WHEN** the user enters an order number in the search field
+- **AND** clicks the search button
+- **THEN** the system performs an exact match search
+- **AND** displays the matching order if found
+
+#### Scenario: Filter by date range
+
+- **GIVEN** the user is on the order list page
+- **WHEN** the user selects a start date and/or end date
+- **AND** clicks the search button
+- **THEN** the system displays orders created within the specified date range
+
+### Requirement: Order Details Viewing
+
+The system SHALL allow users to view detailed information about each order including order items and payment information.
+
+#### Scenario: View order details
+
+- **GIVEN** the user is viewing the order list
+- **WHEN** the user clicks the view/detail action for an order
+- **THEN** the system displays comprehensive order information including:
+- **AND** order basic info (order_no, order_type, buyer_id, buyer_type)
+- **AND** payment info (payment_status, payment_method, paid_at, total_amount)
+- **AND** order items list (package_id, package_name, quantity, unit_price, amount)
+- **AND** commission info (commission_status, commission_config_version)
+- **AND** timestamps (created_at, updated_at)
+
+### Requirement: Order Cancellation
+
+The system SHALL allow authorized users to cancel orders that are in pending payment status.
+
+#### Scenario: Cancel a pending order
+
+- **GIVEN** the user is viewing an order with payment_status = 1 (pending)
+- **WHEN** the user clicks the cancel action
+- **AND** confirms the cancellation in the confirmation dialog
+- **THEN** the system sends a cancel request to POST `/api/admin/orders/{id}/cancel`
+- **AND** updates the order status to cancelled (3)
+- **AND** displays a success message
+- **AND** refreshes the order list
+
+#### Scenario: Cannot cancel paid order
+
+- **GIVEN** the user is viewing an order with payment_status = 2 (paid)
+- **WHEN** the cancel action is clicked
+- **THEN** the system displays an error message "Cannot cancel a paid order"
+- **AND** does not send the cancellation request
+
+### Requirement: Order Creation
+
+The system SHALL provide an interface to create orders for single card or device purchases.
+
+#### Scenario: Create single card order
+
+- **GIVEN** the user clicks the create order button
+- **WHEN** the user selects order_type = "single_card"
+- **AND** selects an IoT card (iot_card_id)
+- **AND** selects one or more packages (package_ids)
+- **AND** submits the form
+- **THEN** the system sends a POST request to `/api/admin/orders` with the order data
+- **AND** displays the newly created order details
+- **AND** refreshes the order list
+
+#### Scenario: Create device order
+
+- **GIVEN** the user clicks the create order button
+- **WHEN** the user selects order_type = "device"
+- **AND** selects a device (device_id)
+- **AND** selects one or more packages (package_ids, max 10)
+- **AND** submits the form
+- **THEN** the system creates the order
+- **AND** displays a success message
+
+### Requirement: Order Status Display
+
+The system SHALL display order payment status and order type using color-coded badges and human-readable text.
+
+#### Scenario: Display payment status badge
+
+- **GIVEN** an order is displayed in the table
+- **WHEN** the payment_status is 1 (pending)
+- **THEN** the system displays a warning-type badge with text "待支付"
+- **WHEN** the payment_status is 2 (paid)
+- **THEN** the system displays a success-type badge with text "已支付"
+- **WHEN** the payment_status is 3 (cancelled)
+- **THEN** the system displays an info-type badge with text "已取消"
+- **WHEN** the payment_status is 4 (refunded)
+- **THEN** the system displays a danger-type badge with text "已退款"
+
+#### Scenario: Display order type badge
+
+- **GIVEN** an order is displayed in the table
+- **WHEN** the order_type is "single_card"
+- **THEN** the system displays text "单卡购买"
+- **WHEN** the order_type is "device"
+- **THEN** the system displays text "设备购买"
+
+### Requirement: Currency Formatting
+
+The system SHALL display monetary amounts in yuan (元) with proper formatting and conversion from cents.
+
+#### Scenario: Format order total amount
+
+- **GIVEN** an order has total_amount = 50000 (in cents)
+- **WHEN** the order is displayed in the table
+- **THEN** the system displays "¥500.00" or "500.00 元"
+
+### Requirement: Data Refresh and Real-time Updates
+
+The system SHALL provide manual refresh capabilities and update data after mutations.
+
+#### Scenario: Manual refresh
+
+- **GIVEN** the user is viewing the order list
+- **WHEN** the user clicks the refresh button in the table header
+- **THEN** the system reloads the current page of orders with current filters
+- **AND** maintains the current pagination state
+
+#### Scenario: Auto-refresh after order cancellation
+
+- **GIVEN** the user successfully cancels an order
+- **WHEN** the cancellation is confirmed
+- **THEN** the system automatically refreshes the order list
+- **AND** displays the updated order status
+
+### Requirement: Internationalization Support
+
+The system SHALL provide full internationalization support for order management UI in Chinese and English.
+
+#### Scenario: Display Chinese text
+
+- **GIVEN** the user's language is set to Chinese (zh)
+- **WHEN** the order management page is viewed
+- **THEN** all UI text displays in Chinese including menu titles, table headers, status labels, and messages
+
+#### Scenario: Display English text
+
+- **GIVEN** the user's language is set to English (en)
+- **WHEN** the order management page is viewed
+- **THEN** all UI text displays in English including menu titles, table headers, status labels, and messages

openspec/changes/add-order-management/tasks.md

@@ -0,0 +1,57 @@
+# 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)