feature: Digitization Workstation UI

2026-06-27 12:15:43 +08:00
parent 88e70b3dbe
commit e22d33b654
55 changed files with 6411 additions and 143 deletions
@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col lg:flex-row lg:items-start gap-4 p-4 bg-gray-50 rounded-md">
+    <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
+      <div>
+        <label class="block text-xs text-gray-500">Code</label>
+        <select
+          :value="observation.observationCode"
+          @change="update('observationCode', ($event.target as HTMLSelectElement).value)"
+          class="form-input text-sm"
+          :disabled="readonly"
+        >
+          <option value="">Select...</option>
+          <option value="HEART_RATE">Heart Rate</option>
+          <option value="TEMP_C">Temperature (C)</option>
+          <option value="BP_SYSTOLIC">BP Systolic</option>
+          <option value="BP_DIASTOLIC">BP Diastolic</option>
+          <option value="RESP_RATE">Respiratory Rate</option>
+          <option value="SPO2">SpO2</option>
+          <option value="POTASSIUM_MEQ_L">Potassium</option>
+          <option value="GLUCOSE_MG_DL">Glucose</option>
+          <option value="WBC_K_UL">WBC</option>
+          <option value="LACTATE_MMOL_L">Lactate</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500">Value</label>
+        <input
+          :value="observation.value"
+          @change="update('value', parseFloat(($event.target as HTMLInputElement).value))"
+          type="number"
+          step="0.01"
+          class="form-input text-sm"
+          :disabled="readonly"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500">Unit</label>
+        <input
+          :value="observation.unit"
+          @change="update('unit', ($event.target as HTMLInputElement).value)"
+          type="text"
+          class="form-input text-sm"
+          :disabled="readonly"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500">Recorded At</label>
+        <input
+          :value="observation.recordedAt?.substring(0, 16)"
+          @change="update('recordedAt', ($event.target as HTMLInputElement).value)"
+          type="datetime-local"
+          class="form-input text-sm"
+          :disabled="readonly"
+        />
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500">Note</label>
+        <input
+          :value="observation.note"
+          @change="update('note', ($event.target as HTMLInputElement).value)"
+          type="text"
+          class="form-input text-sm"
+          placeholder="Optional"
+          :disabled="readonly"
+        />
+      </div>
+    </div>
+
+    <!-- Verification checkbox (only in verification mode) -->
+    <div v-if="showVerified" class="flex items-center lg:mt-8">
+      <input
+        type="checkbox"
+        :checked="verified"
+        @change="$emit('verify', observation.id, ($event.target as HTMLInputElement).checked)"
+        class="w-4 h-4 text-clinical-safe rounded"
+      />
+      <span class="ml-2 text-xs text-gray-500">OK</span>
+    </div>
+
+    <!-- Delete button (entry mode only) -->
+    <button
+      v-if="!readonly && !showVerified"
+      @click="$emit('delete', observation.id)"
+      class="lg:mt-8 text-clinical-danger hover:text-red-800 text-sm"
+    >
+      Remove
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DraftObservation } from '../types'
+
+const props = defineProps<{
+  observation: DraftObservation
+  readonly?: boolean
+  showVerified?: boolean
+  verified?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update', field: string, value: unknown): void
+  (e: 'delete', obsId: string): void
+  (e: 'verify', obsId: string, passed: boolean): void
+}>()
+
+function update(field: string, value: unknown) {
+  emit('update', field, value)
+}
+</script>