Files
simrsx-fe/app/components/app/soapi/function-entry.vue

487 lines
12 KiB
Vue

<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'
const props = defineProps<{
excludeFields?: string[]
}>()
const emits = defineEmits(['click'])
const subject = ref({
'prim-compl': '',
'sec-compl': '',
'cur-disea-hist': '',
'pas-disea-hist': '',
'fam-disea-hist': '',
'alg-hist': '',
'alg-react': '',
'med-hist': '',
'blood-type': '',
})
const isExcluded = (key: string) => props.excludeFields?.includes(key)
const disorders = ref<string[]>([])
const therapies = ref<string[]>([])
const summary = ref('')
const disorderOptions = [
'Fungsi Otot',
'Fungsi Sendi',
'Fungsi Jalan',
'Fungsi Syaraf',
'Fungsi Koordinasi',
'Jantung',
'Fungsi Respirasi',
'Fungsi Menelan',
'Fungsi Bladder',
'Fungsi Bowel',
'Fungsi Luhur',
'Fungsi Kontrol Postur',
'Fungsi Eksekusi',
'Fungsi Ortosa/Protesa',
'Gangguan Aktivitas Sehari-hari',
'Lainnya',
]
const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
</script>
<template>
<form id="entry-form">
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<Block>
<Cell>
<Label dynamic>Keluhan Utama</Label>
<Field>
<Textarea />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Riwayat Penyakit Dahulu</Label>
<Field>
<Textarea />
</Field>
</Cell>
<Cell>
<Label dynamic>Riwayat Penyakit Sekarang</Label>
<Field>
<Textarea />
</Field>
</Cell>
</Block>
<Separator class="mt-8" />
<div class="my-2">
<h1 class="font-semibold">Pemeriksaan Fisik</h1>
</div>
<Block>
<Cell>
<Label dynamic>Umum</Label>
<Field>
<Input placeholder="Sistolik" />
</Field>
</Cell>
</Block>
<div class="my-2">
<h1 class="font-semibold">Tanda Vital</h1>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block>
<Cell>
<Label dynamic>Kesadaran (GCS)</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Pernapasan</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Jenis</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Nadi</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Jenis</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Tekanan Darah Lengan Kanan</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Tekanan Darah Lengan Kiri</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Suhu Aksila</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Suhu Rektal</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2">
<h1 class="font-semibold">Pemeriksaan Badan</h1>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block>
<Cell>
<Label dynamic>Kulit</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="3">
<Cell>
<Label dynamic>Kepala</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Telinga</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Hidung</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="3">
<Cell>
<Label dynamic>Rongga Mulut/Tenggorokan</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Mata</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Lain-Lain</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="3">
<Cell>
<Label dynamic>Leher</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Kelenjar Tiroid</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Lain-Lain</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="3">
<Cell>
<Label dynamic>Thorax</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Jantung</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Paru-Paru</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block>
<Cell>
<Label dynamic>Lain-Lain</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="3">
<Cell>
<Label dynamic>Abdomen</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Hati</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Lien</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block>
<Cell>
<Label dynamic>Lain-Lain</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="3">
<Cell>
<Label dynamic>Punggung</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Ekstremitas</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>Kelamin</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Rectum</Label>
<Field>
<Input />
</Field>
</Cell>
<Cell>
<Label dynamic>System Syaraf</Label>
<Field>
<Input />
</Field>
</Cell>
</Block>
</div>
<Block :colCount="2">
<Cell>
<Label dynamic>Neuromoskuloskeletal</Label>
<Field>
<Textarea />
</Field>
</Cell>
<Cell>
<Label dynamic>Kardiorespirasi</Label>
<Field>
<Textarea />
</Field>
</Cell>
</Block>
<Separator class="mt-8" />
<div class="my-2">
<h1 class="font-semibold">Pemeriksaan Penunjang</h1>
</div>
<Block :colCount="2">
<Cell>
<Label dynamic>Pencitraan</Label>
<Field>
<Textarea />
</Field>
</Cell>
<Cell>
<Label dynamic>Laboratorium</Label>
<Field>
<Textarea />
</Field>
</Cell>
</Block>
<div class="mb-8 grid grid-cols-2 gap-4">
<div>
<span class="text-md">Diagnosa Medis (ICD-X)</span>
<Button
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
type="button"
@click="emits('click', 'prosedur')"
>
+ Pilih Prosedur
</Button>
<AppIcdPreview />
</div>
<div>
<span class="text-md">Diagnosa Medis (ICD-X)</span>
<Button
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
type="button"
@click="emits('click', 'prosedur')"
>
+ Pilih Prosedur
</Button>
<AppIcdPreview />
</div>
<div>
<span class="text-md">Diagnosa Medis (ICD-X)</span>
<Button
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
type="button"
@click="emits('click', 'prosedur')"
>
+ Pilih Prosedur
</Button>
<AppIcdPreview />
</div>
</div>
<div class="space-y-8">
<div>
<h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
<div class="grid grid-cols-3 gap-2">
<div
v-for="opt in disorderOptions"
:key="opt"
class="flex items-center space-x-2"
>
<Checkbox
:id="opt"
:value="opt"
v-model="disorders"
/>
<Label
:for="opt"
class="text-sm"
>
{{ opt }}
</Label>
</div>
</div>
<div class="mt-4 space-y-2">
<Label
for="summary"
class="font-medium"
>
Kesimpulan Didapatkan Gangguan Fungsi
<span class="text-red-500">*</span>
</Label>
<Textarea
id="summary"
v-model="summary"
placeholder="Masukkan kesimpulan gangguan fungsi"
/>
</div>
</div>
<Separator />
<!-- REKOMENDASI TERAPI -->
<div>
<h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
<div class="grid grid-cols-3 gap-2">
<div
v-for="opt in therapyOptions"
:key="opt"
class="flex items-center space-x-2"
>
<Checkbox
:id="opt"
:value="opt"
v-model="therapies"
/>
<Label
:for="opt"
class="text-sm"
>
{{ opt }}
</Label>
</div>
</div>
</div>
</div>
</div>
</form>
</template>