7ee6f40196
feat(treatment-report): add treatment report component with sample data Implement new treatment report feature including list view component, sample data, and configuration. The component supports pagination, filtering by date range, and search functionality. Also integrates with encounter process and home views. wip: init form and schema
123 lines
4.9 KiB
Vue
123 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
//
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
import { getDetail } from '~/services/encounter.service'
|
|
|
|
//
|
|
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
|
|
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
|
|
|
|
import { genEncounter } from '~/models/encounter'
|
|
|
|
// PLASE ORDER BY TAB POSITION
|
|
import Status from '~/components/content/encounter/status.vue'
|
|
import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
|
|
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
|
|
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
|
|
import DeviceOrder from '~/components/content/device-order/main.vue'
|
|
import Prescription from '~/components/content/prescription/main.vue'
|
|
import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
|
|
import Radiology from '~/components/content/radiology-order/main.vue'
|
|
import Consultation from '~/components/content/consultation/list.vue'
|
|
import Cprj from '~/components/content/cprj/entry.vue'
|
|
import TreatmentReport from '~/components/content/treatment-report/list.vue'
|
|
import DocUploadList from '~/components/content/document-upload/list.vue'
|
|
import GeneralConsentList from '~/components/content/general-consent/entry.vue'
|
|
import ResumeList from '~/components/content/resume/list.vue'
|
|
import ControlLetterList from '~/components/content/control-letter/list.vue'
|
|
|
|
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 } })
|
|
},
|
|
})
|
|
|
|
const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
|
const data = ref(genEncounter())
|
|
|
|
async function fetchDetail() {
|
|
const res = await getDetail(id, {
|
|
includes:
|
|
'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
|
|
})
|
|
if (res.body?.data) data.value = res.body?.data
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDetail()
|
|
})
|
|
|
|
const tabs: TabItem[] = [
|
|
{ value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
|
|
{
|
|
value: 'early-medical-assessment',
|
|
label: 'Pengkajian Awal Medis',
|
|
component: EarlyMedicalAssesmentList,
|
|
props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
|
|
},
|
|
{
|
|
value: 'rehab-medical-assessment',
|
|
label: 'Pengkajian Awal Medis Rehabilitasi Medis',
|
|
component: EarlyMedicalRehabList,
|
|
props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
|
|
},
|
|
{
|
|
value: 'function-assessment',
|
|
label: 'Asesmen Fungsi',
|
|
component: AssesmentFunctionList,
|
|
props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
|
|
},
|
|
{ value: 'therapy-protocol', label: 'Protokol Terapi' },
|
|
{ value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
|
|
{ value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
|
|
{ value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
|
|
{ value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
|
|
{ value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
|
|
{ value: 'device', label: 'Order Alkes' },
|
|
{ value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
|
|
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
|
|
{ value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
|
|
{ value: 'mcu-lab-pa', label: 'Order Lab PA' },
|
|
{ value: 'medical-action', label: 'Order Ruang Tindakan' },
|
|
{ value: 'mcu-result', label: 'Hasil Penunjang' },
|
|
{ value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
|
|
{ value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
|
|
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
|
|
{ value: 'screening', label: 'Skrinning MPP' },
|
|
{
|
|
value: 'report',
|
|
label: 'Laporan Tindakan',
|
|
groups: ['ambulatory', 'rehabilitation', 'chemotherapy'],
|
|
component: TreatmentReport,
|
|
props: { encounter: data },
|
|
},
|
|
{
|
|
value: 'supporting-document',
|
|
label: 'Upload Dokumen Pendukung',
|
|
component: DocUploadList,
|
|
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>
|