Abizrh
101 lines
3.5 KiB
Vue
101 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import AssesmentFunctionList from './assesment-function/list.vue'
|
|
|
|
interface TabItem {
|
|
value: string
|
|
label: string
|
|
component?: any
|
|
props?: Record<string, any>
|
|
}
|
|
|
|
const tabs: TabItem[] = [
|
|
{ value: 'status', label: 'Status Masuk/Keluar' },
|
|
{ value: 'medis', label: 'Pengkajian Awal Medis' },
|
|
{ value: 'rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
|
|
{ value: 'fungsi', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
|
|
{ value: 'protokol', label: 'Protokol Terapi' },
|
|
{ value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
|
|
{ value: 'consent', label: 'General Consent' },
|
|
{ value: 'cprj', label: 'CPRJ' },
|
|
{ value: 'obat', label: 'Order Obat' },
|
|
{ value: 'alkes', label: 'Order Alkes' },
|
|
{ value: 'radiologi', label: 'Order Radiologi' },
|
|
{ value: 'labpk', label: 'Order Lab PK' },
|
|
{ value: 'labmikro', label: 'Order Lab Mikro' },
|
|
{ value: 'labpa', label: 'Order Lab PA' },
|
|
{ value: 'ruangtindakan', label: 'Order Ruang Tindakan' },
|
|
{ value: 'hasil', label: 'Hasil Penunjang' },
|
|
{ value: 'konsultasi', label: 'Konsultasi' },
|
|
{ value: 'resume', label: 'Resume' },
|
|
{ value: 'kontrol', label: 'Surat Kontrol' },
|
|
{ value: 'skrining', label: 'Skrinning MPP' },
|
|
{ value: 'upload', label: 'Upload Dokumen Pendukung' },
|
|
]
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// activeTab selalu sinkron dengan hash (#fungsi, #status, dll)
|
|
const activeTab = computed({
|
|
get: () => (route.hash ? route.hash.substring(1) : 'fungsi'),
|
|
set: (val: string) => {
|
|
router.replace({ hash: `#${val}` }) // <-- tambahin '#' disini
|
|
},
|
|
})
|
|
|
|
const data = {
|
|
noRm: 'RM21123',
|
|
nama: 'Ahmad Sutanto',
|
|
alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
|
|
tanggalKunjungan: '23 April 2024',
|
|
klinik: 'Bedah',
|
|
tanggalLahir: '23 April 1990 (25 Tahun)',
|
|
jenisKelamin: 'Laki-laki',
|
|
jenisPembayaran: 'JKN',
|
|
noBilling: '223332',
|
|
dpjp: 'dr. Syaifullah, Sp.OT(K)',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="mb-4">
|
|
<button
|
|
class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Kembali ke Daftar Kunjungan
|
|
</button>
|
|
</div>
|
|
|
|
<AppPatientQuickInfo :data="data" />
|
|
|
|
<!-- Tabs -->
|
|
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
:data-active="activeTab === tab.value"
|
|
class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium transition data-[active=false]:bg-gray-100 data-[active=true]:bg-green-600 data-[active=false]:text-gray-700 data-[active=true]:text-white"
|
|
@click="activeTab = tab.value"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Active Tab Content -->
|
|
<div class="mt-4 rounded-md border p-4">
|
|
<component
|
|
:is="tabs.find((t) => t.value === activeTab)?.component"
|
|
v-if="tabs.find((t) => t.value === activeTab)?.component"
|
|
v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
|
|
:label="tabs.find((t) => t.value === activeTab)?.label"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|