Andrian Roshandy
@@ -1,112 +1,216 @@
|
||||
<script setup lang="ts">
|
||||
import { type HeaderPrep, ActionEvents } from '~/components/pub/my-ui/data/types'
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
|
||||
import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
|
||||
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// medicine
|
||||
// Medicine
|
||||
import { type Medicine } from '~/models/medicine'
|
||||
|
||||
// prescription
|
||||
import { getDetail } from '~/services/prescription.service'
|
||||
import { getList as getMedicineList } from '~/services/medicine.service'
|
||||
import Detail from '~/components/app/prescription/detail.vue'
|
||||
|
||||
// prescription items
|
||||
// Prescription
|
||||
import { getDetail } from '~/services/prescription.service'
|
||||
// import Detail from '~/components/app/prescription/detail.vue'
|
||||
import Entry from '~/components/app/prescription/entry.vue'
|
||||
import { remove, submit } from '~/services/prescription.service'
|
||||
|
||||
// Prescription items
|
||||
import {
|
||||
getList as getPrescriptionItemList,
|
||||
create as createPrescriptionItem,
|
||||
remove as removePrescriptionItem,
|
||||
getList as getItemList,
|
||||
create as createItem,
|
||||
update as updateItem,
|
||||
} from '~/services/prescription-item.service'
|
||||
import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
|
||||
import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
|
||||
import type { MedicinemixItem } from '~/models/medicinemix-item';
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isRecordConfirmationOpen,
|
||||
handleActionRemove,
|
||||
} from '~/handlers/prescription-item.handler'
|
||||
|
||||
import { recItem } from '~/handlers/prescription-item.handler'
|
||||
import { type PrescriptionItem, genPrescriptionItem } from '~/models/prescription-item'
|
||||
import { type MedicinemixItem } from '~/models/medicinemix-item';
|
||||
import ItemListEntry from '~/components/app/prescription-item/list-entry.vue'
|
||||
import NonMixItemEntry from '~/components/app/prescription-item/non-mix-entry.vue'
|
||||
import MixItemEntry from '~/components/app/prescription-item/mix-entry.vue'
|
||||
|
||||
// props
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
// declaration & flows
|
||||
// Prescriptions
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
const isDeleteConfirmationOpen = ref(false)
|
||||
|
||||
// Prescription Items
|
||||
const isItemDetailDialogOpen = ref(false)
|
||||
|
||||
// Prescription
|
||||
const { getQueryParam } = useQueryParam()
|
||||
const id = getQueryParam('id')
|
||||
const dataRes = await getDetail(
|
||||
typeof id === 'string' ? parseInt(id) : 0,
|
||||
{ includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
|
||||
)
|
||||
const data = dataRes.body?.data || null
|
||||
const rawId = getQueryParam('id')
|
||||
const id = typeof rawId === 'string' ? parseInt(rawId) : 0
|
||||
const dataRes = await getDetail(id, { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' })
|
||||
const data = ref(dataRes.body?.data || null)
|
||||
|
||||
// Prescription Items
|
||||
const items = ref<PrescriptionItem[]>([])
|
||||
const getItemsOpt = { 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' }
|
||||
const {
|
||||
data: items,
|
||||
isLoading,
|
||||
fetchData: getPrescriptionItems,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getItemList({
|
||||
...getItemsOpt,
|
||||
search: params.search,
|
||||
sort: 'createdAt:asc',
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'division',
|
||||
})
|
||||
|
||||
|
||||
// const items = ref<PrescriptionItem[]>([])
|
||||
const mixItem = ref<PrescriptionItem>(genPrescriptionItem())
|
||||
const medicinemixItems = ref<MedicinemixItem[]>([])
|
||||
const nonMixItem = ref<PrescriptionItem>(genPrescriptionItem())
|
||||
|
||||
mixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
|
||||
nonMixItem.value.prescription_id = typeof id === 'string' ? parseInt(id) : 0
|
||||
mixItem.value.prescription_id = id
|
||||
nonMixItem.value.prescription_id = id
|
||||
|
||||
const { backToList } = useQueryCRUDMode()
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Tambah Order Obat / Resep',
|
||||
title: 'Pembuatan Order Obat / Resep',
|
||||
icon: 'i-lucide-box',
|
||||
}
|
||||
|
||||
const mixDialogOpen = ref(false)
|
||||
const nonMixDialogOpen = ref(false)
|
||||
const mixDialogOpenStatus = ref(false)
|
||||
const nonMixDialogOpenStatus = ref(false)
|
||||
const medicines = ref<Medicine[]>([])
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch([recId, recAction], () => {
|
||||
let item: PrescriptionItem | null
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
item = pickItem()
|
||||
if (item) {
|
||||
isItemDetailDialogOpen.value = true
|
||||
}
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
item = pickItem()
|
||||
if (item) {
|
||||
if(item.isMix) {
|
||||
mixDialogOpenStatus.value = true
|
||||
} else {
|
||||
nonMixDialogOpenStatus.value = true
|
||||
}
|
||||
getMedicines('', item.medicine_code)
|
||||
}
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getItems()
|
||||
await getPrescriptionItems()
|
||||
})
|
||||
|
||||
function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
} else if (type === 'delete') {
|
||||
isDeleteConfirmationOpen.value = true
|
||||
} else if (type === 'submit') {
|
||||
isSubmitConfirmationOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function removePrescription() {
|
||||
const res = await remove(id)
|
||||
if (res.success) {
|
||||
backToList()
|
||||
}
|
||||
// handleActionRemove(recId.value, getItems, toast)
|
||||
}
|
||||
|
||||
async function submitPrescription() {
|
||||
const res = await submit(id)
|
||||
if (res.success) {
|
||||
backToList()
|
||||
}
|
||||
// handleActionRemove(recId.value, getItems, toast)
|
||||
}
|
||||
|
||||
function addItem(mode: 'mix' | 'non-mix') {
|
||||
if (mode === 'mix') {
|
||||
mixDialogOpen.value = true
|
||||
mixDialogOpenStatus.value = true
|
||||
} else if (mode === 'non-mix') {
|
||||
nonMixDialogOpen.value = true
|
||||
nonMixDialogOpenStatus.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function saveMix() {
|
||||
createPrescriptionItem(mixItem.value)
|
||||
}
|
||||
|
||||
function saveNonMix() {
|
||||
createPrescriptionItem(nonMixItem.value)
|
||||
}
|
||||
|
||||
async function getItems() {
|
||||
const res = await getPrescriptionItemList({ 'prescription-id': id, includes: 'medicine,medicine-medicineForm,medicineMix' })
|
||||
async function saveMix() {
|
||||
const res = await createItem(mixItem.value)
|
||||
if (res.success) {
|
||||
items.value = res.body.data
|
||||
} else {
|
||||
items.value = []
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
getPrescriptionItems()
|
||||
mixDialogOpenStatus.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function getMedicines(value: string) {
|
||||
const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm' })
|
||||
async function saveNonMix() {
|
||||
let res: any;
|
||||
if(!nonMixItem.value.id) {
|
||||
res = await createItem(nonMixItem.value)
|
||||
} else {
|
||||
res = await updateItem(nonMixItem.value.id, nonMixItem.value)
|
||||
}
|
||||
if (res.success) {
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
getPrescriptionItems()
|
||||
nonMixDialogOpenStatus.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function getMedicines(value: string, code?: string) {
|
||||
const res = await getMedicineList({ 'search': value, 'includes': 'medicineForm', 'code': code })
|
||||
if (res.success) {
|
||||
medicines.value = res.body.data
|
||||
} else {
|
||||
medicines.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function pickItem(): PrescriptionItem | null {
|
||||
const item = items.value.find(item => item.id === recId.value)
|
||||
if (!item) {
|
||||
return null
|
||||
}
|
||||
if(item.isMix) {
|
||||
mixItem.value = item
|
||||
} else {
|
||||
nonMixItem.value = item
|
||||
}
|
||||
return item
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -116,20 +220,49 @@ async function getMedicines(value: string) {
|
||||
class="mb-4 xl:mb-5"
|
||||
/>
|
||||
|
||||
<Detail :data="data" />
|
||||
<Entry :data="data" />
|
||||
|
||||
<!-- <div class="mb-8">
|
||||
<Button>
|
||||
<Icon name="i-lucide-check" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div> -->
|
||||
|
||||
<ItemListEntry
|
||||
:data="items"
|
||||
@add="addItem"/>
|
||||
|
||||
<Separator class="my-5" />
|
||||
|
||||
<div class="w-full flex justify-center">
|
||||
<Nav @click="navClick" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm delete -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isDeleteConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="removePrescription()"
|
||||
/>
|
||||
|
||||
<!-- Confirm submit -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isSubmitConfirmationOpen"
|
||||
action="delete"
|
||||
customTitle="Ajukan Resep"
|
||||
customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
|
||||
customConfirmText="Ajukan"
|
||||
:record="recItem"
|
||||
@confirm="submitPrescription"
|
||||
@cancel=""
|
||||
/>
|
||||
|
||||
<!-- Mix form -->
|
||||
<Dialog
|
||||
v-model:open="mixDialogOpen"
|
||||
:title="recItem?.id ? 'Edit Racikan' : 'Tambah Racikan'"
|
||||
v-model:open="mixDialogOpenStatus"
|
||||
title="Pembuatan Racikan"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
@@ -137,24 +270,97 @@ async function getMedicines(value: string) {
|
||||
:data="mixItem"
|
||||
:items="medicinemixItems"
|
||||
:medicines="medicines"
|
||||
@close="mixDialogOpen = false"
|
||||
@close="mixDialogOpenStatus = false"
|
||||
@save="saveMix"
|
||||
@update:searchText="getMedicines"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<!-- Non mix form -->
|
||||
<Dialog
|
||||
v-model:open="nonMixDialogOpen"
|
||||
:title="recItem?.id ? 'Edit Non Racikan' : 'Tambah Non Racikan'"
|
||||
v-model:open="nonMixDialogOpenStatus"
|
||||
title="Pembuatan Non Racikan"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
<NonMixItemEntry
|
||||
:data="nonMixItem"
|
||||
:medicines="medicines"
|
||||
@close="mixDialogOpen = false"
|
||||
@close="mixDialogOpenStatus = false"
|
||||
@save="saveNonMix"
|
||||
@update:searchText="getMedicines"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<!-- Detail item -->
|
||||
<Dialog
|
||||
v-model:open="isItemDetailDialogOpen"
|
||||
title="Detail Obat"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
<DE.Block mode="preview" label-size="small">
|
||||
<DE.Cell>
|
||||
<DE.Label>Nama</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.medicine.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Dosis</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.dose }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Sediaan</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.medicine.medicineForm.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Jumlah</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.quantity }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Cara Pakai</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.Usage }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</Dialog>
|
||||
|
||||
<!-- Confirm delete items -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getPrescriptionItems, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p>
|
||||
<strong>ID:</strong>
|
||||
{{ record?.id }}
|
||||
</p>
|
||||
<p v-if="record?.name">
|
||||
<strong>Nama:</strong>
|
||||
{{ record.name }}
|
||||
</p>
|
||||
<p v-if="record?.code">
|
||||
<strong>Kode:</strong>
|
||||
{{ record.code }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
|
||||
// Pubs component
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
|
||||
@@ -14,7 +14,6 @@ import {
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
handleActionRemove,
|
||||
handleActionSave,
|
||||
@@ -112,68 +111,6 @@ provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
// Watch for row actions when recId or recAction changes
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
getMyDetail(recId.value)
|
||||
isReadonly.value = true
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
getMyDetail(recId.value)
|
||||
isReadonly.value = false
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// watch([isFormEntryDialogOpen], async () => {
|
||||
// if (isFormEntryDialogOpen.value) {
|
||||
// }
|
||||
// })
|
||||
|
||||
// Functions
|
||||
const getMyDetail = async (id: number | string) => {
|
||||
const result = await getDetail(id)
|
||||
if (result.success) {
|
||||
const currentValue = result.body?.data || {}
|
||||
recItem.value = currentValue
|
||||
isFormEntryDialogOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for row actions when recId or recAction changes
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
getMyDetail(recId.value)
|
||||
title.value = 'Detail Konsultasi'
|
||||
isReadonly.value = true
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
getMyDetail(recId.value)
|
||||
title.value = 'Edit Konsultasi'
|
||||
isReadonly.value = false
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
watch([isFormEntryDialogOpen], async () => {
|
||||
if (isFormEntryDialogOpen.value) {
|
||||
isFormEntryDialogOpen.value = false;
|
||||
const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
|
||||
if (saveResp.success) {
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
'id': saveResp.body?.data?.id.toString()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function confirmCancel(data: Prescription) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
@@ -235,15 +172,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
|
||||
@confirm="() => handleActionRemove(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="w-40">Tanggal</div>
|
||||
<div class="w-5 text-cneter">:</div>
|
||||
<div class="">:</div>
|
||||
<div class="flex mb-2">
|
||||
<div class="w-20">Tanggal</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.createdAt.substring(0, 10) }}</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="w-40">Tanggal</div>
|
||||
<div class="w-5 text-cneter">:</div>
|
||||
<div class="">:</div>
|
||||
<div class="w-20">DPJP</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
|
||||
</div>
|
||||
</RecordConfirmation>
|
||||
|
||||
@@ -257,5 +194,15 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
|
||||
@confirm="() => handleActionSubmit(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<div class="flex mb-2">
|
||||
<div class="w-20">Tanggal</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.createdAt.substring(0, 10) }}</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="w-20">DPJP</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
|
||||
</div>
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user