Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/laporan-tindakan-185
This commit is contained in:
Khafid Prayoga
@@ -0,0 +1,28 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}],
|
||||
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama' }]],
|
||||
|
||||
keys: ['code', 'name'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
},
|
||||
|
||||
components: {
|
||||
},
|
||||
|
||||
htmls: {
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
// Pub components
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
|
||||
// Configs
|
||||
import { config } from './list.cfg'
|
||||
|
||||
defineProps<{
|
||||
data: any[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<DataTable v-bind="config" :rows="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,32 +13,39 @@ const activeServicePosition = inject<Ref<string>>('activeServicePosition')! // p
|
||||
|
||||
const activeKey = ref<string | null>(null)
|
||||
const linkItemsFiltered = ref<LinkItem[]>([])
|
||||
|
||||
const baseLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Detail',
|
||||
value: 'detail',
|
||||
groups: ['medical', 'registration'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showDetail)
|
||||
},
|
||||
icon: 'i-lucide-eye',
|
||||
},
|
||||
]
|
||||
|
||||
const medicalLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Edit',
|
||||
value: 'edit',
|
||||
groups: ['registration'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showEdit)
|
||||
},
|
||||
icon: 'i-lucide-pencil',
|
||||
},
|
||||
{
|
||||
label: 'Process',
|
||||
value: 'process',
|
||||
groups: ['medical'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showProcess)
|
||||
},
|
||||
icon: 'i-lucide-shuffle',
|
||||
},
|
||||
]
|
||||
|
||||
const regLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Print',
|
||||
value: 'print',
|
||||
groups: ['registration'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showPrint)
|
||||
},
|
||||
@@ -47,6 +54,7 @@ const regLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Batalkan',
|
||||
value: 'cancel',
|
||||
groups: ['registration'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showCancel)
|
||||
},
|
||||
@@ -55,6 +63,7 @@ const regLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Hapus',
|
||||
value: 'remove',
|
||||
groups: ['registration'],
|
||||
onClick: () => {
|
||||
proceedItem(ActionEvents.showConfirmDelete)
|
||||
},
|
||||
@@ -62,7 +71,7 @@ const regLinkItems: LinkItem[] = [
|
||||
},
|
||||
]
|
||||
|
||||
const voidLinkItems: LinkItem[] = [
|
||||
const noneLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Nothing',
|
||||
value: 'nothing',
|
||||
@@ -72,12 +81,6 @@ const voidLinkItems: LinkItem[] = [
|
||||
|
||||
linkItemsFiltered.value = [...baseLinkItems]
|
||||
|
||||
getLinks()
|
||||
|
||||
watch(activeServicePosition, () => {
|
||||
getLinks()
|
||||
})
|
||||
|
||||
function proceedItem(action: string) {
|
||||
recId.value = props.rec.id || 0
|
||||
recItem.value = props.rec
|
||||
@@ -87,18 +90,24 @@ function proceedItem(action: string) {
|
||||
function getLinks() {
|
||||
switch (activeServicePosition.value) {
|
||||
case 'medical':
|
||||
linkItemsFiltered.value = [...baseLinkItems, ...medicalLinkItems]
|
||||
linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('medical'))
|
||||
break
|
||||
case 'registration':
|
||||
linkItemsFiltered.value = [...baseLinkItems, ...regLinkItems]
|
||||
case 'unit|resp':
|
||||
linkItemsFiltered.value = [...baseLinkItems]
|
||||
linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('registration'))
|
||||
break
|
||||
default:
|
||||
linkItemsFiltered.value = voidLinkItems
|
||||
linkItemsFiltered.value = noneLinkItems
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
watch(activeServicePosition, () => {
|
||||
getLinks()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getLinks()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -23,22 +23,25 @@ import { paymentMethodCodes } from '~/const/key-val/common'
|
||||
|
||||
// App things
|
||||
import { genEncounter, type Encounter } from '~/models/encounter'
|
||||
import { se } from 'date-fns/locale'
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
mode?: string
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
isSepValid?: boolean
|
||||
isMemberValid?: boolean
|
||||
isCheckingSep?: boolean
|
||||
doctorItems?: CB.Item[]
|
||||
selectedDoctor: Doctor
|
||||
// subSpecialist?: any[]
|
||||
// specialists?: TreeItem[]
|
||||
// paymentMethods: PaymentMethodCode[]
|
||||
payments?: any[]
|
||||
participantGroups?: any[]
|
||||
seps: any[]
|
||||
patient?: PatientEntity | null | undefined
|
||||
// objects?: any
|
||||
objects?: any
|
||||
}>()
|
||||
|
||||
// Model
|
||||
@@ -46,7 +49,7 @@ const model = defineModel<Encounter>()
|
||||
model.value = genEncounter()
|
||||
|
||||
// Common preparation
|
||||
const defaultCBItems = [{ label: 'Pilih', value: '' }];
|
||||
const defaultCBItems = [{ label: 'Pilih', value: '' }]
|
||||
const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
|
||||
|
||||
// Emit preparation
|
||||
@@ -73,86 +76,75 @@ const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
|
||||
const [patientName, patientNameAttrs] = defineField('patientName')
|
||||
const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
|
||||
const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
|
||||
const [sepFile, sepFileAttrs] = defineField('sepFile')
|
||||
const [sippFile, sippFileAttrs] = defineField('sippFile')
|
||||
const patientId = ref('')
|
||||
const sepReference = ref('')
|
||||
const sepControlDate = ref('')
|
||||
const sepTrafficStatus = ref('')
|
||||
const diagnosis = ref('')
|
||||
const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
|
||||
const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
|
||||
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
|
||||
const mode = props.mode !== undefined ? props.mode : 'add'
|
||||
// SEP validation state from props
|
||||
const isSepValid = computed(() => props.isSepValid || false)
|
||||
const isCheckingSep = computed(() => props.isCheckingSep || false)
|
||||
const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
|
||||
const isDateLoading = ref(false)
|
||||
const debouncedSepNumber = refDebounced(sepNumber, 500)
|
||||
const debouncedCardNumber = refDebounced(cardNumber, 500)
|
||||
const sepFileReview = ref<any>(null)
|
||||
const sippFileReview = ref<any>(null)
|
||||
const unitFullName = ref('') // Unit, specialist, subspecialist
|
||||
const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
|
||||
|
||||
// Unit, specialist, subspecialist
|
||||
const unitFullName = ref('')
|
||||
watch(() => props.selectedDoctor, (doctor) => {
|
||||
unitFullName.value = doctor.subspecialist?.name ??
|
||||
doctor.specialist?.name ??
|
||||
doctor.unit?.name ??
|
||||
'tidak diketahui'
|
||||
if (mode === 'add') {
|
||||
// Set default sepDate to current date in YYYY-MM-DD format
|
||||
const today = new Date()
|
||||
const year = today.getFullYear()
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(today.getDate()).padStart(2, '0')
|
||||
registerDate.value = `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.selectedDoctor,
|
||||
(doctor) => {
|
||||
unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
|
||||
model.value!.unit_code = doctor.unit_code || ''
|
||||
model.value!.specialist_code = doctor.specialist_code || ''
|
||||
model.value!.subspecialist_code = doctor.subspecialist_code || ''
|
||||
},
|
||||
)
|
||||
// const doctorOpts = computed(() => {
|
||||
// const defaultOption = [{ label: 'Pilih', value: '' }]
|
||||
// const doctors = props.doctors || []
|
||||
// return [...defaultOption, ...doctors]
|
||||
// })
|
||||
// watch(doctorCode, (newValue) => {
|
||||
// // doctor.value = props.doctors?.find(doc => doc.code === newValue)
|
||||
// unitFullName.value = doctor.value?.subspecialist?.name ??
|
||||
// doctor.value?.specialist?.name ??
|
||||
// doctor.value?.unit?.name ??
|
||||
// 'tidak diketahui'
|
||||
// model.value!.responsible_doctor_code = doctor.value?.code
|
||||
// // const unitName = selectedDoctor?.specialist?.name || ''
|
||||
// // emit('event', 'unit-changed', unitName)
|
||||
// })
|
||||
|
||||
const isJKNPayment = computed(() => paymentMethodCode.value === 'jkn')
|
||||
|
||||
// async function onFetchChildren(parentId: string): Promise<void> {
|
||||
// console.log('onFetchChildren', parentId)
|
||||
// }
|
||||
|
||||
// Watch specialist/subspecialist selection to fetch doctors
|
||||
// watch(subSpecialistCode, async (newValue) => {
|
||||
// if (newValue) {
|
||||
// console.log('SubSpecialist changed:', newValue)
|
||||
// // Reset doctor selection
|
||||
// doctorCode.value = ''
|
||||
// // Emit fetch event to parent
|
||||
// emit('fetch', { subSpecialistCode: newValue })
|
||||
// }
|
||||
// })
|
||||
|
||||
// Debounced SEP number watcher: emit change only after user stops typing
|
||||
const debouncedSepNumber = refDebounced(sepNumber, 500)
|
||||
watch(debouncedSepNumber, (newValue) => {
|
||||
emit('event', 'sep-number-changed', newValue)
|
||||
})
|
||||
|
||||
// Sync props to form fields
|
||||
// watch(
|
||||
// () => props.objects,
|
||||
// (objects) => {
|
||||
// if (objects && Object.keys(objects).length > 0) {
|
||||
// patientName.value = objects?.patientName || ''
|
||||
// nationalIdentity.value = objects?.nationalIdentity || ''
|
||||
// medicalRecordNumber.value = objects?.medicalRecordNumber || ''
|
||||
// doctorCode.value = objects?.doctorCode || ''
|
||||
// subSpecialistCode.value = objects?.subSpecialistCode || ''
|
||||
// registerDate.value = objects?.registerDate || ''
|
||||
// paymentMethodCode.value = objects?.paymentMethodCode || ''
|
||||
// patientCategory.value = objects?.patientCategory || ''
|
||||
// cardNumber.value = objects?.cardNumber || ''
|
||||
// sepType.value = objects?.sepType || ''
|
||||
// sepNumber.value = objects?.sepNumber || ''
|
||||
// }
|
||||
// },
|
||||
// { deep: true, immediate: true },
|
||||
// )
|
||||
watch(
|
||||
() => props.objects,
|
||||
(objects) => {
|
||||
if (objects && Object.keys(objects).length > 0) {
|
||||
patientName.value = objects?.patientName || ''
|
||||
nationalIdentity.value = objects?.nationalIdentity || ''
|
||||
medicalRecordNumber.value = objects?.medicalRecordNumber || ''
|
||||
doctorCode.value = objects?.doctorCode || ''
|
||||
paymentMethodCode.value = objects?.paymentMethodCode || ''
|
||||
patientCategory.value = objects?.patientCategory || ''
|
||||
cardNumber.value = objects?.cardNumber || ''
|
||||
sepType.value = objects?.sepType || ''
|
||||
sepNumber.value = objects?.sepNumber || ''
|
||||
sepFileReview.value = objects?.sepFileReview || ''
|
||||
sippFileReview.value = objects?.sippFileReview || ''
|
||||
isDateLoading.value = true
|
||||
setTimeout(() => {
|
||||
registerDate.value = objects?.registerDate || ''
|
||||
isDateLoading.value = false
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.patient,
|
||||
@@ -167,46 +159,69 @@ watch(
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.isSepValid,
|
||||
(value) => {
|
||||
if (!value) return
|
||||
const objects = props.objects
|
||||
if (objects && Object.keys(objects).length > 0) {
|
||||
sepReference.value = objects?.sepReference || ''
|
||||
sepControlDate.value = objects?.sepControlDate || ''
|
||||
sepTrafficStatus.value = objects?.sepTrafficStatus || ''
|
||||
diagnosis.value = objects?.diagnosis || ''
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(debouncedSepNumber, (newValue) => {
|
||||
emit('event', 'sep-number-changed', newValue)
|
||||
})
|
||||
|
||||
watch(debouncedCardNumber, (newValue) => {
|
||||
emit('event', 'member-changed', newValue)
|
||||
})
|
||||
|
||||
function onAddSep() {
|
||||
const formValues = {
|
||||
patientId: patientId.value || '',
|
||||
doctorCode: doctorCode.value,
|
||||
// subSpecialistCode: subSpecialistCode.value,
|
||||
registerDate: registerDate.value,
|
||||
cardNumber: cardNumber.value,
|
||||
paymentMethodCode: paymentMethodCode.value,
|
||||
sepType: sepType.value
|
||||
sepFile: sepFile.value,
|
||||
sippFile: sippFile.value,
|
||||
sepType: sepType.value,
|
||||
}
|
||||
emit('event', 'add-sep', formValues)
|
||||
}
|
||||
|
||||
function onSearchSep() {
|
||||
emit('event', 'search-sep', { cardNumber: cardNumber.value })
|
||||
}
|
||||
|
||||
// Submit handler
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
|
||||
emit('event', 'save', values)
|
||||
let payload: any = values
|
||||
if (props.mode === 'edit') {
|
||||
payload = {
|
||||
...payload,
|
||||
sepFileReview: sepFileReview.value,
|
||||
sippFileReview: sippFileReview.value,
|
||||
}
|
||||
}
|
||||
emit('event', 'save', payload)
|
||||
})
|
||||
|
||||
// Expose submit method for parent component
|
||||
const formRef = ref<HTMLFormElement | null>(null)
|
||||
function openFile(path: string) {
|
||||
window.open(path, '_blank')
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
console.log('🔵 submitForm called, formRef:', formRef.value)
|
||||
console.log('🔵 Form values:', {
|
||||
doctorCode: doctorCode.value,
|
||||
// subSpecialistCode: subSpecialistCode.value,
|
||||
registerDate: registerDate.value,
|
||||
paymentMethodCode: paymentMethodCode.value,
|
||||
})
|
||||
console.log('🔵 Form errors:', errors.value)
|
||||
console.log('🔵 Form meta:', meta.value)
|
||||
|
||||
// Trigger form submit using native form submit
|
||||
// This will trigger validation and onSubmit handler
|
||||
if (formRef.value) {
|
||||
console.log('🔵 Calling formRef.value.requestSubmit()')
|
||||
formRef.value.requestSubmit()
|
||||
} else {
|
||||
console.warn('⚠️ formRef.value is null, cannot submit form')
|
||||
// Fallback: directly call onSubmit handler
|
||||
// Create a mock event object
|
||||
const mockEvent = {
|
||||
@@ -215,7 +230,6 @@ function submitForm() {
|
||||
} as SubmitEvent
|
||||
|
||||
// Call onSubmit directly
|
||||
console.log('🔵 Calling onSubmit with mock event')
|
||||
onSubmit(mockEvent)
|
||||
}
|
||||
}
|
||||
@@ -345,14 +359,26 @@ defineExpose({
|
||||
<span class="text-red-500">*</span>
|
||||
</DE.Label>
|
||||
<DE.Field :errMessage="errors.unit_code">
|
||||
<Input :value="unitFullName"/>
|
||||
<!-- <TreeSelect
|
||||
id="subSpecialistCode"
|
||||
v-model="subSpecialistCode"
|
||||
v-bind="subSpecialistCodeAttrs"
|
||||
:data="specialists || []"
|
||||
:on-fetch-children="onFetchChildren"
|
||||
/> -->
|
||||
<Input
|
||||
:value="unitFullName"
|
||||
:disabled="true"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label height="compact">
|
||||
Tanggal Daftar
|
||||
<span class="text-red-500">*</span>
|
||||
</DE.Label>
|
||||
<DE.Field :errMessage="errors.registerDate">
|
||||
<DatepickerSingle
|
||||
v-if="!isDateLoading"
|
||||
id="registerDate"
|
||||
v-model="registerDate"
|
||||
v-bind="registerDateAttrs"
|
||||
placeholder="Pilih tanggal"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
@@ -363,21 +389,6 @@ defineExpose({
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<DE.Cell>
|
||||
<DE.Label height="compact">
|
||||
Tanggal Daftar
|
||||
<span class="text-red-500">*</span>
|
||||
</DE.Label>
|
||||
<DE.Field :errMessage="errors.registerDate">
|
||||
<DatepickerSingle
|
||||
id="registerDate"
|
||||
v-model="registerDate"
|
||||
v-bind="registerDateAttrs"
|
||||
placeholder="Pilih tanggal"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label height="compact">
|
||||
Jenis Pembayaran
|
||||
@@ -397,7 +408,7 @@ defineExpose({
|
||||
</DE.Block>
|
||||
|
||||
<!-- BPJS Fields (conditional) -->
|
||||
<template v-if="isJKNPayment">
|
||||
<template v-if="isInsurancePayment">
|
||||
<DE.Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
@@ -419,6 +430,9 @@ defineExpose({
|
||||
placeholder="Pilih Kelompok Peserta"
|
||||
/>
|
||||
</DE.Field>
|
||||
<span class="text-sm text-gray-500">
|
||||
{{ noteReference }}
|
||||
</span>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
@@ -435,6 +449,26 @@ defineExpose({
|
||||
placeholder="Masukkan nomor kartu BPJS"
|
||||
/>
|
||||
</DE.Field>
|
||||
<div
|
||||
v-if="isMemberValid"
|
||||
class="mt-1 flex items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-badge-check"
|
||||
class="h-4 w-4 bg-green-500 text-white"
|
||||
/>
|
||||
<span class="text-sm text-green-500">Aktif</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isMemberValid"
|
||||
class="mt-1 flex items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-x"
|
||||
class="h-4 w-4 bg-red-500 text-white"
|
||||
/>
|
||||
<span class="text-sm text-red-500">Tidak aktif</span>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
@@ -474,7 +508,7 @@ defineExpose({
|
||||
v-bind="sepNumberAttrs"
|
||||
placeholder="Tambah SEP terlebih dahulu"
|
||||
class="flex-1"
|
||||
:disabled="isLoading || isReadonly"
|
||||
:disabled="isLoading || isReadonly || isSepValid"
|
||||
/>
|
||||
<Button
|
||||
v-if="!isSepValid"
|
||||
@@ -490,44 +524,170 @@ defineExpose({
|
||||
name="i-lucide-loader-2"
|
||||
class="h-4 w-4 animate-spin"
|
||||
/>
|
||||
<Icon
|
||||
<Icon
|
||||
v-else
|
||||
name="i-lucide-plus"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
v-if="isMemberValid"
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="bg-green-500 text-white hover:bg-green-600"
|
||||
class="bg-primary"
|
||||
size="sm"
|
||||
disabled
|
||||
@click="onSearchSep"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-check"
|
||||
name="i-lucide-search"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</DE.Field>
|
||||
<div
|
||||
v-if="isSepValid"
|
||||
class="mt-1 flex items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-badge-check"
|
||||
class="h-4 w-4 bg-green-500 text-white"
|
||||
/>
|
||||
<span class="text-sm text-green-500">Aktif</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500">
|
||||
{{ noteReference }}
|
||||
</span>
|
||||
</DE.Cell>
|
||||
|
||||
<FileUpload
|
||||
field-name="sepFile"
|
||||
label="Dokumen SEP"
|
||||
placeholder="Unggah dokumen SEP"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
<DE.Cell>
|
||||
<FileUpload
|
||||
field-name="sepFile"
|
||||
label="Dokumen SEP"
|
||||
placeholder="Pilih file"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
v-model="sepFile"
|
||||
v-bind="sepFileAttrs"
|
||||
@file-selected="() => {}"
|
||||
/>
|
||||
<span class="mt-1 text-sm text-gray-500">
|
||||
{{ noteFile }}
|
||||
</span>
|
||||
<p v-if="sepFileReview">
|
||||
<a
|
||||
class="mt-1 text-sm text-blue-500 capitalize"
|
||||
href="#"
|
||||
@click="openFile(sepFileReview.filePath)"
|
||||
>
|
||||
{{ sepFileReview?.fileName }}
|
||||
</a>
|
||||
</p>
|
||||
</DE.Cell>
|
||||
|
||||
<FileUpload
|
||||
field-name="sippFile"
|
||||
label="Dokumen SIPP"
|
||||
placeholder="Unggah dokumen SIPP"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
<DE.Cell>
|
||||
<FileUpload
|
||||
field-name="sippFile"
|
||||
label="Dokumen SIPP"
|
||||
placeholder="Pilih file"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
v-model="sippFile"
|
||||
v-bind="sippFileAttrs"
|
||||
@file-selected="() => {}"
|
||||
/>
|
||||
<span class="mt-1 text-sm text-gray-500">
|
||||
{{ noteFile }}
|
||||
</span>
|
||||
<p v-if="sippFileReview">
|
||||
<a
|
||||
class="mt-1 text-sm text-blue-500 capitalize"
|
||||
href="#"
|
||||
@click="openFile(sippFileReview.filePath)"
|
||||
>
|
||||
{{ sippFileReview?.fileName }}
|
||||
</a>
|
||||
</p>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</template>
|
||||
|
||||
<template v-if="isSepValid">
|
||||
<hr />
|
||||
<!-- Data SEP -->
|
||||
<h3 class="text-lg font-semibold">Data SEP</h3>
|
||||
|
||||
<DE.Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<DE.Cell>
|
||||
<Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="sepReference"
|
||||
v-model="sepReference"
|
||||
:disabled="true"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<Label height="compact">No. Rujukan / Surat Kontrol</Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="sepReference"
|
||||
v-model="sepNumber"
|
||||
:disabled="true"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<Label height="compact">
|
||||
Tanggal Rujukan / Surat Kontrol
|
||||
<span class="ml-1 text-red-500">*</span>
|
||||
</Label>
|
||||
<DE.Field>
|
||||
<DatepickerSingle
|
||||
id="sepControlDate"
|
||||
v-model="sepControlDate"
|
||||
:disabled="true"
|
||||
placeholder="Pilih tanggal sep"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
|
||||
<DE.Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<DE.Cell :col-span="2">
|
||||
<Label height="compact">Diagnosis</Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="diagnosis"
|
||||
v-model="diagnosis"
|
||||
:disabled="true"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<Label height="compact">Status Kecelakaan</Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="sepTrafficStatus"
|
||||
v-model="sepTrafficStatus"
|
||||
:disabled="true"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</template>
|
||||
</form>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { cn } from '~/lib/utils'
|
||||
import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
const props = defineProps<{
|
||||
activePositon?: string
|
||||
refSearchNav?: RefSearchNav
|
||||
enableExport?: boolean
|
||||
refExportNav?: RefExportNav
|
||||
@@ -17,23 +18,13 @@ const props = defineProps<{
|
||||
onExportCsv?: () => void
|
||||
}>()
|
||||
|
||||
// function emitSearchNavClick() {
|
||||
// props.refSearchNav?.onClick()
|
||||
// }
|
||||
//
|
||||
// function onInput(event: Event) {
|
||||
// props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
|
||||
// }
|
||||
//
|
||||
// function btnClick() {
|
||||
// props.prep?.addNav?.onClick?.()
|
||||
// }
|
||||
const emit = defineEmits<{
|
||||
apply: [filters: { personName: string; startDate: string; endDate: string }]
|
||||
}>()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const dateRange = ref<{ from: Date | null; to: Date | null }>({
|
||||
from: new Date(),
|
||||
to: new Date(),
|
||||
})
|
||||
const isRoleRegistration = props.activePositon === 'registration'
|
||||
const isRoleMedical = props.activePositon === 'medical'
|
||||
|
||||
const df = new DateFormatter('en-US', {
|
||||
dateStyle: 'medium',
|
||||
@@ -46,31 +37,47 @@ const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1
|
||||
// Get date 1 month ago
|
||||
const oneMonthAgo = new Date(today)
|
||||
oneMonthAgo.setMonth(today.getMonth() - 1)
|
||||
const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
|
||||
const oneMonthAgoCalendar = new CalendarDate(
|
||||
oneMonthAgo.getFullYear(),
|
||||
oneMonthAgo.getMonth() + 1,
|
||||
oneMonthAgo.getDate(),
|
||||
)
|
||||
|
||||
const value = ref({
|
||||
start: oneMonthAgoCalendar,
|
||||
end: todayCalendar,
|
||||
}) as Ref<DateRange>
|
||||
|
||||
// function onFilterClick() {
|
||||
// console.log('Search:', searchQuery.value)
|
||||
// console.log('Date Range:', dateRange.value)
|
||||
// props.refSearchNav?.onClick()
|
||||
// }
|
||||
function onFilterClick() {
|
||||
const startDate = value.value.start ? value.value.start.toString() : ''
|
||||
const endDate = value.value.end ? value.value.end.toString() : startDate
|
||||
|
||||
emit('apply', {
|
||||
personName: searchQuery.value,
|
||||
startDate,
|
||||
endDate,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-64">
|
||||
<Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
|
||||
<Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Cari Nama /No.RM"
|
||||
class="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
:class="cn('w-[200px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
|
||||
:class="
|
||||
cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')
|
||||
"
|
||||
>
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
<template v-if="value.start">
|
||||
@@ -83,7 +90,7 @@ const value = ref({
|
||||
{{ df.format(value.start.toDate(getLocalTimeZone())) }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else> Pick a date </template>
|
||||
<template v-else>Pick a date</template>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
@@ -96,28 +103,32 @@ const value = ref({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="border-orange-500 text-orange-600 hover:bg-orange-50"
|
||||
@click="onFilterClick"
|
||||
>
|
||||
<FilterIcon class="mr-2 size-4" />
|
||||
Filter
|
||||
</Button>
|
||||
|
||||
<DropdownMenu v-show="props.enableExport">
|
||||
<DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
|
||||
<Icon name="i-lucide-download" class="h-4 w-4" />
|
||||
<Button
|
||||
variant="outline"
|
||||
class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-download"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
Ekspor
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="onExportPdf">
|
||||
Ekspor PDF
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportCsv">
|
||||
Ekspor CSV
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportExcel">
|
||||
Ekspor Excel
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportPdf">Ekspor PDF</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportCsv">Ekspor CSV</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportExcel">Ekspor Excel</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,524 @@
|
||||
<script setup lang="ts">
|
||||
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
|
||||
interface Masalah {
|
||||
id: number
|
||||
date: string
|
||||
diagnosa: string
|
||||
finishDate: string
|
||||
staff: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any
|
||||
schema: z.ZodSchema<any>
|
||||
excludeFields?: string[]
|
||||
isReadonly?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', val: any): void
|
||||
(e: 'submit', val: any): void
|
||||
}>()
|
||||
|
||||
// Setup form
|
||||
const {
|
||||
validate: _validate,
|
||||
defineField,
|
||||
handleSubmit,
|
||||
errors,
|
||||
values,
|
||||
} = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: props.modelValue,
|
||||
})
|
||||
|
||||
watch(values, (val) => emit('update:modelValue', val), { deep: true })
|
||||
|
||||
// Subjective
|
||||
const [primaryComplaint, primaryComplaintAttrs] = defineField('pri-complain')
|
||||
const [medType, medTypeAttrs] = defineField('med-type')
|
||||
const [medName, medNameAttrs] = defineField('med-name')
|
||||
const [medReaction, medReactionAttrs] = defineField('med-reaction')
|
||||
const [foodType, foodTypeAttrs] = defineField('food-type')
|
||||
const [foodName, foodNameAttrs] = defineField('food-name')
|
||||
const [foodReaction, foodReactionAttrs] = defineField('food-reaction')
|
||||
const [otherType, otherTypeAttrs] = defineField('other-type')
|
||||
const [otherName, otherNameAttrs] = defineField('other-name')
|
||||
const [otherReaction, otherReactionAttrs] = defineField('other-reaction')
|
||||
const [painAsst, painAsstAttrs] = defineField('pain-asst')
|
||||
const [painScale, painScaleAttrs] = defineField('pain-scale')
|
||||
const [painTime, painTimeAttrs] = defineField('pain-time')
|
||||
const [painDuration, painDurationAttrs] = defineField('pain-duration')
|
||||
const [painFreq, painFreqAttrs] = defineField('pain-freq')
|
||||
const [painLoc, painLocAttrs] = defineField('pain-loc')
|
||||
const [nutScreening, nutScreeningAttrs] = defineField('nut-screening')
|
||||
const [spiritualAsst, spiritualAsstAttrs] = defineField('spiritual-asst')
|
||||
|
||||
// Objective
|
||||
const [generalCondition, generalConditionAttrs] = defineField('general-condition')
|
||||
const [supportExam, supportExamAttrs] = defineField('support-exam')
|
||||
const [riskFall, riskFallAttrs] = defineField('risk-fall')
|
||||
const [bracelet, braceletAttrs] = defineField('bracelet')
|
||||
const [braceletAlg, braceletAlgAttrs] = defineField('bracelet-alg')
|
||||
|
||||
const validate = async () => {
|
||||
const result = await _validate()
|
||||
console.log('Component validate() result:', result)
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
data: result.values,
|
||||
errors: result.errors,
|
||||
}
|
||||
}
|
||||
|
||||
const form = ref<Masalah>({
|
||||
id: 0,
|
||||
date: '',
|
||||
diagnosa: '',
|
||||
finishDate: '',
|
||||
staff: '',
|
||||
})
|
||||
|
||||
const list = ref<Masalah[]>([])
|
||||
const isEditing = ref(false)
|
||||
const showForm = ref(false)
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
id: 0,
|
||||
date: '',
|
||||
diagnosa: '',
|
||||
finishDate: '',
|
||||
staff: '',
|
||||
}
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const openAdd = () => {
|
||||
resetForm()
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
if (isEditing.value) {
|
||||
const index = list.value.findIndex((v) => v.id === form.value.id)
|
||||
if (index !== -1) list.value[index] = { ...form.value }
|
||||
} else {
|
||||
list.value.push({
|
||||
...form.value,
|
||||
id: Date.now(),
|
||||
})
|
||||
emit('click', { type: 'add-problem', data: list.value })
|
||||
}
|
||||
|
||||
showForm.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const editItem = (item: Masalah) => {
|
||||
form.value = { ...item }
|
||||
isEditing.value = true
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
const deleteItem = (id: number) => {
|
||||
list.value = list.value.filter((v) => v.id !== id)
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="entry-form">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div>
|
||||
<h1 class="font-semibold">A. Data Subyektif</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Pasien</Label>
|
||||
<Field :errMessage="errors['pri-complain']">
|
||||
<Textarea
|
||||
v-model="primaryComplaint"
|
||||
v-bind="primaryComplaintAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<span class="mb-4 text-sm font-semibold">Riwayat Alergi dan Reaksi Alergi</span>
|
||||
<Block
|
||||
:colCount="3"
|
||||
class="mt-2"
|
||||
>
|
||||
<Cell>
|
||||
<Label dynamic>a. Obat</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="medType"
|
||||
v-bind="medTypeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Sebutkan</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="medName"
|
||||
v-bind="medNameAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Reaksi</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="medReaction"
|
||||
v-bind="medReactionAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block
|
||||
:colCount="3"
|
||||
class="mt-2"
|
||||
>
|
||||
<Cell>
|
||||
<Label dynamic>b. Makanan</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="foodType"
|
||||
v-bind="foodTypeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Sebutkan</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="foodName"
|
||||
v-bind="foodNameAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Reaksi</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="foodReaction"
|
||||
v-bind="foodReactionAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block
|
||||
:colCount="3"
|
||||
class="mt-2"
|
||||
>
|
||||
<Cell>
|
||||
<Label dynamic>c. Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="otherType"
|
||||
v-bind="otherTypeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Sebutkan</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="otherName"
|
||||
v-bind="otherNameAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Reaksi</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="otherReaction"
|
||||
v-bind="otherReactionAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Kajian Nyeri</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="painAsst"
|
||||
v-bind="painAsstAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Skala Nyeri</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="painScale"
|
||||
v-bind="painScaleAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Waktu Nyeri</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="paintTime"
|
||||
v-bind="painTimeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Durasi Nyeri</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="painDuration"
|
||||
v-bind="painDurationAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Frequensi Nyeri</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="painFreq"
|
||||
v-bind="painFreqAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lokasi</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="painLoc"
|
||||
v-bind="painLocAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Skrining Nutrisi</Label>
|
||||
<Field>
|
||||
<Textarea
|
||||
v-model="nutScreening"
|
||||
v-bind="nutScreeningAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kajian Spiritual</Label>
|
||||
<Field>
|
||||
<Textarea
|
||||
v-model="spiritualAsst"
|
||||
v-bind="spiritualAsstAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">B. Data Obyektif</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Keadaan Umum</Label>
|
||||
<Field>
|
||||
<Textarea
|
||||
v-model="generalCondition"
|
||||
v-bind="generalConditionAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Pemeriksaan Penunjang</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="supportExam"
|
||||
v-bind="supportExamAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Risiko Jatuh</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="riskFall"
|
||||
v-bind="riskFallAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Pemakaian Gelang</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="bracelet"
|
||||
v-bind="braceletAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Pasang Gelang Alergi</Label>
|
||||
<Field>
|
||||
<Input
|
||||
v-model="braceletAlg"
|
||||
v-bind="braceletAlgAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="my-3 font-semibold">C. Daftar Masalah Keperawatan</h1>
|
||||
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="showForm = true"
|
||||
>
|
||||
+ Tambah
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showForm"
|
||||
class="mb-4 space-y-3 rounded border bg-gray-50 p-4 shadow-sm"
|
||||
>
|
||||
<div>
|
||||
<Label>Tanggal Muncul</Label>
|
||||
<Input
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="font-medium">Diagnosa Keperawatan</Label>
|
||||
<Input v-model="form.diagnosa" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="font-medium">Tanggal Teratasi</Label>
|
||||
<Input
|
||||
v-model="form.finishDate"
|
||||
type="date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="font-medium">Nama Petugas</Label>
|
||||
<Input v-model="form.staff" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex gap-2">
|
||||
<Button
|
||||
@click="submitForm"
|
||||
type="button"
|
||||
>
|
||||
{{ isEditing ? 'Update' : 'Tambah' }}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
@click="showForm = false"
|
||||
type="button"
|
||||
class="rounded bg-gray-300 px-3 py-1"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<table class="w-full border text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="border p-2">Tanggal Muncul</th>
|
||||
<th class="border p-2">Diagnosa</th>
|
||||
<th class="border p-2">Tanggal Teratasi</th>
|
||||
<th class="border p-2">Petugas</th>
|
||||
<th class="w-28 border p-2">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="border"
|
||||
>
|
||||
<td class="border p-2">{{ item.date }}</td>
|
||||
<td class="border p-2">{{ item.diagnosa }}</td>
|
||||
<td class="border p-2">{{ item.finishDate }}</td>
|
||||
<td class="border p-2">{{ item.staff }}</td>
|
||||
<td class="flex justify-center gap-4 border p-2">
|
||||
<Icon
|
||||
@click="editItem(item)"
|
||||
name="i-lucide-pencil"
|
||||
class="h-4 w-4 cursor-pointer"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
@click="deleteItem(item.id)"
|
||||
name="i-lucide-trash"
|
||||
class="h-4 w-4 cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="list.length === 0">
|
||||
<td
|
||||
colspan="5"
|
||||
class="p-4 text-center text-gray-500"
|
||||
>
|
||||
Belum ada data
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[{ label: 'Tanggal' }, { label: 'Diagnosa' }, { label: 'Tanggal Selesai' }, { label: 'Staff' }, { label: 'Aksi' }],
|
||||
],
|
||||
|
||||
keys: ['date', 'diagnosa', 'finishDate', 'staff', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
time(rec: any) {
|
||||
return rec.time ? new Date(rec.time).toLocaleDateString() : ''
|
||||
},
|
||||
main_complaint(rec: any) {
|
||||
const { value } = rec ?? {}
|
||||
|
||||
if (typeof value !== 'string') return '-'
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
console.log('parsed', parsed)
|
||||
return parsed?.['prim-compl'] || '-'
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
encounter(rec: any) {
|
||||
const data = rec?.encounter ?? {}
|
||||
return data?.class_code || '-'
|
||||
},
|
||||
diagnose(rec: any) {
|
||||
const { value } = rec ?? {}
|
||||
|
||||
if (typeof value !== 'string') return '-'
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
const diagnose = parsed?.diagnose || []
|
||||
return diagnose.map((d: any) => d.name).join(', ')
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
patient_address(_rec) {
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { config } from './list-cfg'
|
||||
|
||||
defineProps<{
|
||||
data: any[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
preview: any
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-1 text-sm">
|
||||
<div class="mb-4 flex gap-3">
|
||||
<span class="w-40 font-semibold">Jam Tanggal</span>
|
||||
<span>: {{ '-' }}</span>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h2 class="mb-3 font-semibold">A. Data Subyektif</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Keluhan Pasien</span>
|
||||
<span>: {{ preview?.['pri-complain'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
|
||||
<span>:</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 space-y-1 pl-10">
|
||||
<div class="flex">
|
||||
<span class="w-28">a. Obat</span>
|
||||
<span>: {{ preview?.['med-type'] || '-' }}</span>
|
||||
<span class="ml-6 w-20">Sebutkan</span>
|
||||
<span>: {{ preview?.['med-name'] || '-' }}</span>
|
||||
<span class="ml-6 w-16">Reaksi</span>
|
||||
<span>: {{ preview?.['med-reaction'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-28">b. Makanan</span>
|
||||
<span>: {{ preview?.['food-type'] || '-' }}</span>
|
||||
<span class="ml-6 w-20">Sebutkan</span>
|
||||
<span>: {{ preview?.['food-name'] || '-' }}</span>
|
||||
<span class="ml-6 w-16">Reaksi</span>
|
||||
<span>: {{ preview?.['food-reaction'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-28">c. Lain-lain</span>
|
||||
<span>: {{ preview?.['other-type'] || '-' }}</span>
|
||||
<span class="ml-6 w-20">Sebutkan</span>
|
||||
<span>: {{ preview?.['other-name'] || '-' }}</span>
|
||||
<span class="ml-6 w-16">Reaksi</span>
|
||||
<span>: {{ preview?.['other-reaction'] || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Kajian Nyeri</span>
|
||||
<span>: {{ preview?.['pain-asst'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40">Skala Nyeri</span>
|
||||
<span>: {{ preview?.['pain-scale'] || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-40">Waktu Nyeri</span>
|
||||
<span>: {{ preview?.['pain-time'] || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-40">Durasi Nyeri</span>
|
||||
<span>: {{ preview?.['pain-duration'] || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-40">Frekwensi Nyeri</span>
|
||||
<span>: {{ preview?.['pain-freq'] || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-40">Lokasi</span>
|
||||
<span>: {{ preview?.['pain-loc'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Skrining Nutrisi</span>
|
||||
<span>: {{ preview?.['nut-screening'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
|
||||
<span>: {{ preview?.['spiritual-asst'] || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h2 class="mb-3 font-semibold">B. Data Obyektif</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Keadaan Umum</span>
|
||||
<span>: {{ preview?.['general-condition'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Pemeriksaan Penunjang</span>
|
||||
<span>: {{ preview?.['support-exam'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Risiko Jatuh</span>
|
||||
<span>: {{ preview?.['risk-fall'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
|
||||
<span>: {{ preview?.['bracelet'] || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<span class="w-40 font-medium">Pasang Gelang Alergi</span>
|
||||
<span>: {{ preview?.['bracelet-alg'] || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
export const config: Config = {
|
||||
cols: [ { width: 150 }, {}, { width: 150 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'No' },
|
||||
{ label: 'Name' },
|
||||
{ label: 'Jumlah' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['number', 'material.name', 'count'],
|
||||
|
||||
parses: {
|
||||
number: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineGroup?.name || '-'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
|
||||
// Configs
|
||||
import { config } from './quick-list.cfg'
|
||||
import type { MaterialPackageItem } from '~/models/material-package-item';
|
||||
|
||||
interface Props {
|
||||
data: MaterialPackageItem[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Item BMHP
|
||||
</div>
|
||||
<DataTable v-bind="config" :rows="data" class="border"/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import * as CB from '~/components/pub/my-ui/combobox'
|
||||
import type { MaterialPackage } from '~/models/material-package';
|
||||
|
||||
//
|
||||
const props =defineProps<{
|
||||
data: MaterialPackage[]
|
||||
}>()
|
||||
|
||||
const model = defineModel()
|
||||
|
||||
const items = computed(() => {
|
||||
return props.data.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.code,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4 2xl:mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Paket BMHP
|
||||
</div>
|
||||
<div class="max-w-[600px]">
|
||||
<CB.Combobox :items="items" v-model="model" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,18 +1,20 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { McuOrderItem } from '~/models/mcu-order-item'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
// const input = defineAsyncComponent(() => import('~/components/pub/my-ui/data/editable-div.vue'))
|
||||
const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
|
||||
cols: [{}, {}, { classVal: '!p-0.5' }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Jenis' },
|
||||
{ label: 'Catatan' },
|
||||
{ label: '' },
|
||||
{ label: 'Catatan', classVal: '!w-[40%]' },
|
||||
// { label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
@@ -27,16 +29,17 @@ export const config: Config = {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
props: { data: (rec as McuOrderItem).note },
|
||||
component: input,
|
||||
}
|
||||
},
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
// action(rec, idx) {
|
||||
// return {
|
||||
// idx,
|
||||
// rec: rec as object,
|
||||
// component: action,
|
||||
// }
|
||||
// },
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
|
||||
import { config } from './list-entry.cfg'
|
||||
import type { McuOrderItem } from '~/models/mcu-order-item';
|
||||
|
||||
@@ -13,7 +15,7 @@ const emit = defineEmits<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable class="border mb-3 2xl:mb-4"
|
||||
<DataTable class="border mb-3 2xl:mb-4"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}],
|
||||
cols: [{}, { width: 150 }, {}],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Jenis' },
|
||||
{ label: 'Jadwal Pemeriksaan' },
|
||||
{ label: 'Status' },
|
||||
{ label: 'Catatan' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
|
||||
keys: ['mcuSrc.name', 'examinationDate', 'status_code', 'note'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'mcuSrc.name', label: 'Nama' },
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import type { McuOrder } from '~/models/mcu-order';
|
||||
|
||||
defineProps<{
|
||||
recItem: McuOrder
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
@@ -10,7 +10,7 @@ const props = defineProps<{
|
||||
|
||||
<template>
|
||||
<div class="text-sm 2xl:text-base font-semibold mb-3">
|
||||
Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
|
||||
Order {{ data?.createdAt?.substring(0, 10) }} - {{ data?.status_code }}
|
||||
</div>
|
||||
<div class="max-w-[1000px]">
|
||||
<DE.Block mode="preview" :col-count=5 class="!mb-3">
|
||||
|
||||
@@ -34,7 +34,7 @@ function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
|
||||
<div class="mb-4 xl:mb-5">Belum Ada Data</div>
|
||||
</div>
|
||||
<template v-for="item, idx in data">
|
||||
<div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
|
||||
<div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-0' : 'mb-2')">
|
||||
Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
|
||||
</div>
|
||||
<DE.Block mode="preview" :col-count=7 class="!mb-3">
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry';
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
|
||||
|
||||
import type { McuOrder } from '~/models/mcu-order';
|
||||
import AntibioticInUseList from '~/components/app/antibiotic-in-use/list.vue';
|
||||
import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
|
||||
import type { AntibioticInUse } from '~/models/antibiotic-in-use';
|
||||
|
||||
interface Props {
|
||||
data: McuOrder[]
|
||||
antibioticInUses: AntibioticInUse[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [data: any]
|
||||
edit: [data: any],
|
||||
submit: [data: any]
|
||||
}>()
|
||||
|
||||
function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
|
||||
if (type === 'cancel') {
|
||||
emit('cancel', data)
|
||||
} else if (type === 'edit') {
|
||||
emit('edit', data)
|
||||
} else if (type === 'submit') {
|
||||
emit('submit', data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="data.length == 0" class="p-10 text-center">
|
||||
<div class="mb-4 xl:mb-5">Belum Ada Data</div>
|
||||
</div>
|
||||
<template v-for="item, idx in data">
|
||||
<div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-0' : 'mb-2')">
|
||||
Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
|
||||
</div>
|
||||
<DE.Block mode="preview" :col-count=7 class="!mb-3">
|
||||
<DE.Cell :col-span="3">
|
||||
<DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
|
||||
<DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
|
||||
{{ item.doctor?.employee?.person?.name || '........' }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell :col-span="3">
|
||||
<DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
|
||||
<DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
|
||||
...........
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<div class="flex justify-end" >
|
||||
<Nav
|
||||
v-if="item.status_code == 'new'"
|
||||
:small-mode="true"
|
||||
:default-class="'flex gap-1'"
|
||||
@click="(type) => { navClick(type, item) }"
|
||||
/>
|
||||
</div>
|
||||
</DE.Block>
|
||||
<AntibioticInUseList v-if="item.antibioticInUseItems?.length > 0" :data="[]" class="!mb-5" />
|
||||
<McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
|
||||
</template>
|
||||
</template>
|
||||
@@ -37,7 +37,7 @@ function pick(item: McuSrc) {
|
||||
<div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
|
||||
<div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
|
||||
<Button
|
||||
:variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
|
||||
:variant="data.some(e => e.mcuSrc_code === item.code) ? 'default' : 'outline'"
|
||||
type="button"
|
||||
@click="pick(item)"
|
||||
>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
|
||||
import Button from '~/components/pub/ui/button/Button.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
}>()
|
||||
const isModalOpen = inject<Ref<boolean>>('isHistoryDialogOpen')!
|
||||
|
||||
function openDialog() {
|
||||
isModalOpen.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button type="button" variant="outline" class="text-orange-500 border border-orange-400 bg-orange-50"
|
||||
@click="openDialog">
|
||||
<Icon name="i-lucide-history" class="h-4 w-4 align-middle transition-colors" />
|
||||
History
|
||||
</Button>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
interface InstallationFormData {
|
||||
name: string
|
||||
code: string
|
||||
encounterClassCode: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
schema: any
|
||||
initialValues?: Partial<InstallationFormData>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: InstallationFormData, resetForm: () => void]
|
||||
reset: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
emit('submit', values, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onResetForm({ resetForm }: { resetForm: () => void }) {
|
||||
emit('reset', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<InputBase
|
||||
field-name="patientName"
|
||||
label="Nama Pasien"
|
||||
placeholder="Nama Pasien"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="cardNumber"
|
||||
label="Nomor Kartu"
|
||||
placeholder="Nomor Kartu"
|
||||
/>
|
||||
<InputBase
|
||||
field-name="sepNumber"
|
||||
label="Nomor SEP"
|
||||
placeholder="Nomor SEP"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-2 flex items-center gap-3 justify-end">
|
||||
<Button @click="onResetForm" variant="secondary">Reset</Button>
|
||||
<Button @click="onSubmitForm">Terapkan</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
isDisabled?: boolean
|
||||
isWithTime?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'birthDate',
|
||||
label = 'Tanggal Lahir',
|
||||
placeholder = 'Pilih tanggal lahir',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
// Reactive variables for age calculation
|
||||
const patientAge = ref<string>('Masukkan tanggal lahir')
|
||||
|
||||
// Function to calculate age with years, months, and days
|
||||
function calculateAge(birthDate: string | Date | undefined): string {
|
||||
if (!birthDate) {
|
||||
return 'Masukkan tanggal lahir'
|
||||
}
|
||||
|
||||
try {
|
||||
let dateObj: Date
|
||||
|
||||
if (typeof birthDate === 'string') {
|
||||
dateObj = parseISO(birthDate)
|
||||
} else {
|
||||
dateObj = birthDate
|
||||
}
|
||||
|
||||
const today = new Date()
|
||||
|
||||
// Calculate years, months, and days
|
||||
const totalYears = differenceInYears(today, dateObj)
|
||||
|
||||
// Calculate remaining months after years
|
||||
const yearsPassed = new Date(dateObj)
|
||||
yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
|
||||
const remainingMonths = differenceInMonths(today, yearsPassed)
|
||||
|
||||
// Calculate remaining days after years and months
|
||||
const monthsPassed = new Date(yearsPassed)
|
||||
monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
|
||||
const remainingDays = differenceInDays(today, monthsPassed)
|
||||
|
||||
// Format the result
|
||||
const parts = []
|
||||
if (totalYears > 0) parts.push(`${totalYears} Tahun`)
|
||||
if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
|
||||
if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
|
||||
|
||||
return parts.length > 0 ? parts.join(' ') : '0 Hari'
|
||||
} catch {
|
||||
return 'Masukkan tanggal lahir'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired && !isDisabled"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="birthDate"
|
||||
:type="props.isWithTime ? 'datetime-local' : 'date'"
|
||||
min="1900-01-01"
|
||||
v-bind="componentField"
|
||||
:placeholder="placeholder"
|
||||
:disabled="isDisabled"
|
||||
@update:model-value="
|
||||
(value: string | number) => {
|
||||
const dateStr = typeof value === 'number' ? String(value) : value
|
||||
patientAge = calculateAge(dateStr)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Item } from '~/components/pub/my-ui/combobox'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'job',
|
||||
label = 'Pekerjaan',
|
||||
placeholder = 'Pilih pekerjaan',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
const doctors = ref<Array<Item>>([])
|
||||
|
||||
async function fetchDpjp() {
|
||||
doctors.value = await getDoctorLabelList({
|
||||
serviceType: 1,
|
||||
serviceDate: new Date().toISOString().substring(0, 10),
|
||||
includes: 'employee-person',
|
||||
}, true)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDpjp()
|
||||
})
|
||||
|
||||
// function handleDpjpChange(selected: string) {
|
||||
// selectedDpjpId.value = selected ?? null
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
class="focus:ring-0 focus:ring-offset-0"
|
||||
:id="fieldName"
|
||||
v-bind="componentField"
|
||||
:items="doctors"
|
||||
:placeholder="placeholder"
|
||||
search-placeholder="Cari..."
|
||||
empty-message="Data tidak ditemukan"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Item } from '~/components/pub/my-ui/combobox'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'job',
|
||||
label = 'Pekerjaan',
|
||||
placeholder = 'Pilih pekerjaan',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
const doctors = ref<Array<Item>>([])
|
||||
|
||||
async function fetchDpjp() {
|
||||
doctors.value = await getDoctorLabelList({
|
||||
serviceType: 1,
|
||||
serviceDate: new Date().toISOString().substring(0, 10),
|
||||
includes: 'employee-person',
|
||||
}, true)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDpjp()
|
||||
})
|
||||
|
||||
// function handleDpjpChange(selected: string) {
|
||||
// selectedDpjpId.value = selected ?? null
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
class="focus:ring-0 focus:ring-offset-0"
|
||||
:id="fieldName"
|
||||
v-bind="componentField"
|
||||
:items="doctors"
|
||||
:placeholder="placeholder"
|
||||
search-placeholder="Cari..."
|
||||
empty-message="Data tidak ditemukan"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Item } from '~/components/pub/my-ui/combobox'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'job',
|
||||
label = 'Pekerjaan',
|
||||
placeholder = 'Pilih pekerjaan',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
const doctors = ref<Array<Item>>([])
|
||||
|
||||
async function fetchDpjp() {
|
||||
doctors.value = await getDoctorLabelList({
|
||||
serviceType: 1,
|
||||
serviceDate: new Date().toISOString().substring(0, 10),
|
||||
includes: 'employee-person',
|
||||
}, true)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDpjp()
|
||||
})
|
||||
|
||||
// function handleDpjpChange(selected: string) {
|
||||
// selectedDpjpId.value = selected ?? null
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
class="focus:ring-0 focus:ring-offset-0"
|
||||
:id="fieldName"
|
||||
v-bind="componentField"
|
||||
:items="doctors"
|
||||
:placeholder="placeholder"
|
||||
search-placeholder="Cari..."
|
||||
empty-message="Data tidak ditemukan"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
import { PrbProgramTypeOptList } from '~/lib/constants'
|
||||
import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Item } from '~/components/pub/my-ui/combobox'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'job',
|
||||
label = 'Pekerjaan',
|
||||
placeholder = 'Pilih pekerjaan',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// function handleDpjpChange(selected: string) {
|
||||
// selectedDpjpId.value = selected ?? null
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
class="focus:ring-0 focus:ring-offset-0"
|
||||
:id="fieldName"
|
||||
v-bind="componentField"
|
||||
:items="PrbProgramTypeOptList"
|
||||
:placeholder="placeholder"
|
||||
search-placeholder="Cari..."
|
||||
empty-message="Data tidak ditemukan"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import type { Patient } from '~/models/patient'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { educationCodes, genderCodes } from '~/lib/constants'
|
||||
import { calculateAge } from '~/lib/utils'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-upd.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {width: 50}, ],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'No. PRB' },
|
||||
{ label: 'No. RM' },
|
||||
{ label: 'Nama Pasien' },
|
||||
{ label: 'Jenis Kelamin' },
|
||||
{ label: 'Alamat' },
|
||||
{ label: 'Klinik' },
|
||||
{ label: 'Nama Dokter' },
|
||||
{ label: 'Tanggal' },
|
||||
{ label: 'Program PRB' },
|
||||
{ label: 'No. SEP' },
|
||||
{ label: 'Action' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7', 'name8', 'name9', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: unknown): unknown => {
|
||||
const date = (rec as any).date
|
||||
if (typeof date == 'object' && date) {
|
||||
return (date as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof date == 'string') {
|
||||
return (date as string).substring(0, 10)
|
||||
}
|
||||
return date
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
import { type Variants, Badge } from '~/components/pub/ui/badge'
|
||||
import { cn, } from '~/lib/utils'
|
||||
import type { Prb } from '~/models/prb'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
// #region Props & Emits
|
||||
const props = defineProps<{
|
||||
instance: Prb | null
|
||||
}>()
|
||||
|
||||
// const emit = defineEmits<{
|
||||
// (e: 'click'): void
|
||||
// }>()
|
||||
|
||||
const dummy = [
|
||||
{
|
||||
id: 1,
|
||||
number: 1,
|
||||
name: 'Operasi',
|
||||
code: 'OP-001'
|
||||
}
|
||||
]
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
// #endregion
|
||||
|
||||
// Computed addresses from nested data
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
// function onClick() {
|
||||
// emit('click')
|
||||
// }
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article :class="cn('mb-5 space-y-1',)">
|
||||
<DetailRow label="No. PRB">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Waktu dan Tanggal">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Program PRB">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="DPJP">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Keterangan">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Saran">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import SelectDate from './_common/select-date.vue'
|
||||
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
||||
import ObatPicker from './obat-picker/picker-dialog.vue'
|
||||
import SepPicker from './sep-picker/picker-dialog.vue'
|
||||
import SelectDpjp from './_common/select-dpjp.vue'
|
||||
import SelectProgram from './_common/select-program.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
schema: any
|
||||
initialValues?: any
|
||||
errors?: FormErrors
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
const formRef = ref()
|
||||
|
||||
const isSepDialogOpen = ref(false)
|
||||
provide("isSepDialogOpen", isSepDialogOpen);
|
||||
const handleToggleSepDialog = () => isSepDialogOpen.value = !isSepDialogOpen.value
|
||||
const setNoSep = (inputValue: string) => formRef.value?.setValues({ a0: inputValue }, false)
|
||||
|
||||
defineExpose({
|
||||
validate: () => formRef.value?.validate(),
|
||||
resetForm: () => formRef.value?.resetForm(),
|
||||
setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
|
||||
values: computed(() => formRef.value?.values),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
ref="formRef"
|
||||
v-slot="{ values }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:validate-on-mount="false"
|
||||
validation-mode="onSubmit"
|
||||
:initial-values="initialValues ? initialValues : {}"
|
||||
>
|
||||
<DE.Block :col-count="2" :cell-flex="false">
|
||||
<DE.Cell :col-span="2" v-if="isBpjs">
|
||||
<div class="w-1/2 flex items-end gap-3">
|
||||
<InputBase :errors="errors"
|
||||
field-name="a0"
|
||||
label="No. RM/Kartu BPJS" placeholder="Masukkan No. RM/Kartu BPJS"
|
||||
/>
|
||||
<Button @click="handleToggleSepDialog" size="icon" variant="outline"
|
||||
class="text-orange-400 border-orange-400 bg-transparent">
|
||||
<Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
|
||||
</Button>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
<InputBase :errors="errors"
|
||||
field-name="a1"
|
||||
label="No. PRB" placeholder="Akan terisi otomatis"
|
||||
is-disabled
|
||||
/>
|
||||
<SelectDate
|
||||
field-name="a2"
|
||||
label="Waktu & Tanggal"
|
||||
:errors="errors"
|
||||
is-disabled
|
||||
is-with-time
|
||||
/>
|
||||
<SelectProgram :errors="errors"
|
||||
field-name="a3"
|
||||
label="Program PRB" placeholder="Pilih Program PRB"
|
||||
is-required
|
||||
/>
|
||||
<SelectDpjp :errors="errors"
|
||||
field-name="a4"
|
||||
label="DPJP" placeholder="Pilih DPJP"
|
||||
is-required
|
||||
/>
|
||||
<TextAreaInput :errors="errors"
|
||||
field-name="a5"
|
||||
label="Keterangan" placeholder="Isi Keterangan"
|
||||
/>
|
||||
<TextAreaInput :errors="errors"
|
||||
field-name="a6"
|
||||
label="Saran" placeholder="Isi Saran"
|
||||
/>
|
||||
</DE.Block>
|
||||
|
||||
<!-- PICKER -->
|
||||
<DE.Block :col-count="1" :cell-flex="false">
|
||||
<ObatPicker field-name="a7" title="Obat" />
|
||||
</DE.Block>
|
||||
<SepPicker title="SEP" :choose-fn="setNoSep" />
|
||||
<!-- -->
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-print.vue'))
|
||||
const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, {}, {width: 100}, {width: 50}, ],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Tgl Diterbitkan' },
|
||||
{ label: 'Kode Obat' },
|
||||
{ label: 'Nama Obat' },
|
||||
{ label: 'Signa' },
|
||||
{ label: 'Jumlah' },
|
||||
{ label: 'Durasi Pemberian' },
|
||||
{ label: 'status' },
|
||||
{ label: 'Action' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'status', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: unknown): unknown => {
|
||||
const date = (rec as any).date
|
||||
if (typeof date == 'object' && date) {
|
||||
return (date as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof date == 'string') {
|
||||
return (date as string).substring(0, 10)
|
||||
}
|
||||
return date
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
status(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: statusBadge,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
import { config } from './history-list.cfg'
|
||||
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
||||
import type { DateRange } from 'radix-vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
'update:dateValue': [value: DateRange]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import type { Patient } from '~/models/patient'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { educationCodes, genderCodes } from '~/lib/constants'
|
||||
import { calculateAge } from '~/lib/utils'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-upd.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, {}, {width: 50}, ],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Tgl Diterbitkan' },
|
||||
{ label: 'Kode Obat' },
|
||||
{ label: 'Nama Obat' },
|
||||
{ label: 'Signa' },
|
||||
{ label: 'Jumlah' },
|
||||
{ label: 'Durasi Pemberian' },
|
||||
{ label: 'Action' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['date', 'name1', 'name2', 'name3', 'name4', 'name5', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: unknown): unknown => {
|
||||
const date = (rec as any).date
|
||||
if (typeof date == 'object' && date) {
|
||||
return (date as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof date == 'string') {
|
||||
return (date as string).substring(0, 10)
|
||||
}
|
||||
return date
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
import { config } from './list.cfg'
|
||||
import { config as bpjsConfig } from './bpjs-list.cfg'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
data: any[]
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
|
||||
const tableConfig = computed(() => {
|
||||
return props.isBpjs ? bpjsConfig : config
|
||||
})
|
||||
// const emit = defineEmits<{
|
||||
// pageChange: [page: number]
|
||||
// }>()
|
||||
|
||||
// function handlePageChange(page: number) {
|
||||
// emit('pageChange', page)
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="tableConfig"
|
||||
:rows="data"
|
||||
/>
|
||||
<!-- <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
||||
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
// Helpers
|
||||
|
||||
// Types
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
// Handlers
|
||||
import {
|
||||
isReadonly,
|
||||
isProcessing,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
onResetState,
|
||||
handleActionSave,
|
||||
handleActionEdit,
|
||||
handleActionRemove,
|
||||
handleCancelForm,
|
||||
} from '~/handlers/procedure-src.handler'
|
||||
|
||||
// Services
|
||||
import { getList, getDetail } from '~/services/procedure-src.service'
|
||||
import SelectMedicine from '../_common/select-medicine.vue'
|
||||
import SelectMedicineForm from '../_common/select-medicine-form.vue'
|
||||
|
||||
interface Props {
|
||||
schema: any
|
||||
initialValues?: any
|
||||
errors?: FormErrors
|
||||
medicineData: any[]
|
||||
medicineFormsData: any[]
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleDialog: []
|
||||
}>()
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
const formRef = ref()
|
||||
|
||||
defineExpose({
|
||||
validate: () => formRef.value?.validate(),
|
||||
resetForm: () => formRef.value?.resetForm(),
|
||||
setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
|
||||
values: computed(() => formRef.value?.values),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
ref="formRef"
|
||||
v-slot="{ values }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:validate-on-mount="false"
|
||||
validation-mode="onSubmit"
|
||||
:initial-values="initialValues ? initialValues : {}"
|
||||
>
|
||||
<DE.Block :col-count="6" :cell-flex="false">
|
||||
<DE.Cell :col-span="6">
|
||||
<SelectMedicine :errors="errors"
|
||||
field-name="a1"
|
||||
label="Obat" placeholder="Pilih Obat"
|
||||
/>
|
||||
</DE.Cell>
|
||||
<DE.Cell :col-span="4" class="mt-1.5">
|
||||
<h1 class="mb-1">Signa</h1>
|
||||
<div class="flex items-start gap-3">
|
||||
<InputBase :errors="errors"
|
||||
field-name="a2"
|
||||
label="" placeholder="0"
|
||||
right-label="Frekuensi"
|
||||
numeric-only
|
||||
/>
|
||||
<p class="text-3xl text-gray-400">X</p>
|
||||
<InputBase :errors="errors"
|
||||
field-name="a3"
|
||||
label="" placeholder="0"
|
||||
right-label="Dosis"
|
||||
numeric-only
|
||||
/>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
<DE.Cell :col-span="2">
|
||||
<SelectMedicineForm :errors="errors"
|
||||
field-name="a4"
|
||||
label="Satuan" placeholder="Pilih Satuan"
|
||||
/>
|
||||
</DE.Cell>
|
||||
<DE.Cell :col-span="3">
|
||||
<InputBase :errors="errors"
|
||||
field-name="a5"
|
||||
label="Jumlah" placeholder="Masukkan Jumlah"
|
||||
/>
|
||||
</DE.Cell>
|
||||
<DE.Cell :col-span="3">
|
||||
<InputBase :errors="errors"
|
||||
field-name="a6"
|
||||
label="Durasi Pemberian" placeholder="Masukkan Durasi Pemberian"
|
||||
right-label="Hari"
|
||||
numeric-only
|
||||
/>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import ProcedureListDialog from './form.vue'
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { FieldArray } from 'vee-validate'
|
||||
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
||||
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
|
||||
import { is } from 'date-fns/locale'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import List from './form.vue'
|
||||
import { getValueLabelList as getMedicineFormList } from '~/services/medicine-form.service'
|
||||
import { getValueLabelList as getMedicineList } from '~/services/medicine.service'
|
||||
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import FormEntry from './form.vue'
|
||||
import { PrbSchema } from '~/schemas/prb.schema'
|
||||
import type { ExposedForm } from '~/types/form'
|
||||
import type { Prb } from '~/models/prb'
|
||||
import { PrbMedicineSchema } from '~/schemas/prb-medicine.schema'
|
||||
|
||||
interface Props {
|
||||
fieldName: string
|
||||
title: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const isOperativeActionDialogOpen = ref(false)
|
||||
provide("isOperativeActionDialogOpen", isOperativeActionDialogOpen);
|
||||
|
||||
const inputForm = ref<ExposedForm<any> | null>(null)
|
||||
const medicine = ref<{ value: string; label: string }[]>([])
|
||||
const medicineForms = ref<{ value: string; label: string }[]>([])
|
||||
|
||||
const handleToggleOperativeActionDialog = () => {
|
||||
isOperativeActionDialogOpen.value = !isOperativeActionDialogOpen.value
|
||||
}
|
||||
|
||||
async function init(){
|
||||
const [medicineRes, medicineFormRes] = await Promise.all([
|
||||
getMedicineList({ sort: 'createdAt:asc', }),
|
||||
getMedicineFormList({ sort: 'createdAt:asc', })
|
||||
])
|
||||
medicine.value = medicineRes
|
||||
medicineForms.value = medicineFormRes
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
init()
|
||||
})
|
||||
|
||||
async function handleAdd(psuhFn: (input: unknown) => void) {
|
||||
const validated = await composeFormData()
|
||||
psuhFn({
|
||||
code: validated.a1,
|
||||
name: validated.a2,
|
||||
signa: validated.a3,
|
||||
total: validated.a5,
|
||||
duration: validated.a6,
|
||||
})
|
||||
handleToggleOperativeActionDialog()
|
||||
}
|
||||
|
||||
async function composeFormData(): Promise<any> {
|
||||
const [input,] = await Promise.all([
|
||||
inputForm.value?.validate(),
|
||||
])
|
||||
|
||||
const results = [input]
|
||||
const allValid = results.every((r) => r?.valid)
|
||||
|
||||
// exit, if form errors happend during validation
|
||||
if (!allValid) return Promise.reject('Form validation failed')
|
||||
|
||||
const formData = input?.values
|
||||
return new Promise((resolve) => resolve(formData))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="mb-2 flex items-center gap-3">
|
||||
<h1 class="font-medium text-base">{{ title }}</h1>
|
||||
<Button @click="isOperativeActionDialogOpen = true" size="xs" variant="outline"
|
||||
class="rounded-lg text-orange-400 border-orange-400 bg-transparent">
|
||||
<Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
|
||||
Pilih {{ title }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FieldArray v-slot="{ fields, push, remove }" :name="props.fieldName">
|
||||
<Dialog
|
||||
v-model:open="isOperativeActionDialogOpen"
|
||||
title="" size="xl">
|
||||
<FormEntry
|
||||
ref="inputForm"
|
||||
:schema="PrbMedicineSchema"
|
||||
:medicine-data="medicine"
|
||||
:medicine-forms-data="medicineForms"
|
||||
@toggle-dialog="handleToggleOperativeActionDialog"
|
||||
/>
|
||||
<div class="mt-2 flex justify-end">
|
||||
<Button @click="handleAdd(push)" class="">
|
||||
<Icon name="i-lucide-save" class="h-4 w-4 align-middle transition-colors" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader class="bg-gray-100">
|
||||
<TableRow>
|
||||
<TableHead class="">Code</TableHead>
|
||||
<TableHead class="">Name</TableHead>
|
||||
<TableHead class="">Signa</TableHead>
|
||||
<TableHead class="">Jumlah</TableHead>
|
||||
<TableHead class="">Durasi Pemberian</TableHead>
|
||||
<TableHead class="w-24">Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="(field, idx) in fields" :key="idx">
|
||||
<TableCell class="2xl:pl-4">{{ field.value?.code }}</TableCell>
|
||||
<TableCell class="2xl:pl-4">{{ field.value?.name }}</TableCell>
|
||||
<TableCell class="2xl:pl-4">{{ field.value?.signa }}</TableCell>
|
||||
<TableCell class="2xl:pl-4">{{ field.value?.total }}</TableCell>
|
||||
<TableCell class="2xl:pl-4">{{ field.value?.duration }}</TableCell>
|
||||
<TableCell class="2xl:pl-4">
|
||||
<Button type="button" variant="destructive" size="sm" @click="remove(idx)">
|
||||
<Icon name="i-lucide-trash-2" class="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</FieldArray>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,83 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-choose.vue'))
|
||||
const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 120 }, // TGL. SEP
|
||||
{ width: 150 }, // NO. SEP
|
||||
{ width: 120 }, // PELAYANAN
|
||||
{ width: 100 }, // JALUR
|
||||
{ width: 150 }, // NO. RM
|
||||
{ width: 200 }, // NAMA PASIEN
|
||||
{ width: 150 }, // NO. KARTU BPJS
|
||||
{ width: 150 }, // NO. SURAT KONTROL
|
||||
{ width: 150 }, // TGL SURAT KONTROL
|
||||
{ width: 150 }, // KLINIK TUJUAN
|
||||
{ width: 200 }, // DPJP
|
||||
{ width: 200 }, // DIAGNOSIS AWAL
|
||||
{ width: 100 }, // AKSI
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'TGL. SEP' },
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'PELAYANAN' },
|
||||
{ label: 'JALUR' },
|
||||
{ label: 'NO. RM' },
|
||||
{ label: 'NAMA PASIEN' },
|
||||
{ label: 'NO. KARTU BPJS' },
|
||||
{ label: 'NO. SURAT KONTROL' },
|
||||
{ label: 'TGL SURAT KONTROL' },
|
||||
{ label: 'KLINIK TUJUAN' },
|
||||
{ label: 'DPJP' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'AKSI' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'letterDate',
|
||||
'letterNumber',
|
||||
'serviceType',
|
||||
'flow',
|
||||
'medicalRecordNumber',
|
||||
'patientName',
|
||||
'cardNumber',
|
||||
'controlLetterNumber',
|
||||
'controlLetterDate',
|
||||
'clinicDestination',
|
||||
'attendingDoctor',
|
||||
'diagnosis',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'letterNumber', label: 'NO. SEP' },
|
||||
{ key: 'patientName', label: 'Nama Pasien' },
|
||||
],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
status(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: statusBadge,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { config } from './list.cfg'
|
||||
|
||||
// Types
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import { ProcedureSrcSchema, type ProcedureSrcFormData } from '~/schemas/procedure-src.schema'
|
||||
|
||||
// Handlers
|
||||
import {
|
||||
isReadonly,
|
||||
isProcessing,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
onResetState,
|
||||
handleActionSave,
|
||||
handleActionEdit,
|
||||
handleActionRemove,
|
||||
handleCancelForm,
|
||||
} from '~/handlers/procedure-src.handler'
|
||||
|
||||
// Services
|
||||
import { getList, getDetail } from '~/services/procedure-src.service'
|
||||
|
||||
const title = ref('')
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleDialog: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import List from './list.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import { getList } from '~/services/vclaim-monitoring-visit.service'
|
||||
import type { VclaimSepData } from '~/models/vclaim'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import { defaultQuerySchema, defaultQueryParams } from '~/composables/usePaginatedList'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
chooseFn: (inputValue: string) => void
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const isSepDialogOpen = inject('isSepDialogOpen') as Ref<boolean>;
|
||||
const handleToggleSepDialog = () => isSepDialogOpen.value = !isSepDialogOpen.value
|
||||
|
||||
const data = ref<VclaimSepData[]>([])// Search model with debounce
|
||||
const searchInput = ref('')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
// const paginationMeta = reactive<PaginationMeta>({
|
||||
// recordCount: 0,
|
||||
// page: 1,
|
||||
// pageSize: 10,
|
||||
// totalPage: 5,
|
||||
// hasNext: false,
|
||||
// hasPrev: false,
|
||||
// })
|
||||
// // URL state management
|
||||
// const queryParams = useUrlSearchParams('history', {
|
||||
// initialValue: defaultQueryParams,
|
||||
// removeFalsyValues: true,
|
||||
// })
|
||||
// const params = computed(() => {
|
||||
// const result = defaultQuerySchema.safeParse(queryParams)
|
||||
// return result.data || defaultQueryParams
|
||||
// })
|
||||
|
||||
const recId = ref<string>(``)
|
||||
const recAction = ref<string>(``)
|
||||
const recItem = ref<any>({})
|
||||
const timestamp = ref<any>({})
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('timestamp', timestamp)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: props.title,
|
||||
icon: 'i-lucide-clipboard-list',
|
||||
}
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (val: string) => {
|
||||
searchInput.value = val
|
||||
},
|
||||
onClear: () => {
|
||||
searchInput.value = ''
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
async function getMonitoringVisitMappers() {
|
||||
data.value = []
|
||||
const tempArr: VclaimSepData[] = []
|
||||
|
||||
const result = await getList({
|
||||
serviceType: 1,
|
||||
search: debouncedSearch.value,
|
||||
})
|
||||
|
||||
if (result && result.success && result.body) {
|
||||
const visitsRaw = result.body?.response?.sep || []
|
||||
|
||||
visitsRaw.forEach((result: any) => {
|
||||
// Format pelayanan: "R.Inap" -> "Rawat Inap", "1" -> "Rawat Jalan", dll
|
||||
let serviceType = result.jnsPelayanan || '-'
|
||||
if (serviceType === 'R.Inap') {
|
||||
serviceType = 'Rawat Inap'
|
||||
} else if (serviceType === '1' || serviceType === 'R.Jalan') {
|
||||
serviceType = 'Rawat Jalan'
|
||||
}
|
||||
|
||||
tempArr.push({
|
||||
letterDate: result.tglSep || '-',
|
||||
letterNumber: result.noSep || '-',
|
||||
serviceType: serviceType,
|
||||
flow: '-',
|
||||
medicalRecordNumber: '-',
|
||||
patientName: result.nama || '-',
|
||||
cardNumber: result.noKartu || '-',
|
||||
controlLetterNumber: result.noRujukan || '-',
|
||||
controlLetterDate: result.tglPlgSep || '-',
|
||||
clinicDestination: result.poli || '-',
|
||||
attendingDoctor: '-',
|
||||
diagnosis: result.diagnosa || '-',
|
||||
careClass: result.kelasRawat || '-',
|
||||
})
|
||||
})
|
||||
data.value = tempArr
|
||||
}
|
||||
}
|
||||
// Handle pagination page change
|
||||
// function handlePageChange(page: number) {
|
||||
// // Update URL params - this will trigger watcher
|
||||
// queryParams['page-number'] = page
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
await getMonitoringVisitMappers()
|
||||
})
|
||||
|
||||
|
||||
watch([recId, recAction, timestamp], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showProcess:
|
||||
props.chooseFn(recItem.value.cardNumber)
|
||||
handleToggleSepDialog()
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
watch(debouncedSearch, () => {
|
||||
getMonitoringVisitMappers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<Dialog v-model:open="isSepDialogOpen" title="" size="full">
|
||||
<Header
|
||||
v-model="searchInput"
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="refSearchNav" />
|
||||
<List :data="data" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, { classVal: '!p-0.5' }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Catatan' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
|
||||
import { config } from './list-detail.cfg'
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
|
||||
|
||||
defineProps<{
|
||||
data: ProcedureRoomOrderItem[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4 2xl:mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Order Ruang
|
||||
</div>
|
||||
<DataTable class="border mb-3 2xl:mb-4"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Catatan' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['procedureRoom.code', 'procedureRoom.infra.name', 'note'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'mcuSrc.name', label: 'Nama' },
|
||||
],
|
||||
|
||||
components: {
|
||||
note(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: input,
|
||||
}
|
||||
},
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
|
||||
import { config } from './list-entry.cfg'
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
|
||||
|
||||
defineProps<{
|
||||
data: ProcedureRoomOrderItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
requestItem: []
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4 2xl:mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Order Ruang
|
||||
</div>
|
||||
<DataTable class="border mb-3 2xl:mb-4"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
<div class="-mx-1 [&_button]:mx-1">
|
||||
<Button @click="emit('requestItem')">
|
||||
<Icon name="i-lucide-plus" />
|
||||
Pilih Item
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { ProcedureRoom } from '~/models/procedure-room';
|
||||
|
||||
defineProps<{
|
||||
data: ProcedureRoom
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4 2xl:mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Detail Order
|
||||
</div>
|
||||
<DE.Block :col-count="2" mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label>No. Order</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>ORT-{{ data.id }}</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Tgl. Order</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>{{ data.createdAt?.substring(0, 10) }}</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [[
|
||||
{ label: 'Tgl. Order' },
|
||||
{ label: 'No. Order' },
|
||||
{ label: 'Ruangan' },
|
||||
{ label: 'Status' },
|
||||
{ label: 'Resume' },
|
||||
{ label: '' },
|
||||
]],
|
||||
|
||||
keys: ['date', 'number', 'room', 'status_code', 'resume', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'createdAt', label: 'Tgl. Order' },
|
||||
{ key: 'id', label: 'No. Order' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
return recX.createdAt ? recX.createdAt.substring(0, 10) : ''
|
||||
|
||||
},
|
||||
number: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
return `ORT-${recX.id}`
|
||||
},
|
||||
room: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
let result = ''
|
||||
if (recX.items && recX.items.length > 0) {
|
||||
recX.items.forEach((item, idx) => {
|
||||
result += item.infra?.name ? `<div>${item.infra.name}</div>` : ''
|
||||
})
|
||||
}
|
||||
// recX.ite
|
||||
return ''
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list.cfg'
|
||||
|
||||
defineProps<{
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
class="mb-4 border"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { ProcedureRoom } from '~/models/procedure-room';
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
|
||||
|
||||
const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
|
||||
defineProps<{
|
||||
data: ProcedureRoom[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pick: [item: ProcedureRoom]
|
||||
}>()
|
||||
|
||||
function pick(item: ProcedureRoom) {
|
||||
emit('pick', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Pilihan Ruang Tindakan
|
||||
</div>
|
||||
<div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
|
||||
<!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
|
||||
<div v-if="data.length > 0" v-for="item, idx in data">
|
||||
<Button
|
||||
:variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
|
||||
class="w-full"
|
||||
type="button"
|
||||
@click="pick(item)"
|
||||
>
|
||||
{{ item.infra?.name }}
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="col-span-full text-center text-sm text-gray-500">
|
||||
<div>Tidak ada data ruang tindakan.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import type { ProcedureRoom } from '~/models/procedure-room';
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
|
||||
|
||||
const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
|
||||
defineProps<{
|
||||
data: ProcedureRoom[]
|
||||
pickMode: 'single' | 'multi'
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pick: [item: ProcedureRoom]
|
||||
}>()
|
||||
|
||||
function pick(item: ProcedureRoom) {
|
||||
emit('pick', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Pilihan Ruang Tindakan
|
||||
</div>
|
||||
<div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
|
||||
<!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
|
||||
<div v-if="data.length > 0" v-for="item, idx in data">
|
||||
<Button
|
||||
:variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
|
||||
class="w-full"
|
||||
type="button"
|
||||
@click="pick(item)"
|
||||
>
|
||||
{{ item.infra?.name }}
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="col-span-full text-center text-sm text-gray-500">
|
||||
<div>Tidak ada data ruang tindakan.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { ProcedureRoom } from '~/models/procedure-room';
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
|
||||
|
||||
const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
|
||||
defineProps<{
|
||||
data: ProcedureRoom[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pick: [item: ProcedureRoom]
|
||||
}>()
|
||||
|
||||
function pick(item: ProcedureRoom) {
|
||||
emit('pick', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Daftar Pilihan Ruang Tindakan
|
||||
</div>
|
||||
<div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
|
||||
<!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
|
||||
<div v-if="data.length > 0" v-for="item, idx in data">
|
||||
<Button
|
||||
:variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
|
||||
class="w-full"
|
||||
type="button"
|
||||
@click="pick(item)"
|
||||
>
|
||||
{{ item.infra?.name }}
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="col-span-full text-center text-sm text-gray-500">
|
||||
<div>Tidak ada data ruang tindakan.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { procedureRoomTypeCodes } from '~/const/key-val/clinical'
|
||||
|
||||
const model = defineModel()
|
||||
model.value = 'procedure'
|
||||
|
||||
const emit = defineEmits<{
|
||||
pick: [type_code: string]
|
||||
}>()
|
||||
|
||||
function pick(type_code: string) {
|
||||
model.value = type_code
|
||||
emit('pick', type_code)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold text-sm 2xl:text-base mb-2">
|
||||
Jenis Ruang Tindakan
|
||||
</div>
|
||||
<div class="-mx-1 [&_button]:mx-1 ">
|
||||
<Button v-for="item, key in procedureRoomTypeCodes" :variant="model === key ? 'default' : 'outline'" @click="pick(key)">
|
||||
{{ item }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts" setup>
|
||||
import { inject, type Ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
// Components
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: { sepNumber: string; }
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const record = props.rec || {}
|
||||
const recSepId = inject('rec_sep_id') as Ref<string>
|
||||
|
||||
function handleSelection() {
|
||||
recSepId.value = record.sepNumber || ''
|
||||
const pathUrl = `/integration/bpjs-vclaim/sep/${record.sepNumber || ''}/link?source-path=${route.path}`
|
||||
router.push(pathUrl)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
|
||||
@click="handleSelection"
|
||||
>
|
||||
Detail SEP
|
||||
</Button>
|
||||
</template>
|
||||
@@ -24,11 +24,11 @@ import { useForm } from 'vee-validate'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
const props = defineProps<{
|
||||
mode?: string
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
isService?: boolean
|
||||
isShowPatient?: boolean;
|
||||
mode?: string
|
||||
isShowPatient?: boolean
|
||||
doctors: any[]
|
||||
diagnoses: any[]
|
||||
facilitiesFrom: any[]
|
||||
@@ -102,14 +102,17 @@ const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat K
|
||||
const titleLetterDate = computed(() =>
|
||||
admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
|
||||
)
|
||||
const mode = props.mode !== undefined ? props.mode : 'add'
|
||||
const attendingDoctorName = ref('')
|
||||
const diagnosisName = ref('')
|
||||
const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
|
||||
const isProvinceSelected = computed(() => accidentProvince.value !== '')
|
||||
const isCitySelected = computed(() => accidentCity.value !== '')
|
||||
const mode = props.mode !== undefined ? props.mode : 'add'
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const isService = ref(props.isService || false)
|
||||
const isShowPatient = ref(props.isShowPatient || false)
|
||||
const isShowSpecialist = ref(false)
|
||||
const isDateReload = ref(false)
|
||||
|
||||
// Debounced search for bpjsNumber and nationalId
|
||||
@@ -129,32 +132,138 @@ async function onFetchChildren(parentId: string): Promise<void> {
|
||||
console.log('onFetchChildren', parentId)
|
||||
}
|
||||
|
||||
const onBack = () => {
|
||||
emit('event', 'back')
|
||||
}
|
||||
|
||||
const onSaveNumber = () => {
|
||||
emit('event', 'save-sep-number', { sepNumber: props?.objects?.sepNumber || '' })
|
||||
}
|
||||
|
||||
// Submit handler
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
|
||||
emit('event', 'save-sep', values)
|
||||
})
|
||||
|
||||
const onInitialized = (objects: any) => {
|
||||
sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
|
||||
cardNumber.value = objects?.cardNumber || '-'
|
||||
nationalId.value = objects?.nationalIdentity || '-'
|
||||
medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
|
||||
patientName.value = objects?.patientName || '-'
|
||||
phoneNumber.value = objects?.phoneNumber || '-'
|
||||
if (objects?.sepType === 'internal') {
|
||||
admissionType.value = '4'
|
||||
}
|
||||
if (objects?.sepType === 'external') {
|
||||
admissionType.value = '1'
|
||||
}
|
||||
if (objects?.diagnosisName) {
|
||||
diagnosisName.value = objects?.diagnosisName
|
||||
}
|
||||
// Patient data
|
||||
if (objects?.serviceType) {
|
||||
serviceType.value = objects?.serviceType
|
||||
}
|
||||
if (objects?.fromClinic) {
|
||||
fromClinic.value = objects?.fromClinic
|
||||
}
|
||||
if (objects?.destinationClinic) {
|
||||
destinationClinic.value = objects?.destinationClinic
|
||||
}
|
||||
// Doctor & Support data
|
||||
if (objects?.attendingDoctor) {
|
||||
attendingDoctor.value = objects?.attendingDoctor
|
||||
}
|
||||
if (objects?.attendingDoctorName) {
|
||||
attendingDoctorName.value = objects?.attendingDoctorName
|
||||
}
|
||||
if (objects?.cob) {
|
||||
cob.value = objects?.cob
|
||||
}
|
||||
if (objects?.cataract) {
|
||||
cataract.value = objects?.cataract
|
||||
}
|
||||
if (objects?.clinicExcecutive) {
|
||||
clinicExcecutive.value = objects?.clinicExcecutive
|
||||
}
|
||||
if (objects?.procedureType) {
|
||||
procedureType.value = objects?.procedureType
|
||||
}
|
||||
if (objects?.supportCode) {
|
||||
supportCode.value = objects?.supportCode
|
||||
}
|
||||
// Class & Payment data
|
||||
if (objects?.classLevel) {
|
||||
classLevel.value = objects?.classLevel
|
||||
}
|
||||
if (objects?.classLevelUpgrade) {
|
||||
classLevelUpgrade.value = objects?.classLevelUpgrade
|
||||
}
|
||||
if (objects?.classPaySource) {
|
||||
classPaySource.value = objects?.classPaySource
|
||||
}
|
||||
if (objects?.responsiblePerson) {
|
||||
responsiblePerson.value = objects?.responsiblePerson
|
||||
}
|
||||
// Accident data
|
||||
if (objects?.trafficAccident) {
|
||||
accident.value = objects?.trafficAccident
|
||||
}
|
||||
if (objects?.lpNumber) {
|
||||
lpNumber.value = objects?.lpNumber
|
||||
}
|
||||
if (objects?.accidentDate) {
|
||||
accidentDate.value = objects?.accidentDate
|
||||
}
|
||||
if (objects?.accidentNote) {
|
||||
accidentNote.value = objects?.accidentNote
|
||||
}
|
||||
if (objects?.accidentProvince) {
|
||||
accidentProvince.value = objects?.accidentProvince
|
||||
}
|
||||
if (objects?.accidentCity) {
|
||||
accidentCity.value = objects?.accidentCity
|
||||
}
|
||||
if (objects?.accidentDistrict) {
|
||||
accidentDistrict.value = objects?.accidentDistrict
|
||||
}
|
||||
if (objects?.suplesi) {
|
||||
suplesi.value = objects?.suplesi
|
||||
}
|
||||
if (objects?.suplesiNumber) {
|
||||
suplesiNumber.value = objects?.suplesiNumber
|
||||
}
|
||||
// Visit purpose & Assessment
|
||||
if (objects?.purposeOfVisit) {
|
||||
purposeOfVisit.value = objects?.purposeOfVisit
|
||||
}
|
||||
if (objects?.serviceAssessment) {
|
||||
serviceAssessment.value = objects?.serviceAssessment
|
||||
}
|
||||
// Note & Specialist
|
||||
if (objects?.note) {
|
||||
note.value = objects?.note
|
||||
}
|
||||
if (objects?.subSpecialistId) {
|
||||
subSpecialistId.value = objects?.subSpecialistId
|
||||
}
|
||||
// Referral letter
|
||||
if (objects?.referralLetterNumber) {
|
||||
referralLetterNumber.value = objects?.referralLetterNumber
|
||||
}
|
||||
}
|
||||
|
||||
watch(props, (value) => {
|
||||
const objects = value.objects || ({} as any)
|
||||
if (Object.keys(objects).length > 0) {
|
||||
sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
|
||||
cardNumber.value = objects?.cardNumber || '-'
|
||||
nationalId.value = objects?.nationalIdentity || '-'
|
||||
medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
|
||||
patientName.value = objects?.patientName || '-'
|
||||
phoneNumber.value = objects?.phoneNumber || '-'
|
||||
if (objects?.sepType === 'internal') {
|
||||
admissionType.value = '4'
|
||||
}
|
||||
if (objects?.sepType === 'external') {
|
||||
admissionType.value = '1'
|
||||
}
|
||||
if (objects?.diagnoseLabel) {
|
||||
initialDiagnosis.value = objects?.diagnoseLabel
|
||||
}
|
||||
onInitialized(objects)
|
||||
isDateReload.value = true
|
||||
setTimeout(() => {
|
||||
if (objects?.sepDate) {
|
||||
sepDate.value = objects?.sepDate
|
||||
referralLetterDate.value = objects?.sepDate
|
||||
}
|
||||
if (objects?.letterDate) {
|
||||
referralLetterDate.value = objects?.letterDate
|
||||
}
|
||||
@@ -206,10 +315,11 @@ onMounted(() => {
|
||||
</Label>
|
||||
<Field :errMessage="errors.sepDate">
|
||||
<DatepickerSingle
|
||||
v-if="!isDateReload"
|
||||
id="sepDate"
|
||||
v-model="sepDate"
|
||||
v-bind="sepDateAttrs"
|
||||
:disabled="true"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih tanggal sep"
|
||||
/>
|
||||
</Field>
|
||||
@@ -284,7 +394,7 @@ onMounted(() => {
|
||||
id="cardNumber"
|
||||
v-model="cardNumber"
|
||||
v-bind="cardNumberAttrs"
|
||||
:disabled="false"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
@@ -299,7 +409,7 @@ onMounted(() => {
|
||||
id="nationalId"
|
||||
v-model="nationalId"
|
||||
v-bind="nationalIdAttrs"
|
||||
:disabled="false"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
@@ -378,6 +488,7 @@ onMounted(() => {
|
||||
"
|
||||
/>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
|
||||
@@ -406,7 +517,7 @@ onMounted(() => {
|
||||
id="referralLetterDate"
|
||||
v-model="referralLetterDate"
|
||||
v-bind="referralLetterDateAttrs"
|
||||
:disabled="true"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih tanggal surat"
|
||||
/>
|
||||
</Field>
|
||||
@@ -417,11 +528,12 @@ onMounted(() => {
|
||||
Klinik Eksekutif
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.cob">
|
||||
<Field :errMessage="errors.clinicExcecutive">
|
||||
<RadioGroup
|
||||
v-model="clinicExcecutive"
|
||||
v-bind="clinicExcecutiveAttrs"
|
||||
class="flex items-center gap-2"
|
||||
:disabled="isLoading || isReadonly"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
@@ -481,7 +593,7 @@ onMounted(() => {
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Cell v-if="!isReadonly && isShowSpecialist">
|
||||
<Label height="compact">
|
||||
Spesialis / Subspesialis
|
||||
<span class="text-red-500">*</span>
|
||||
@@ -504,6 +616,7 @@ onMounted(() => {
|
||||
</Label>
|
||||
<Field :errMessage="errors.attendingDoctor">
|
||||
<Combobox
|
||||
v-if="!isReadonly"
|
||||
id="attendingDoctor"
|
||||
v-model="attendingDoctor"
|
||||
v-bind="attendingDoctorAttrs"
|
||||
@@ -514,6 +627,12 @@ onMounted(() => {
|
||||
empty-message="Item tidak ditemukan"
|
||||
@update:searchText="emit('fetch', { menu: 'doctor', value: $event })"
|
||||
/>
|
||||
<Input
|
||||
v-else
|
||||
v-model="attendingDoctorName"
|
||||
v-bind="attendingDoctorAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
@@ -524,6 +643,7 @@ onMounted(() => {
|
||||
</Label>
|
||||
<Field :errMessage="errors.initialDiagnosis">
|
||||
<Combobox
|
||||
v-if="!isReadonly"
|
||||
id="initialDiagnosis"
|
||||
v-model="initialDiagnosis"
|
||||
v-bind="initialDiagnosisAttrs"
|
||||
@@ -534,6 +654,12 @@ onMounted(() => {
|
||||
empty-message="Item tidak ditemukan"
|
||||
@update:searchText="emit('fetch', { menu: 'diagnosis', value: $event })"
|
||||
/>
|
||||
<Input
|
||||
v-else
|
||||
v-model="diagnosisName"
|
||||
v-bind="initialDiagnosisAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -658,6 +784,7 @@ onMounted(() => {
|
||||
v-model="cob"
|
||||
v-bind="cobAttrs"
|
||||
class="flex items-center gap-2"
|
||||
:disabled="isLoading || isReadonly"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
@@ -668,7 +795,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="Tidak"
|
||||
value="no"
|
||||
id="cob-no"
|
||||
/>
|
||||
<Label for="cob-no">Tidak</Label>
|
||||
@@ -687,6 +814,7 @@ onMounted(() => {
|
||||
v-model="cataract"
|
||||
v-bind="cataractAttrs"
|
||||
class="flex items-center gap-2"
|
||||
:disabled="isLoading || isReadonly"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
@@ -756,7 +884,7 @@ onMounted(() => {
|
||||
id="accidentDate"
|
||||
v-model="accidentDate"
|
||||
v-bind="accidentDateAttrs"
|
||||
:disabled="true"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih tanggal kejadian"
|
||||
/>
|
||||
</Field>
|
||||
@@ -966,6 +1094,7 @@ onMounted(() => {
|
||||
<!-- Actions -->
|
||||
<div class="mt-6 flex justify-end gap-2">
|
||||
<Button
|
||||
v-if="props.mode === 'detail'"
|
||||
variant="ghost"
|
||||
type="button"
|
||||
class="h-[40px] min-w-[120px] text-orange-400 hover:bg-green-50"
|
||||
@@ -978,6 +1107,7 @@ onMounted(() => {
|
||||
Riwayat SEP
|
||||
</Button>
|
||||
<Button
|
||||
v-if="props.mode === 'detail'"
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
|
||||
@@ -989,6 +1119,7 @@ onMounted(() => {
|
||||
Preview
|
||||
</Button>
|
||||
<Button
|
||||
v-if="props.mode === 'add'"
|
||||
type="button"
|
||||
class="h-[40px] min-w-[120px] text-white"
|
||||
:disabled="isLoading"
|
||||
@@ -1000,6 +1131,32 @@ onMounted(() => {
|
||||
/>
|
||||
Simpan
|
||||
</Button>
|
||||
<Button
|
||||
v-if="props.mode === 'detail'"
|
||||
type="button"
|
||||
class="h-[40px] min-w-[120px] text-white"
|
||||
:disabled="isLoading"
|
||||
@click="onBack"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-chevron-left"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="props.mode === 'link'"
|
||||
type="button"
|
||||
class="h-[40px] min-w-[120px] text-white"
|
||||
:disabled="isLoading"
|
||||
@click="onSaveNumber"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-save"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Terapkan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -9,21 +9,25 @@ export interface SepHistoryData {
|
||||
careClass: string
|
||||
}
|
||||
|
||||
const ActionHistory = defineAsyncComponent(() => import('~/components/app/sep/action-history.vue'))
|
||||
|
||||
const keysDefault = ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass']
|
||||
const colsDefault = [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }]
|
||||
const headersDefault = [
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'TGL. SEP' },
|
||||
{ label: 'NO. RUJUKAN' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'JENIS PELAYANAN' },
|
||||
{ label: 'KELAS RAWAT' },
|
||||
]
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
|
||||
cols: [...colsDefault],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'TGL. SEP' },
|
||||
{ label: 'NO. RUJUKAN' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'JENIS PELAYANAN' },
|
||||
{ label: 'KELAS RAWAT' },
|
||||
],
|
||||
],
|
||||
headers: [[...headersDefault]],
|
||||
|
||||
keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
|
||||
keys: [...keysDefault],
|
||||
|
||||
delKeyNames: [{ key: 'code', label: 'Kode' }],
|
||||
|
||||
@@ -33,3 +37,27 @@ export const config: Config = {
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
|
||||
export const configDetail: Config = {
|
||||
cols: [...colsDefault, { width: 50 }],
|
||||
|
||||
headers: [[...headersDefault, { label: 'AKSI' }]],
|
||||
|
||||
keys: [...keysDefault, 'action'],
|
||||
|
||||
delKeyNames: [{ key: 'code', label: 'Kode' }],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: { ...(rec as object) },
|
||||
component: ActionHistory,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SepDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
|
||||
@@ -7,9 +7,10 @@ import type { SepHistoryData } from './list-cfg.history'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list-cfg.history'
|
||||
import { config, configDetail } from './list-cfg.history'
|
||||
|
||||
const props = defineProps<{
|
||||
isAction?: boolean
|
||||
data: SepHistoryData[]
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
@@ -25,7 +26,7 @@ function handlePageChange(page: number) {
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
v-bind="isAction ? configDetail : config"
|
||||
:rows="props.data"
|
||||
/>
|
||||
<PaginationView
|
||||
|
||||
@@ -16,6 +16,7 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
isAction?: boolean
|
||||
histories: Array<SepHistoryData>
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
@@ -37,7 +38,7 @@ const emit = defineEmits<{
|
||||
</DialogHeader>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<ListHistory :data="histories" :pagination-meta="paginationMeta" />
|
||||
<ListHistory :data="histories" :is-action="props.isAction || false" :pagination-meta="paginationMeta" />
|
||||
</div>
|
||||
|
||||
<DialogFooter></DialogFooter>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
isDisabled?: boolean
|
||||
isWithTime?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'birthDate',
|
||||
label = 'Tanggal Lahir',
|
||||
placeholder = 'Pilih tanggal lahir',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
// Reactive variables for age calculation
|
||||
const patientAge = ref<string>('Masukkan tanggal lahir')
|
||||
|
||||
// Function to calculate age with years, months, and days
|
||||
function calculateAge(birthDate: string | Date | undefined): string {
|
||||
if (!birthDate) {
|
||||
return 'Masukkan tanggal lahir'
|
||||
}
|
||||
|
||||
try {
|
||||
let dateObj: Date
|
||||
|
||||
if (typeof birthDate === 'string') {
|
||||
dateObj = parseISO(birthDate)
|
||||
} else {
|
||||
dateObj = birthDate
|
||||
}
|
||||
|
||||
const today = new Date()
|
||||
|
||||
// Calculate years, months, and days
|
||||
const totalYears = differenceInYears(today, dateObj)
|
||||
|
||||
// Calculate remaining months after years
|
||||
const yearsPassed = new Date(dateObj)
|
||||
yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
|
||||
const remainingMonths = differenceInMonths(today, yearsPassed)
|
||||
|
||||
// Calculate remaining days after years and months
|
||||
const monthsPassed = new Date(yearsPassed)
|
||||
monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
|
||||
const remainingDays = differenceInDays(today, monthsPassed)
|
||||
|
||||
// Format the result
|
||||
const parts = []
|
||||
if (totalYears > 0) parts.push(`${totalYears} Tahun`)
|
||||
if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
|
||||
if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
|
||||
|
||||
return parts.length > 0 ? parts.join(' ') : '0 Hari'
|
||||
} catch {
|
||||
return 'Masukkan tanggal lahir'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired && !isDisabled"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="birthDate"
|
||||
:type="props.isWithTime ? 'datetime-local' : 'date'"
|
||||
min="1900-01-01"
|
||||
v-bind="componentField"
|
||||
:placeholder="placeholder"
|
||||
:disabled="isDisabled"
|
||||
@update:model-value="
|
||||
(value: string | number) => {
|
||||
const dateStr = typeof value === 'number' ? String(value) : value
|
||||
patientAge = calculateAge(dateStr)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
||||
import { PrbProgramTypeOptList } from '~/lib/constants'
|
||||
import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Item } from '~/components/pub/my-ui/combobox'
|
||||
|
||||
const props = defineProps<{
|
||||
fieldName?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
errors?: FormErrors
|
||||
class?: string
|
||||
selectClass?: string
|
||||
fieldGroupClass?: string
|
||||
labelClass?: string
|
||||
isRequired?: boolean
|
||||
}>()
|
||||
|
||||
const {
|
||||
fieldName = 'job',
|
||||
label = 'Pekerjaan',
|
||||
placeholder = 'Pilih pekerjaan',
|
||||
errors,
|
||||
class: containerClass,
|
||||
fieldGroupClass,
|
||||
labelClass,
|
||||
} = props
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
// function handleDpjpChange(selected: string) {
|
||||
// selectedDpjpId.value = selected ?? null
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
||||
<DE.Label
|
||||
:label-for="fieldName"
|
||||
:class="cn('select-field-label', labelClass)"
|
||||
:is-required="isRequired"
|
||||
>
|
||||
{{ label }}
|
||||
</DE.Label>
|
||||
<DE.Field
|
||||
:id="fieldName"
|
||||
:errors="errors"
|
||||
:class="cn('select-field-wrapper')"
|
||||
>
|
||||
<FormField
|
||||
v-slot="{ componentField }"
|
||||
:name="fieldName"
|
||||
>
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
class="focus:ring-0 focus:ring-offset-0"
|
||||
:id="fieldName"
|
||||
v-bind="componentField"
|
||||
:items="PrbProgramTypeOptList"
|
||||
:placeholder="placeholder"
|
||||
search-placeholder="Cari..."
|
||||
empty-message="Data tidak ditemukan"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
import { type Variants, Badge } from '~/components/pub/ui/badge'
|
||||
import { cn, } from '~/lib/utils'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { VaccineData } from '~/models/vaccine-data';
|
||||
|
||||
// #region Props & Emits
|
||||
const props = defineProps<{
|
||||
instance: VaccineData | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click'): void
|
||||
}>()
|
||||
|
||||
const dummy = [
|
||||
{
|
||||
id: 1,
|
||||
number: 1,
|
||||
name: 'Operasi',
|
||||
code: 'OP-001'
|
||||
}
|
||||
]
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
// #endregion
|
||||
|
||||
// Computed addresses from nested data
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
function onClick() {
|
||||
emit('click')
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article :class="cn('mb-5 space-y-1',)">
|
||||
<DetailRow label="Jenis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Tanggal Pemberian Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Tanggal Kedaluwarsa Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Nomor Batch Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Dosis Vaksin">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Dosis Ke">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Lokasi Injeksi">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
<DetailRow label="Tanggal Terlaksana">{{ props.instance?.date ? props.instance?.date : '-' }}</DetailRow>
|
||||
</article>
|
||||
|
||||
<div class="border-t-1 py-2 flex justify-end border-t-slate-300">
|
||||
<PubMyUiNavFooterBa @click="onClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import SelectDate from './_common/select-date.vue'
|
||||
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
||||
import SelectVaccineType from './_common/select-vaccine-type.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
schema: any
|
||||
initialValues?: any
|
||||
errors?: FormErrors
|
||||
}>(), {
|
||||
|
||||
})
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
const formRef = ref()
|
||||
|
||||
defineExpose({
|
||||
validate: () => formRef.value?.validate(),
|
||||
resetForm: () => formRef.value?.resetForm(),
|
||||
setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
|
||||
values: computed(() => formRef.value?.values),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
ref="formRef"
|
||||
v-slot="{ values }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:validate-on-mount="false"
|
||||
validation-mode="onSubmit"
|
||||
:initial-values="initialValues ? initialValues : {}"
|
||||
>
|
||||
<DE.Block :col-count="3" :cell-flex="false">
|
||||
<SelectVaccineType :errors="errors"
|
||||
field-name="a1"
|
||||
label="Jenis Vaksin" placeholder="Pilih Jenis Vaksin"
|
||||
is-required
|
||||
/>
|
||||
<SelectDate
|
||||
field-name="a2"
|
||||
label="Tanggal Pemberian Vaksin"
|
||||
:errors="errors"
|
||||
is-with-time
|
||||
/>
|
||||
<SelectDate
|
||||
field-name="a3"
|
||||
label="Tanggal Kedaluwarsa Vaksin"
|
||||
:errors="errors"
|
||||
is-with-time
|
||||
/>
|
||||
</DE.Block>
|
||||
|
||||
<DE.Block :col-count="2" :cell-flex="false">
|
||||
<InputBase :errors="errors"
|
||||
field-name="a4"
|
||||
label="Nomor Batch Vaksin" placeholder="Isi Nomor Batch Vaksin"
|
||||
/>
|
||||
<InputBase :errors="errors"
|
||||
field-name="a5"
|
||||
label="Dosis Vaksin" placeholder="Isi Dosis Vaksin"
|
||||
right-label="ml"
|
||||
numeric-only
|
||||
/>
|
||||
<InputBase :errors="errors"
|
||||
field-name="a6"
|
||||
label="Dosis Ke" placeholder="Isi Dosis Ke"
|
||||
numeric-only
|
||||
/>
|
||||
<InputBase :errors="errors"
|
||||
field-name="a7"
|
||||
label="Lokasi Injeksi" placeholder="Isi Lokasi Injeksi"
|
||||
/>
|
||||
</DE.Block>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import actionDoctor from '~/components/pub/my-ui/data/dropdown-action-dd.vue'
|
||||
import actionNursePhysio from '~/components/pub/my-ui/data/dropdown-action-detail.vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {width: 50}, ],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Jenis Vaksin' },
|
||||
{ label: 'Tanggal Pemberian Vaksin' },
|
||||
{ label: 'Tanggal Kedaluwarsa Vaksin' },
|
||||
{ label: 'Dosis Ke' },
|
||||
{ label: 'Action' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['name1', 'date', 'date', 'name2', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: unknown): unknown => {
|
||||
const date = (rec as any).date
|
||||
if (typeof date == 'object' && date) {
|
||||
return (date as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof date == 'string') {
|
||||
return (date as string).substring(0, 10)
|
||||
}
|
||||
return date
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import actionDoctor from '~/components/pub/my-ui/data/dropdown-action-dd.vue'
|
||||
import actionNursePhysio from '~/components/pub/my-ui/data/dropdown-action-detail.vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-detail.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {width: 50}, ],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Jenis Vaksin' },
|
||||
{ label: 'Tanggal Pemberian Vaksin' },
|
||||
{ label: 'Tanggal Kedaluwarsa Vaksin' },
|
||||
{ label: 'Dosis Ke' },
|
||||
{ label: 'Action' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['name1', 'date', 'date', 'name2', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: unknown): unknown => {
|
||||
const date = (rec as any).date
|
||||
if (typeof date == 'object' && date) {
|
||||
return (date as Date).toLocaleDateString('id-ID')
|
||||
} else if (typeof date == 'string') {
|
||||
return (date as string).substring(0, 10)
|
||||
}
|
||||
return date
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {
|
||||
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
import { config as configDoctor } from './list-doctor.cfg'
|
||||
import { config as configNursePhysio } from './list-nurse-physio.cfg'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}>(), {
|
||||
|
||||
})
|
||||
|
||||
const { user, } = useUserStore()
|
||||
const tableConfig = computed(() => {
|
||||
if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
|
||||
return configDoctor
|
||||
} else {
|
||||
return configNursePhysio
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="tableConfig"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -143,7 +143,7 @@ watch([recId, recAction, timestamp], () => {
|
||||
break
|
||||
|
||||
case ActionEvents.showEdit:
|
||||
if(pagePermission.canUpdate){
|
||||
if(pagePermission.canUpdate){
|
||||
navigateTo({
|
||||
name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
|
||||
params: { id: encounterId, "control_letter_id": recId.value },
|
||||
@@ -186,7 +186,7 @@ watch([recId, recAction, timestamp], () => {
|
||||
@click="isHistoryDialogOpen = true">
|
||||
<Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
|
||||
@@ -212,7 +212,7 @@ watch([recId, recAction, timestamp], () => {
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
|
||||
|
||||
<HistoryDialog
|
||||
v-model:is-modal-open="isHistoryDialogOpen"
|
||||
:data="historyData.data.value"
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
|
||||
// Apps
|
||||
import { getList, getDetail } from '~/services/mcu-order.service'
|
||||
import List from '~/components/app/mcu-order/list.vue'
|
||||
import List from '~/components/app/mcu-order/micro-list.vue'
|
||||
import type { McuOrder } from '~/models/mcu-order'
|
||||
|
||||
const route = useRoute()
|
||||
@@ -55,7 +55,7 @@ const {
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Order Lab PK',
|
||||
title: 'Order Lab Mikro',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
|
||||
@@ -63,7 +63,7 @@ const {
|
||||
fetchFn: async ({ page, search }) => {
|
||||
const result = await getList({
|
||||
'encounter-id': id,
|
||||
typeCode: 'dev-record',
|
||||
'type-code': 'dev-record',
|
||||
includes: 'encounter',
|
||||
search,
|
||||
page,
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
|
||||
import AppViewPatient from '~/components/app/patient/view-patient.vue'
|
||||
import AppViewHistory from '~/components/app/sep/view-history.vue'
|
||||
|
||||
// Helpers
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
// Handlers
|
||||
import { getDetail as getDoctorDetail } from '~/services/doctor.service'
|
||||
import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
|
||||
import { genDoctor, type Doctor } from '~/models/doctor'
|
||||
import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
@@ -34,54 +34,33 @@ const {
|
||||
isLoadingDetail,
|
||||
formObjects,
|
||||
openPatient,
|
||||
isMemberValid,
|
||||
isSepValid,
|
||||
isCheckingSep,
|
||||
isSaveDisabled,
|
||||
isSaving,
|
||||
isLoading,
|
||||
patients,
|
||||
selectedDoctor,
|
||||
selectedPatient,
|
||||
selectedPatientObject,
|
||||
paginationMeta,
|
||||
toNavigateSep,
|
||||
getListPath,
|
||||
handleInit,
|
||||
loadEncounterDetail,
|
||||
getFetchEncounterDetail,
|
||||
handleSaveEncounter,
|
||||
getPatientsList,
|
||||
getPatientCurrent,
|
||||
getPatientByIdentifierSearch,
|
||||
getIsSubspecialist,
|
||||
// getIsSubspecialist,
|
||||
getDoctorInfo,
|
||||
getValidateMember,
|
||||
getValidateSepNumber,
|
||||
handleFetchDoctors,
|
||||
} = useEncounterEntry(props)
|
||||
const { recSepId, openHistory, histories, getMonitoringHistoryMappers } = useIntegrationSepEntry()
|
||||
|
||||
const debouncedSepNumber = refDebounced(sepNumber, 500)
|
||||
const selectedDoctor = ref<Doctor>(genDoctor())
|
||||
|
||||
provide('rec_select_id', recSelectId)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch(debouncedSepNumber, async (newValue) => {
|
||||
await getValidateSepNumber(newValue)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => formObjects.value?.paymentType,
|
||||
(newValue) => {
|
||||
isSepValid.value = false
|
||||
if (newValue !== 'jkn') {
|
||||
sepNumber.value = ''
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await handleInit()
|
||||
if (props.id > 0) {
|
||||
await loadEncounterDetail()
|
||||
}
|
||||
})
|
||||
|
||||
///// Functions
|
||||
function handleSavePatient() {
|
||||
@@ -116,12 +95,28 @@ async function handleEvent(menu: string, value?: any) {
|
||||
}
|
||||
toNavigateSep({
|
||||
isService: 'false',
|
||||
encounterId: props.id || null,
|
||||
sourcePath: route.path,
|
||||
resource: `${props.classCode}-${props.subClassCode}`,
|
||||
...value,
|
||||
})
|
||||
} else if (menu === 'sep-number-changed') {
|
||||
await getValidateSepNumber(String(value || ''))
|
||||
const sepNumberText = String(value || '').trim()
|
||||
if (sepNumberText.length > 5) {
|
||||
await getValidateSepNumber(sepNumberText)
|
||||
}
|
||||
} else if (menu === 'member-changed') {
|
||||
const memberText = String(value || '').trim()
|
||||
if (memberText.length > 5) {
|
||||
await getValidateMember(memberText)
|
||||
}
|
||||
} else if (menu === 'search-sep') {
|
||||
const memberText = String(value?.cardNumber || '').trim()
|
||||
if (memberText.length < 5) return
|
||||
getMonitoringHistoryMappers(memberText).then(() => {
|
||||
openHistory.value = true
|
||||
})
|
||||
return
|
||||
} else if (menu === 'save') {
|
||||
await handleSaveEncounter(value)
|
||||
} else if (menu === 'cancel') {
|
||||
@@ -129,13 +124,39 @@ async function handleEvent(menu: string, value?: any) {
|
||||
}
|
||||
}
|
||||
|
||||
async function getDoctorInfo(value: string) {
|
||||
const resp = await getDoctorDetail(value, { includes: 'unit,specialist,subspecialist'})
|
||||
if (resp.success) {
|
||||
selectedDoctor.value = resp.body.data
|
||||
// console.log(selectedDoctor.value)
|
||||
provide('rec_select_id', recSelectId)
|
||||
provide('rec_sep_id', recSepId)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch(debouncedSepNumber, async (newValue) => {
|
||||
await getValidateSepNumber(newValue)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => formObjects.value?.paymentType,
|
||||
(newValue) => {
|
||||
isSepValid.value = false
|
||||
if (newValue !== 'jkn') {
|
||||
sepNumber.value = ''
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
async (newId) => {
|
||||
if (props.formType === 'edit' && newId > 0) {
|
||||
await getFetchEncounterDetail()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await handleInit()
|
||||
if (props.formType === 'edit' && props.id > 0) {
|
||||
await getFetchEncounterDetail()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -144,13 +165,15 @@ async function getDoctorInfo(value: string) {
|
||||
name="i-lucide-user"
|
||||
class="me-2"
|
||||
/>
|
||||
<span class="font-semibold">{{ props.formType }}</span>
|
||||
<span class="font-semibold">{{ props.formType === 'add' ? 'Tambah' : 'Ubah' }}</span>
|
||||
Kunjungan
|
||||
</div>
|
||||
|
||||
<AppEncounterEntryForm
|
||||
ref="formRef"
|
||||
:mode="props.formType"
|
||||
:is-loading="isLoadingDetail"
|
||||
:is-member-valid="isMemberValid"
|
||||
:is-sep-valid="isSepValid"
|
||||
:is-checking-sep="isCheckingSep"
|
||||
:payments="paymentsList"
|
||||
@@ -165,7 +188,6 @@ async function getDoctorInfo(value: string) {
|
||||
@event="handleEvent"
|
||||
@fetch="handleFetch"
|
||||
/>
|
||||
|
||||
<AppViewPatient
|
||||
v-model:open="openPatient"
|
||||
v-model:selected="selectedPatient"
|
||||
@@ -184,7 +206,11 @@ async function getDoctorInfo(value: string) {
|
||||
"
|
||||
@save="handleSavePatient"
|
||||
/>
|
||||
|
||||
<AppViewHistory
|
||||
v-model:open="openHistory"
|
||||
:is-action="true"
|
||||
:histories="histories"
|
||||
/>
|
||||
<!-- Footer Actions -->
|
||||
<div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
|
||||
<Button
|
||||
|
||||
@@ -13,7 +13,11 @@ import { useSidebar } from '~/components/pub/ui/sidebar/utils'
|
||||
import { getServicePosition } from '~/lib/roles' // previously getPositionAs
|
||||
|
||||
// Services
|
||||
import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
|
||||
import {
|
||||
getList as getEncounterList,
|
||||
remove as removeEncounter,
|
||||
cancel as cancelEncounter,
|
||||
} from '~/services/encounter.service'
|
||||
|
||||
// Apps
|
||||
import Content from '~/components/app/encounter/list.vue'
|
||||
@@ -34,8 +38,14 @@ const props = defineProps<{
|
||||
const { setOpen } = useSidebar()
|
||||
setOpen(true)
|
||||
|
||||
// Role reactivities
|
||||
const { getActiveRole } = useUserStore()
|
||||
|
||||
// Main data
|
||||
const data = ref([])
|
||||
const dataFiltered = ref([])
|
||||
const filterParams = ref<any>({})
|
||||
const activeServicePosition = ref(getServicePosition(getActiveRole()))
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
summary: false,
|
||||
isTableLoading: false,
|
||||
@@ -87,39 +97,38 @@ const filter = ref<{
|
||||
schema: {},
|
||||
})
|
||||
|
||||
// Role reactivities
|
||||
const { getActiveRole } = useUserStore()
|
||||
const activeServicePosition = ref(getServicePosition(getActiveRole()))
|
||||
provide('activeServicePosition', activeServicePosition)
|
||||
watch(getActiveRole, (role? : string) => {
|
||||
activeServicePosition.value = getServicePosition(role)
|
||||
})
|
||||
|
||||
// Recrod reactivities
|
||||
provide('activeServicePosition', activeServicePosition)
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
watch(() => recAction.value, () => {
|
||||
const basePath = `/${props.classCode}/encounter`
|
||||
// console.log(`${basePath}/${recId.value}`, recAction.value)
|
||||
// return
|
||||
if (recAction.value === ActionEvents.showConfirmDelete) {
|
||||
isRecordConfirmationOpen.value = true
|
||||
} else if (recAction.value === ActionEvents.showCancel) {
|
||||
isRecordCancelOpen.value = true
|
||||
} else if (recAction.value === ActionEvents.showDetail) {
|
||||
navigateTo(`${basePath}/${recId.value}`)
|
||||
} else if (recAction.value === ActionEvents.showEdit) {
|
||||
navigateTo(`${basePath}/${recId.value}/edit`)
|
||||
} else if (recAction.value === ActionEvents.showProcess) {
|
||||
navigateTo(`${basePath}/${recId.value}/process`)
|
||||
} else if (recAction.value === ActionEvents.showConfirmDelete) {
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
recAction.value = '' // reset
|
||||
|
||||
watch(getActiveRole, (role?: string) => {
|
||||
activeServicePosition.value = getServicePosition(role)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => recAction.value,
|
||||
() => {
|
||||
const basePath = `/${props.classCode}/encounter`
|
||||
if (recAction.value === ActionEvents.showConfirmDelete) {
|
||||
isRecordConfirmationOpen.value = true
|
||||
} else if (recAction.value === ActionEvents.showCancel) {
|
||||
isRecordCancelOpen.value = true
|
||||
} else if (recAction.value === ActionEvents.showDetail) {
|
||||
navigateTo(`${basePath}/${recId.value}/detail`)
|
||||
} else if (recAction.value === ActionEvents.showEdit) {
|
||||
navigateTo(`${basePath}/${recId.value}/edit`)
|
||||
} else if (recAction.value === ActionEvents.showProcess) {
|
||||
navigateTo(`${basePath}/${recId.value}/process`)
|
||||
} else if (recAction.value === ActionEvents.showConfirmDelete) {
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
recAction.value = '' // reset
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
})
|
||||
@@ -127,17 +136,21 @@ onMounted(() => {
|
||||
/////// Functions
|
||||
async function getPatientList() {
|
||||
isLoading.isTableLoading = true
|
||||
const includesParams =
|
||||
'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person'
|
||||
data.value = []
|
||||
try {
|
||||
const params: any = { includes: 'patient,patient-person' }
|
||||
const params: any = { includes: includesParams, ...filterParams.value }
|
||||
if (props.classCode) {
|
||||
params['class-code'] = props.classCode
|
||||
params.class_code = props.classCode
|
||||
}
|
||||
if (props.subClassCode) {
|
||||
params['sub-class-code'] = props.subClassCode
|
||||
params.sub_class_code = props.subClassCode
|
||||
}
|
||||
const result = await getEncounterList(params)
|
||||
if (result.success) {
|
||||
data.value = result.body?.data || []
|
||||
dataFiltered.value = [...data.value]
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching encounter list:', error)
|
||||
@@ -146,6 +159,15 @@ async function getPatientList() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleFilterApply(filters: { personName: string; startDate: string; endDate: string }) {
|
||||
filterParams.value = {
|
||||
'person-name': filters.personName,
|
||||
'start-date': filters.startDate,
|
||||
'end-date': filters.endDate,
|
||||
}
|
||||
getPatientList()
|
||||
}
|
||||
|
||||
// Handle confirmation result
|
||||
async function handleConfirmCancel(record: any, action: string) {
|
||||
if (action === 'deactivate' && record?.id) {
|
||||
@@ -240,7 +262,8 @@ function handleRemoveConfirmation() {
|
||||
<template>
|
||||
<CH.ContentHeader v-bind="hreaderPrep">
|
||||
<FilterNav
|
||||
@onFilterClick="() => isFilterFormDialogOpen = true"
|
||||
:active-positon="activeServicePosition"
|
||||
@apply="handleFilterApply"
|
||||
@onExportPdf="() => {}"
|
||||
@onExportExcel="() => {}"
|
||||
@nExportCsv="() => {}"
|
||||
@@ -256,11 +279,12 @@ function handleRemoveConfirmation() {
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
<FilterForm v-bind="filter" />
|
||||
<FilterForm v-bind="filter" />
|
||||
</Dialog>
|
||||
|
||||
<!-- Batal -->
|
||||
<RecordConfirmation
|
||||
v-if="canDelete"
|
||||
v-model:open="isRecordCancelOpen"
|
||||
custom-title="Batalkan Kunjungan"
|
||||
custom-message="Apakah anda yakin ingin membatalkan kunjungan pasien berikut?"
|
||||
|
||||
@@ -26,6 +26,7 @@ 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'
|
||||
import VaccineDataList from '~/components/content/vaccine-data/list.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -96,6 +97,7 @@ const tabs: TabItem[] = [
|
||||
component: DocUploadList,
|
||||
props: { encounter: data },
|
||||
},
|
||||
{ value: 'vaccine-data', label: 'Data Vaksin', component: VaccineDataList, props: { encounter: data } },
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ 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'
|
||||
import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
|
||||
// App Components
|
||||
import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
|
||||
import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
|
||||
@@ -98,11 +99,17 @@ const protocolRows = [
|
||||
{ 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: 'initial-nursing-study',
|
||||
label: 'Kajian Awal Keperawatan',
|
||||
component: InitialNursingStudy,
|
||||
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-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' },
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useQueryMode } from '@/composables/useQueryMode'
|
||||
|
||||
import List from './list.vue'
|
||||
import Form from './form.vue'
|
||||
|
||||
// Models
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const route = useRoute()
|
||||
|
||||
const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<List
|
||||
v-if="mode === 'list'"
|
||||
:encounter="props.encounter"
|
||||
@add="goToEntry"
|
||||
@edit="goToEntry"
|
||||
/>
|
||||
<Form
|
||||
v-else
|
||||
@back="backToList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { z } from 'zod'
|
||||
import Entry from '~/components/app/initial-nursing/entry-form.vue'
|
||||
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
|
||||
import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import { InitialNursingSchema } from '~/schemas/soapi.schema'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
|
||||
const { backToList } = useQueryMode('mode')
|
||||
|
||||
const route = useRoute()
|
||||
const isOpenProcedure = ref(false)
|
||||
const isOpenDiagnose = ref(false)
|
||||
const procedures = ref([])
|
||||
const diagnoses = ref([])
|
||||
const selectedProcedure = ref<any>(null)
|
||||
const selectedDiagnose = ref<any>(null)
|
||||
const schema = InitialNursingSchema
|
||||
const payload = ref({
|
||||
encounter_id: 0,
|
||||
time: '',
|
||||
typeCode: 'early-nursery',
|
||||
value: '',
|
||||
})
|
||||
const listProblem = ref([])
|
||||
|
||||
const model = ref({
|
||||
'pri-complain': '',
|
||||
'med-type': '',
|
||||
'med-name': '',
|
||||
'med-reaction': '',
|
||||
'food-type': '',
|
||||
'food-name': '',
|
||||
'food-reaction': '',
|
||||
'other-type': '',
|
||||
'other-name': '',
|
||||
'other-reaction': '',
|
||||
'pain-asst': '',
|
||||
'pain-scale': '',
|
||||
'pain-time': '',
|
||||
'pain-duration': '',
|
||||
'pain-freq': '',
|
||||
'pain-loc': '',
|
||||
'nut-screening': '',
|
||||
'spiritual-asst': '',
|
||||
'general-condition': '',
|
||||
'support-exam': '',
|
||||
'risk-fall': '',
|
||||
bracelet: '',
|
||||
'bracelet-alg': '',
|
||||
})
|
||||
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
function handleOpen(event: any) {
|
||||
console.log('handleOpen', event.type)
|
||||
const type = event.type
|
||||
if (type === 'add-problem') {
|
||||
listProblem.value = event.data
|
||||
}
|
||||
}
|
||||
|
||||
const entryRehabRef = ref()
|
||||
async function actionHandler(type: string) {
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
return
|
||||
}
|
||||
const result = await entryRehabRef.value?.validate()
|
||||
if (result?.valid) {
|
||||
if (listProblem.value?.length > 0) {
|
||||
result.data.listProblem = listProblem.value || []
|
||||
}
|
||||
console.log('data', result.data)
|
||||
handleActionSave(
|
||||
{
|
||||
...payload.value,
|
||||
value: JSON.stringify(result.data),
|
||||
encounter_id: +route.params.id,
|
||||
time: new Date().toISOString(),
|
||||
},
|
||||
() => {},
|
||||
() => {},
|
||||
toast,
|
||||
)
|
||||
|
||||
backToList()
|
||||
} else {
|
||||
console.log('Ada error di form', result)
|
||||
}
|
||||
}
|
||||
|
||||
const icdPreview = ref({
|
||||
procedures: [],
|
||||
diagnoses: [],
|
||||
})
|
||||
|
||||
function actionDialogHandler(type: string) {
|
||||
if (type === 'submit') {
|
||||
icdPreview.value.procedures = selectedProcedure.value || []
|
||||
icdPreview.value.diagnoses = selectedDiagnose.value || []
|
||||
}
|
||||
isOpenProcedure.value = false
|
||||
isOpenDiagnose.value = false
|
||||
}
|
||||
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('icdPreview', icdPreview)
|
||||
</script>
|
||||
<template>
|
||||
<Entry
|
||||
ref="entryRehabRef"
|
||||
v-model="model"
|
||||
:schema="schema"
|
||||
type="early-rehab"
|
||||
@click="handleOpen"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="actionHandler" />
|
||||
</div>
|
||||
<Dialog
|
||||
v-model:open="isOpenDiagnose"
|
||||
title="Pilih Fungsional"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedDiagnose"
|
||||
:data="diagnoses"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import List from '~/components/app/initial-nursing/list.vue'
|
||||
import Preview from '~/components/app/initial-nursing/preview.vue'
|
||||
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
|
||||
// Types
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// Handlers
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isProcessing,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
onResetState,
|
||||
handleActionSave,
|
||||
handleActionEdit,
|
||||
handleActionRemove,
|
||||
handleCancelForm,
|
||||
} from '~/handlers/soapi-early.handler'
|
||||
|
||||
// Services
|
||||
import { getList, getDetail } from '~/services/soapi-early.service'
|
||||
|
||||
// Models
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const emits = defineEmits(['add', 'edit'])
|
||||
const route = useRoute()
|
||||
|
||||
const { recordId } = useQueryCRUDRecordId()
|
||||
const { goToEntry, backToList } = useQueryCRUDMode('mode')
|
||||
|
||||
let units = ref<{ value: string; label: string }[]>([])
|
||||
const encounterId = ref<number>(props?.encounter?.id || 0)
|
||||
const title = ref('')
|
||||
const id = route.params.id
|
||||
const descData = ref({})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async ({ page, search }) => {
|
||||
const result = await getList({
|
||||
'encounter-id': id,
|
||||
'type-code': 'early-nursery',
|
||||
includes: 'encounter',
|
||||
search,
|
||||
page,
|
||||
})
|
||||
console.log('masukkk', result)
|
||||
if (result.success) {
|
||||
data.value = result.body.data
|
||||
}
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'initial-nursing',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Kajian Awal Keperawatan',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (value: string) => {
|
||||
searchInput.value = value
|
||||
},
|
||||
onClick: () => {},
|
||||
onClear: () => {},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
icon: 'i-lucide-plus',
|
||||
onClick: () => {
|
||||
goToEntry()
|
||||
emits('add')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const today = new Date()
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const mappedData = computed(() => {
|
||||
if (!data.value || data.value.length === 0) return []
|
||||
|
||||
const raw = data.value[0]
|
||||
|
||||
// Pastikan raw.value adalah string JSON
|
||||
let parsed: any = {}
|
||||
try {
|
||||
parsed = JSON.parse(raw.value || '{}')
|
||||
} catch (err) {
|
||||
console.error('JSON parse error:', err)
|
||||
return []
|
||||
}
|
||||
|
||||
// Ambil listProblem
|
||||
const list = parsed.listProblem || []
|
||||
const textData = parsed
|
||||
|
||||
// Untuk keamanan: pastikan selalu array
|
||||
if (!Array.isArray(list)) return []
|
||||
|
||||
return { list, textData }
|
||||
})
|
||||
|
||||
// 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:
|
||||
emits('edit')
|
||||
recordId.value = recId.value
|
||||
console.log('recordId', recId.value)
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getMyList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header
|
||||
v-model="searchInput"
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="headerPrep.refSearchNav"
|
||||
@search="handleSearch"
|
||||
class="mb-4 xl:mb-5"
|
||||
/>
|
||||
|
||||
<Preview :preview="mappedData.textData" />
|
||||
|
||||
<h2 class="my-3 p-1 font-semibold">C. Daftar Masalah Keperawatan</h2>
|
||||
<List :data="mappedData.list || []" />
|
||||
<!-- :pagination-meta="paginationMeta" -->
|
||||
<!-- @page-change="handlePageChange" -->
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getMyList, 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>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
|
||||
import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
|
||||
import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
|
||||
import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// mcu src category
|
||||
import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
|
||||
import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
|
||||
|
||||
// mcu src
|
||||
import { type McuSrc } from '~/models/mcu-src'
|
||||
import { getList as getMcuSrcList } from '~/services/mcu-src.service'
|
||||
import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
|
||||
|
||||
// mcu order
|
||||
import { getDetail } from '~/services/mcu-order.service'
|
||||
import Detail from '~/components/app/mcu-order/detail.vue'
|
||||
|
||||
// mcu order item, manually not using composable
|
||||
import {
|
||||
getList as getMcuOrderItemList,
|
||||
create as createMcuOrderItem,
|
||||
remove as removeMcuOrderItem,
|
||||
} from '~/services/mcu-order-item.service'
|
||||
import { type McuOrderItem } from '~/models/mcu-order-item'
|
||||
import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
|
||||
|
||||
// props
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
scopeCode: string
|
||||
}>()
|
||||
|
||||
// declaration & flows
|
||||
|
||||
// MCU Order
|
||||
const { backToList, crudQueryParams } = useQueryCRUD()
|
||||
const id = crudQueryParams.value.recordId
|
||||
const dataRes = await getDetail(
|
||||
typeof id === 'string' ? parseInt(id) : 0,
|
||||
{ includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
|
||||
)
|
||||
const data = dataRes.body?.data
|
||||
|
||||
// MCU items
|
||||
const items = ref<McuOrderItem[]>([])
|
||||
|
||||
// MCU Categories
|
||||
const mcuSrcCategoryRes = await getMcuCategoryList({ 'scope-code': props.scopeCode })
|
||||
const mcuSrcCategories = mcuSrcCategoryRes.body?.data
|
||||
const selectedMcuSrcCategory_code = ref('')
|
||||
|
||||
// MCU Sources
|
||||
const mcuSrcs = ref<McuSrc[]>([])
|
||||
|
||||
// const {
|
||||
// data: items,
|
||||
// fetchData: getItems,
|
||||
// } = usePaginatedList<McuOrderItem> ({
|
||||
// fetchFn: async ({ page, search }) => {
|
||||
// const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
|
||||
// if (result.success) {
|
||||
// items.value = result.body.data
|
||||
// }
|
||||
// return { success: result.success || false, body: result.body || {} }
|
||||
// },
|
||||
// entityName: 'mcu-order-item',
|
||||
// })
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Detail dan List Item Order Radiologi ',
|
||||
icon: 'i-lucide-box',
|
||||
}
|
||||
|
||||
const pickerDialogOpen = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await getItems()
|
||||
})
|
||||
|
||||
watch(selectedMcuSrcCategory_code, async () => {
|
||||
const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
|
||||
mcuSrcs.value = res.body?.data
|
||||
})
|
||||
|
||||
function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
}
|
||||
}
|
||||
|
||||
function requestItem() {
|
||||
pickerDialogOpen.value = true
|
||||
}
|
||||
|
||||
async function pickItem(item: McuSrc) {
|
||||
const exItem = items.value.find(e => e.mcuSrc_code === item.code)
|
||||
if (exItem) {
|
||||
await removeMcuOrderItem(exItem.id)
|
||||
await getItems()
|
||||
} else {
|
||||
const intId = parseInt(id?.toString() || '0')
|
||||
await createMcuOrderItem({
|
||||
mcuOrder_id: intId,
|
||||
mcuSrc_code: item.code,
|
||||
})
|
||||
await getItems()
|
||||
}
|
||||
}
|
||||
|
||||
async function getItems() {
|
||||
const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
|
||||
if (itemsRes.success) {
|
||||
items.value = itemsRes.body.data
|
||||
} else {
|
||||
items.value = []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="headerPrep.refSearchNav"
|
||||
class="mb-4 xl:mb-5"
|
||||
/>
|
||||
|
||||
<Detail :data="data" />
|
||||
|
||||
<ItemListEntry
|
||||
:data="items"
|
||||
@requestItem="requestItem"/>
|
||||
<Separator class="my-5" />
|
||||
|
||||
<div class="w-full flex justify-center">
|
||||
<Nav @click="navClick" />
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
v-model:open="pickerDialogOpen"
|
||||
title="Pilih Item"
|
||||
size="2xl"
|
||||
prevent-outside
|
||||
>
|
||||
<ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
|
||||
<McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
|
||||
<Separator />
|
||||
<NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// Handlers
|
||||
import type { ToastFn } from '~/handlers/_handler'
|
||||
|
||||
// Apps
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
handleActionSave,
|
||||
handleActionRemove,
|
||||
} from '~/handlers/mcu-order.handler'
|
||||
import { getList, getDetail, submit } from '~/services/mcu-order.service'
|
||||
import type { McuOrder } from '~/models/mcu-order'
|
||||
// import List from '~/components/app/mcu-order/micro-list.vue'
|
||||
import ConfirmationInfo from '~/components/app/mcu-order/confirmation-info.vue'
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
scopeCode: string
|
||||
}>()
|
||||
|
||||
// Common preparations
|
||||
const route = useRoute()
|
||||
const { crudQueryParams } = useQueryCRUD()
|
||||
|
||||
const title = ref('')
|
||||
const plainEid = route.params.id
|
||||
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
|
||||
// Data
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList<McuOrder>({
|
||||
fetchFn: async ({ page, search }) => {
|
||||
const result = await getList({
|
||||
search,
|
||||
page,
|
||||
'scope-code': props.scopeCode,
|
||||
'encounter-id': encounter_id,
|
||||
includes: 'doctor,doctor-employee,doctor-employee-person,items,items-mcuSrc',
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'mcu-order'
|
||||
})
|
||||
|
||||
// Header
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Order Lab Mikro',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (value: string) => {
|
||||
searchInput.value = value
|
||||
},
|
||||
onClick: () => {},
|
||||
onClear: () => {},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
icon: 'i-lucide-plus',
|
||||
onClick: async () => {
|
||||
const saveResp = await handleActionSave({ encounter_id, scope_code: props.scopeCode }, () => {}, () =>{}, toast)
|
||||
if (saveResp.success) {
|
||||
crudQueryParams.value = { mode: 'entry', recordId: saveResp.body?.data?.id.toString() }
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// List component
|
||||
let List: Component
|
||||
if(props.scopeCode == 'radiology') {
|
||||
List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
|
||||
} else if(props.scopeCode == 'cp-lab') {
|
||||
List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
|
||||
} else if (props.scopeCode == 'micro-lab') {
|
||||
List = defineAsyncComponent(() => import('~/components/app/mcu-order/micro-list.vue'))
|
||||
} else {
|
||||
List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
|
||||
}
|
||||
|
||||
// Reactivities
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
getMyDetail(recId.value)
|
||||
title.value = 'Detail Order Lab PK'
|
||||
isReadonly.value = true
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
getMyDetail(recId.value)
|
||||
title.value = 'Edit Order Lab PK'
|
||||
isReadonly.value = false
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
///// Functions
|
||||
async function getMyDetail (id: number | string) {
|
||||
const result = await getDetail(id)
|
||||
if (result.success) {
|
||||
const currentValue = result.body?.data || {}
|
||||
recItem.value = currentValue
|
||||
isFormEntryDialogOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function cancel(data: McuOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
function edit(data: McuOrder) {
|
||||
crudQueryParams.value = { mode: 'entry', recordId: data.id.toString() }
|
||||
}
|
||||
|
||||
function confirmSubmit(data: McuOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isSubmitConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
|
||||
const result = await submit(id)
|
||||
if (result.success) {
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
setTimeout(refresh, 300)
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" />
|
||||
|
||||
<List
|
||||
v-if="!isLoading.dataListLoading"
|
||||
:data="data"
|
||||
:pagination-meta="paginationMeta"
|
||||
@cancel="cancel"
|
||||
@edit="edit"
|
||||
@submit="confirmSubmit"
|
||||
/>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<ConfirmationInfo :rec-item="recItem" />
|
||||
</RecordConfirmation>
|
||||
|
||||
<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="() => handleActionSubmit(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<ConfirmationInfo :rec-item="recItem" />
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import List from './list.vue'
|
||||
import Entry from './entry.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const { mode } = useQueryCRUDMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List v-if="mode === 'list'" :encounter_id="encounter_id" />
|
||||
<Entry v-else :encounter_id="encounter_id" />
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import Entry from '~/components/content/mcu-order/entry.vue'
|
||||
|
||||
defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Entry :encounter_id="encounter_id" scope-code="micro-lab" />
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import List from '~/components/content/mcu-order/list.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List scope-code="micro-lab" />
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import List from './list.vue'
|
||||
import Entry from './entry.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const { mode } = useQueryCRUDMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List v-if="mode === 'list'" :encounter_id="encounter_id" />
|
||||
<Entry v-else :encounter_id="encounter_id" />
|
||||
</template>
|
||||
@@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// #region Imports
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { getList, remove } from '~/services/prb.service'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
|
||||
import type { Prb } from '~/models/prb'
|
||||
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
// #endregion
|
||||
|
||||
// #region State
|
||||
const props = withDefaults(defineProps<{
|
||||
encounter?: Encounter
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
const route = useRoute()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
|
||||
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params, includes: '', }),
|
||||
entityName: 'prb',
|
||||
})
|
||||
const prbHistory = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params }),
|
||||
entityName: 'prb-history',
|
||||
})
|
||||
const dummy = [
|
||||
{
|
||||
"id": 1,
|
||||
"date": new Date().toISOString(),
|
||||
"name1": "Dr. Smith",
|
||||
"name2": "Maria S.",
|
||||
"name3": "Project Alpha",
|
||||
"name4": "Completed",
|
||||
"name5": 95.5
|
||||
},
|
||||
]
|
||||
|
||||
const isHistoryDialogOpen = ref(false)
|
||||
const isDocPreviewDialogOpen = ref(false)
|
||||
const isFilterDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
const summaryLoading = ref(false)
|
||||
const isRequirementsMet = ref(true)
|
||||
const Prb = ref<Prb | null>(null)
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const timestamp = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: "Program Rujuk Balik",
|
||||
icon: 'i-lucide-history',
|
||||
}
|
||||
if(true){
|
||||
headerPrep.addNav = {
|
||||
label: "Program Rujuk Balik",
|
||||
onClick: () => navigateTo({
|
||||
name: 'integration-bpjs-prb-add',
|
||||
}),
|
||||
};
|
||||
}
|
||||
headerPrep.components = [
|
||||
{
|
||||
component: defineAsyncComponent(() => import('~/components/app/prb/_common/btn-history.vue')),
|
||||
props: { }
|
||||
},
|
||||
];
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
isFilterDialogOpen.value = true
|
||||
},
|
||||
onInput: (val: string) => {
|
||||
searchInput.value = val
|
||||
},
|
||||
onClear: () => {
|
||||
searchInput.value = ''
|
||||
},
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getListData() {
|
||||
try {
|
||||
summaryLoading.value = true
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
} catch (error) {
|
||||
console.error('Error fetching Data:', error)
|
||||
} finally {
|
||||
summaryLoading.value = false
|
||||
}
|
||||
}
|
||||
async function handleConfirmDelete(record: any, action: string) {
|
||||
if (action === 'delete' && record?.id) {
|
||||
try {
|
||||
const result = await remove(record.id)
|
||||
if (result.success) {
|
||||
toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
|
||||
await fetchData()
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
|
||||
}
|
||||
} catch (error) {
|
||||
toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
|
||||
function handleFiltering() {
|
||||
isFilterDialogOpen.value = false
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Provide
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('timestamp', timestamp)
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('isHistoryDialogOpen', isHistoryDialogOpen)
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
watch([recId, recAction, timestamp], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
navigateTo({
|
||||
name: 'integration-bpjs-prb-prb_id-edit',
|
||||
params: { id: encounterId, "prb_id": recId.value },
|
||||
})
|
||||
break
|
||||
|
||||
case ActionEvents.showPrint:
|
||||
isDocPreviewDialogOpen.value = true
|
||||
break
|
||||
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WarningAlert v-if="!isRequirementsMet"
|
||||
class="mb-5"
|
||||
text="Syarat pembuatan PRB belum terpenuhi"
|
||||
:description="[
|
||||
'Lanjutan Penatalaksanaan Pasien harus terisi Dirujuk Eksternal',
|
||||
'Jenis Pembayaran pasien harus JKN'
|
||||
]" />
|
||||
|
||||
<div v-else>
|
||||
<Header :prep="headerPrep" />
|
||||
|
||||
<Filter
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="refSearchNav"
|
||||
:enable-export="false"
|
||||
/>
|
||||
|
||||
<AppPrbList :is-bpjs="true" :data="dummy" />
|
||||
|
||||
<Dialog v-model:open="isHistoryDialogOpen" title="History" size="full">
|
||||
<AppPrbHistoryList
|
||||
:data="dummy"
|
||||
:pagination-meta="prbHistory.paginationMeta"
|
||||
@page-change="prbHistory.handlePageChange" />
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:open="isFilterDialogOpen" title="Filter" size="lg">
|
||||
<AppPrbCommonFilter @submit="handleFiltering" />
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
|
||||
<DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
|
||||
</Dialog>
|
||||
|
||||
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p>
|
||||
<strong>ID:</strong>
|
||||
{{ record?.id }}
|
||||
</p>
|
||||
<p v-if="record?.firstName">
|
||||
<strong>Nama:</strong>
|
||||
{{ record.firstName }}
|
||||
</p>
|
||||
<p v-if="record?.code">
|
||||
<strong>Kode:</strong>
|
||||
{{ record.cellphone }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { withBase } from '~/models/_base'
|
||||
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import type { Patient } from '~/models/patient'
|
||||
import type { Person } from '~/models/person'
|
||||
import { getDetail } from '~/services/prb.service'
|
||||
|
||||
// Components
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import type { Prb } from '~/models/prb'
|
||||
|
||||
// #region Props & Emits
|
||||
const props = defineProps<{
|
||||
}>()
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
|
||||
const Prb = ref<Prb | null>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Detail Program Rujuk Balik',
|
||||
icon: 'i-lucide-newspaper',
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// onMounted(async () => {
|
||||
// const result = await getDetail(controlLetterId, {
|
||||
// includes: "unit,specialist,subspecialist,doctor-employee-person",
|
||||
// })
|
||||
// if (result.success) {
|
||||
// controlLetter.value = result.body?.data
|
||||
// }
|
||||
// })
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
function goBack() {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
function handleAction() {
|
||||
goBack()
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
|
||||
<AppPrbDetail :instance="Prb" @click="handleAction" />
|
||||
</template>
|
||||
@@ -0,0 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Patient, genPatientProps } from '~/models/patient'
|
||||
import type { ExposedForm } from '~/types/form'
|
||||
import type { PatientBase } from '~/models/patient'
|
||||
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { genPatient } from '~/models/patient'
|
||||
import { PatientSchema } from '~/schemas/patient.schema'
|
||||
import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
|
||||
import { PersonAddressSchema } from '~/schemas/person-address.schema'
|
||||
import { PersonContactListSchema } from '~/schemas/person-contact.schema'
|
||||
import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
|
||||
import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
|
||||
import { uploadAttachment } from '~/services/patient.service'
|
||||
import { getDetail, update } from '~/services/prb.service'
|
||||
import type { Prb } from '~/models/prb'
|
||||
import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
|
||||
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { withBase } from '~/models/_base'
|
||||
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
|
||||
import { PrbSchema } from '~/schemas/prb.schema'
|
||||
import { formatDateYyyyMmDd } from '~/lib/date'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import { getList, remove } from '~/services/prb.service'
|
||||
import { handleActionEdit } from '~/handlers/prb.handler'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import { formatDateToDatetimeLocal } from '~/lib/utils'
|
||||
|
||||
// #region Props & Emits
|
||||
const props = withDefaults(defineProps<{
|
||||
callbackUrl?: string
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
|
||||
// form related state
|
||||
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
|
||||
entityName: 'prb',
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
const PrbId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
|
||||
|
||||
const inputForm = ref<ExposedForm<any> | null>(null)
|
||||
const Prb = ref({})
|
||||
const isConfirmationOpen = ref(false)
|
||||
const selectedOperativeAction = ref<any>(null)
|
||||
|
||||
const isSepDialogOpen = ref(false)
|
||||
provide("isSepDialogOpen", isSepDialogOpen);
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(async () => {
|
||||
const result = await getDetail(PrbId)
|
||||
if (result.success) {
|
||||
const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
|
||||
Prb.value = responseData
|
||||
inputForm.value?.setValues(responseData)
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
function goBack() {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
async function handleConfirmAdd() {
|
||||
const response = await handleActionEdit(
|
||||
PrbId,
|
||||
await composeFormData(),
|
||||
() => { },
|
||||
() => { },
|
||||
toast,
|
||||
)
|
||||
goBack()
|
||||
}
|
||||
|
||||
async function composeFormData(): Promise<Prb> {
|
||||
const [input,] = await Promise.all([
|
||||
inputForm.value?.validate(),
|
||||
])
|
||||
|
||||
const results = [input]
|
||||
const allValid = results.every((r) => r?.valid)
|
||||
|
||||
// exit, if form errors happend during validation
|
||||
if (!allValid) return Promise.reject('Form validation failed')
|
||||
|
||||
const formData = input?.values
|
||||
formData.encounter_id = encounterId
|
||||
return new Promise((resolve) => resolve(formData))
|
||||
}
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
async function handleActionClick(eventType: string) {
|
||||
if (eventType === 'submit') {
|
||||
isConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
if (eventType === 'back') {
|
||||
if (props.callbackUrl) {
|
||||
await navigateTo(props.callbackUrl)
|
||||
return
|
||||
}
|
||||
|
||||
goBack()
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancelAdd() {
|
||||
isConfirmationOpen.value = false
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
|
||||
const initialValues = {
|
||||
a1: "",
|
||||
a2: formatDateToDatetimeLocal(new Date()),
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Program Rujuk Balik</div>
|
||||
<AppPrbEntry
|
||||
ref="inputForm"
|
||||
:schema="PrbSchema"
|
||||
:initial-values="initialValues"
|
||||
:is-bpjs="isBpjs"
|
||||
/>
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action :enable-draft="false" @click="handleActionClick" />
|
||||
</div>
|
||||
|
||||
<Confirmation
|
||||
v-model:open="isConfirmationOpen"
|
||||
title="Simpan Data"
|
||||
message="Apakah Anda yakin ingin menyimpan data ini?"
|
||||
confirm-text="Simpan"
|
||||
@confirm="handleConfirmAdd"
|
||||
@cancel="handleCancelAdd"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* component style */
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// #region Imports
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { getList, remove } from '~/services/prb.service'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
|
||||
import type { Prb } from '~/models/prb'
|
||||
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
// #endregion
|
||||
|
||||
// #region State
|
||||
const props = withDefaults(defineProps<{
|
||||
encounter?: Encounter
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
const route = useRoute()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
|
||||
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params, includes: '', }),
|
||||
entityName: 'prb',
|
||||
})
|
||||
const prbHistory = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params }),
|
||||
entityName: 'prb-history',
|
||||
})
|
||||
const dummy = [
|
||||
{
|
||||
"id": 1,
|
||||
"date": new Date().toISOString(),
|
||||
"name1": "Dr. Smith",
|
||||
"name2": "Maria S.",
|
||||
"name3": "Project Alpha",
|
||||
"name4": "Completed",
|
||||
"name5": 95.5
|
||||
},
|
||||
]
|
||||
|
||||
const isHistoryDialogOpen = ref(false)
|
||||
const isDocPreviewDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
const summaryLoading = ref(false)
|
||||
const isRequirementsMet = ref(true)
|
||||
const Prb = ref<Prb | null>(null)
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const timestamp = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: "Program Rujuk Balik",
|
||||
icon: 'i-lucide-history',
|
||||
}
|
||||
if(true){
|
||||
headerPrep.addNav = {
|
||||
label: "Program Rujuk Balik",
|
||||
onClick: () => navigateTo({
|
||||
name: 'rehab-encounter-id-prb-add',
|
||||
params: { id: encounterId },
|
||||
}),
|
||||
};
|
||||
}
|
||||
headerPrep.components = [
|
||||
{
|
||||
component: defineAsyncComponent(() => import('~/components/app/prb/_common/btn-history.vue')),
|
||||
props: { }
|
||||
},
|
||||
];
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getListData() {
|
||||
try {
|
||||
summaryLoading.value = true
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
} catch (error) {
|
||||
console.error('Error fetching Data:', error)
|
||||
} finally {
|
||||
summaryLoading.value = false
|
||||
}
|
||||
}
|
||||
async function handleConfirmDelete(record: any, action: string) {
|
||||
if (action === 'delete' && record?.id) {
|
||||
try {
|
||||
const result = await remove(record.id)
|
||||
if (result.success) {
|
||||
toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
|
||||
await fetchData()
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
|
||||
}
|
||||
} catch (error) {
|
||||
toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Provide
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('timestamp', timestamp)
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('isHistoryDialogOpen', isHistoryDialogOpen)
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
watch([recId, recAction, timestamp], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
navigateTo({
|
||||
name: 'rehab-encounter-id-prb-prb_id-edit',
|
||||
params: { id: encounterId, "prb_id": recId.value },
|
||||
})
|
||||
break
|
||||
|
||||
case ActionEvents.showPrint:
|
||||
isDocPreviewDialogOpen.value = true
|
||||
break
|
||||
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WarningAlert v-if="!isRequirementsMet"
|
||||
class="mb-5"
|
||||
text="Syarat pembuatan PRB belum terpenuhi"
|
||||
:description="[
|
||||
'Lanjutan Penatalaksanaan Pasien harus terisi Dirujuk Eksternal',
|
||||
'Jenis Pembayaran pasien harus JKN'
|
||||
]" />
|
||||
|
||||
<div v-else>
|
||||
<Header :prep="headerPrep" />
|
||||
|
||||
<AppPrbDetail :instance="Prb" />
|
||||
<h1 class="font-semibold text-lg mb-2">Obat</h1>
|
||||
<AppPrbList :is-bpjs="isBpjs" :data="dummy" />
|
||||
|
||||
<Dialog v-model:open="isHistoryDialogOpen" title="History" size="full">
|
||||
<AppPrbHistoryList
|
||||
:data="dummy"
|
||||
:pagination-meta="prbHistory.paginationMeta"
|
||||
@page-change="prbHistory.handlePageChange" />
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
|
||||
<DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
|
||||
</Dialog>
|
||||
|
||||
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p>
|
||||
<strong>ID:</strong>
|
||||
{{ record?.id }}
|
||||
</p>
|
||||
<p v-if="record?.firstName">
|
||||
<strong>Nama:</strong>
|
||||
{{ record.firstName }}
|
||||
</p>
|
||||
<p v-if="record?.code">
|
||||
<strong>Kode:</strong>
|
||||
{{ record.cellphone }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import * as CH from '~/components/pub/my-ui/content-header'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import NavEntry from '~/components/pub/my-ui/nav-footer/ba-de-dr-su.vue'
|
||||
import NavDetail from '~/components/pub/my-ui/nav-footer/ba.vue'
|
||||
import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
|
||||
|
||||
// Procedure Room
|
||||
import type { ProcedureRoom } from '~/models/procedure-room'
|
||||
import { getList as getProcedureRoomList } from '~/services/procedure-room.service'
|
||||
import PRSwitcher from '~/components/app/procedure-room/switcher.vue'
|
||||
import PRMultiOptPicker from '~/components/app/procedure-room/multi-opt-picker.vue'
|
||||
import PRPicker from '~/components/app/procedure-room/picker.vue'
|
||||
|
||||
// Material Package
|
||||
import type { MaterialPackage } from '~/models/material-package'
|
||||
import { getList as getMaterialPackageList } from '~/services/material-package.service'
|
||||
|
||||
// Material Package Item
|
||||
import type { MaterialPackageItem } from '~/models/material-package-item'
|
||||
import { getList as getmaterialPackageItems } from '~/services/material-package-item.service'
|
||||
import MPSwitcher from '~/components/app/material-package/switcher.vue'
|
||||
import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'
|
||||
|
||||
// Main data
|
||||
import { getDetail } from '~/services/procedure-room-order.service'
|
||||
import Detail from '~/components/app/procedure-room-order/detail.vue'
|
||||
|
||||
// Items data
|
||||
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item'
|
||||
import {
|
||||
getList as getOrderItemList,
|
||||
create as createOrderItem,
|
||||
remove as removeOrderItem,
|
||||
} from '~/services/procedure-room-order-item.service'
|
||||
import ItemListEntry from '~/components/app/procedure-room-order-item/list-entry.vue'
|
||||
import ItemListDetail from '~/components/app/procedure-room-order-item/list-detail.vue'
|
||||
|
||||
// data
|
||||
const { backToList, crudQueryParams } = useQueryCRUD()
|
||||
const id = crudQueryParams.value.recordId
|
||||
const dataRes = await getDetail(
|
||||
typeof id === 'string' ? parseInt(id) : 0,
|
||||
{ includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
|
||||
)
|
||||
const data = dataRes.body?.data
|
||||
const items = ref<ProcedureRoomOrderItem[]>([])
|
||||
|
||||
// Header
|
||||
const headerConfig: CH.Config = {
|
||||
title: 'Order Ruang Tindakan',
|
||||
icon: 'i-lucide-box',
|
||||
}
|
||||
|
||||
//
|
||||
const pickerDialogOpen = ref(false)
|
||||
const procedureRooms = ref<ProcedureRoom[]>([])
|
||||
const procedureRoomType = ref('procedure')
|
||||
getProcedureRooms(procedureRoomType.value)
|
||||
watch(procedureRoomType, async (newValue) => {
|
||||
getProcedureRooms(newValue)
|
||||
})
|
||||
|
||||
//
|
||||
const materialPackages = ref<MaterialPackage[]>([])
|
||||
const selectedMaterialPackage = ref('')
|
||||
const res = await getMaterialPackageList()
|
||||
if (res.success) {
|
||||
materialPackages.value = res.body.data
|
||||
}
|
||||
|
||||
//
|
||||
const materialPackageItems = ref<MaterialPackageItem[]>([])
|
||||
watch(selectedMaterialPackage, async (newValue) => {
|
||||
const res = await getmaterialPackageItems({
|
||||
'material-package-code': selectedMaterialPackage.value,
|
||||
includes: 'material'
|
||||
})
|
||||
if (res.success) {
|
||||
materialPackageItems.value = res.body.data
|
||||
}
|
||||
})
|
||||
|
||||
// last flow
|
||||
onMounted(async () => {
|
||||
await getItems()
|
||||
})
|
||||
|
||||
///// functions
|
||||
async function getProcedureRooms(typeCode: string) {
|
||||
const res = await getProcedureRoomList({ 'type-code': typeCode, includes: 'infra' })
|
||||
if (res.success) {
|
||||
procedureRooms.value = res.body.data
|
||||
}
|
||||
}
|
||||
|
||||
async function getItems() {
|
||||
const res = await getOrderItemList({
|
||||
'procedure-room-order-id': crudQueryParams.value.recordId,
|
||||
includes: 'procedureRoom,procedureRoom-infra',
|
||||
})
|
||||
if (res.success) {
|
||||
items.value = res.body.data
|
||||
}
|
||||
}
|
||||
|
||||
async function pickItem(item: ProcedureRoom) {
|
||||
const exItem = items.value.find(e => e.procedureRoom_code === item.code)
|
||||
if (exItem) {
|
||||
await removeOrderItem(exItem.id)
|
||||
await getItems()
|
||||
} else {
|
||||
const intId = parseInt(id?.toString() || '0')
|
||||
await createOrderItem({
|
||||
procedureRoomOrder_id: intId,
|
||||
procedureRoom_code: item.code,
|
||||
})
|
||||
await getItems()
|
||||
}
|
||||
}
|
||||
|
||||
function requestItem() {
|
||||
pickerDialogOpen.value = true
|
||||
}
|
||||
|
||||
function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CH.ContentHeader v-bind="headerConfig" />
|
||||
|
||||
<Separator class="mb-4" />
|
||||
|
||||
<Detail :data="data" />
|
||||
|
||||
<template v-if="data.status_code == 'new'">
|
||||
<ItemListEntry :data="items" @requestItem="requestItem" />
|
||||
<MPSwitcher :data="materialPackages" v-model="selectedMaterialPackage" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ItemListDetail :data="items" @requestItem="requestItem" />
|
||||
</template>
|
||||
<MPIQuickList :data="materialPackageItems" />
|
||||
|
||||
<div class="w-full flex justify-center">
|
||||
<NavEntry v-if="data.status_code == 'new'" @click="navClick" />
|
||||
<NavDetail v-else @click="navClick" />
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
v-model:open="pickerDialogOpen"
|
||||
title="Pilih Item"
|
||||
size="2xl"
|
||||
prevent-outside
|
||||
>
|
||||
<PRSwitcher v-model="procedureRoomType" />
|
||||
<PRPicker
|
||||
:data="procedureRooms"
|
||||
:pick-mode="procedureRoomType == 'procedure' ? 'multi' : 'single'"
|
||||
v-model="items"
|
||||
@pick="pickItem"
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
<NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,191 @@
|
||||
<script setup lang="ts">
|
||||
// Composables
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
|
||||
// Handlers
|
||||
import type { ToastFn } from '~/handlers/_handler'
|
||||
|
||||
// Pubs component
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { ActionEvents, 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'
|
||||
|
||||
// Order
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isRecordConfirmationOpen,
|
||||
handleActionRemove,
|
||||
} from '~/handlers/procedure-room-order.handler'
|
||||
import { getList, create, submit } from '~/services/procedure-room-order.service'
|
||||
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
|
||||
import List from '~/components/app/procedure-room-order/list.vue'
|
||||
|
||||
// Common prep
|
||||
const route = useRoute()
|
||||
const { setQueryParams } = useQueryParam()
|
||||
const { crudQueryParams } = useQueryCRUD()
|
||||
|
||||
const plainEid = route.params.id
|
||||
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
|
||||
// Main data
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList<ProcedureRoomOrder>({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getList({
|
||||
'encounter-id': encounter_id,
|
||||
includes: 'items',
|
||||
search: params.search,
|
||||
page: params.page,
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'prescription'
|
||||
})
|
||||
|
||||
// Header things
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Order Ruang Tindakan',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (value: string) => {
|
||||
searchInput.value = value
|
||||
},
|
||||
onClick: () => {},
|
||||
onClear: () => {},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
icon: 'i-lucide-plus',
|
||||
onClick: async () => {
|
||||
recItem.value = null
|
||||
recId.value = 0
|
||||
const res = await create({ encounter_id })
|
||||
if (res.success) {
|
||||
crudQueryParams.value = { mode: 'entry', recordId: res.body?.data.id.toString() || '0' }
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// list actions
|
||||
const timestamp = ref<any>({})
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('timestamp', timestamp)
|
||||
watch(recAction, () => {
|
||||
if (!recAction.value) {
|
||||
return
|
||||
} else if (recAction.value === ActionEvents.showDetail) {
|
||||
crudQueryParams.value = { mode: 'entry', recordId: recId.value || '0' }
|
||||
} else if (recAction.value === ActionEvents.showConfirmSubmit) {
|
||||
isSubmitConfirmationOpen.value = true
|
||||
} else if (recAction.value === ActionEvents.showConfirmDelete) {
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
recAction.value = ''
|
||||
})
|
||||
|
||||
///// functions
|
||||
|
||||
function confirmCancel(data: ProcedureRoomOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
function goToEdit(data: ProcedureRoomOrder) {
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
'id': data.id.toString()
|
||||
})
|
||||
recItem.value = data
|
||||
}
|
||||
|
||||
function confirmSubmit(data: ProcedureRoomOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isSubmitConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
|
||||
const result = await submit(id)
|
||||
if (result.success) {
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
setTimeout(refresh, 300)
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" />
|
||||
|
||||
<List
|
||||
v-if="!isLoading.dataListLoading"
|
||||
:data="data"
|
||||
:pagination-meta="paginationMeta"
|
||||
@cancel="confirmCancel"
|
||||
@edit="goToEdit"
|
||||
@submit="confirmSubmit"
|
||||
/>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(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>
|
||||
|
||||
<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="() => 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>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import List from './list.vue'
|
||||
import Entry from './entry.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const { crudQueryParams } = useQueryCRUD()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List v-if="crudQueryParams.mode === 'list'" :encounter_id="encounter_id" />
|
||||
<Entry v-else :encounter_id="encounter_id" />
|
||||
<div class="hidden">{{ crudQueryParams.mode }}</div>
|
||||
</template>
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
handleActionSave,
|
||||
handleActionRemove,
|
||||
@@ -28,6 +27,7 @@ const route = useRoute()
|
||||
const { setQueryParams } = useQueryParam()
|
||||
|
||||
const title = ref('')
|
||||
const addTrigger = ref(false)
|
||||
|
||||
const plainEid = route.params.id
|
||||
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
|
||||
@@ -74,7 +74,7 @@ const headerPrep: HeaderPrep = {
|
||||
onClick: () => {
|
||||
recItem.value = null
|
||||
recId.value = 0
|
||||
isFormEntryDialogOpen.value = true
|
||||
addTrigger.value = true
|
||||
isReadonly.value = false
|
||||
},
|
||||
},
|
||||
@@ -90,7 +90,7 @@ const getMyDetail = async (id: number | string) => {
|
||||
if (result.success) {
|
||||
const currentValue = result.body?.data || {}
|
||||
recItem.value = currentValue
|
||||
isFormEntryDialogOpen.value = true
|
||||
addTrigger.value = true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,10 +113,10 @@ watch([recId, recAction], () => {
|
||||
}
|
||||
})
|
||||
|
||||
watch([isFormEntryDialogOpen], async () => {
|
||||
if (isFormEntryDialogOpen.value) {
|
||||
isFormEntryDialogOpen.value = false;
|
||||
const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
|
||||
watch([addTrigger], async () => {
|
||||
if (addTrigger.value) {
|
||||
addTrigger.value = false;
|
||||
const saveResp = await handleActionSave({ encounter_id, "scope_code": "rad" }, getMyList, () =>{}, toast)
|
||||
if (saveResp.success) {
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
|
||||
@@ -8,7 +8,8 @@ import AppViewHistory from '~/components/app/sep/view-history.vue'
|
||||
import AppViewLetter from '~/components/app/sep/view-letter.vue'
|
||||
|
||||
// Handler
|
||||
import useIntegrationSepEntry from '~/handlers/integration-sep-entry.handler'
|
||||
import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
|
||||
import { useIntegrationSepDetail } from '~/handlers/integration-sep-detail.handler'
|
||||
|
||||
const {
|
||||
histories,
|
||||
@@ -55,8 +56,18 @@ const {
|
||||
handleInit,
|
||||
} = useIntegrationSepEntry()
|
||||
|
||||
const { valueObjects, getSepDetail } = useIntegrationSepDetail()
|
||||
|
||||
const props = defineProps<{
|
||||
mode: 'add' | 'edit' | 'detail' | 'link'
|
||||
}>()
|
||||
|
||||
onMounted(async () => {
|
||||
await handleInit()
|
||||
if (['detail', 'link'].includes(props.mode)) {
|
||||
await getSepDetail()
|
||||
selectedObjects.value = { ...selectedObjects.value, ...valueObjects.value }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -66,12 +77,13 @@ onMounted(async () => {
|
||||
name="i-lucide-panel-bottom"
|
||||
class="me-2"
|
||||
/>
|
||||
<span class="font-semibold">Tambah</span>
|
||||
SEP
|
||||
<span class="font-semibold">{{ ['detail', 'link'].includes(props.mode) ? 'Detail' : 'Tambah' }} SEP</span>
|
||||
</div>
|
||||
<AppSepEntryForm
|
||||
:mode="props.mode"
|
||||
:is-save-loading="isSaveLoading"
|
||||
:is-service="isServiceHidden"
|
||||
:is-readonly="['detail', 'link'].includes(props.mode)"
|
||||
:doctors="doctors"
|
||||
:diagnoses="diagnoses"
|
||||
:facilities-from="facilitiesFrom"
|
||||
|
||||
@@ -13,8 +13,11 @@ import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
|
||||
// Icons
|
||||
import { X, Check } from 'lucide-vue-next'
|
||||
|
||||
// Libraries
|
||||
import useIntegrationSepList from '~/handlers/integration-sep-list.handler'
|
||||
// Handlers
|
||||
import { useIntegrationSepList } from '~/handlers/integration-sep-list.handler'
|
||||
|
||||
// Helpers
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
// use handler to provide state and functions
|
||||
const {
|
||||
@@ -42,26 +45,42 @@ const {
|
||||
handleRemove,
|
||||
} = useIntegrationSepList()
|
||||
|
||||
const dataFiltered = ref<any>([])
|
||||
const debouncedSearch = refDebounced(search, 500)
|
||||
|
||||
// expose provides so component can also use provide/inject if needed
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch(
|
||||
[recId, recAction],
|
||||
() => {
|
||||
if (recAction.value === 'showConfirmDel') {
|
||||
open.value = true
|
||||
}
|
||||
},
|
||||
)
|
||||
watch([recId, recAction], () => {
|
||||
if (recAction.value === 'showConfirmDel') {
|
||||
open.value = true
|
||||
}
|
||||
if (recAction.value === 'showDetail') {
|
||||
navigateTo(`/integration/bpjs-vclaim/sep/${recItem.value?.letterNumber}/detail`)
|
||||
}
|
||||
})
|
||||
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
if (newValue && newValue !== '-' && newValue.length >= 3) {
|
||||
dataFiltered.value = data.value.filter(
|
||||
(item: any) =>
|
||||
item.patientName.toLowerCase().includes(newValue.toLowerCase()) ||
|
||||
item.letterNumber.toLowerCase().includes(newValue.toLowerCase()) ||
|
||||
item.cardNumber.toLowerCase().includes(newValue.toLowerCase()),
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => dateSelection.value,
|
||||
(val) => {
|
||||
async (val) => {
|
||||
if (!val) return
|
||||
setDateRange()
|
||||
await getSepList()
|
||||
dataFiltered.value = [...data.value]
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
@@ -73,9 +92,10 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
setServiceTypes()
|
||||
getSepList()
|
||||
await getSepList()
|
||||
dataFiltered.value = [...data.value]
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -85,20 +105,35 @@ onMounted(() => {
|
||||
<!-- Filter Bar -->
|
||||
<div class="my-2 flex flex-wrap items-center gap-2">
|
||||
<!-- Search -->
|
||||
<Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
|
||||
<Input
|
||||
v-model="search"
|
||||
placeholder="Cari No. SEP / No. Kartu BPJS..."
|
||||
class="w-72"
|
||||
/>
|
||||
|
||||
<!-- Filter -->
|
||||
<div class="w-72">
|
||||
<Select id="serviceType" icon-name="i-lucide-chevron-down" v-model="serviceType" :items="serviceTypesList"
|
||||
placeholder="Pilih Pelayanan" />
|
||||
<Select
|
||||
id="serviceType"
|
||||
icon-name="i-lucide-chevron-down"
|
||||
v-model="serviceType"
|
||||
:items="serviceTypesList"
|
||||
placeholder="Pilih Pelayanan"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Date Range -->
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal"
|
||||
>
|
||||
{{ dateRange }}
|
||||
<Icon name="i-lucide-calendar" class="h-5 w-5" />
|
||||
<Icon
|
||||
name="i-lucide-calendar"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-2">
|
||||
@@ -109,9 +144,14 @@ onMounted(() => {
|
||||
<!-- Export -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline"
|
||||
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
|
||||
<Icon name="i-lucide-download" class="h-5 w-5" />
|
||||
<Button
|
||||
variant="outline"
|
||||
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-download"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Ekspor
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
@@ -123,13 +163,20 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="handleRowSelected" />
|
||||
<AppSepList
|
||||
v-if="!isLoading.dataListLoading"
|
||||
:data="dataFiltered"
|
||||
@update:modelValue="handleRowSelected"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
<PubMyUiPagination
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -142,20 +189,39 @@ onMounted(() => {
|
||||
</DialogHeader>
|
||||
<DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
|
||||
<div class="mt-4 space-y-2 text-sm">
|
||||
<p><strong>No. SEP:</strong> {{ sepData.sepNumber }}</p>
|
||||
<p><strong>No. Kartu BPJS:</strong> {{ sepData.cardNumber }}</p>
|
||||
<p><strong>Nama Pasien:</strong> {{ sepData.patientName }}</p>
|
||||
<p>
|
||||
<strong>No. SEP:</strong>
|
||||
{{ sepData.sepNumber }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>No. Kartu BPJS:</strong>
|
||||
{{ sepData.cardNumber }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Nama Pasien:</strong>
|
||||
{{ sepData.patientName }}
|
||||
</p>
|
||||
</div>
|
||||
<DialogFooter class="mt-6 flex justify-end gap-3">
|
||||
<Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="() => {
|
||||
recId = 0
|
||||
recAction = ''
|
||||
open = false
|
||||
}">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="border-green-600 text-green-600 hover:bg-green-50"
|
||||
@click="
|
||||
() => {
|
||||
recId = 0
|
||||
recAction = ''
|
||||
open = false
|
||||
}
|
||||
"
|
||||
>
|
||||
<X class="mr-1 h-4 w-4" />
|
||||
Tidak
|
||||
</Button>
|
||||
<Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleRemove">
|
||||
<Button
|
||||
variant="destructive"
|
||||
class="bg-red-600 hover:bg-red-700"
|
||||
@click="handleRemove"
|
||||
>
|
||||
<Check class="mr-1 h-4 w-4" />
|
||||
Ya
|
||||
</Button>
|
||||
|
||||
@@ -71,7 +71,7 @@ onMounted(async () => {
|
||||
})
|
||||
|
||||
async function getMyList() {
|
||||
const url = `/api/v1/soapi?typeCode=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
|
||||
const url = `/api/v1/soapi?type-code=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
|
||||
const resp = await xfetch(url)
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { withBase } from '~/models/_base'
|
||||
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import type { Patient } from '~/models/patient'
|
||||
import type { Person } from '~/models/person'
|
||||
import { getDetail } from '~/services/vaccine-data.service'
|
||||
|
||||
// Components
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import type { VaccineData } from '~/models/vaccine-data'
|
||||
|
||||
// #region Props & Emits
|
||||
const props = defineProps<{
|
||||
}>()
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
|
||||
const VaccineData = ref<VaccineData | null>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Detail Data Vaksin',
|
||||
icon: 'i-lucide-newspaper',
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// onMounted(async () => {
|
||||
// const result = await getDetail(controlLetterId, {
|
||||
// includes: "unit,specialist,subspecialist,doctor-employee-person",
|
||||
// })
|
||||
// if (result.success) {
|
||||
// controlLetter.value = result.body?.data
|
||||
// }
|
||||
// })
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
function goBack() {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
function handleAction() {
|
||||
goBack()
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
|
||||
<AppVaccineDataDetail :instance="VaccineData" @click="handleAction" />
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Patient, genPatientProps } from '~/models/patient'
|
||||
import type { ExposedForm } from '~/types/form'
|
||||
import type { PatientBase } from '~/models/patient'
|
||||
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { genPatient } from '~/models/patient'
|
||||
import { PatientSchema } from '~/schemas/patient.schema'
|
||||
import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
|
||||
import { PersonAddressSchema } from '~/schemas/person-address.schema'
|
||||
import { PersonContactListSchema } from '~/schemas/person-contact.schema'
|
||||
import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
|
||||
import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
|
||||
import { uploadAttachment } from '~/services/patient.service'
|
||||
import { getDetail, update } from '~/services/vaccine-data.service'
|
||||
import type { VaccineData } from '~/models/vaccine-data'
|
||||
import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
|
||||
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { withBase } from '~/models/_base'
|
||||
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
|
||||
import { VaccineDataSchema } from '~/schemas/vaccine-data.schema'
|
||||
import { formatDateYyyyMmDd } from '~/lib/date'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import { getList, remove } from '~/services/vaccine-data.service'
|
||||
import { handleActionEdit, handleActionSave } from '~/handlers/vaccine-data.handler'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import { formatDateToDatetimeLocal } from '~/lib/utils'
|
||||
|
||||
// #region Props & Emits
|
||||
const props = withDefaults(defineProps<{
|
||||
callbackUrl?: string
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
|
||||
// form related state
|
||||
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
|
||||
entityName: 'vaccine-data',
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
const VaccineDataId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
|
||||
|
||||
const inputForm = ref<ExposedForm<any> | null>(null)
|
||||
const VaccineData = ref({})
|
||||
const isConfirmationOpen = ref(false)
|
||||
const selectedOperativeAction = ref<any>(null)
|
||||
|
||||
const isSepDialogOpen = ref(false)
|
||||
provide("isSepDialogOpen", isSepDialogOpen);
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(async () => {
|
||||
const result = await getDetail(VaccineDataId)
|
||||
if (result.success) {
|
||||
const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
|
||||
VaccineData.value = responseData
|
||||
inputForm.value?.setValues(responseData)
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
function goBack() {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
async function handleConfirmAdd() {
|
||||
const response = await handleActionSave(
|
||||
await composeFormData(),
|
||||
() => { },
|
||||
() => { },
|
||||
toast,
|
||||
)
|
||||
goBack()
|
||||
}
|
||||
|
||||
async function composeFormData(): Promise<VaccineData> {
|
||||
const [input,] = await Promise.all([
|
||||
inputForm.value?.validate(),
|
||||
])
|
||||
|
||||
const results = [input]
|
||||
const allValid = results.every((r) => r?.valid)
|
||||
|
||||
// exit, if form errors happend during validation
|
||||
if (!allValid) return Promise.reject('Form validation failed')
|
||||
|
||||
const formData = input?.values
|
||||
formData.encounter_id = encounterId
|
||||
return new Promise((resolve) => resolve(formData))
|
||||
}
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
async function handleActionClick(eventType: string) {
|
||||
if (eventType === 'submit') {
|
||||
isConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
if (eventType === 'back') {
|
||||
if (props.callbackUrl) {
|
||||
await navigateTo(props.callbackUrl)
|
||||
return
|
||||
}
|
||||
|
||||
goBack()
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancelAdd() {
|
||||
isConfirmationOpen.value = false
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
|
||||
const initialValues = {
|
||||
a1: "",
|
||||
a2: formatDateToDatetimeLocal(new Date()),
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Data Vaksin</div>
|
||||
<AppVaccineDataEntry
|
||||
ref="inputForm"
|
||||
:schema="VaccineDataSchema"
|
||||
:initial-values="initialValues"
|
||||
:is-bpjs="isBpjs"
|
||||
/>
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="handleActionClick" />
|
||||
</div>
|
||||
|
||||
<Confirmation
|
||||
v-model:open="isConfirmationOpen"
|
||||
title="Simpan Data"
|
||||
message="Apakah Anda yakin ingin menyimpan data ini?"
|
||||
confirm-text="Simpan"
|
||||
@confirm="handleConfirmAdd"
|
||||
@cancel="handleCancelAdd"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* component style */
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
// #region Imports
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { getList, remove } from '~/services/vaccine-data.service'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
|
||||
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import type { VaccineData } from '~/models/vaccine-data'
|
||||
import { medicalRoles } from '~/const/common/role'
|
||||
// #endregion
|
||||
|
||||
// #region State
|
||||
const props = withDefaults(defineProps<{
|
||||
encounter?: Encounter
|
||||
isBpjs?: boolean
|
||||
}>(), {
|
||||
isBpjs: false,
|
||||
})
|
||||
const route = useRoute()
|
||||
const {user} = useUserStore()
|
||||
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
|
||||
|
||||
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
|
||||
fetchFn: (params) => getList({ ...params, includes: '', }),
|
||||
entityName: 'vaccine-data',
|
||||
})
|
||||
const dummy = [
|
||||
{
|
||||
"id": 1,
|
||||
"date": new Date().toISOString(),
|
||||
"name1": "Dr. Smith",
|
||||
"name2": 1,
|
||||
},
|
||||
]
|
||||
|
||||
const isHistoryDialogOpen = ref(false)
|
||||
const isDocPreviewDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
const summaryLoading = ref(false)
|
||||
const isRequirementsMet = ref(true)
|
||||
const vaccineData = ref<VaccineData | null>(null)
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const timestamp = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: "Data Vaksin",
|
||||
icon: 'i-lucide-syringe',
|
||||
}
|
||||
if(user.activeRole === 'emp|doc' || user.activeRole === 'system') {
|
||||
headerPrep.addNav = {
|
||||
label: "Data Vaksin",
|
||||
onClick: () => navigateTo({
|
||||
name: 'rehab-encounter-id-vaccine-data-add',
|
||||
params: { id: encounterId },
|
||||
}),
|
||||
};
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getListData()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getListData() {
|
||||
try {
|
||||
summaryLoading.value = true
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
} catch (error) {
|
||||
console.error('Error fetching Data:', error)
|
||||
} finally {
|
||||
summaryLoading.value = false
|
||||
}
|
||||
}
|
||||
async function handleConfirmDelete(record: any, action: string) {
|
||||
if (action === 'delete' && record?.id) {
|
||||
try {
|
||||
const result = await remove(record.id)
|
||||
if (result.success) {
|
||||
toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
|
||||
await fetchData()
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
|
||||
}
|
||||
} catch (error) {
|
||||
toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Provide
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('timestamp', timestamp)
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('isHistoryDialogOpen', isHistoryDialogOpen)
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
watch([recId, recAction, timestamp], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
navigateTo({
|
||||
name: 'rehab-encounter-id-vaccine-data-vaccine_data_id',
|
||||
params: { id: encounterId, "vaccine_data_id": recId.value },
|
||||
})
|
||||
break
|
||||
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Header :prep="headerPrep" />
|
||||
|
||||
<AppVaccineDataList
|
||||
:data="dummy"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange" />
|
||||
|
||||
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
@@ -110,8 +110,8 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
<TableBody v-else-if="rows.length === 0">
|
||||
<TableRow>
|
||||
<TableCell
|
||||
:colspan="keys.length"
|
||||
class="py-8 text-center"
|
||||
:colspan="keys.length + 1"
|
||||
class="py-5 text-center"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Info class="size-5 text-muted-foreground" />
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<string>()
|
||||
const props = defineProps<{
|
||||
class: string
|
||||
defaultClass?: string
|
||||
disabled?: boolean
|
||||
width?: number
|
||||
widthUnit?: string
|
||||
}>()
|
||||
|
||||
const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
|
||||
const activeState = ref(false)
|
||||
|
||||
let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
|
||||
let widthStyle = '';
|
||||
if(props.width) {
|
||||
widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
|
||||
} else {
|
||||
widthStyle = `width: 100%;`
|
||||
}
|
||||
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
|
||||
watch(activeState, () => {
|
||||
nextTick(() => {
|
||||
if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
|
||||
asyncInputRef.value.focus()
|
||||
}
|
||||
})
|
||||
|
||||
// document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
|
||||
InputComp.value.focus()
|
||||
// console.log(inputComp.__defaults)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="!activeState || disabled" @click="() => activeState = true"
|
||||
:class="`${defaultClass}`"
|
||||
:style="widthStyle">
|
||||
{{ model }}
|
||||
</div>
|
||||
<InputComp v-else
|
||||
v-model="model"
|
||||
:class="`${defaultClass}`"
|
||||
:style="widthStyle"
|
||||
@blur="() => activeState = false"
|
||||
/>
|
||||
<!-- {{ inputComp.value }} -->
|
||||
<!-- <Input
|
||||
v-else v-model="model" @blur="() => activeState = false"
|
||||
:class="`${defaultClass}`"
|
||||
:style="widthStyle"
|
||||
autofocus
|
||||
/> -->
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
rec: ListItemDto
|
||||
}>()
|
||||
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
const timestamp = inject<Ref<any>>('timestamp')!
|
||||
|
||||
const activeKey = ref<string | null>(null)
|
||||
|
||||
function process() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showProcess
|
||||
recItem.value = props.rec
|
||||
timestamp.value = new Date().getTime()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button @click="process" variant="outline"
|
||||
class="text-orange-400 border-orange-400 bg-transparent">
|
||||
Pilih
|
||||
<Icon name="i-lucide-arrow-right" class="h-4 w-4 align-middle transition-colors" />
|
||||
</Button>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
rec: ListItemDto
|
||||
}>()
|
||||
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
const timestamp = inject<Ref<any>>('timestamp')!
|
||||
|
||||
const activeKey = ref<string | null>(null)
|
||||
|
||||
function process() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showProcess
|
||||
recItem.value = props.rec
|
||||
timestamp.value = new Date().getTime()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button @click="process" variant="outline"
|
||||
class="text-orange-400 border-orange-400 bg-transparent">
|
||||
Detail
|
||||
<Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
|
||||
</Button>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import type { LinkItem, ListItemDto } from './types'
|
||||
import { ActionEvents } from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: ListItemDto
|
||||
}>()
|
||||
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
const timestamp = inject<Ref<any>>('timestamp')!
|
||||
|
||||
function print() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showPrint
|
||||
recItem.value = props.rec
|
||||
timestamp.value = new Date().getTime()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Button type="button" variant="outline"
|
||||
class="text-orange-500 border border-orange-400"
|
||||
@click="print">
|
||||
<Icon name="i-lucide-printer" class="h-4 w-4 align-middle transition-colors" />
|
||||
Preview
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user