107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
// Types
|
|
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
|
|
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
|
|
|
// Components
|
|
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
|
|
import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
|
|
|
|
// Services
|
|
import { getDetail } from '~/services/encounter.service'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// 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 } })
|
|
},
|
|
})
|
|
|
|
// 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: PaginationMeta = {
|
|
recordCount: protocolRows.length,
|
|
page: 1,
|
|
pageSize: 10,
|
|
totalPage: 1,
|
|
hasNext: false,
|
|
hasPrev: false,
|
|
}
|
|
|
|
const tabs: TabItem[] = [
|
|
{ value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
|
|
{ value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi' },
|
|
]
|
|
|
|
onMounted(async () => {
|
|
// const id = typeof route.query.id == 'string' ? parseInt(route.query.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
|
|
// data.value = dataResBody?.data ?? null
|
|
})
|
|
</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>
|