riefive
138 lines
3.6 KiB
Vue
138 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { getPatients } from '~/services/patient.service'
|
||
|
||
const openPatient = ref(false)
|
||
const openLetter = ref(false)
|
||
const openHistory = ref(false)
|
||
const selectedPatient = ref('3456512345678880')
|
||
const selectedLetter = ref('SK22334442')
|
||
|
||
// patients used by AppSepTableSearchPatient (will be filled from API)
|
||
const patients = ref<Array<{ ktp: string; rm: string; bpjs: string; nama: string }>>([
|
||
// fallback empty list until fetched
|
||
])
|
||
const isPatientsLoading = ref(false)
|
||
|
||
function mapPatientToRow(p: any) {
|
||
// Defensive mapping: try common field names that might be returned by the API
|
||
const ktp = p.ktp || p.noKtp || p.ktpNumber || p.person?.identityNo || ''
|
||
const rm = p.rm || p.noRm || p.medicalRecordNo || ''
|
||
const bpjs = p.bpjs || p.noBpjs || p.bpjsNo || ''
|
||
const nama = p.nama || p.name || p.fullName || p.person?.name || p.person?.fullName || p.person?.nama || ''
|
||
return { ktp, rm, bpjs, nama }
|
||
}
|
||
|
||
async function fetchPatients(params: any = { 'page-size': 100 }) {
|
||
try {
|
||
isPatientsLoading.value = true
|
||
const result = await getPatients(params)
|
||
if (result && result.success && result.body && Array.isArray(result.body.data)) {
|
||
patients.value = result.body.data.map(mapPatientToRow)
|
||
} else {
|
||
// fallback to empty array
|
||
patients.value = []
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to fetch patients for SEP search:', err)
|
||
patients.value = []
|
||
} finally {
|
||
isPatientsLoading.value = false
|
||
}
|
||
}
|
||
|
||
const letters = [
|
||
{
|
||
noSurat: 'SK22334442',
|
||
tglRencana: '12 Agustus 2025',
|
||
noSep: 'SEP3232332',
|
||
namaPasien: 'Ahmad Baidowi',
|
||
noBpjs: '33442331214',
|
||
klinik: 'Penyakit Dalam',
|
||
dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
|
||
},
|
||
{
|
||
noSurat: 'SK99120039',
|
||
tglRencana: '12 Agustus 2025',
|
||
noSep: 'SEP4443232',
|
||
namaPasien: 'Bian Maulana',
|
||
noBpjs: '33442367656',
|
||
klinik: 'Gigi',
|
||
dokter: 'dr. Achmad Suparjo',
|
||
},
|
||
]
|
||
|
||
const histories = [
|
||
{
|
||
no_sep: "SP23311224",
|
||
tgl_sep: "12 Agustus 2025",
|
||
no_rujukan: "123444",
|
||
diagnosis: "C34.9 – Karsinoma Paru",
|
||
pelayanan: "Rawat Jalan",
|
||
kelas: "Kelas II",
|
||
},
|
||
{
|
||
no_sep: "SP23455667",
|
||
tgl_sep: "11 Agustus 2025",
|
||
no_rujukan: "2331221",
|
||
diagnosis: "K35 – Apendisitis akut",
|
||
pelayanan: "Rawat Jalan",
|
||
kelas: "Kelas II",
|
||
},
|
||
]
|
||
|
||
function handleSavePatient() {
|
||
console.log('Pasien dipilih:', selectedPatient.value)
|
||
}
|
||
|
||
function handleSaveLetter() {
|
||
console.log('Letter dipilih:', selectedLetter.value)
|
||
}
|
||
|
||
function handleEvent(value: string) {
|
||
if (value === 'search-patient') {
|
||
// fetch patients from API then open the dialog
|
||
fetchPatients().then(() => {
|
||
openPatient.value = true
|
||
})
|
||
return
|
||
}
|
||
if (value === 'search-letter') {
|
||
openLetter.value = true
|
||
return
|
||
}
|
||
if (value === 'history-sep') {
|
||
openHistory.value = true
|
||
return
|
||
}
|
||
if (value === 'back') {
|
||
navigateTo('/bpjs/sep')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||
<Icon name="i-lucide-panel-bottom" class="me-2" />
|
||
<span class="font-semibold">Tambah</span> SEP
|
||
</div>
|
||
<AppSepEntryForm @event="handleEvent" />
|
||
<AppSepTableSearchPatient
|
||
v-model:open="openPatient"
|
||
v-model:selected="selectedPatient"
|
||
:patients="patients"
|
||
@save="handleSavePatient"
|
||
/>
|
||
<AppSepTableSearchLetter
|
||
v-model:open="openLetter"
|
||
v-model:selected="selectedLetter"
|
||
:letters="letters"
|
||
@save="handleSaveLetter"
|
||
/>
|
||
<AppSepTableHistorySep
|
||
v-model:open="openHistory"
|
||
:histories="histories"
|
||
/>
|
||
|
||
</template>
|