feat: integrate Luoyang pharmacy workflow

admin/src/components/medicine-name-select/index.vue

@@ -2,7 +2,7 @@
     <span v-if="disabled" class="medicine-name-readonly">{{ modelValue || '—' }}</span>
     <el-select
         v-else
-        :model-value="modelValue"
+        :model-value="selectedMedicineId"
         class="medicine-name-select w-full"
         filterable
         remote
@@ -14,7 +14,14 @@
         @visible-change="onVisibleChange"
         @update:model-value="onUpdate"
     >
-        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" />
+        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+            <div class="medicine-name-option">
+                <span>{{ item.name }}</span>
+                <span class="medicine-name-option__meta">
+                    {{ item.id > 0 ? [item.supplier, item.unit, `ID ${item.id}`].filter(Boolean).join(' · ') : '历史名称，请重新选择' }}
+                </span>
+            </div>
+        </el-option>
     </el-select>
 </template>
 
@@ -24,6 +31,7 @@ import { medicineLists } from '@/api/medicine'
 const props = withDefaults(
     defineProps<{
         modelValue: string
+        medicineId?: number | null
         disabled?: boolean
     }>(),
     { disabled: false }
@@ -31,18 +39,30 @@ const props = withDefaults(
 
 const emit = defineEmits<{
     'update:modelValue': [value: string]
+    'update:medicineId': [value: number | undefined]
 }>()
 
 const loading = ref(false)
-const options = ref<{ id: number; name: string }[]>([])
+type MedicineOption = { id: number; name: string; supplier?: string; unit?: string }
+const options = ref<MedicineOption[]>([])
+
+const selectedMedicineId = computed<number | ''>(() => {
+    const id = Number(props.medicineId)
+    if (Number.isInteger(id) && id > 0) {
+        return id
+    }
+    return (props.modelValue || '').trim() ? 0 : ''
+})
 
 function ensureCurrentInOptions() {
     const v = (props.modelValue || '').trim()
     if (!v) {
         return
     }
-    if (!options.value.some((o) => o.name === v)) {
-        options.value = [{ id: 0, name: v }, ...options.value]
+    const id = Number(props.medicineId)
+    const currentId = Number.isInteger(id) && id > 0 ? id : 0
+    if (!options.value.some((o) => o.id === currentId)) {
+        options.value = [{ id: currentId, name: v }, ...options.value]
     }
 }
 
@@ -56,7 +76,7 @@ const remoteMethod = async (query: string) => {
             page_size: 100,
             status: 1
         })
-        options.value = res.lists || []
+        options.value = (res.lists || []) as MedicineOption[]
         ensureCurrentInOptions()
     } catch (e) {
         console.error(e)
@@ -72,13 +92,19 @@ const onVisibleChange = (open: boolean) => {
     }
 }
 
-const onUpdate = (val: string) => {
-    emit('update:modelValue', val || '')
+const onUpdate = (val: number | string) => {
+    const id = Number(val)
+    const selected = id > 0 ? options.value.find((item) => item.id === id) : undefined
+    emit('update:modelValue', selected?.name || '')
+    emit('update:medicineId', selected?.id)
 }
 
 watch(
-    () => props.modelValue,
+    () => [props.modelValue, props.medicineId],
     () => {
+        if (!(props.modelValue || '').trim() && Number(props.medicineId) > 0) {
+            emit('update:medicineId', undefined)
+        }
         ensureCurrentInOptions()
     },
     { immediate: true }
@@ -93,4 +119,23 @@ watch(
 .medicine-name-select.w-full {
     width: 100%;
 }
+
+.medicine-name-option {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 60%);
+    align-items: center;
+    gap: 16px;
+
+    > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.medicine-name-option__meta {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    text-align: right;
+}
 </style>