444 lines
28 KiB
PHP
444 lines
28 KiB
PHP
<?php
|
|
/**
|
|
* Therapist Clinical Assessment & SOAP Note View (Glassmorphism)
|
|
*/
|
|
?>
|
|
<div x-data="soapApp" class="space-y-6">
|
|
|
|
<!-- Header & Patient Summary Banner -->
|
|
<div class="glass-card p-6 rounded-2xl border flex flex-col lg:flex-row lg:items-center justify-between gap-4 relative overflow-hidden">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-emerald-500 to-teal-600 flex items-center justify-center text-white text-2xl shadow-lg shadow-emerald-500/30">
|
|
<i class="bi bi-person-heart"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<h1 class="text-2xl font-bold tracking-tight" x-text="patient.name">คุณสมชาย รักสุขภาพ</h1>
|
|
<span class="px-2.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300 font-mono text-xs font-bold" x-text="patient.hn">HN-2407001</span>
|
|
</div>
|
|
<p class="text-xs text-subtle mt-1" x-text="`อายุ: ${patient.age} ปี | เพศ: ${patient.gender} | สิทธิ: บัตรทอง สปสช.`">อายุ: 45 ปี | เพศ: ชาย</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Box for Contraindications -->
|
|
<div class="flex-1 lg:max-w-md p-3 rounded-xl bg-red-500/10 border border-red-500/30 text-xs text-red-300 space-y-1">
|
|
<p class="font-bold flex items-center gap-1 text-red-400">
|
|
<i class="bi bi-exclamation-triangle-fill text-amber-400 animate-bounce"></i> โรคประจำตัว / ข้อห้ามนวด:
|
|
</p>
|
|
<p x-text="patient.contraindications || 'ไม่มีประวัติแพ้ยา หรือข้อห้ามในการนวดแผนไทยราชสำนัก'">ความดันโลหิตสูง (ต้องวัดความดันก่อนและหลังนวด ห้ามกดจุดสัญญาณคอ)</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end">
|
|
<span class="text-xs text-subtle">หมายเลขคิวปัจจุบัน</span>
|
|
<span class="text-2xl font-mono font-bold text-amber-400" x-text="queueNo || 'A003'">A003</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SOAP Note Tabs Navigation -->
|
|
<div class="flex border-b border-slate-700/60 gap-2 overflow-x-auto pb-1">
|
|
<button @click="activeTab = 'S'" class="px-6 py-3 rounded-t-xl font-bold text-sm transition-all flex items-center gap-2"
|
|
:class="activeTab === 'S' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400'">
|
|
<span class="w-6 h-6 rounded-full bg-black/20 flex items-center justify-center text-xs">S</span>
|
|
<span>Subjective (อาการนำ)</span>
|
|
</button>
|
|
<button @click="activeTab = 'O'" class="px-6 py-3 rounded-t-xl font-bold text-sm transition-all flex items-center gap-2"
|
|
:class="activeTab === 'O' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400'">
|
|
<span class="w-6 h-6 rounded-full bg-black/20 flex items-center justify-center text-xs">O</span>
|
|
<span>Objective (ตรวจร่างกาย & VAS)</span>
|
|
</button>
|
|
<button @click="activeTab = 'A'" class="px-6 py-3 rounded-t-xl font-bold text-sm transition-all flex items-center gap-2"
|
|
:class="activeTab === 'A' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400'">
|
|
<span class="w-6 h-6 rounded-full bg-black/20 flex items-center justify-center text-xs">A</span>
|
|
<span>Assessment (การวินิจฉัย)</span>
|
|
</button>
|
|
<button @click="activeTab = 'P'" class="px-6 py-3 rounded-t-xl font-bold text-sm transition-all flex items-center gap-2"
|
|
:class="activeTab === 'P' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400'">
|
|
<span class="w-6 h-6 rounded-full bg-black/20 flex items-center justify-center text-xs">P</span>
|
|
<span>Plan & Sign (แผนรักษา & ลงนาม)</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="submitSoap()" class="glass-card p-6 md:p-8 rounded-2xl border min-h-[500px] flex flex-col justify-between">
|
|
|
|
<!-- TAB 1: S - Subjective -->
|
|
<div x-show="activeTab === 'S'" x-transition class="space-y-6">
|
|
<h3 class="text-lg font-bold text-emerald-400 pb-2 border-b border-emerald-500/20">
|
|
1. Subjective Symptoms (ข้อมูลประวัติและอาการนำที่ผู้ป่วยบอกเล่า)
|
|
</h3>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">อาการสำคัญที่มาพบแพทย์ (Chief Complaint):</label>
|
|
<textarea x-model="form.subjective_symptoms" rows="4" required placeholder="ระบุอาการปวด, ตำแหน่งที่เป็น, เป็นมานานกี่วัน/เดือน เช่น ปวดตึงคอบ่าไหล่ร้าวลงแขนขวา เป็นมา 3 เดือน..."
|
|
class="glass-input text-base"></textarea>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1.5">ตำแหน่งที่ปวดเป็นพิเศษ:</label>
|
|
<div class="grid grid-cols-2 gap-2 text-sm">
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700 cursor-pointer"><input type="checkbox" x-model="form.pain_locations" value="คอ/บ่า" class="rounded"> คอ / บ่า</label>
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700 cursor-pointer"><input type="checkbox" x-model="form.pain_locations" value="สะบัก/หลัง" class="rounded"> สะบัก / กลางหลัง</label>
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700 cursor-pointer"><input type="checkbox" x-model="form.pain_locations" value="เอว/สะโพก" class="rounded"> เอว / สะโพก</label>
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700 cursor-pointer"><input type="checkbox" x-model="form.pain_locations" value="แขน/ขา" class="rounded"> แขน / ขา / เข่า</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1.5">ระยะเวลาที่มีอาการ:</label>
|
|
<select x-model="form.duration" class="glass-input">
|
|
<option value="เฉียบพลัน (< 7 วัน)">เฉียบพลัน (น้อยกว่า 7 วัน)</option>
|
|
<option value="กึ่งเรื้อรัง (1 - 3 เดือน)">กึ่งเรื้อรัง (1 - 3 เดือน)</option>
|
|
<option value="เรื้อรัง (> 3 เดือน)">เรื้อรัง (มากกว่า 3 เดือน)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 2: O - Objective (VAS Slider 0-10 & ROM) -->
|
|
<div x-show="activeTab === 'O'" x-cloak x-transition class="space-y-6">
|
|
<h3 class="text-lg font-bold text-cyan-400 pb-2 border-b border-cyan-500/20">
|
|
2. Objective Signs (การตรวจร่างกาย, สัญญาณชีพ และระดับความปวด VAS 0-10)
|
|
</h3>
|
|
|
|
<!-- Vital Signs -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-2xl bg-cyan-950/20 border border-cyan-500/20">
|
|
<div>
|
|
<label class="block text-xs text-subtle mb-1">ความดันก่อนนวด (BP - mmHg)</label>
|
|
<input type="text" x-model="form.bp_before" placeholder="120/80" class="glass-input text-center font-mono">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-subtle mb-1">ชีพจรก่อนนวด (PR - bpm)</label>
|
|
<input type="number" x-model="form.pr_before" placeholder="78" class="glass-input text-center font-mono">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-subtle mb-1">ความดันหลังนวด (BP - mmHg)</label>
|
|
<input type="text" x-model="form.bp_after" placeholder="118/76" class="glass-input text-center font-mono text-emerald-400">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-subtle mb-1">ชีพจรหลังนวด (PR - bpm)</label>
|
|
<input type="number" x-model="form.pr_after" placeholder="72" class="glass-input text-center font-mono text-emerald-400">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VAS Pain Score Sliders (0-10) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
<!-- Pre-treatment Pain Score -->
|
|
<div class="p-5 rounded-2xl bg-slate-800/50 border border-slate-700/60 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-bold text-sm">ระดับความปวดก่อนรักษา (Pre-Pain VAS)</span>
|
|
<span class="text-2xl font-mono font-bold px-3 py-1 rounded-xl"
|
|
:class="getVasColor(form.pre_pain_score)"
|
|
x-text="form.pre_pain_score">7</span>
|
|
</div>
|
|
<div class="text-center text-4xl py-2" x-text="getVasEmoji(form.pre_pain_score)">😣</div>
|
|
<input type="range" x-model.number="form.pre_pain_score" min="0" max="10" step="1"
|
|
class="w-full h-3 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500">
|
|
<div class="flex justify-between text-[11px] text-subtle font-mono">
|
|
<span>0: ไม่ปวดเลย</span>
|
|
<span>5: ปวดปานกลาง</span>
|
|
<span>10: ปวดรุนแรงที่สุด</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post-treatment Pain Score -->
|
|
<div class="p-5 rounded-2xl bg-emerald-950/20 border border-emerald-500/30 space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-bold text-sm text-emerald-400">ระดับความปวดหลังรักษา (Post-Pain VAS)</span>
|
|
<span class="text-2xl font-mono font-bold px-3 py-1 rounded-xl"
|
|
:class="getVasColor(form.post_pain_score)"
|
|
x-text="form.post_pain_score">2</span>
|
|
</div>
|
|
<div class="text-center text-4xl py-2" x-text="getVasEmoji(form.post_pain_score)">😌</div>
|
|
<input type="range" x-model.number="form.post_pain_score" min="0" max="10" step="1"
|
|
class="w-full h-3 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500">
|
|
<div class="flex justify-between text-[11px] text-subtle font-mono">
|
|
<span>0: หายปวดสนิท</span>
|
|
<span>5: ปวดลดลง</span>
|
|
<span>10: ไม่ดีขึ้น</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ROM (Range of Motion) Goniometer -->
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">การตรวจองศาการเคลื่อนไหวข้อต่อ (Range of Motion - ROM Goniometer):</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<input type="text" x-model="form.rom_flexion" placeholder="Flexion (ก้ม): 45 องศา (ปกติ 60)" class="glass-input text-xs">
|
|
<input type="text" x-model="form.rom_extension" placeholder="Extension (เงย): 30 องศา (ปกติ 45)" class="glass-input text-xs">
|
|
<input type="text" x-model="form.rom_rotation" placeholder="Rotation (หมุนซ้าย/ขวา): 60/60 องศา" class="glass-input text-xs">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- TAB 3: A - Assessment -->
|
|
<div x-show="activeTab === 'A'" x-cloak x-transition class="space-y-6">
|
|
<h3 class="text-lg font-bold text-amber-400 pb-2 border-b border-amber-500/20">
|
|
3. Assessment (การวินิจฉัยโรคตามคัมภีร์เวชกรรมไทย และ ICD-10 TM)
|
|
</h3>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">เลือกการวินิจฉัยหลัก:</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<label class="p-3 rounded-xl border cursor-pointer flex items-center gap-3 transition-all"
|
|
:class="form.assessment_diag === 'โรคลมปลายปัตฆาตสัญญาณ 4 หลัง' ? 'bg-amber-500/20 border-amber-500 text-amber-300' : 'border-slate-700/60 text-subtle'">
|
|
<input type="radio" x-model="form.assessment_diag" value="โรคลมปลายปัตฆาตสัญญาณ 4 หลัง" class="hidden">
|
|
<span class="font-bold">⚡ โรคลมปลายปัตฆาตสัญญาณ 4 หลัง</span>
|
|
</label>
|
|
<label class="p-3 rounded-xl border cursor-pointer flex items-center gap-3 transition-all"
|
|
:class="form.assessment_diag === 'กลุ่มอาการออฟฟิศซินโดรม (Myofascial Pain Syndrome)' ? 'bg-amber-500/20 border-amber-500 text-amber-300' : 'border-slate-700/60 text-subtle'">
|
|
<input type="radio" x-model="form.assessment_diag" value="กลุ่มอาการออฟฟิศซินโดรม (Myofascial Pain Syndrome)" class="hidden">
|
|
<span class="font-bold">💻 กลุ่มอาการออฟฟิศซินโดรม (MPS)</span>
|
|
</label>
|
|
<label class="p-3 rounded-xl border cursor-pointer flex items-center gap-3 transition-all"
|
|
:class="form.assessment_diag === 'โรคลมจับโปงเข่า (Osteoarthritis of Knee)' ? 'bg-amber-500/20 border-amber-500 text-amber-300' : 'border-slate-700/60 text-subtle'">
|
|
<input type="radio" x-model="form.assessment_diag" value="โรคลมจับโปงเข่า (Osteoarthritis of Knee)" class="hidden">
|
|
<span class="font-bold">🦵 โรคลมจับโปงเข่า (ข้อเข่าเสื่อม)</span>
|
|
</label>
|
|
<label class="p-3 rounded-xl border cursor-pointer flex items-center gap-3 transition-all"
|
|
:class="form.assessment_diag === 'โรคลมปลายปัตฆาตสัญญาณ 5 โคนขา (ตึงสะโพกร้าวลงขา)' ? 'bg-amber-500/20 border-amber-500 text-amber-300' : 'border-slate-700/60 text-subtle'">
|
|
<input type="radio" x-model="form.assessment_diag" value="โรคลมปลายปัตฆาตสัญญาณ 5 โคนขา (ตึงสะโพกร้าวลงขา)" class="hidden">
|
|
<span class="font-bold">🚶 โรคลมปลายปัตฆาตสัญญาณ 5 โคนขา</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1.5">คำอธิบายการวินิจฉัยเพิ่มเติม (ถ้ามี):</label>
|
|
<textarea x-model="form.assessment_notes" rows="3" placeholder="กล้ามเนื้อ Trapezius และ Levator Scapulae มีจุดกดเจ็บ (Trigger Point) ร่วมกับภาวะเส้นจม..."
|
|
class="glass-input text-sm"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 4: P - Plan & Signature Pad -->
|
|
<div x-show="activeTab === 'P'" x-cloak x-transition class="space-y-6">
|
|
<h3 class="text-lg font-bold text-teal-400 pb-2 border-b border-teal-500/20">
|
|
4. Plan & Digital Signature (แผนการรักษา, คำแนะนำ และลงนามหมอนวด)
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1.5">หัตถการและวิธีการรักษาที่ให้:</label>
|
|
<div class="space-y-2 text-sm">
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700"><input type="checkbox" x-model="form.plan_methods" value="นวดไทยราชสำนัก"> นวดไทยราชสำนัก เน้นจุดสัญญาณ 1-4 คอบ่า</label>
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700"><input type="checkbox" x-model="form.plan_methods" value="ประคบสมุนไพร"> ประคบลูกประคบสมุนไพรร้อนบริเวณสะบักและเอว</label>
|
|
<label class="flex items-center gap-2 p-2 rounded bg-slate-800/40 border border-slate-700"><input type="checkbox" x-model="form.plan_methods" value="ยืดเหยียดกล้ามเนื้อ"> ยืดเหยียดกล้ามเนื้อและดัดตน (Stretching)</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1.5">คำแนะนำสำหรับผู้รับบริการกลับไปปฏิบัติที่บ้าน:</label>
|
|
<textarea x-model="form.plan_advice" rows="4" placeholder="1. หลีกเลี่ยงการยกของหนักและการนั่งทำงานหน้าคอมพิวเตอร์ต่อเนื่องเกิน 2 ชั่วโมง 2. ประคบอุ่นบริเวณคอบ่าก่อนนอน 15 นาที 3. ดื่มน้ำอุ่นให้เพียงพอและงดน้ำแข็ง 1 วัน"
|
|
class="glass-input text-xs font-mono"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Digital Signature Pad -->
|
|
<div class="pt-4 border-t border-slate-700/60">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="block text-sm font-bold text-emerald-400"><i class="bi bi-pen-fill mr-1"></i> ลายมือชื่อหมอนวดผู้ให้การรักษา (Digital Signature Pad):</label>
|
|
<button type="button" @click="clearSignature()" class="text-xs text-red-400 hover:underline"><i class="bi bi-eraser"></i> ล้างลายเซ็น</button>
|
|
</div>
|
|
<div class="p-2 rounded-2xl bg-slate-900 border border-slate-700 inline-block w-full text-center">
|
|
<canvas id="signaturePad" width="500" height="150" class="bg-slate-800/80 rounded-xl cursor-crosshair max-w-full mx-auto border border-dashed border-slate-600"></canvas>
|
|
<p class="text-[10px] text-subtle mt-1.5">ใช้นิ้วหรือเมาส์เซ็นลายมือชื่อในกรอบด้านบน (บันทึกตามมาตรฐาน OWASP Non-repudiation)</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Form Footer Actions -->
|
|
<div class="pt-6 mt-6 border-t border-slate-700/60 flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<div class="flex gap-2">
|
|
<button type="button" @click="prevTab()" :disabled="activeTab === 'S'" class="px-5 py-2.5 rounded-xl border border-slate-600 text-sm font-medium disabled:opacity-30">
|
|
<i class="bi bi-chevron-left"></i> ย้อนกลับ
|
|
</button>
|
|
<button type="button" @click="nextTab()" x-show="activeTab !== 'P'" class="glass-btn-primary px-6 py-2.5 text-sm">
|
|
ถัดไป <i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<button type="submit" x-show="activeTab === 'P'" :disabled="submitting" class="glass-btn-primary bg-gradient-to-r from-emerald-500 to-teal-600 px-8 py-3 rounded-xl font-bold shadow-lg shadow-emerald-500/30 text-base">
|
|
<span x-show="!submitting"><i class="bi bi-check-circle-fill"></i> บันทึกเวชระเบียน SOAP & ซิงค์ HIS</span>
|
|
<span x-show="submitting"><i class="bi bi-arrow-repeat animate-spin"></i> กำลังบันทึกข้อมูล...</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('soapApp', () => ({
|
|
activeTab: 'S',
|
|
submitting: false,
|
|
queueNo: 'A003',
|
|
patient: {
|
|
id: 1,
|
|
hn: 'HN-2407001',
|
|
name: 'คุณสมชาย รักสุขภาพ',
|
|
age: 45,
|
|
gender: 'ชาย',
|
|
contraindications: 'ความดันโลหิตสูง (ต้องวัดความดันก่อนและหลังนวด ห้ามกดจุดสัญญาณคอ)'
|
|
},
|
|
form: {
|
|
queue_id: 1,
|
|
patient_id: 1,
|
|
subjective_symptoms: 'ปวดตึงคอบ่าไหล่ร้าวลงสะบักขวา เป็นมาประมาณ 3 เดือน เวลาทำงานหน้าคอมพิวเตอร์จะมีอาการชาปลายมือร่วมด้วยเล็กน้อย',
|
|
pain_locations: ['คอ/บ่า', 'สะบัก/หลัง'],
|
|
duration: 'กึ่งเรื้อรัง (1 - 3 เดือน)',
|
|
bp_before: '125/82',
|
|
pr_before: 78,
|
|
bp_after: '118/76',
|
|
pr_after: 72,
|
|
pre_pain_score: 7,
|
|
post_pain_score: 2,
|
|
rom_flexion: 'Flexion: 50 องศา',
|
|
rom_extension: 'Extension: 35 องศา',
|
|
rom_rotation: 'Rotation: 60/60 องศา',
|
|
assessment_diag: 'กลุ่มอาการออฟฟิศซินโดรม (Myofascial Pain Syndrome)',
|
|
assessment_notes: 'พบจุดกดเจ็บ (Trigger Point) บริเวณ Upper Trapezius และ Levator Scapulae ด้านขวา',
|
|
plan_methods: ['นวดไทยราชสำนัก', 'ประคบสมุนไพร'],
|
|
plan_advice: '1. พักสายตาและยืดเหยียดกล้ามเนื้อคอบ่าทุก 1 ชั่วโมง\n2. ประคบอุ่นบริเวณสะบักขวาก่อนนอน\n3. หลีกเลี่ยงการสะพายกระเป๋าหนักข้างเดียว',
|
|
signature_base64: null
|
|
},
|
|
canvas: null,
|
|
ctx: null,
|
|
isDrawing: false,
|
|
|
|
init() {
|
|
// Parse URL params if present
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get('queue_id')) this.form.queue_id = Number(urlParams.get('queue_id'));
|
|
if (urlParams.get('patient_id')) this.form.patient_id = Number(urlParams.get('patient_id'));
|
|
|
|
this.$nextTick(() => {
|
|
this.initSignaturePad();
|
|
});
|
|
},
|
|
|
|
getVasColor(score) {
|
|
if (score <= 2) return 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
|
|
if (score <= 5) return 'bg-amber-500/20 text-amber-300 border border-amber-500/30';
|
|
if (score <= 8) return 'bg-orange-500/20 text-orange-300 border border-orange-500/30';
|
|
return 'bg-red-500/20 text-red-300 border border-red-500/30 animate-pulse';
|
|
},
|
|
|
|
getVasEmoji(score) {
|
|
if (score === 0) return '😄';
|
|
if (score <= 2) return '😌';
|
|
if (score <= 4) return '😐';
|
|
if (score <= 6) return '😣';
|
|
if (score <= 8) return '😖';
|
|
return '😭';
|
|
},
|
|
|
|
nextTab() {
|
|
const tabs = ['S', 'O', 'A', 'P'];
|
|
const idx = tabs.indexOf(this.activeTab);
|
|
if (idx < tabs.length - 1) this.activeTab = tabs[idx + 1];
|
|
},
|
|
prevTab() {
|
|
const tabs = ['S', 'O', 'A', 'P'];
|
|
const idx = tabs.indexOf(this.activeTab);
|
|
if (idx > 0) this.activeTab = tabs[idx - 1];
|
|
},
|
|
|
|
initSignaturePad() {
|
|
this.canvas = document.getElementById('signaturePad');
|
|
if (!this.canvas) return;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.ctx.strokeStyle = '#10b981';
|
|
this.ctx.lineWidth = 3;
|
|
this.ctx.lineCap = 'round';
|
|
|
|
const getPos = (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
|
|
return { x: clientX - rect.left, y: clientY - rect.top };
|
|
};
|
|
|
|
const startDraw = (e) => {
|
|
this.isDrawing = true;
|
|
const pos = getPos(e);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(pos.x, pos.y);
|
|
e.preventDefault();
|
|
};
|
|
const draw = (e) => {
|
|
if (!this.isDrawing) return;
|
|
const pos = getPos(e);
|
|
this.ctx.lineTo(pos.x, pos.y);
|
|
this.ctx.stroke();
|
|
e.preventDefault();
|
|
};
|
|
const endDraw = () => { this.isDrawing = false; };
|
|
|
|
this.canvas.addEventListener('mousedown', startDraw);
|
|
this.canvas.addEventListener('mousemove', draw);
|
|
window.addEventListener('mouseup', endDraw);
|
|
|
|
this.canvas.addEventListener('touchstart', startDraw);
|
|
this.canvas.addEventListener('touchmove', draw);
|
|
window.addEventListener('touchend', endDraw);
|
|
},
|
|
|
|
clearSignature() {
|
|
if (!this.ctx) return;
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.toast('ล้างลายมือชื่อแล้ว', 'info');
|
|
},
|
|
|
|
async submitSoap() {
|
|
this.submitting = true;
|
|
try {
|
|
if (this.canvas) {
|
|
this.form.signature_base64 = this.canvas.toDataURL('image/png');
|
|
}
|
|
|
|
const res = await this.apiFetch('/clinical/soap', {
|
|
method: 'POST',
|
|
body: this.form
|
|
});
|
|
|
|
if (res && res.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'บันทึกเวชระเบียน SOAP เรียบร้อยแล้ว',
|
|
text: 'ข้อมูลถูกส่งซิงค์เข้าสู่ระบบ HIS โรงพยาบาล และอัปเดตสถิติความปวด VAS ในระบบเรียบร้อย',
|
|
confirmButtonText: 'กลับหน้าจัดการคิว',
|
|
confirmButtonColor: '#10b981'
|
|
}).then(() => {
|
|
window.location.href = '/queue';
|
|
});
|
|
} else {
|
|
// Demo alert
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: '🟢 [Demo] บันทึกเวชระเบียน SOAP เรียบร้อย',
|
|
html: `
|
|
<div class="text-left space-y-1 text-xs mt-2 p-3 rounded bg-slate-800/60 border border-slate-700 font-mono">
|
|
<p>• <strong>Patient:</strong> คุณสมชาย รักสุขภาพ (HN-2407001)</p>
|
|
<p>• <strong>VAS Score:</strong> Pre 7 -> Post 2 (ลดลง 5 ระดับ ✨)</p>
|
|
<p>• <strong>HIS Sync:</strong> Encounters & Observation FHIR R4 Sent</p>
|
|
<p>• <strong>Signature:</strong> OWASP Digital Signature Recorded</p>
|
|
</div>
|
|
`,
|
|
confirmButtonText: 'กลับหน้าจัดการคิว',
|
|
confirmButtonColor: '#10b981'
|
|
}).then(() => {
|
|
window.location.href = '/queue';
|
|
});
|
|
}
|
|
} catch (err) {
|
|
Swal.fire({ icon: 'error', title: 'บันทึกไม่สำเร็จ', text: err.message });
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
</script>
|