更新

2026-04-16 11:13:26 +08:00
parent 3d9c5dd8f5
commit 8022229e71
16 changed files with 1703 additions and 231 deletions
@@ -0,0 +1,191 @@
+# Order List Region Selector Update (订单列表省市区选择器更新)
+
+## Changes Made
+
+Updated the order list view (`order_list.vue`) to use the same API-based region data loading as the prescription index view.
+
+### 1. Replaced Static Region Data with API Loading
+**File**: `admin/src/views/consumer/prescription/order_list.vue`
+
+#### Before:
+- Static hardcoded region data with limited provinces/cities
+- Only included: 四川省, 北京市, 上海市, 广东省
+
+#### After:
+- Dynamic API-based region data loading
+- Fetches complete China region data from `/api-proxy/area/ChinaCitys.json`
+- Includes all provinces, cities, and districts
+- Falls back to basic data if API fails
+
+### 2. Added Data Transformation Function
+Added `transformRegionData()` function to convert API format to el-cascader format:
+- API format: `{province, citys: [{city, areas: [{area}]}]}`
+- Cascader format: `{value, label, children: [{value, label, children: [{value, label}]}]}`
+
+### 3. Updated Cascader Component
+Added missing props to the cascader:
+- `emitPath: true` - Returns full path array instead of just last value
+- `filterable` - Enables search functionality
+
+### 4. Updated onMounted Hook
+Changed from:
+```typescript
+onMounted(() => {
+    getLists()
+})
+```
+
+To:
+```typescript
+onMounted(async () => {
+    await loadRegionData()
+    getLists()
+})
+```
+
+### 5. Added Region Fields to Quick Edit
+Updated the quick tracking number edit function to include region fields:
+```typescript
+shipping_province: d.shipping_province || '',
+shipping_city: d.shipping_city || '',
+shipping_district: d.shipping_district || '',
+```
+
+This ensures region data is preserved when only updating tracking numbers.
+
+## Data Flow
+
+### Loading Region Data:
+1. Component mounts
+2. `loadRegionData()` fetches from `/api-proxy/area/ChinaCitys.json`
+3. `transformRegionData()` converts API format to cascader format
+4. `regionOptions` is populated with all China regions
+5. If API fails, falls back to basic region data
+
+### Editing Order with Region:
+1. User opens edit dialog
+2. Region data is loaded from order: `[province, city, district]`
+3. Cascader displays the selected region
+4. User can change region selection
+5. On save, region array is split into three fields:
+   - `shipping_province`
+   - `shipping_city`
+   - `shipping_district`
+6. Backend saves the three separate fields
+
+### Quick Edit (Tracking Number):
+1. User clicks quick edit for tracking number
+2. System fetches full order details
+3. Includes region fields in the update payload
+4. Region data is preserved while updating tracking number
+
+## Code Structure
+
+### Region Data Loading:
+```typescript
+const regionOptions = ref([])
+
+const transformRegionData = (data: any[]) => {
+    // Converts API format to cascader format
+}
+
+const loadRegionData = async () => {
+    // Fetches from API and transforms data
+    // Falls back to basic data on error
+}
+```
+
+### Region Field Handling in Edit:
+```typescript
+// Loading data into form:
+const province = d.shipping_province || ''
+const city = d.shipping_city || ''
+const district = d.shipping_district || ''
+if (province || city || district) {
+    editForm.region = [province, city, district].filter(v => v !== '')
+}
+
+// Saving data from form:
+if (editForm.region && editForm.region.length > 0) {
+    payload.shipping_province = editForm.region[0] || ''
+    payload.shipping_city = editForm.region[1] || ''
+    payload.shipping_district = editForm.region[2] || ''
+}
+```
+
+## Testing Steps
+
+### 1. Test Region Data Loading
+1. Open order list page
+2. Check browser console for:
+   ```
+   开始加载省市区数据...
+   响应状态: 200
+   加载的数据条数: XX
+   regionOptions 已设置，条数: XX
+   ```
+3. If you see errors, check that dev server was restarted
+
+### 2. Test Edit Order with Region
+1. Click "编辑" on any order
+2. Check that the region cascader shows the current region (if set)
+3. Change the region selection
+4. Save the order
+5. Verify database is updated:
+   ```sql
+   SELECT shipping_province, shipping_city, shipping_district 
+   FROM tcm_prescription_order 
+   WHERE id = XX;
+   ```
+
+### 3. Test Region Search
+1. Open edit dialog
+2. Click on region cascader
+3. Type a province/city name in the search box
+4. Verify search results appear
+5. Select a region from search results
+
+### 4. Test Quick Edit Preserves Region
+1. Find an order with region data set
+2. Click "快递单号" quick edit button
+3. Update tracking number
+4. Save
+5. Verify region data is still present in database
+
+### 5. Test Fallback Data
+1. Stop the dev server
+2. Open order list page
+3. Verify fallback region data is used (四川省, 北京市)
+4. Restart dev server
+5. Refresh page
+6. Verify full region data is loaded
+
+## Related Files
+
+### Frontend:
+- `admin/src/views/consumer/prescription/order_list.vue`
+  - Added `loadRegionData()` and `transformRegionData()` functions
+  - Updated `onMounted()` to load region data
+  - Updated cascader component with `emitPath: true` and `filterable`
+  - Added region fields to quick edit function
+  - Region field handling already existed in main edit function
+
+### Backend:
+- `server/app/adminapi/logic/tcm/PrescriptionOrderLogic.php`
+  - Already handles `shipping_province`, `shipping_city`, `shipping_district` in both `create()` and `edit()` methods
+
+### Configuration:
+- `admin/vite.config.ts`
+  - Proxy configuration for `/api-proxy` already exists
+
+## Summary
+
+✅ Replaced static region data with API-based loading  
+✅ Added data transformation function  
+✅ Updated cascader with `emitPath: true` and `filterable`  
+✅ Updated `onMounted()` to load region data  
+✅ Added region fields to quick edit function  
+✅ Fallback data available if API fails  
+✅ Search functionality enabled  
+
+The order list now uses the same comprehensive region data as the prescription index, providing access to all provinces, cities, and districts in China!