316 lines
9.6 KiB
Vue
316 lines
9.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
import { getDetail } from '~/services/encounter.service'
|
|
import { getPositionAs } from '~/lib/roles'
|
|
|
|
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
|
|
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
|
|
|
|
// PLASE ORDER BY TAB POSITION
|
|
import Status from '~/components/content/encounter/status.vue'
|
|
import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
|
|
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
|
|
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
|
|
import PrescriptionList from '~/components/content/prescription/list.vue'
|
|
import Consultation from '~/components/content/consultation/list.vue'
|
|
import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
|
|
import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'
|
|
|
|
const authStore = useUserStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const activeRole = authStore.getActiveRole()
|
|
const activePosition = getPositionAs(activeRole)
|
|
const props = defineProps<{
|
|
classCode?: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
|
|
subClassCode?: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
|
|
}>()
|
|
|
|
// activeTab selalu sinkron dengan query param
|
|
const activeTab = computed({
|
|
get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
|
|
set: (val: string) => {
|
|
router.replace({ path: route.path, query: { tab: val } })
|
|
},
|
|
})
|
|
|
|
const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
|
// const dataRes = await getDetail(id, {
|
|
// includes:
|
|
// 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
|
|
// })
|
|
// const dataResBody = dataRes.body ?? null
|
|
// const data = dataResBody?.data ?? null
|
|
|
|
// Dummy data so AppEncounterQuickInfo can render in development/storybook
|
|
// Replace with real API result when available (see commented fetch below)
|
|
const data = ref<any>({
|
|
patient: {
|
|
number: 'RM-2025-0001',
|
|
person: {
|
|
name: 'John Doe',
|
|
birthDate: '1980-01-01T00:00:00Z',
|
|
gender_code: 'M',
|
|
addresses: [{ address: 'Jl. Contoh No.1, Jakarta' }],
|
|
frontTitle: '',
|
|
endTitle: '',
|
|
},
|
|
},
|
|
visitDate: new Date().toISOString(),
|
|
unit: { name: 'Onkologi' },
|
|
responsible_doctor: null,
|
|
appointment_doctor: { employee: { person: { name: 'Dr. Clara Smith', frontTitle: 'Dr.', endTitle: 'Sp.OG' } } },
|
|
})
|
|
|
|
// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
|
|
const protocolRows = [
|
|
{
|
|
number: '1',
|
|
tanggal: new Date().toISOString().substring(0, 10),
|
|
siklus: 'I',
|
|
periode: 'Siklus I',
|
|
kehadiran: 'Hadir',
|
|
action: '',
|
|
},
|
|
{
|
|
number: '2',
|
|
tanggal: new Date().toISOString().substring(0, 10),
|
|
siklus: 'II',
|
|
periode: 'Siklus II',
|
|
kehadiran: 'Tidak Hadir',
|
|
action: '',
|
|
},
|
|
]
|
|
|
|
const paginationMeta = {
|
|
recordCount: protocolRows.length,
|
|
page: 1,
|
|
pageSize: 10,
|
|
totalPage: 1,
|
|
hasNext: false,
|
|
hasPrev: false,
|
|
}
|
|
|
|
const tabsRaws: TabItem[] = [
|
|
{
|
|
value: 'status',
|
|
label: 'Status Masuk/Keluar',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'chemo', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: Status,
|
|
props: { encounter: data },
|
|
},
|
|
{
|
|
value: 'early-medical-assessment',
|
|
label: 'Pengkajian Awal Medis',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'chemo', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: EarlyMedicalAssesmentList,
|
|
},
|
|
{
|
|
value: 'rehab-medical-assessment',
|
|
label: 'Pengkajian Awal Medis Rehabilitasi Medis',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'chemo', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: EarlyMedicalRehabList,
|
|
},
|
|
{
|
|
value: 'function-assessment',
|
|
label: 'Asesmen Fungsi',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: AssesmentFunctionList,
|
|
},
|
|
{
|
|
value: 'therapy-protocol',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory'],
|
|
subClassCode: ['rehab'],
|
|
label: 'Protokol Terapi',
|
|
},
|
|
{
|
|
value: 'chemotherapy-protocol',
|
|
label: 'Protokol Kemoterapi',
|
|
groups: ['medical', 'verificator'],
|
|
classCode: ['ambulatory'],
|
|
subClassCode: ['chemo'],
|
|
component: ProtocolList,
|
|
props: { data: protocolRows, paginationMeta },
|
|
},
|
|
{
|
|
value: 'chemotherapy-medicine',
|
|
label: 'Protokol Obat Kemoterapi',
|
|
groups: ['medical', 'verificator'],
|
|
classCode: ['ambulatory'],
|
|
subClassCode: ['chemo'],
|
|
component: MedicineProtocolList,
|
|
props: { data: protocolRows, paginationMeta },
|
|
},
|
|
{
|
|
value: 'report',
|
|
label: 'Laporan Tindakan',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory'],
|
|
subClassCode: ['chemo'],
|
|
},
|
|
{
|
|
value: 'patient-note',
|
|
label: 'CPRJ',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'education-assessment',
|
|
label: 'Asesmen Kebutuhan Edukasi',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'consent',
|
|
label: 'General Consent',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'patient-note',
|
|
label: 'CPRJ',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'prescription',
|
|
label: 'Order Obat',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: PrescriptionList,
|
|
},
|
|
{
|
|
value: 'device',
|
|
label: 'Order Alkes',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'mcu-radiology',
|
|
label: 'Order Radiologi',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'mcu-lab-pc',
|
|
label: 'Order Lab PK',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'mcu-lab-micro',
|
|
label: 'Order Lab Mikro',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'mcu-lab-pa',
|
|
label: 'Order Lab PA',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'medical-action',
|
|
label: 'Order Ruang Tindakan',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'mcu-result',
|
|
label: 'Hasil Penunjang',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'consultation',
|
|
label: 'Konsultasi',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
component: Consultation,
|
|
props: { encounter: data },
|
|
},
|
|
{
|
|
value: 'resume',
|
|
label: 'Resume',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'control',
|
|
label: 'Surat Kontrol',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'screening',
|
|
label: 'Skrinning MPP',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
{
|
|
value: 'supporting-document',
|
|
label: 'Upload Dokumen Pendukung',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory'],
|
|
subClassCode: ['rehab'],
|
|
},
|
|
{
|
|
value: 'price-list',
|
|
label: 'Tarif Tindakan',
|
|
groups: ['medical'],
|
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
|
subClassCode: ['reg', 'rehab', 'emg', 'eon', 'op', 'icu', 'hcu', 'vk'],
|
|
},
|
|
]
|
|
|
|
const tabs = computed(() => {
|
|
return tabsRaws
|
|
.filter((tab: TabItem) => (tab.groups ? tab.groups.some((group: string) => group?.includes(activePosition)) : true))
|
|
.map((tab: TabItem) => {
|
|
return { ...tab, props: { ...tab.props, encounter: data } }
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="mb-4">
|
|
<PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
|
|
</div>
|
|
<AppEncounterQuickInfo :data="data" />
|
|
<CompTab
|
|
:data="tabs"
|
|
:initial-active-tab="activeTab"
|
|
@change-tab="activeTab = $event"
|
|
/>
|
|
</div>
|
|
</template>
|