zyt/DYNAMIC_DOSE_COUNT_LABEL.md

Dynamic Dose Count Label (动态剂数标签)

Feature

Made the dose count label dynamic based on the selected dose unit. When the user selects a different unit (剂/丸/袋/盒/瓶/膏/贴), the label automatically updates to match.

Changes Made

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

1. Added Computed Property

Added a computed property that generates the label dynamically:

// 动态剂数标签（根据剂量单位变化）
const doseCountLabel = computed(() => {
    const unit = editForm.dose_unit || '剂'
    return `${unit}数`
})

2. Updated Form Item Label

Changed from static label to dynamic computed property:

Before:

<el-form-item label="剂数" prop="dose_count">
    <el-input-number
        v-model="editForm.dose_count"
        :min="1"
        placeholder="剂数"
        class="w-full"
    />
</el-form-item>

After:

<el-form-item :label="doseCountLabel" prop="dose_count">
    <el-input-number
        v-model="editForm.dose_count"
        :min="1"
        :placeholder="doseCountLabel"
        class="w-full"
    />
</el-form-item>

How It Works

Label Generation Logic

const unit = editForm.dose_unit || '剂'  // Get current unit, default to '剂'
return `${unit}数`                        // Append '数' to create label

Examples

Selected Unit	Label Display
剂	剂数
丸	丸数
袋	袋数
盒	盒数
瓶	瓶数
膏	膏数
贴	贴数

Reactive Updates

The label updates automatically when:

1. User selects a different dose unit from the dropdown
2. Form is loaded with existing data
3. Form is reset or cleared

User Experience

Before:

• Label always shows "剂数" regardless of selected unit
• Confusing when unit is "贴" but label says "剂数"

After:

• Label dynamically matches the selected unit
• Shows "贴数" when unit is "贴"
• Shows "丸数" when unit is "丸"
• More intuitive and consistent

Implementation Details

Computed Property Benefits

1. Reactive: Automatically updates when editForm.dose_unit changes
2. Efficient: Only recalculates when dependency changes
3. Clean: No need for watchers or manual updates

Default Value

Uses '剂' as default when dose_unit is empty or undefined:

const unit = editForm.dose_unit || '剂'

Placeholder Update

Also updated the placeholder to match the label:

:placeholder="doseCountLabel"

This ensures consistency between the label and placeholder text.

Testing Steps

1. Test Label Changes

1. Open order edit dialog
2. Check initial label (should be "剂数" if dose_unit is "剂")
3. Change dose unit to "贴"
4. Verify label changes to "贴数"
5. Try all other units and verify labels update correctly

2. Test with Existing Data

1. Edit an order that has dose_unit = "丸"
2. Verify label shows "丸数" when dialog opens
3. Change to different unit
4. Verify label updates immediately

3. Test Default Behavior

1. Create a new order (dose_unit is empty)
2. Verify label shows "剂数" (default)
3. Select a unit
4. Verify label updates

4. Test Placeholder

1. Clear the dose_count field
2. Verify placeholder text matches the label
3. Change dose unit
4. Verify placeholder updates with label

Edge Cases Handled

Empty/Undefined Unit

const unit = editForm.dose_unit || '剂'

Falls back to '剂' if unit is empty, null, or undefined.

Form Reset

When form is reset, the computed property automatically recalculates based on the new (or default) value.

Multiple Edits

Label updates correctly even when editing multiple orders in sequence without closing the dialog.

Related Code

Form Structure

<el-row :gutter="24">
    <el-col :span="12">
        <!-- Dynamic label based on dose_unit -->
        <el-form-item :label="doseCountLabel" prop="dose_count">
            <el-input-number v-model="editForm.dose_count" ... />
        </el-form-item>
    </el-col>
    <el-col :span="12">
        <!-- Dose unit selector -->
        <el-form-item label="剂量单位" prop="dose_unit">
            <el-select v-model="editForm.dose_unit" ...>
                <el-option label="剂" value="剂" />
                <el-option label="丸" value="丸" />
                <!-- ... other options ... -->
            </el-select>
        </el-form-item>
    </el-col>
</el-row>

Data Flow

User selects dose_unit → editForm.dose_unit changes → 
doseCountLabel computed property recalculates → 
Label and placeholder update in UI

Future Enhancements

Possible Improvements

1. Validation Message: Update validation messages to use dynamic unit
2. Display in Detail View: Show unit-specific label in order detail view
3. Internationalization: Support multiple languages for unit names
4. Custom Units: Allow admin to configure custom dose units

Example: Dynamic Validation

const doseCountRules = computed(() => [
    { required: true, message: `请输入${editForm.dose_unit || '剂'}数`, trigger: 'blur' }
])

Summary

✅ Added dynamic label that changes based on selected dose unit
✅ Label updates automatically when unit changes
✅ Placeholder also updates to match label
✅ Default to "剂数" when unit is empty
✅ Handles all 7 dose units (剂/丸/袋/盒/瓶/膏/贴)
✅ Reactive and efficient using computed property
✅ Better user experience with consistent terminology

The dose count label now dynamically reflects the selected unit, making the form more intuitive and user-friendly!