Merge pull request #201 from dikstub-rssa/feat/kajian-awal-keperawatan-184
Feat/kajian awal keperawatan 184
This commit is contained in:
Munawwirul Jamal
@@ -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>
|
||||||
@@ -63,7 +63,7 @@ const {
|
|||||||
fetchFn: async ({ page, search }) => {
|
fetchFn: async ({ page, search }) => {
|
||||||
const result = await getList({
|
const result = await getList({
|
||||||
'encounter-id': id,
|
'encounter-id': id,
|
||||||
typeCode: 'dev-record',
|
'type-code': 'dev-record',
|
||||||
includes: 'encounter',
|
includes: 'encounter',
|
||||||
search,
|
search,
|
||||||
page,
|
page,
|
||||||
|
|||||||
@@ -16,8 +16,24 @@ import { genEncounter, type Encounter } from '~/models/encounter'
|
|||||||
// Handlers
|
// Handlers
|
||||||
import type { EncounterProps } from '~/handlers/encounter-init.handler'
|
import type { EncounterProps } from '~/handlers/encounter-init.handler'
|
||||||
import { getEncounterData } from '~/handlers/encounter-process.handler'
|
import { getEncounterData } from '~/handlers/encounter-process.handler'
|
||||||
import { getMenuItems } from "~/handlers/encounter-init.handler"
|
import { getMenuItems } from '~/handlers/encounter-init.handler'
|
||||||
|
|
||||||
|
// PLASE ORDER BY TAB POSITION
|
||||||
|
import Status from '~/components/content/encounter/status.vue'
|
||||||
|
import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
|
||||||
|
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
|
||||||
|
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
|
||||||
|
import DeviceOrder from '~/components/content/device-order/main.vue'
|
||||||
|
import Prescription from '~/components/content/prescription/main.vue'
|
||||||
|
import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
|
||||||
|
import Radiology from '~/components/content/radiology-order/main.vue'
|
||||||
|
import Consultation from '~/components/content/consultation/list.vue'
|
||||||
|
import Cprj from '~/components/content/cprj/entry.vue'
|
||||||
|
import DocUploadList from '~/components/content/document-upload/list.vue'
|
||||||
|
import GeneralConsentList from '~/components/content/general-consent/entry.vue'
|
||||||
|
import ResumeList from '~/components/content/resume/list.vue'
|
||||||
|
import ControlLetterList from '~/components/content/control-letter/list.vue'
|
||||||
|
import InitialNursingStudy from '~/components/content/initial-nursing/entry.vue'
|
||||||
// App Components
|
// App Components
|
||||||
import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
|
import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
|
||||||
import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
|
import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
|
||||||
@@ -51,7 +67,8 @@ const isShowPatient = computed(() => data.value && data.value?.patient?.person)
|
|||||||
const { setOpen } = useSidebar()
|
const { setOpen } = useSidebar()
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
|
|
||||||
if (activePosition.value === 'none') { // if user position is none, redirect to home page
|
if (activePosition.value === 'none') {
|
||||||
|
// if user position is none, redirect to home page
|
||||||
router.push('/')
|
router.push('/')
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -66,6 +83,45 @@ const protocolRows = [
|
|||||||
action: '',
|
action: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
value: 'rehab-medical-assessment',
|
||||||
|
label: 'Pengkajian Awal Medis Rehabilitasi Medis',
|
||||||
|
component: EarlyMedicalRehabList,
|
||||||
|
props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'function-assessment',
|
||||||
|
label: 'Asesmen Fungsi',
|
||||||
|
component: AssesmentFunctionList,
|
||||||
|
props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
|
||||||
|
},
|
||||||
|
{ value: 'therapy-protocol', label: 'Protokol Terapi' },
|
||||||
|
{ value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
|
||||||
|
{ value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
|
||||||
|
{ value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
|
||||||
|
{
|
||||||
|
value: '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-lab-micro', label: 'Order Lab Mikro' },
|
||||||
|
{ value: 'mcu-lab-pa', label: 'Order Lab PA' },
|
||||||
|
{ value: 'medical-action', label: 'Order Ruang Tindakan' },
|
||||||
|
{ value: 'mcu-result', label: 'Hasil Penunjang' },
|
||||||
|
{ value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
|
||||||
|
{ value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
|
||||||
|
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
|
||||||
|
{ value: 'screening', label: 'Skrinning MPP' },
|
||||||
|
{
|
||||||
|
value: 'supporting-document',
|
||||||
|
label: 'Upload Dokumen Pendukung',
|
||||||
|
component: DocUploadList,
|
||||||
|
props: { encounter: data },
|
||||||
number: '2',
|
number: '2',
|
||||||
tanggal: new Date().toISOString().substring(0, 10),
|
tanggal: new Date().toISOString().substring(0, 10),
|
||||||
siklus: 'II',
|
siklus: 'II',
|
||||||
@@ -103,13 +159,19 @@ function handleClick(type: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initMenus() {
|
function initMenus() {
|
||||||
menus.value = getMenuItems(id, props, user, {
|
menus.value = getMenuItems(
|
||||||
encounter: data.value
|
id,
|
||||||
} as any, {
|
props,
|
||||||
protocolTheraphy: paginationMeta,
|
user,
|
||||||
protocolChemotherapy: paginationMeta,
|
{
|
||||||
medicineProtocolChemotherapy: paginationMeta,
|
encounter: data.value,
|
||||||
})
|
} as any,
|
||||||
|
{
|
||||||
|
protocolTheraphy: paginationMeta,
|
||||||
|
protocolChemotherapy: paginationMeta,
|
||||||
|
medicineProtocolChemotherapy: paginationMeta,
|
||||||
|
},
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getData() {
|
async function getData() {
|
||||||
@@ -119,24 +181,37 @@ async function getData() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="bg-white dark:bg-slate-800 p-4 2xl:p-5">
|
<div class="bg-white p-4 dark:bg-slate-800 2xl:p-5">
|
||||||
<div class="mb-4 flex">
|
<div class="mb-4 flex">
|
||||||
<div>
|
<div>
|
||||||
<ContentNavBa label="Kembali" @click="handleClick" />
|
<ContentNavBa
|
||||||
|
label="Kembali"
|
||||||
|
@click="handleClick"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
|
<!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
|
||||||
Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
|
Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<ContentSwitcher :active="1" :height="150">
|
<ContentSwitcher
|
||||||
|
:active="1"
|
||||||
|
:height="150"
|
||||||
|
>
|
||||||
<template v-slot:content1>
|
<template v-slot:content1>
|
||||||
<EncounterPatientInfo v-if="isShowPatient" :data="data" />
|
<EncounterPatientInfo
|
||||||
|
v-if="isShowPatient"
|
||||||
|
:data="data"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:content2>
|
<template v-slot:content2>
|
||||||
<EncounterHistoryButtonMenu v-if="isShowPatient" />
|
<EncounterHistoryButtonMenu v-if="isShowPatient" />
|
||||||
</template>
|
</template>
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
</div>
|
</div>
|
||||||
<SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
|
<SubMenu
|
||||||
|
:data="menus"
|
||||||
|
:initial-active-menu="activeMenu"
|
||||||
|
@change-menu="activeMenu = $event"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -71,7 +71,7 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
async function getMyList() {
|
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)
|
const resp = await xfetch(url)
|
||||||
if (resp.success) {
|
if (resp.success) {
|
||||||
data.value = (resp.body as Record<string, any>).data
|
data.value = (resp.body as Record<string, any>).data
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ const DocUploadListAsync = defineAsyncComponent(() => import('~/components/conte
|
|||||||
const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
|
const GeneralConsentListAsync = defineAsyncComponent(() => import('~/components/content/general-consent/entry.vue'))
|
||||||
const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
|
const ResumeListAsync = defineAsyncComponent(() => import('~/components/content/resume/list.vue'))
|
||||||
const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
|
const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
|
||||||
|
const InitialNursingStudyAsync = defineAsyncComponent(() => import('~/components/content/initial-nursing/entry.vue'))
|
||||||
|
|
||||||
const defaultKeys: Record<string, any> = {
|
const defaultKeys: Record<string, any> = {
|
||||||
status: {
|
status: {
|
||||||
@@ -209,13 +210,13 @@ const defaultKeys: Record<string, any> = {
|
|||||||
title: 'SPRI',
|
title: 'SPRI',
|
||||||
classCode: ['ambulatory', 'emergency'],
|
classCode: ['ambulatory', 'emergency'],
|
||||||
unit: 'all',
|
unit: 'all',
|
||||||
},
|
},
|
||||||
refBack: {
|
refBack: {
|
||||||
id: 'reference-back',
|
id: 'reference-back',
|
||||||
title: 'PRB',
|
title: 'PRB',
|
||||||
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
||||||
unit: 'all',
|
unit: 'all',
|
||||||
},
|
},
|
||||||
screening: {
|
screening: {
|
||||||
id: 'screening',
|
id: 'screening',
|
||||||
title: 'Skrinning MPP',
|
title: 'Skrinning MPP',
|
||||||
@@ -246,6 +247,12 @@ const defaultKeys: Record<string, any> = {
|
|||||||
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
||||||
unit: 'all',
|
unit: 'all',
|
||||||
},
|
},
|
||||||
|
initialNursingStudy: {
|
||||||
|
id: 'initial-nursing-study',
|
||||||
|
title: 'Kajian Awal Keperawatan',
|
||||||
|
classCode: ['ambulatory', 'emergency', 'inpatient'],
|
||||||
|
unit: 'all',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
|
export function getItemsByClassCode(classCode: string, items: EncounterItem[]) {
|
||||||
@@ -406,6 +413,11 @@ export function injectComponents(id: string | number, data: EncounterListData, m
|
|||||||
currentKeys.priceList['props'] = { encounter_id: id }
|
currentKeys.priceList['props'] = { encounter_id: id }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (currentKeys?.initialNursingStudy) {
|
||||||
|
currentKeys.initialNursingStudy['component'] = InitialNursingStudyAsync
|
||||||
|
currentKeys.initialNursingStudy['props'] = { encounter: data?.encounter }
|
||||||
|
}
|
||||||
|
|
||||||
return currentKeys
|
return currentKeys
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -485,13 +497,7 @@ export function mapResponseToEncounter(result: any): any {
|
|||||||
return mapped
|
return mapped
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getMenuItems(
|
export function getMenuItems(id: string | number, props: any, user: any, data: EncounterListData, meta: any) {
|
||||||
id: string | number,
|
|
||||||
props: any,
|
|
||||||
user: any,
|
|
||||||
data: EncounterListData,
|
|
||||||
meta: any,
|
|
||||||
) {
|
|
||||||
console.log(props)
|
console.log(props)
|
||||||
// const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
|
// const normalClassCode = props.classCode === 'ambulatory' ? 'outpatient' : props.classCode
|
||||||
const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
|
const normalClassCode = props.classCode === 'ambulatory' ? 'ambulatory' : props.classCode
|
||||||
|
|||||||
@@ -153,6 +153,32 @@ export const ObjectSchema = z.object({
|
|||||||
'head-to-toe': z.record(z.string()).default({}),
|
'head-to-toe': z.record(z.string()).default({}),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const InitialNursingSchema = z.object({
|
||||||
|
'pri-complain': z.string().default(''),
|
||||||
|
'med-type': z.string().default(''),
|
||||||
|
'med-name': z.string().default(''),
|
||||||
|
'med-reaction': z.string().default(''),
|
||||||
|
'food-type': z.string().default(''),
|
||||||
|
'food-name': z.string().default(''),
|
||||||
|
'food-reaction': z.string().default(''),
|
||||||
|
'other-type': z.string().default(''),
|
||||||
|
'other-name': z.string().default(''),
|
||||||
|
'other-reaction': z.string().default(''),
|
||||||
|
'pain-asst': z.string().default(''),
|
||||||
|
'pain-scale': z.string().default(''),
|
||||||
|
'pain-time': z.string().default(''),
|
||||||
|
'pain-duration': z.string().default(''),
|
||||||
|
'pain-freq': z.string().default(''),
|
||||||
|
'pain-loc': z.string().default(''),
|
||||||
|
'nut-screening': z.string().default(''),
|
||||||
|
'spiritual-asst': z.string().default(''),
|
||||||
|
'general-condition': z.string().default(''),
|
||||||
|
'support-exam': z.string().default(''),
|
||||||
|
'risk-fall': z.string().default(''),
|
||||||
|
bracelet: z.string().default(''),
|
||||||
|
'bracelet-alg': z.string().default(''),
|
||||||
|
})
|
||||||
|
|
||||||
const AssessmentSchema = z.object({
|
const AssessmentSchema = z.object({
|
||||||
'early-diag': AssessmentSectionSchema,
|
'early-diag': AssessmentSectionSchema,
|
||||||
'late-diag': AssessmentSectionSchema,
|
'late-diag': AssessmentSectionSchema,
|
||||||
|
|||||||
Reference in New Issue
Block a user