zyt/REGION_FIELD_SUBMISSION_FIX.md

Region Field Submission Fix (省市区字段提交修复)

Issue

The region selector (省市区) in the create order form was not submitting the selected province, city, and district values to the database.

Root Cause

1. The cascader component had emitPath: false, which only returned the last selected value (district name) instead of the full path
2. The submitCreateOrderFromPrescription() function was not including the region fields in the payload sent to the backend

Changes Made

1. Updated Cascader Configuration

File: admin/src/views/consumer/prescription/index.vue

Changed emitPath from false to true to get the full path array:

// Before:
:props="{ value: 'name', label: 'name', children: 'children', emitPath: false, checkStrictly: false }"

// After:
:props="{ value: 'name', label: 'name', children: 'children', emitPath: true, checkStrictly: false }"

Effect: Now createOrderForm.region will contain an array like ['四川省', '成都市', '锦江区'] instead of just '锦江区'

2. Updated Form Submission

File: admin/src/views/consumer/prescription/index.vue

Added code to extract province, city, and district from the region array and include them in the payload:

// 添加省市区字段
if (createOrderForm.region && createOrderForm.region.length >= 3) {
    payload.province = createOrderForm.region[0]
    payload.city = createOrderForm.region[1]
    payload.district = createOrderForm.region[2]
}

3. Updated handleRegionChange Comment

Added clarification that the value is now an array of the full path.

Data Flow

Before Fix:

1. User selects: 四川省 → 成都市 → 锦江区
2. createOrderForm.region = '锦江区' (only last value)
3. Payload sent to backend: No province/city/district fields
4. Database: province, city, district columns remain empty

After Fix:

1. User selects: 四川省 → 成都市 → 锦江区
2. createOrderForm.region = ['四川省', '成都市', '锦江区'] (full path)
3. Payload sent to backend:

   {
     "province": "四川省",
     "city": "成都市",
     "district": "锦江区",
     ...other fields
   }
   

4. Database: province, city, district columns are populated correctly

Testing Steps

1. Test Region Selection and Submission

1. Open the prescription list page
2. Click "创建订单" button on any prescription
3. Fill in the required fields:
   • Select a patient (患者)
   • Enter recipient name (收货人)
   • Enter recipient phone (收货手机)
   • Select province/city/district (省市区): e.g., 四川省 → 成都市 → 锦江区
   • Enter detailed address (详细地址)
4. Click "创建业务订单" button
5. Check browser Network tab:
   • Find the API request to create order
   • Verify the payload includes:

     {
       "province": "四川省",
       "city": "成都市",
       "district": "锦江区"
     }
     

2. Verify Database Storage

After creating an order, check the database:

SELECT id, order_no, province, city, district, shipping_address 
FROM tcm_prescription_order 
ORDER BY id DESC 
LIMIT 1;

Expected result:

| id | order_no | province | city   | district | shipping_address |
|----|----------|----------|--------|----------|------------------|
| XX | XXXXXX   | 四川省   | 成都市 | 锦江区   | 中关村...        |

3. Test Different Regions

Test with various regions to ensure the data structure works correctly:

• 北京市 → 北京市 → 朝阳区
• 上海市 → 上海市 → 浦东新区
• 广东省 → 深圳市 → 南山区

4. Test Edge Cases

1. No region selected: Should still allow submission (if not required)
2. Only province selected: Should not submit incomplete data
3. Clear selection: Click the clear button (×) and verify region is cleared

Backend Verification

The backend should already have the database columns from the migration add_shipping_region_fields.sql:

• province (varchar)
• city (varchar)
• district (varchar)

If the backend validation or logic needs to be updated, check:

• server/app/adminapi/validate/tcm/PrescriptionOrderValidate.php
• server/app/adminapi/logic/tcm/PrescriptionOrderLogic.php

Console Debugging

If you need to debug, check the browser console for the log message:

选择的省市区： ['四川省', '成都市', '锦江区']

This confirms the cascader is emitting the correct data structure.

Related Files

Frontend:

• admin/src/views/consumer/prescription/index.vue (main changes)

Backend:

• server/app/adminapi/logic/tcm/PrescriptionOrderLogic.php (should handle province/city/district)
• add_shipping_region_fields.sql (database migration)

Summary

✅ Changed cascader emitPath to true to get full path array
✅ Added province/city/district extraction in form submission
✅ Payload now includes all three region fields
✅ Database columns will be populated correctly

The region selector now properly submits province, city, and district values to the database.