154 lines
5.0 KiB
Markdown
154 lines
5.0 KiB
Markdown
# 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:
|
||
|
||
```typescript
|
||
// 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:
|
||
|
||
```typescript
|
||
// 添加省市区字段
|
||
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:
|
||
```json
|
||
{
|
||
"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:
|
||
```json
|
||
{
|
||
"province": "四川省",
|
||
"city": "成都市",
|
||
"district": "锦江区"
|
||
}
|
||
```
|
||
|
||
### 2. Verify Database Storage
|
||
After creating an order, check the database:
|
||
|
||
```sql
|
||
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.
|