feat(encounter): update encounter pages
This commit is contained in:
riefive
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// Components
|
||||
import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
|
||||
import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
|
||||
import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
|
||||
|
||||
// Libraries
|
||||
import { getPositionAs } from '~/lib/roles'
|
||||
|
||||
// Types
|
||||
import type { EncounterProps } from '~/handlers/encounter-init.handler'
|
||||
|
||||
// Handlers
|
||||
import { getEncounterData } from '~/handlers/encounter-process.handler'
|
||||
import { getMenuItems } from "~/handlers/encounter-init.handler"
|
||||
|
||||
const { user, getActiveRole } = useUserStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps<{
|
||||
classCode?: EncounterProps['classCode']
|
||||
subClassCode?: EncounterProps['subClassCode']
|
||||
}>()
|
||||
|
||||
const activeRole = getActiveRole()
|
||||
const activePosition = ref(getPositionAs(activeRole))
|
||||
const menus = ref([] as any)
|
||||
const activeMenu = computed({
|
||||
get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
|
||||
set: (value: string) => {
|
||||
router.replace({ path: route.path, query: { menu: value } })
|
||||
},
|
||||
})
|
||||
|
||||
const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
const data = ref<any>(null)
|
||||
const isShowPatient = computed(() => data.value && data.value?.patient?.person)
|
||||
|
||||
if (activePosition.value === 'none') { // if user position is none, redirect to home page
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 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,
|
||||
}
|
||||
|
||||
function handleClick(type: string) {
|
||||
if (type === 'draft') {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
function initMenus() {
|
||||
menus.value = getMenuItems(id, props, user, activePosition.value, {
|
||||
status: data.value,
|
||||
medicalAssessment: data.value,
|
||||
medicalAssessmentRehab: data.value,
|
||||
functionAssessment: data.value,
|
||||
protocolTheraphy: data.value,
|
||||
protocolChemotherapy: data.value,
|
||||
medicineProtocolChemotherapy: data.value,
|
||||
consultation: data.value,
|
||||
letterOfControl: data.value,
|
||||
}, {
|
||||
protocolTheraphy: paginationMeta,
|
||||
protocolChemotherapy: paginationMeta,
|
||||
medicineProtocolChemotherapy: paginationMeta,
|
||||
})
|
||||
console.log(menus.value)
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
data.value = await getEncounterData(id)
|
||||
}
|
||||
|
||||
watch(getActiveRole, () => {
|
||||
const activeRole = getActiveRole()
|
||||
activePosition.value = getPositionAs(activeRole)
|
||||
initMenus()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getData()
|
||||
initMenus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="mb-4">
|
||||
<PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
|
||||
</div>
|
||||
<EncounterPatientInfo v-if="isShowPatient" :data="data" />
|
||||
<EncounterHistoryButtonMenu v-if="isShowPatient" />
|
||||
<SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,108 +0,0 @@
|
||||
<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 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: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
|
||||
{ value: 'patient-note', label: 'CPRJ' },
|
||||
{ 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: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
|
||||
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.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' },
|
||||
{ value: 'resume', label: 'Resume' },
|
||||
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
|
||||
{ value: 'screening', label: 'Skrinning MPP' },
|
||||
{ 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>
|
||||
@@ -1,126 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent } from 'vue'
|
||||
//
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// Components
|
||||
import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
|
||||
import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
|
||||
import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
|
||||
import { getDetail } from '~/services/encounter.service'
|
||||
|
||||
// Libraries
|
||||
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'
|
||||
|
||||
// Types
|
||||
import type { EncounterProps } from '~/handlers/encounter-init.handler'
|
||||
import { genEncounter } from '~/models/encounter'
|
||||
|
||||
// Handlers
|
||||
import { getEncounterData } from '~/handlers/encounter-process.handler'
|
||||
import { getMenuItems } from "~/handlers/encounter-init.handler"
|
||||
// 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 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 { user, getActiveRole } = useUserStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps<{
|
||||
classCode?: EncounterProps['classCode']
|
||||
subClassCode?: EncounterProps['subClassCode']
|
||||
}>()
|
||||
|
||||
const activeRole = getActiveRole()
|
||||
const activePosition = ref(getPositionAs(activeRole))
|
||||
const menus = ref([] as any)
|
||||
const activeMenu = computed({
|
||||
get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
|
||||
set: (value: string) => {
|
||||
router.replace({ path: route.path, query: { menu: value } })
|
||||
// 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<any>(null)
|
||||
const isShowPatient = computed(() => data.value && data.value?.patient?.person)
|
||||
const data = ref(genEncounter())
|
||||
|
||||
if (activePosition.value === 'none') { // if user position is none, redirect to home page
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 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,
|
||||
}
|
||||
|
||||
function handleClick(type: string) {
|
||||
if (type === 'draft') {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
function initMenus() {
|
||||
menus.value = getMenuItems(id, props, user, activePosition.value, {
|
||||
status: data.value,
|
||||
medicalAssessment: data.value,
|
||||
medicalAssessmentRehab: data.value,
|
||||
functionAssessment: data.value,
|
||||
protocolTheraphy: data.value,
|
||||
protocolChemotherapy: data.value,
|
||||
medicineProtocolChemotherapy: data.value,
|
||||
consultation: data.value,
|
||||
letterOfControl: data.value,
|
||||
}, {
|
||||
protocolTheraphy: paginationMeta,
|
||||
protocolChemotherapy: paginationMeta,
|
||||
medicineProtocolChemotherapy: paginationMeta,
|
||||
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',
|
||||
})
|
||||
console.log(menus.value)
|
||||
if(res.body?.data) data.value = res.body?.data
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
data.value = await getEncounterData(id)
|
||||
}
|
||||
|
||||
watch(getActiveRole, () => {
|
||||
const activeRole = getActiveRole()
|
||||
activePosition.value = getPositionAs(activeRole)
|
||||
initMenus()
|
||||
onMounted(() => {
|
||||
fetchDetail()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getData()
|
||||
initMenus()
|
||||
})
|
||||
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: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
|
||||
{ value: 'patient-note', label: 'CPRJ' },
|
||||
{ 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: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
|
||||
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.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' },
|
||||
{ value: 'resume', label: 'Resume' },
|
||||
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
|
||||
{ value: 'screening', label: 'Skrinning MPP' },
|
||||
{ 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" @click="handleClick" />
|
||||
<PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
|
||||
</div>
|
||||
<EncounterPatientInfo v-if="isShowPatient" :data="data" />
|
||||
<EncounterHistoryButtonMenu v-if="isShowPatient" />
|
||||
<SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
|
||||
<AppEncounterQuickInfo :data="data" />
|
||||
<CompTab
|
||||
:data="tabs"
|
||||
:initial-active-tab="activeTab"
|
||||
@change-tab="activeTab = $event"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/my-ui/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
import EncounterProcess from '~/components/content/encounter/process.vue'
|
||||
import EncounterProcess from '~/components/content/encounter/process-next.vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/my-ui/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
import EncounterProcess from '~/components/content/encounter/process.vue'
|
||||
import EncounterProcess from '~/components/content/encounter/process-next.vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/my-ui/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
import EncounterProcess from '~/components/content/encounter/process.vue'
|
||||
import EncounterProcess from '~/components/content/encounter/process-next.vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/my-ui/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
import EncounterProcess from '~/components/content/encounter/process.vue'
|
||||
import EncounterProcess from '~/components/content/encounter/process-next.vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
|
||||
Reference in New Issue
Block a user