✨ feat (rehab): implement rehab registration home component
This commit is contained in:
Abizrh
@@ -59,10 +59,13 @@ onMounted(() => {
|
||||
watch(
|
||||
() => recAction.value,
|
||||
() => {
|
||||
console.log('recAction.value', recAction.value)
|
||||
if (recAction.value === 'showDetail') {
|
||||
navigateTo(`/rehab/encounter/${recId.value}/detail`)
|
||||
} else if (recAction.value === 'showEdit') {
|
||||
navigateTo(`/rehab/encounter/${recId.value}/edit`)
|
||||
} else if (recAction.value === 'showProcess') {
|
||||
navigateTo(`/rehab/encounter/${recId.value}/process`)
|
||||
} else {
|
||||
// handle other actions
|
||||
}
|
||||
|
||||
@@ -1,57 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import ListProsedur from './sep-prosedur/list.vue'
|
||||
|
||||
const tabs = [
|
||||
{ value: 'sep-prosedur', label: 'Sep Prosedur', component: ListProsedur },
|
||||
{ value: 'konsultasi', label: 'Konsultasi' },
|
||||
{ value: 'surat', label: 'Surat Kontrol' },
|
||||
{ value: 'catatan', label: 'Catatan Perkembangan Pasien' },
|
||||
{ value: 'medis', label: 'Pengkajian Awal Medis & Asesmen Fungsi' },
|
||||
{ value: 'keperawatan', label: 'Pengkajian Awal Keperawatan' },
|
||||
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: ListProsedur },
|
||||
{ value: 'protokol', label: 'Protokol Terapi' },
|
||||
{ value: 'tindakan', label: 'Tindakan' },
|
||||
{ value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
|
||||
{ value: 'consent', label: 'General Consent' },
|
||||
{ value: 'cprj', label: 'CPRJ' },
|
||||
{ value: 'obat', label: 'Order Obat' },
|
||||
{ value: 'bmhp', label: 'Order BMHP & Alkes' },
|
||||
{ value: 'radiologi', label: 'Pemeriksaan Radiologi' },
|
||||
{ value: 'labpk', label: 'Pemeriksaan Lab PK' },
|
||||
{ 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: 'ambulance', label: 'Ambulance' },
|
||||
{ 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 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)',
|
||||
}
|
||||
|
||||
const activeTab = ref('fungsi')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs default-value="sep-prosedur" class="w-full">
|
||||
<div class="scrollbar-hide overflow-x-auto">
|
||||
<TabsList class="inline-flex gap-2 whitespace-nowrap bg-transparent p-2">
|
||||
<TabsTrigger
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
:value="tab.value"
|
||||
class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<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>
|
||||
|
||||
<div class="mt-4">
|
||||
<TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
|
||||
<div class="rounded-md border p-4">
|
||||
<component :is="tab.component" v-bind="tab.props || {}" :label="tab.label" />
|
||||
</div>
|
||||
</TabsContent>
|
||||
<AppPatientQuickInfo :data="data" />
|
||||
<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>
|
||||
</Tabs>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user