zyt/REGION_SELECTOR_AND_DOSAGE_FIX.md

Region Selector and Dosage Fields Fix

Issues Identified

1. Region Selector Empty (省市区下拉为空)

Problem: The region cascader dropdown is empty when opening the create order form.

Root Cause: The Vite proxy configuration is correct, but the development server needs to be restarted for the proxy to take effect.

Solution:

• The proxy configuration in admin/vite.config.ts is already set up correctly:

proxy: {
    '/api-proxy': {
        target: 'https://admin.zhenyangtang.com.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api-proxy/, '')
    }
}

• The transformRegionData() function correctly converts the API format to el-cascader format
• ACTION REQUIRED: Restart the development server

2. Dosage Dropdown Not Showing Selected Value on First Load

Problem: When editing a prescription, the dosage dropdown (用量) appears empty on first load, but shows correctly when reopening the dialog.

Root Cause: Timing issue with the isLoadingData flag. The nextTick() callback was executing before all data was fully rendered.

Solution: Changed from nextTick() to setTimeout(..., 0) to ensure all data is rendered before re-enabling the watch function.

Changed in: admin/src/views/consumer/prescription/index.vue

// Before:
nextTick(() => {
    isLoadingData.value = false
})

// After:
setTimeout(() => {
    isLoadingData.value = false
}, 0)

3. Dosage Fields Not Saving to Database

Problem: User reported that dosage fields (用量、单位、代煎、每贴出包数) are not being saved to the database.

Analysis:

• ✅ Backend validation (PrescriptionValidate.php) already includes all dosage fields in sceneAdd() and sceneEdit()
• ✅ Frontend component (tcm-prescription/index.vue) includes all fields in handleSave()
• ✅ Frontend prescription list view (prescription/index.vue) includes all fields in form submission
• ✅ Watch function properly resets values when prescription type changes
• ✅ isLoadingData flag prevents watch from overwriting loaded data

Verification Needed:

1. Check if database migration was executed: add_prescription_dosage_fields.sql
2. Check browser console for any API errors when saving
3. Verify that the API response shows the fields were saved

Files Modified

1. admin/src/views/consumer/prescription/index.vue

• Changed nextTick() to setTimeout(..., 0) in handleEdit() function (line ~2187)

Files Already Correct (No Changes Needed)

1. admin/vite.config.ts

• Proxy configuration is correct

2. admin/src/views/consumer/prescription/index.vue

• transformRegionData() function correctly converts API format
• loadRegionData() function properly fetches and transforms data
• Watch function includes isLoadingData flag to prevent overwriting
• All dosage fields are included in form submission

3. admin/src/components/tcm-prescription/index.vue

• All dosage fields are included in handleSave()
• Watch function properly handles prescription type changes
• bags_per_dose field is displayed for 饮片 type

4. server/app/adminapi/validate/tcm/PrescriptionValidate.php

• All dosage fields are included in sceneAdd() and sceneEdit()

Testing Steps

Test 1: Region Selector

1. Restart the development server:

   # Stop current server (Ctrl+C)
   cd admin
   npm run dev
   

2. Open the create order form (创建订单)
3. Click on the "省市区" cascader
4. Verify that all provinces are displayed
5. Select a province and verify cities are displayed
6. Select a city and verify districts are displayed
7. Check browser console for any errors

Test 2: Dosage Dropdown Display

1. Create a new prescription with type "饮片" and dosage "100ml"
2. Save the prescription
3. Refresh the page (F5)
4. Edit the same prescription
5. Verify that the dosage dropdown shows "100ml" immediately on first load
6. Close and reopen the edit dialog
7. Verify it still shows "100ml"

Test 3: Dosage Fields Saving

1. Create a new prescription:
   • Type: 饮片
   • Dosage: 150ml
   • Decoction: 代煎
   • Bags per dose: 3包
2. Save the prescription
3. Check browser Network tab for the API request payload
4. Verify the payload includes:

   {
     "dosage_amount": 150,
     "dosage_unit": "ml",
     "need_decoction": true,
     "bags_per_dose": 3
   }
   

5. Refresh the page and edit the prescription
6. Verify all fields display the saved values

Test 4: Different Prescription Types

1. Test 浓缩水丸:
   • Dosage: 1-10g dropdown
   • No decoction option
   • No bags_per_dose field
2. Test 饮片:
   • Dosage: 50-250ml dropdown
   • Decoction radio buttons (代煎/不代煎)
   • Bags per dose: 1-9包 dropdown
3. Test 其他类型 (颗粒、丸剂、散剂、膏方、汤剂):
   • Dosage: Free input with decimal support
   • No decoction option
   • No bags_per_dose field

Database Verification

If dosage fields are still not saving, verify the database schema:

-- Check if columns exist
DESCRIBE tcm_prescription;

-- Should show these columns:
-- dosage_amount (decimal or varchar)
-- dosage_unit (varchar)
-- need_decoction (tinyint)
-- bags_per_dose (int)
-- times_per_day (int)

-- If columns are missing, run the migration:
SOURCE add_prescription_dosage_fields.sql;

Troubleshooting

Region Selector Still Empty After Restart

1. Check browser console for CORS errors
2. Verify the proxy is working:

   # In browser console:
   fetch('/api-proxy/area/ChinaCitys.json').then(r => r.json()).then(console.log)
   

3. Check if the API endpoint is accessible:

   curl https://admin.zhenyangtang.com.cn/area/ChinaCitys.json
   

Dosage Dropdown Still Empty on First Load

1. Check browser console for errors
2. Verify dosage_amount is a number in the database (not string)
3. Add console.log in handleEdit() to debug:

   console.log('dosage_amount from DB:', row.dosage_amount, typeof row.dosage_amount)
   console.log('dosage_amount after conversion:', editForm.dosage_amount, typeof editForm.dosage_amount)
   

Dosage Fields Not Saving

1. Check browser Network tab for API errors
2. Verify database migration was executed
3. Check backend logs for validation errors
4. Verify the API endpoint is receiving the fields:

   // In PrescriptionLogic.php
   Log::write('Prescription params: ' . json_encode($params));
   

Summary

• ✅ Region selector: Proxy configured, needs server restart
• ✅ Dosage dropdown: Fixed timing issue with setTimeout
• ✅ Dosage fields saving: All code is correct, verify database migration
• ✅ bags_per_dose: Already implemented in both component and list view