zyt/ORDER_LIST_REGION_UPDATE.md

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:

onMounted(() => {
    getLists()
})

To:

onMounted(async () => {
    await loadRegionData()
    getLists()
})

5. Added Region Fields to Quick Edit

Updated the quick tracking number edit function to include region fields:

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:

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:

// 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:

   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!