Merge branch 'dev' into feat/device-order-x
This commit is contained in:
Andrian Roshandy
+4
-1
@@ -1 +1,4 @@
|
||||
API_ORIGIN=
|
||||
NUXT_MAIN_API_ORIGIN=
|
||||
NUXT_BPJS_API_ORIGIN=
|
||||
NUXT_SYNC_API_ORIGIN=
|
||||
NUXT_API_ORIGIN=
|
||||
|
||||
+3
-1
@@ -23,4 +23,6 @@ logs
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
.vscode
|
||||
# editor
|
||||
.vscode
|
||||
*.swp
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
--primary-hover: 26, 92%, 65%;
|
||||
|
||||
/* Secondary - Clean Blue */
|
||||
--secondary: 210 50% 96%;
|
||||
--secondary-foreground: 210 20% 20%;
|
||||
--secondary: 40 70% 60%;
|
||||
--secondary-foreground: 210 20% 100%;
|
||||
--muted: 210 25% 95%;
|
||||
--muted-foreground: 210 15% 50%;
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: any
|
||||
idx?: number
|
||||
}>()
|
||||
|
||||
// Try to get proses handler from parent via inject
|
||||
const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
|
||||
|
||||
function handleProses() {
|
||||
if (prosesHandler) {
|
||||
prosesHandler(props.rec)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<Button
|
||||
type="button"
|
||||
class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
|
||||
@click="handleProses"
|
||||
>
|
||||
Proses
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
|
||||
import Input from '~/components/pub/ui/input/Input.vue'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import { format, parseISO } from 'date-fns'
|
||||
import { id as localeID } from 'date-fns/locale'
|
||||
|
||||
interface Props {
|
||||
open?: boolean
|
||||
tanggalPemeriksaan?: string | Date
|
||||
jadwalTanggalPemeriksaan?: string | Date
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
open: false,
|
||||
tanggalPemeriksaan: undefined,
|
||||
jadwalTanggalPemeriksaan: undefined,
|
||||
isLoading: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
'update:date': [value: string | undefined]
|
||||
'update:schedule': [value: string | undefined]
|
||||
submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
|
||||
}>()
|
||||
|
||||
// Local state for jadwal tanggal pemeriksaan
|
||||
const jadwalTanggal = ref<string | undefined>(
|
||||
props.jadwalTanggalPemeriksaan
|
||||
? typeof props.jadwalTanggalPemeriksaan === 'string'
|
||||
? props.jadwalTanggalPemeriksaan
|
||||
: format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
|
||||
: undefined,
|
||||
)
|
||||
|
||||
// Watch for external changes
|
||||
watch(
|
||||
() => props.jadwalTanggalPemeriksaan,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
jadwalTanggal.value =
|
||||
typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
|
||||
} else {
|
||||
jadwalTanggal.value = undefined
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// Watch local changes
|
||||
watch(jadwalTanggal, (newValue) => {
|
||||
emit('update:schedule', newValue)
|
||||
})
|
||||
|
||||
// Format date for display
|
||||
const formattedTanggalPemeriksaan = computed(() => {
|
||||
if (!props.tanggalPemeriksaan) return ''
|
||||
try {
|
||||
const date =
|
||||
props.tanggalPemeriksaan instanceof Date
|
||||
? props.tanggalPemeriksaan
|
||||
: parseISO(props.tanggalPemeriksaan)
|
||||
return format(date, 'dd MMMM yyyy', { locale: localeID })
|
||||
} catch {
|
||||
return props.tanggalPemeriksaan.toString()
|
||||
}
|
||||
})
|
||||
|
||||
// Handle submit
|
||||
function handleSubmit() {
|
||||
emit('submit', {
|
||||
tanggalPemeriksaan: props.tanggalPemeriksaan
|
||||
? typeof props.tanggalPemeriksaan === 'string'
|
||||
? props.tanggalPemeriksaan
|
||||
: format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
|
||||
: undefined,
|
||||
jadwalTanggalPemeriksaan: jadwalTanggal.value,
|
||||
})
|
||||
}
|
||||
|
||||
// Table data for Jadwal Ruang Tindakan
|
||||
const scheduleData = [
|
||||
{
|
||||
no: 1,
|
||||
namaJenis: 'Ruang Tindakan',
|
||||
jenisPemeriksaan: 'KEMOTERAPI',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
:open="open"
|
||||
size="lg"
|
||||
title="Verifikasi Jadwal Pasien"
|
||||
@update:open="$emit('update:open', $event)"
|
||||
>
|
||||
<div class="space-y-6 py-4">
|
||||
<!-- Jadwal Ruang Tindakan Section -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
|
||||
<div class="overflow-hidden rounded-md border">
|
||||
<Table>
|
||||
<TableHeader class="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead class="font-semibold">NO</TableHead>
|
||||
<TableHead class="font-semibold">NAMA JENIS</TableHead>
|
||||
<TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-for="(row, index) in scheduleData" :key="index">
|
||||
<TableCell>{{ row.no }}</TableCell>
|
||||
<TableCell>{{ row.namaJenis }}</TableCell>
|
||||
<TableCell>{{ row.jenisPemeriksaan }}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tanggal Pemeriksaan Section -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Tanggal Pemeriksaan</label>
|
||||
<Input
|
||||
:model-value="formattedTanggalPemeriksaan"
|
||||
:disabled="true"
|
||||
class="bg-gray-100 text-gray-700"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Jadwal Tanggal Pemeriksaan Section -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">
|
||||
Jadwal Tanggal Pemeriksaan
|
||||
<span class="text-red-500">*</span>
|
||||
</label>
|
||||
<DatepickerSingle
|
||||
v-model="jadwalTanggal"
|
||||
placeholder="Pilih Jadwal"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="flex justify-end pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
:disabled="isLoading || !jadwalTanggal"
|
||||
class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
|
||||
Simpan Jadwal
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { LinkItem, 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 activeKey = ref<string | null>(null)
|
||||
const linkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Proses',
|
||||
onClick: () => {
|
||||
process()
|
||||
},
|
||||
icon: 'i-lucide-pencil',
|
||||
},
|
||||
]
|
||||
|
||||
function process() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = 'Process'
|
||||
recItem.value = props.rec
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-chevrons-up-down"
|
||||
class="ml-auto size-4"
|
||||
/>
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
|
||||
align="end"
|
||||
>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
v-for="item in linkItems"
|
||||
:key="item.label"
|
||||
class="hover:bg-gray-100 dark:hover:bg-slate-700"
|
||||
@click="item.onClick"
|
||||
@mouseenter="activeKey = item.label"
|
||||
@mouseleave="activeKey = null"
|
||||
>
|
||||
<Icon :name="item.icon ?? ''" />
|
||||
<span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,302 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Input from '~/components/pub/ui/input/Input.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
|
||||
|
||||
interface Props {
|
||||
values?: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
|
||||
const items = [
|
||||
{ value: 'item-1', label: 'Item 1' },
|
||||
{ value: 'item-2', label: 'Item 2' },
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: any, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(chemotherapySchema),
|
||||
initialValues: {
|
||||
namaPasien: '',
|
||||
tanggalLahir: '',
|
||||
noRM: '',
|
||||
alamat: '',
|
||||
beratBadan: '',
|
||||
tinggiBadan: '',
|
||||
diagnosa: '',
|
||||
siklus: '',
|
||||
periodeAwal: '',
|
||||
periodeAkhir: '',
|
||||
tanggalKemoterapi: '',
|
||||
dokterKRJ: '',
|
||||
},
|
||||
})
|
||||
|
||||
// Define form fields
|
||||
const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
|
||||
const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
|
||||
const [noRM, noRMAttrs] = defineField('noRM')
|
||||
const [alamat, alamatAttrs] = defineField('alamat')
|
||||
const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
|
||||
const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
|
||||
const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
|
||||
const [siklus, siklusAttrs] = defineField('siklus')
|
||||
const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
|
||||
const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
|
||||
const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
|
||||
const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
|
||||
|
||||
// Set initial values if provided
|
||||
if (props.values) {
|
||||
// Object.entries(props.values).forEach(([key, value]) => {
|
||||
// if (value !== undefined) {
|
||||
// const field = defineField(key)[0]
|
||||
// field.value = value
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
// Object.keys(meta.value.initialValues).forEach((key) => {
|
||||
// const field = defineField(key)[0]
|
||||
// field.value = ''
|
||||
// })
|
||||
}
|
||||
|
||||
function onSubmitForm() {
|
||||
const formData = {
|
||||
namaPasien: namaPasien.value,
|
||||
tanggalLahir: tanggalLahir.value,
|
||||
noRM: noRM.value,
|
||||
alamat: alamat.value,
|
||||
beratBadan: beratBadan.value,
|
||||
tinggiBadan: tinggiBadan.value,
|
||||
diagnosa: diagnosa.value,
|
||||
siklus: siklus.value,
|
||||
periodeAwal: periodeAwal.value,
|
||||
periodeAkhir: periodeAkhir.value,
|
||||
tanggalKemoterapi: tanggalKemoterapi.value,
|
||||
dokterKRJ: dokterKRJ.value,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent>
|
||||
<!-- Data Pasien Section -->
|
||||
<div class="mb-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Pasien</Label>
|
||||
<Field :errMessage="errors.namaPasien">
|
||||
<Input
|
||||
v-model="namaPasien"
|
||||
v-bind="namaPasienAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan nama pasien"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Tanggal Lahir</Label>
|
||||
<Field :errMessage="errors.tanggalLahir">
|
||||
<DatePicker
|
||||
v-model="tanggalLahir"
|
||||
v-bind="tanggalLahirAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih tanggal lahir"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">No. RM</Label>
|
||||
<Field :errMessage="errors.noRM">
|
||||
<Input
|
||||
v-model="noRM"
|
||||
v-bind="noRMAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan nomor RM"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Alamat</Label>
|
||||
<Field :errMessage="errors.alamat">
|
||||
<Input
|
||||
v-model="alamat"
|
||||
v-bind="alamatAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan alamat"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Berat Badan</Label>
|
||||
<Field :errMessage="errors.beratBadan">
|
||||
<Input
|
||||
v-model="beratBadan"
|
||||
v-bind="beratBadanAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan berat badan"
|
||||
type="number"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Tinggi Badan</Label>
|
||||
<Field :errMessage="errors.tinggiBadan">
|
||||
<Input
|
||||
v-model="tinggiBadan"
|
||||
v-bind="tinggiBadanAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan tinggi badan"
|
||||
type="number"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Diagnosa</Label>
|
||||
<Field :errMessage="errors.diagnosa">
|
||||
<Combobox
|
||||
id="diagnose"
|
||||
v-model="diagnosa"
|
||||
v-bind="diagnosaAttrs"
|
||||
:items="items"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Tentukan diagnosa pasien"
|
||||
search-placeholder="Cari diagnosa"
|
||||
empty-message="Diagnosa tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<!-- Protokol Kemoterapi Section -->
|
||||
<div class="mb-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Siklus</Label>
|
||||
<Field :errMessage="errors.siklus">
|
||||
<Input
|
||||
v-model="siklus"
|
||||
v-bind="siklusAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan siklus"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Periode</Label>
|
||||
<div class="flex items-center gap-4">
|
||||
<Field
|
||||
:errMessage="errors.periodeAwal"
|
||||
class="flex-1"
|
||||
>
|
||||
<DatepickerSingle
|
||||
v-model="periodeAwal"
|
||||
v-bind="periodeAwalAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Mulai Periode"
|
||||
/>
|
||||
</Field>
|
||||
<span>Sampai</span>
|
||||
<Field
|
||||
:errMessage="errors.periodeAkhir"
|
||||
class="flex-1"
|
||||
>
|
||||
<DatepickerSingle
|
||||
v-model="periodeAkhir"
|
||||
v-bind="periodeAkhirAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Akhir Periode"
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Tanggal Kemoterapi</Label>
|
||||
<Field :errMessage="errors.tanggalKemoterapi">
|
||||
<DatepickerSingle
|
||||
v-model="tanggalKemoterapi"
|
||||
v-bind="tanggalKemoterapiAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih tanggal kemoterapi"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Dokter Ruang Tindakan</Label>
|
||||
<Field :errMessage="errors.dokterKRJ">
|
||||
<Combobox
|
||||
id="doctor"
|
||||
v-model="dokterKRJ"
|
||||
v-bind="dokterKRJAttrs"
|
||||
:items="items"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih dokter"
|
||||
search-placeholder="Cari dokter"
|
||||
empty-message="Dokter tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.admin'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
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,80 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('./dropdown-action-process.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 50 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'TANGGAL' },
|
||||
{ label: 'NO. RM' },
|
||||
{ label: 'NO. BILL' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'ALAMAT' },
|
||||
{ label: 'KLINIK ASAL' },
|
||||
{ label: 'NAMA DOKTER' },
|
||||
{ label: 'CARA BAYAR' },
|
||||
{ label: 'RUJUKAN' },
|
||||
{ label: 'KET. RUJUKAN' },
|
||||
{ label: 'ASAL' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'tanggal',
|
||||
'noRm',
|
||||
'noBill',
|
||||
'jk',
|
||||
'alamat',
|
||||
'klinik',
|
||||
'dokter',
|
||||
'caraBayar',
|
||||
'rujukan',
|
||||
'ketRujukan',
|
||||
'asal',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
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: [
|
||||
{ width: 60 },
|
||||
{ width: 200 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 150 },
|
||||
{ width: 80 },
|
||||
{ width: 200 },
|
||||
{ width: 120 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'NO.' },
|
||||
{ label: 'NAMA OBAT' },
|
||||
{ label: 'DOSIS' },
|
||||
{ label: 'SATUAN' },
|
||||
{ label: 'RUTE PEMBERIAN' },
|
||||
{ label: 'HARI' },
|
||||
{ label: 'CATATAN' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'number',
|
||||
'namaObat',
|
||||
'dosis',
|
||||
'satuan',
|
||||
'rute',
|
||||
'hari',
|
||||
'catatan',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
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: [
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 50 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'NO.' },
|
||||
{ label: 'TANGGAL' },
|
||||
{ label: 'SIKLUS' },
|
||||
{ label: 'PERIODE KEMOTERAPI' },
|
||||
{ label: 'KEHADIRAN' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'number',
|
||||
'tanggal',
|
||||
'siklus',
|
||||
'periode',
|
||||
'kehadiran',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
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: [
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 50 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'TANGGAL' },
|
||||
{ label: 'NO. RM' },
|
||||
{ label: 'NO. BILL' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'ALAMAT' },
|
||||
{ label: 'KLINIK ASAL' },
|
||||
{ label: 'NAMA DOKTER' },
|
||||
{ label: 'CARA BAYAR' },
|
||||
{ label: 'RUJUKAN' },
|
||||
{ label: 'KET. RUJUKAN' },
|
||||
{ label: 'ASAL' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'tanggal',
|
||||
'noRm',
|
||||
'noBill',
|
||||
'jk',
|
||||
'alamat',
|
||||
'klinik',
|
||||
'dokter',
|
||||
'caraBayar',
|
||||
'rujukan',
|
||||
'ketRujukan',
|
||||
'asal',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||
const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 120 },
|
||||
{ width: 150 },
|
||||
{ width: 150 },
|
||||
{ width: 150 },
|
||||
{ width: 150 },
|
||||
{ width: 180 },
|
||||
{ width: 150 },
|
||||
{ width: 100 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'TANGGAL MASUK' },
|
||||
{ label: 'PJ BERKAS RM' },
|
||||
{ label: 'DOKTER' },
|
||||
{ label: 'JENIS RUANGAN' },
|
||||
{ label: 'JENIS TINDAKAN' },
|
||||
{ label: 'TANGGAL JADWAL TINDAKAN' },
|
||||
{ label: 'STATUS' },
|
||||
{ label: 'AKSI' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'tanggalMasuk',
|
||||
'pjBerkasRm',
|
||||
'dokter',
|
||||
'jenisRuangan',
|
||||
'jenisTindakan',
|
||||
'tanggalJadwalTindakan',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
status(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: statusBadge,
|
||||
}
|
||||
return res
|
||||
},
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: verifyButton,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { format, parseISO } from 'date-fns'
|
||||
import { id as localeID } from 'date-fns/locale'
|
||||
|
||||
type VisitDto = any
|
||||
|
||||
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||
const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 150 }, // TANGGAL MASUK
|
||||
{ width: 180 }, // PJ BERKAS RM
|
||||
{ width: 200 }, // DOKTER
|
||||
{ width: 150 }, // JENIS RUANGAN
|
||||
{ width: 150 }, // JENIS TINDAKAN
|
||||
{ width: 180 }, // TANGGAL JADWAL TINDAKAN
|
||||
{ width: 150 }, // STATUS
|
||||
{ width: 120 }, // AKSI
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'TANGGAL MASUK' },
|
||||
{ label: 'PJ BERKAS RM' },
|
||||
{ label: 'DOKTER' },
|
||||
{ label: 'JENIS RUANGAN' },
|
||||
{ label: 'JENIS TINDAKAN' },
|
||||
{ label: 'TANGGAL JADWAL TINDAKAN' },
|
||||
{ label: 'STATUS' },
|
||||
{ label: 'AKSI' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'tanggal_masuk',
|
||||
'pj_berkas_rm',
|
||||
'dokter',
|
||||
'jenis_ruangan',
|
||||
'jenis_tindakan',
|
||||
'tanggal_jadwal_tindakan',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'id', label: 'ID' },
|
||||
{ key: 'nama', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
tanggal_masuk: (rec: unknown): string => {
|
||||
const recX = rec as VisitDto
|
||||
if (!recX.tanggal_masuk) return '-'
|
||||
try {
|
||||
const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
|
||||
return format(date, 'dd MMMM yyyy', { locale: localeID })
|
||||
} catch {
|
||||
return recX.tanggal_masuk.toString()
|
||||
}
|
||||
},
|
||||
tanggal_jadwal_tindakan: (rec: unknown): string => {
|
||||
const recX = rec as VisitDto
|
||||
if (!recX.tanggal_jadwal_tindakan) return '-'
|
||||
try {
|
||||
const date =
|
||||
typeof recX.tanggal_jadwal_tindakan === 'string'
|
||||
? parseISO(recX.tanggal_jadwal_tindakan)
|
||||
: recX.tanggal_jadwal_tindakan
|
||||
return format(date, 'dd MMMM yyyy', { locale: localeID })
|
||||
} catch {
|
||||
return recX.tanggal_jadwal_tindakan.toString()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
status(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: statusBadge,
|
||||
}
|
||||
return res
|
||||
},
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: verifyButton,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.verification'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
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,76 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.medicine'
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
function handleSearch(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
searchQuery.value = target.value
|
||||
// TODO: Implement search logic here
|
||||
// You can emit an event to parent or filter data directly
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Title and Search Section -->
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div>
|
||||
<h2 class="mb-1 text-xl font-semibold">Protokol Obat Kemoterapi</h2>
|
||||
<p class="mb-4 text-sm text-gray-500">Daftar obat-obatan yang digunakan dalam protokol kemoterapi.</p>
|
||||
</div>
|
||||
<button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
|
||||
<i class="ri-add-line"></i>
|
||||
Tambah Obat Kemoterapi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 w-72">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Cari obat..."
|
||||
class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<span class="absolute right-3 top-2.5 text-gray-400">
|
||||
<i class="ri-search-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.protocol'
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
function handleSearch(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
searchQuery.value = target.value
|
||||
// TODO: Implement search logic here
|
||||
// You can emit an event to parent or filter data directly
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Title and Search Section -->
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div>
|
||||
<h2 class="mb-1 text-xl font-semibold">Protokol Kemoterapi</h2>
|
||||
<p class="mb-4 text-sm text-gray-500">Rangkaian prosedur kemoterapi yang terintegrasi dan konsisten.</p>
|
||||
</div>
|
||||
<button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
|
||||
<i class="ri-add-line"></i>
|
||||
Tambah Protokol Kemoterapi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 w-72">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Cari protokol..."
|
||||
class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<span class="absolute right-3 top-2.5 text-gray-400">
|
||||
<i class="ri-search-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.protocol'
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
function handleSearch(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
searchQuery.value = target.value
|
||||
// TODO: Implement search logic here
|
||||
// You can emit an event to parent or filter data directly
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Title and Search Section -->
|
||||
<div class="flex flex-col items-start">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div>
|
||||
<h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
|
||||
<p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 w-72">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Cari jadwal pemeriksaan..."
|
||||
class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<span class="absolute right-3 top-2.5 text-gray-400">
|
||||
<i class="ri-search-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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.visit'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
verify: [rec: any]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
|
||||
// Provide verify handler to child components via provide/inject
|
||||
function handleVerify(rec: any) {
|
||||
emit('verify', rec)
|
||||
}
|
||||
|
||||
provide('verify-handler', handleVerify)
|
||||
</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,36 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
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,49 @@
|
||||
export type ChemotherapyData = {
|
||||
id: number
|
||||
tanggal: string
|
||||
noRm: string
|
||||
noBill: string
|
||||
nama: string
|
||||
jk: string
|
||||
alamat: string
|
||||
klinik: string
|
||||
dokter: string
|
||||
caraBayar: string
|
||||
rujukan: string
|
||||
ketRujukan: string
|
||||
asal: string
|
||||
}
|
||||
|
||||
export const sampleRows: ChemotherapyData[] = [
|
||||
{
|
||||
id: 1,
|
||||
tanggal: '12 Agustus 2025',
|
||||
noRm: 'RM23311224',
|
||||
noBill: '-',
|
||||
nama: 'Ahmad Baidowi',
|
||||
jk: 'L',
|
||||
alamat: 'Jl Jaksa Agung S. No. 9',
|
||||
klinik: 'Penyakit dalam',
|
||||
dokter: 'Dr. Andreas Sutaji',
|
||||
caraBayar: 'JKN',
|
||||
rujukan: 'Faskes BPJS',
|
||||
ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
|
||||
asal: 'Rawat Jalan Reguler',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tanggal: '11 Agustus 2025',
|
||||
noRm: 'RM23455667',
|
||||
noBill: '-',
|
||||
nama: 'Abraham Sulaiman',
|
||||
jk: 'L',
|
||||
alamat: 'Purwantoro, Blimbing',
|
||||
klinik: 'Penyakit dalam',
|
||||
dokter: 'Dr. Andreas Sutaji',
|
||||
caraBayar: 'JKN',
|
||||
rujukan: 'Faskes BPJS',
|
||||
ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
|
||||
asal: 'Rawat Jalan Reguler',
|
||||
},
|
||||
// tambahkan lebih banyak baris contoh jika perlu
|
||||
]
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { Badge } from '~/components/pub/ui/badge'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: any
|
||||
idx?: number
|
||||
}>()
|
||||
|
||||
const statusMap: Record<string, { text: string; variant: 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline' }> = {
|
||||
'belum_terverifikasi': { text: 'Belum Terverifikasi', variant: 'secondary' },
|
||||
'terverifikasi': { text: 'Terverifikasi', variant: 'positive' },
|
||||
'ditolak': { text: 'Ditolak', variant: 'destructive' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
const status = props.rec.status?.toLowerCase() || props.rec.status_code?.toLowerCase() || 'belum_terverifikasi'
|
||||
return statusMap[status] || statusMap['belum_terverifikasi']
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<Badge :variant="statusInfo.variant">
|
||||
{{ statusInfo.text }}
|
||||
</Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
rec: any
|
||||
idx?: number
|
||||
}>()
|
||||
|
||||
// Try to get verify handler from parent via inject
|
||||
const verifyHandler = inject<(rec: any) => void>('verify-handler', null)
|
||||
|
||||
function handleVerify() {
|
||||
if (verifyHandler) {
|
||||
verifyHandler(props.rec)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
class="border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100 hover:text-orange-700"
|
||||
@click="handleVerify"
|
||||
>
|
||||
Verifikasi
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genDivisionPosition } from '~/models/division-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
divisionId: number
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: DivisionPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
// readonly based on detail division
|
||||
division_id: props.divisionId,
|
||||
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-division-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode Jabatan</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Jabatan</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Pengisi Jabatan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { DivisionPosition } from '~/models/division-position'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
@@ -10,9 +11,9 @@ export const config: Config = {
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Divisi Induk' },
|
||||
{ label: 'Kode Posisi' },
|
||||
{ label: 'Nama Posisi' },
|
||||
{ label: 'Nama Divisi ' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
@@ -32,8 +33,13 @@ export const config: Config = {
|
||||
return recX.division?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.employee?.name || '-'
|
||||
const recX = rec as DivisionPosition
|
||||
const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return fullName || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { Division } from '~/models/division'
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
|
||||
// #region Props & Emits
|
||||
defineProps<{
|
||||
division: Division
|
||||
}>()
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DetailRow label="Kode">{{ division.code || '-' }}</DetailRow>
|
||||
<DetailRow label="Nama">{{ division.name || '-' }}</DetailRow>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { DivisionPosition } from '~/models/division-position'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: '#' },
|
||||
{ label: 'Kode Jabatan' },
|
||||
{ label: 'Nama Jabatan' },
|
||||
{ label: 'Pengisi Jabatan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
division: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.division?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as DivisionPosition
|
||||
const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return fullName || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.headStatus ? 'Ya' : 'Tidak'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-2 flex justify-end border-t-slate-300 py-2">
|
||||
<PubMyUiNavFooterBa
|
||||
@click="
|
||||
navigateTo({
|
||||
name: 'org-src-division',
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,17 +3,12 @@ import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Divisi Induk' },
|
||||
{ label: '' },
|
||||
]],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]],
|
||||
|
||||
keys: ['code', 'name', 'parent', 'action'],
|
||||
|
||||
@@ -44,4 +39,4 @@ export const config: Config = {
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,19 +27,31 @@ const data = computed({
|
||||
<FieldGroup :column="2">
|
||||
<Label>Status</Label>
|
||||
<Field>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
<Select
|
||||
v-model="data.type"
|
||||
:items="items"
|
||||
placeholder="Pilih jenis"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>Position</Label>
|
||||
<Field>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
<Select
|
||||
v-model="data.type"
|
||||
:items="items"
|
||||
placeholder="Pilih jenis"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>Divisi</Label>
|
||||
<Field>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
<Select
|
||||
v-model="data.type"
|
||||
:items="items"
|
||||
placeholder="Pilih jenis"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucideCheck } from 'lucide-vue-next';
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
// Components
|
||||
import type z from 'zod'
|
||||
import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { CheckInFormData } from '~/schemas/encounter.schema'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
values: any
|
||||
doctors: { value: string; label: string }[]
|
||||
employees: { value: string; label: string }[]
|
||||
encounter: Encounter
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: CheckInFormData]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
responsible_doctor_id: 0,
|
||||
adm_employee_id: 0,
|
||||
registeredAt: props.values.values?.registeredAt || '',
|
||||
} as Partial<CheckInFormData>,
|
||||
})
|
||||
|
||||
const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
|
||||
const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
|
||||
const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
|
||||
|
||||
function submitForm() {
|
||||
const formData: CheckInFormData = {
|
||||
responsible_doctor_id: responsible_doctor_id.value,
|
||||
adm_employee_id: adm_employee_id.value,
|
||||
// registeredAt: registeredAt.value || '',
|
||||
}
|
||||
emit('submit', formData)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cell-flex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label>Dokter</DE.Label>
|
||||
<DE.Field>
|
||||
<ComboBox
|
||||
id="doctor"
|
||||
v-model="responsible_doctor_id"
|
||||
v-bind="responsible_doctor_idAttrs"
|
||||
:items="doctors"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter DPJP"
|
||||
search-placeholder="Pilih DPJP"
|
||||
empty-message="DPJP tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>PJ Berkas</DE.Label>
|
||||
<DE.Field>
|
||||
<ComboBox
|
||||
id="doctor"
|
||||
v-model="adm_employee_id"
|
||||
v-bind="adm_employee_idAttrs"
|
||||
:items="employees"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter DPJP"
|
||||
search-placeholder="Pilih petugas"
|
||||
empty-message="Petugas tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Waktu Masuk</DE.Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="registeredAt"
|
||||
v-bind="registeredAtAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="submitForm">
|
||||
<LucideCheck />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts" setup>
|
||||
// Components
|
||||
import { LucidePen } from 'lucide-vue-next';
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import Input from '~/components/pub/ui/input/Input.vue';
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const doctor = ref('-belum dipilih-')
|
||||
const adm = ref('-belum dipilih-')
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: []
|
||||
}>()
|
||||
|
||||
watch(props.encounter, () => {
|
||||
doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
|
||||
adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cell-flex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Dokter</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">PJ Berkas</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Waktu Masuk</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="() => emit('edit')">
|
||||
<LucidePen />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucideCheck } from 'lucide-vue-next';
|
||||
import { useForm, useFieldArray } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
//
|
||||
import type z from 'zod'
|
||||
import * as CB from '~/components/pub/my-ui/combobox'
|
||||
import { dischargeMethodCodes } from '~/lib/constants';
|
||||
import type {
|
||||
CheckOutFormData,
|
||||
CheckOutDeathFormData,
|
||||
CheckOutInternalReferenceFormData
|
||||
} from '~/schemas/encounter.schema'
|
||||
|
||||
import * as Table from '~/components/pub/ui/table'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
values: any
|
||||
units: any[]
|
||||
doctors: any[]
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: CheckOutFormData]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
discharge_method_code: '',
|
||||
discharge_date: '',
|
||||
internalReferences: [{ unit_id: 0, doctor_id: 0 }],
|
||||
deathCauses: [""],
|
||||
} as Partial<CheckOutFormData>,
|
||||
})
|
||||
const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
|
||||
const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date')
|
||||
const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');
|
||||
|
||||
function submitForm(values: any) {
|
||||
if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
|
||||
const formData: CheckOutInternalReferenceFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
internalReferences: [{ unit_id: 0, doctor_id: 0 }],
|
||||
}
|
||||
emit('submit', formData)
|
||||
} else if (discharge_method_code.value === 'death') {
|
||||
const formData: CheckOutDeathFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
death_cause: [""],
|
||||
}
|
||||
emit('submit', formData)
|
||||
} else {
|
||||
const formData: CheckOutFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
}
|
||||
emit('submit', formData)
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
discharge_method_code.value = ''
|
||||
discharge_date.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cellFlex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label>Alasan Keluar</DE.Label>
|
||||
<DE.Field>
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
v-model="discharge_method_code"
|
||||
v-bind="discharge_method_codeAttrs"
|
||||
:items="dischargeMethodItems"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Cara Keluar"
|
||||
search-placeholder="Cari Cara Keluar"
|
||||
empty-message="Cara Keluar tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label>Waktu Keluar</DE.Label>
|
||||
<DE.Cell>
|
||||
<Input
|
||||
id="discharge_date"
|
||||
v-model="discharge_date"
|
||||
v-bind="discharge_dateAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="'death' == discharge_method_code">
|
||||
<DE.Label>Sebab Meninggal</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="mb-3">
|
||||
<Input />
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="submitForm"
|
||||
>
|
||||
Tambah Sebab meninggal
|
||||
</Button>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
|
||||
<DE.Label>Tujuan</DE.Label>
|
||||
<DE.Field>
|
||||
<Table.Table class="border mb-3">
|
||||
<Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
|
||||
<Table.TableCell class="text-center">Poly</Table.TableCell>
|
||||
<Table.TableCell class="text-center">DPJP</Table.TableCell>
|
||||
<Table.TableCell class="text-center !w-10"></Table.TableCell>
|
||||
</Table.TableHeader>
|
||||
<Table.TableBody>
|
||||
<Table.TableRow v-for="(item, index) in fields" :key="index">
|
||||
<Table.TableCell class="!p-0.5">
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
:v-model.number="item.value.unit_id"
|
||||
:items="units"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Poly"
|
||||
search-placeholder="Cari Poly"
|
||||
empty-message="Poly tidak ditemukan"
|
||||
/>
|
||||
</Table.TableCell>
|
||||
<Table.TableCell class="!p-0.5">
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
:v-model.number="item.value.doctor_id"
|
||||
:items="units"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter"
|
||||
search-placeholder="Pilih Dokter"
|
||||
empty-message="Dokter tidak ditemukan"
|
||||
/>
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
<Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
|
||||
X
|
||||
</Button>
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
</Table.TableBody>
|
||||
</Table.Table>
|
||||
<div>
|
||||
<Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
|
||||
</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="submitForm">>
|
||||
<LucideCheck />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucidePen, LucideCheck } from 'lucide-vue-next';
|
||||
|
||||
//
|
||||
import * as CB from '~/components/pub/my-ui/combobox'
|
||||
import { dischargeMethodCodes } from '~/lib/constants';
|
||||
|
||||
import * as Table from '~/components/pub/ui/table'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Encounter } from '~/models/encounter';
|
||||
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [],
|
||||
finish: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cellFlex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Alasan Keluar</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_method_code || '-belum ditentukan-' }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Waktu Keluar</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date || '-belum ditentukan-' }}</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="'death' == encounter.discharge_method_code">
|
||||
<DE.Label class="font-semibold">Sebab Meninggal</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="mb-3">
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date }}</div>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="['consul-poly', 'consul-executive'].includes(encounter.discharge_method_code || '')">
|
||||
<DE.Label class="font-semibold">Tujuan</DE.Label>
|
||||
<DE.Field>
|
||||
<Table.Table class="border mb-3">
|
||||
<Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
|
||||
<Table.TableCell class="text-center">Poly</Table.TableCell>
|
||||
<Table.TableCell class="text-center">DPJP</Table.TableCell>
|
||||
<Table.TableCell class="text-center !w-10"></Table.TableCell>
|
||||
</Table.TableHeader>
|
||||
<Table.TableBody>
|
||||
<Table.TableRow v-for="(item, index) in encounter.internalReferences" :key="index">
|
||||
<Table.TableCell class="!p-0.5">
|
||||
</Table.TableCell>
|
||||
<Table.TableCell class="!p-0.5">
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
</Table.TableBody>
|
||||
</Table.Table>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center [&>*]:mx-1">
|
||||
<Button @click="() => emit('edit')">
|
||||
<LucidePen />
|
||||
Edit
|
||||
</Button>
|
||||
<Button @click="() => emit('finish')">
|
||||
<LucideCheck />
|
||||
Selesai
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,354 +1,493 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
// Components
|
||||
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'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import Select from '~/components/pub/ui/select/Select.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
|
||||
import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
|
||||
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
// Types
|
||||
import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
|
||||
import type { PatientEntity } from '~/models/patient'
|
||||
import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
// Helpers
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
isSepValid?: boolean
|
||||
isCheckingSep?: boolean
|
||||
doctor?: any[]
|
||||
subSpecialist?: any[]
|
||||
specialists?: TreeItem[]
|
||||
payments: any[]
|
||||
participantGroups?: any[]
|
||||
seps: any[]
|
||||
patient?: PatientEntity | null | undefined
|
||||
objects?: any
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
click: (e: Event) => void
|
||||
(e: 'event', menu: string, value?: any): void
|
||||
(e: 'fetch', value?: any): void
|
||||
}>()
|
||||
|
||||
const relationshipOpts = mapToComboboxOptList(relationshipCodes)
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
// Validation schema
|
||||
const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
|
||||
validationSchema: toTypedSchema(IntegrationEncounterSchema),
|
||||
})
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
// Bind fields and extract attrs
|
||||
const [doctorId, doctorIdAttrs] = defineField('doctorId')
|
||||
const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
|
||||
const [registerDate, registerDateAttrs] = defineField('registerDate')
|
||||
const [paymentType, paymentTypeAttrs] = defineField('paymentType')
|
||||
const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
|
||||
const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
|
||||
const [sepType, sepTypeAttrs] = defineField('sepType')
|
||||
const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
|
||||
const [patientName, patientNameAttrs] = defineField('patientName')
|
||||
const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
|
||||
const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
|
||||
const patientId = ref('')
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
|
||||
// SEP validation state from props
|
||||
const isSepValid = computed(() => props.isSepValid || false)
|
||||
const isCheckingSep = computed(() => props.isCheckingSep || false)
|
||||
|
||||
const doctorOpts = computed(() => {
|
||||
// Add default option
|
||||
const defaultOption = [{ label: 'Pilih', value: '' }]
|
||||
// Add doctors from props
|
||||
const doctors = props.doctor || []
|
||||
return [...defaultOption, ...doctors]
|
||||
})
|
||||
|
||||
const isJKNPayment = computed(() => paymentType.value === 'jkn')
|
||||
|
||||
async function onFetchChildren(parentId: string): Promise<void> {
|
||||
console.log('onFetchChildren', parentId)
|
||||
}
|
||||
|
||||
// Watch specialist/subspecialist selection to fetch doctors
|
||||
watch(subSpecialistId, async (newValue) => {
|
||||
if (newValue) {
|
||||
console.log('SubSpecialist changed:', newValue)
|
||||
// Reset doctor selection
|
||||
doctorId.value = ''
|
||||
// Emit fetch event to parent
|
||||
emit('fetch', { subSpecialistId: newValue })
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
const doctorOpts = ref([
|
||||
{ label: 'Pilih', value: null },
|
||||
{ label: 'Dr. A', value: 1 },
|
||||
])
|
||||
const paymentOpts = ref([
|
||||
{ label: 'Umum', value: 'umum' },
|
||||
{ label: 'BPJS', value: 'bpjs' },
|
||||
])
|
||||
const sepOpts = ref([
|
||||
{ label: 'Rujukan Internal', value: 'ri' },
|
||||
{ label: 'SEP Rujukan', value: 'sr' },
|
||||
])
|
||||
})
|
||||
|
||||
// file refs untuk tombol "Pilih Berkas"
|
||||
const sepFileInput = ref<HTMLInputElement | null>(null)
|
||||
const sippFileInput = ref<HTMLInputElement | null>(null)
|
||||
// Watch SEP number changes to notify parent
|
||||
watch(sepNumber, (newValue) => {
|
||||
emit('event', 'sep-number-changed', newValue)
|
||||
})
|
||||
|
||||
function pickSepFile() {
|
||||
sepFileInput.value?.click()
|
||||
}
|
||||
function pickSippFile() {
|
||||
sippFileInput.value?.click()
|
||||
}
|
||||
// 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 || ''
|
||||
doctorId.value = objects?.doctorId || ''
|
||||
subSpecialistId.value = objects?.subSpecialistId || ''
|
||||
registerDate.value = objects?.registerDate || ''
|
||||
paymentType.value = objects?.paymentType || ''
|
||||
patientCategory.value = objects?.patientCategory || ''
|
||||
cardNumber.value = objects?.cardNumber || ''
|
||||
sepType.value = objects?.sepType || ''
|
||||
sepNumber.value = objects?.sepNumber || ''
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
function onSepFileChange(e: Event) {
|
||||
const f = (e.target as HTMLInputElement).files?.[0]
|
||||
// set ke form / emit / simpan di state sesuai form library-mu
|
||||
console.log('sep file', f)
|
||||
}
|
||||
|
||||
function onSippFileChange(e: Event) {
|
||||
const f = (e.target as HTMLInputElement).files?.[0]
|
||||
console.log('sipp file', f)
|
||||
}
|
||||
watch(
|
||||
() => props.patient,
|
||||
(patient) => {
|
||||
if (patient && Object.keys(patient).length > 0) {
|
||||
patientId.value = patient?.id ? String(patient.id) : ''
|
||||
patientName.value = patient?.person?.name || ''
|
||||
nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
|
||||
medicalRecordNumber.value = patient?.number || ''
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
function onAddSep() {
|
||||
// contoh handler tombol "+" di sebelah No. SEP
|
||||
console.log('open modal tambah SEP')
|
||||
const formValues = {
|
||||
patientId: patientId.value || '',
|
||||
doctorCode: doctorId.value,
|
||||
subSpecialistCode: subSpecialistId.value,
|
||||
registerDate: registerDate.value,
|
||||
cardNumber: cardNumber.value,
|
||||
paymentType: paymentType.value,
|
||||
sepType: sepType.value
|
||||
}
|
||||
emit('event', 'add-sep', formValues)
|
||||
}
|
||||
|
||||
// Submit handler
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
|
||||
emit('event', 'save', values)
|
||||
})
|
||||
|
||||
// Expose submit method for parent component
|
||||
const formRef = ref<HTMLFormElement | null>(null)
|
||||
|
||||
function submitForm() {
|
||||
console.log('🔵 submitForm called, formRef:', formRef.value)
|
||||
console.log('🔵 Form values:', {
|
||||
doctorId: doctorId.value,
|
||||
subSpecialistId: subSpecialistId.value,
|
||||
registerDate: registerDate.value,
|
||||
paymentType: paymentType.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 = {
|
||||
preventDefault: () => {},
|
||||
target: formRef.value || {},
|
||||
} as SubmitEvent
|
||||
|
||||
// Call onSubmit directly
|
||||
console.log('🔵 Calling onSubmit with mock event')
|
||||
onSubmit(mockEvent)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
submitForm,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
|
||||
Data Pasien
|
||||
<div class="mx-auto w-full">
|
||||
<form
|
||||
ref="formRef"
|
||||
@submit.prevent="onSubmit"
|
||||
class="grid gap-6 p-4"
|
||||
>
|
||||
<!-- Data Pasien -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="text-lg font-semibold">Data Pasien</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
|
||||
@click="emit('event', 'search')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-search"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Cari Pasien
|
||||
</Button>
|
||||
<span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
|
||||
@click="emit('event', 'add')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-plus"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Tambah Pasien Baru
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex gap-6 mb-2 2xl:mb-2">
|
||||
<span>
|
||||
Sudah pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
|
||||
<Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
|
||||
</Button>
|
||||
</span>
|
||||
<span>
|
||||
Belum pernah terdaftar sebagai pasien?
|
||||
<Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
|
||||
<Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label label-for="patient_name">Nama Pasien</Label>
|
||||
<Field id="patient_name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="patient_name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="patient_name"
|
||||
v-bind="componentField"
|
||||
disabled
|
||||
placeholder="Tambah data pasien terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- NIK -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="nik">NIK</Label>
|
||||
<Field id="nik" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="nik">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label label-for="rm">No. RM</Label>
|
||||
<Field id="rm" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rm">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="my-4 2xl:my-5" />
|
||||
|
||||
<div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
|
||||
Data Kunjungan
|
||||
</div>
|
||||
<Block :colCount="3">
|
||||
<!-- Dokter (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="doctor_id">Dokter</Label>
|
||||
<Field id="doctor_id" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="doctor_id">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Tanggal Daftar (DatePicker) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="register_date">Tanggal Daftar</Label>
|
||||
<Field id="register_date" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="register_date">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis Pembayaran (Combobox) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="payment_type">Jenis Pembayaran</Label>
|
||||
<Field id="payment_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="payment_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
|
||||
<Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">Kelompok Peserta</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- No. Kartu BPJS -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="bpjs_number">No. Kartu BPJS</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Jenis SEP -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_type">Jenis SEP</Label>
|
||||
<Field id="sep_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="sep_type" v-bind="componentField" :items="sepOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<!-- No. SEP (input + tombol +) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_number">No. SEP</Label>
|
||||
<Field id="sep_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
id="sep_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Tambah SEP terlebih dahulu"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SEP (file) -->
|
||||
<Cell :cosSpan="3">
|
||||
<Label label-for="sep_file">Dokumen SEP</Label>
|
||||
<Field id="sep_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Dokumen SIPP (file) -->
|
||||
<Cell :cosSpan="3" labelSize="thin">
|
||||
<Label label-for="sipp_file">Dokumen SIPP</Label>
|
||||
<Field id="sipp_file" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sipp_file">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div class="flex items-center gap-2">
|
||||
<input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
|
||||
<Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
|
||||
>Pilih Berkas</Button
|
||||
>
|
||||
<Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Pasien</Label>
|
||||
<Field :errMessage="errors.patientName">
|
||||
<Input
|
||||
id="patientName"
|
||||
v-model="patientName"
|
||||
v-bind="patientNameAttrs"
|
||||
:disabled="true"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">NIK</Label>
|
||||
<Field :errMessage="errors.nationalIdentity">
|
||||
<Input
|
||||
id="nationalIdentity"
|
||||
v-model="nationalIdentity"
|
||||
v-bind="nationalIdentityAttrs"
|
||||
:disabled="true"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">No. RM</Label>
|
||||
<Field :errMessage="errors.medicalRecordNumber">
|
||||
<Input
|
||||
id="medicalRecordNumber"
|
||||
v-model="medicalRecordNumber"
|
||||
v-bind="medicalRecordNumberAttrs"
|
||||
:disabled="true"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Data Kunjungan -->
|
||||
<h3 class="text-lg font-semibold">Data Kunjungan</h3>
|
||||
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Dokter
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.doctorId">
|
||||
<Combobox
|
||||
id="doctorId"
|
||||
v-model="doctorId"
|
||||
v-bind="doctorIdAttrs"
|
||||
:items="doctorOpts"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter"
|
||||
search-placeholder="Cari Dokter"
|
||||
empty-message="Dokter tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Spesialis / Subspesialis
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.subSpecialistId">
|
||||
<TreeSelect
|
||||
id="subSpecialistId"
|
||||
v-model="subSpecialistId"
|
||||
v-bind="subSpecialistIdAttrs"
|
||||
:data="specialists || []"
|
||||
:on-fetch-children="onFetchChildren"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Tanggal Daftar
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.registerDate">
|
||||
<DatepickerSingle
|
||||
id="registerDate"
|
||||
v-model="registerDate"
|
||||
v-bind="registerDateAttrs"
|
||||
placeholder="Pilih tanggal"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Jenis Pembayaran
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.paymentType">
|
||||
<Select
|
||||
id="paymentType"
|
||||
v-model="paymentType"
|
||||
v-bind="paymentTypeAttrs"
|
||||
:items="payments"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Jenis Pembayaran"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<!-- BPJS Fields (conditional) -->
|
||||
<template v-if="isJKNPayment">
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Kelompok Peserta
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.patientCategory">
|
||||
<Select
|
||||
id="patientCategory"
|
||||
v-model="patientCategory"
|
||||
v-bind="patientCategoryAttrs"
|
||||
:items="participantGroups || []"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Kelompok Peserta"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
No. Kartu BPJS
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.cardNumber">
|
||||
<Input
|
||||
id="cardNumber"
|
||||
v-model="cardNumber"
|
||||
v-bind="cardNumberAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Masukkan nomor kartu BPJS"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
Jenis SEP
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.sepType">
|
||||
<Select
|
||||
id="sepType"
|
||||
v-model="sepType"
|
||||
v-bind="sepTypeAttrs"
|
||||
:items="seps"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Jenis SEP"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!pt-0"
|
||||
:colCount="3"
|
||||
:cellFlex="false"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">
|
||||
No. SEP
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Field :errMessage="errors.sepNumber">
|
||||
<div class="flex gap-2">
|
||||
<Input
|
||||
id="sepNumber"
|
||||
v-model="sepNumber"
|
||||
v-bind="sepNumberAttrs"
|
||||
placeholder="Tambah SEP terlebih dahulu"
|
||||
class="flex-1"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
<Button
|
||||
v-if="!isSepValid"
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="bg-primary"
|
||||
size="sm"
|
||||
:disabled="isCheckingSep || isLoading || isReadonly"
|
||||
@click="onAddSep"
|
||||
>
|
||||
<Icon
|
||||
v-if="isCheckingSep"
|
||||
name="i-lucide-loader-2"
|
||||
class="h-4 w-4 animate-spin"
|
||||
/>
|
||||
<span v-else>+</span>
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
variant="outline"
|
||||
type="button"
|
||||
class="bg-green-500 text-white hover:bg-green-600"
|
||||
size="sm"
|
||||
disabled
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-check"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<FileUpload
|
||||
field-name="sepFile"
|
||||
label="Dokumen SEP"
|
||||
placeholder="Unggah dokumen SEP"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
|
||||
<FileUpload
|
||||
field-name="sippFile"
|
||||
label="Dokumen SIPP"
|
||||
placeholder="Unggah dokumen SIPP"
|
||||
:accept="['pdf', 'jpg', 'png']"
|
||||
:max-size-mb="1"
|
||||
/>
|
||||
</Block>
|
||||
</template>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry';
|
||||
import type { Encounter } from '~/models/encounter';
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
const props = defineProps<{
|
||||
data: Encounter
|
||||
@@ -8,27 +8,31 @@ const props = defineProps<{
|
||||
|
||||
let address = ''
|
||||
if (props.data.patient.person.addresses) {
|
||||
address = props.data.patient.person.addresses.map(a => a.address).join(', ')
|
||||
address = props.data.patient.person.addresses.map((a) => a.address).join(', ')
|
||||
}
|
||||
|
||||
let dpjp = '';
|
||||
let dpjp = ''
|
||||
if (props.data.responsible_doctor) {
|
||||
const dp = props.data.responsible_doctor.employee.person
|
||||
dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
|
||||
} else if (props.data.appointment_doctor) {
|
||||
dpjp = props.data.appointment_doctor.employee.person.name
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
|
||||
<div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
||||
<!-- Data Pasien -->
|
||||
<h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>
|
||||
<h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
|
||||
{{ data.patient.person.name }} - {{ data.patient.number }}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-3" >
|
||||
<div class="grid grid-cols-3">
|
||||
<div>
|
||||
<DE.Block mode="preview" labelSize="large">
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">No. RM</DE.Label>
|
||||
<DE.Field>
|
||||
@@ -50,7 +54,10 @@ if (props.data.responsible_doctor) {
|
||||
</DE.Block>
|
||||
</div>
|
||||
<div>
|
||||
<DE.Block mode="preview" labelSize="large">
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
|
||||
<DE.Field>
|
||||
@@ -72,9 +79,17 @@ if (props.data.responsible_doctor) {
|
||||
</DE.Block>
|
||||
</div>
|
||||
<div>
|
||||
<DE.Block mode="preview" labelSize="large">
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Cell>
|
||||
<DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
|
||||
<DE.Label
|
||||
position="dynamic"
|
||||
class="!text-base font-semibold 2xl:!text-lg"
|
||||
>
|
||||
Billing
|
||||
</DE.Label>
|
||||
<DE.Field class="text-base 2xl:text-lg">
|
||||
Rp. 000.000
|
||||
<!-- {{ data }} -->
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-10 text-center">Hello World!!!</div>
|
||||
</template>
|
||||
@@ -7,94 +7,18 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
|
||||
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 120 },
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{},
|
||||
{ width: 50 },
|
||||
],
|
||||
cols: [{}, {}, {}, {}],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Rekam Medis' },
|
||||
{ label: 'KTP' },
|
||||
{ label: 'Tgl Lahir' },
|
||||
{ label: 'Umur' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'Pendidikan' },
|
||||
{ label: 'Status' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
|
||||
|
||||
keys: [
|
||||
'name',
|
||||
'medicalRecord_number',
|
||||
'identity_number',
|
||||
'birth_date',
|
||||
'patient_age',
|
||||
'gender',
|
||||
'education',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
keys: ['code', 'name', 'indName', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
|
||||
},
|
||||
identity_number: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
|
||||
return '(TANPA NIK)'
|
||||
}
|
||||
return recX.identity_number
|
||||
},
|
||||
birth_date: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.birth_date == 'object' && recX.birth_date) {
|
||||
return (recX.birth_date as Date).toLocaleDateString()
|
||||
} else if (typeof recX.birth_date == 'string') {
|
||||
return (recX.birth_date as string).substring(0, 10)
|
||||
}
|
||||
return recX.birth_date
|
||||
},
|
||||
patient_age: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.birth_date?.split('T')[0]
|
||||
},
|
||||
gender: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
|
||||
return 'Tidak Diketahui'
|
||||
}
|
||||
return recX.gender_code
|
||||
},
|
||||
education: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
|
||||
return recX.education_code
|
||||
} else if (typeof recX.education_code) {
|
||||
return recX.education_code
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { config } from './list-cfg'
|
||||
|
||||
defineProps<{ data: any[] }>()
|
||||
const modelValue = defineModel<any | null>()
|
||||
const modelValue = defineModel<any[]>('modelValue', { default: [] })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Trash2 } from 'lucide-vue-next'
|
||||
// import { Button } from '@/components/ui/button'
|
||||
// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
|
||||
interface Diagnosa {
|
||||
id: number
|
||||
@@ -10,10 +7,10 @@ interface Diagnosa {
|
||||
icd: string
|
||||
}
|
||||
|
||||
const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
|
||||
const modelValue = defineModel<Diagnosa[]>({ default: [] })
|
||||
|
||||
function removeItem(id: number) {
|
||||
list.value = list.value.filter((item) => item.id !== id)
|
||||
modelValue.value = modelValue.value.filter((item) => item.id !== id)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -30,12 +27,19 @@ function removeItem(id: number) {
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
<TableRow v-for="(item, i) in list" :key="item.id">
|
||||
<TableRow
|
||||
v-for="(item, i) in modelValue"
|
||||
:key="item.id"
|
||||
>
|
||||
<TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
|
||||
<TableCell>{{ item.diagnosa }}</TableCell>
|
||||
<TableCell>{{ item.icd }}</TableCell>
|
||||
<TableCell>{{ item.code }}</TableCell>
|
||||
<TableCell>{{ item.name }}</TableCell>
|
||||
<TableCell class="text-center">
|
||||
<Button variant="ghost" size="icon" @click="removeItem(item.id)">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="removeItem(item.id)"
|
||||
>
|
||||
<Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { InstallationPositionFormData } from '~/schemas/installation-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genInstallationPosition } from '~/models/installation-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
installationId: number
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: InstallationPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: InstallationPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
// readonly based on detail installation
|
||||
installation_id: props.installationId,
|
||||
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-installation-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode Jabatan</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Jabatan</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Pengisi Jabatan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { InstallationPositionFormData } from '~/schemas/installation-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genInstallationPosition } from '~/models/installation-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
installations: any[]
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: InstallationPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [installation, installationAttrs] = defineField('installation_id')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.installation_id !== undefined)
|
||||
installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
installation.value = null
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: InstallationPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
installation_id: installation.value || null,
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-installation-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Posisi</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Instalasi</Label>
|
||||
<Field :errMessage="errors.installation_id">
|
||||
<Combobox
|
||||
id="installation"
|
||||
v-model="installation"
|
||||
v-bind="installationAttrs"
|
||||
:items="installations"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Instalasi"
|
||||
search-placeholder="Cari Instalasi"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Karyawan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { DivisionPosition } from '~/models/division-position'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode Posisi' },
|
||||
{ label: 'Nama Posisi' },
|
||||
{ label: 'Nama Instalasi ' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['code', 'name', 'installation.name', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
division: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.division?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as DivisionPosition
|
||||
const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return fullName || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.headStatus ? 'Ya' : 'Tidak'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
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,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { Installation } from '~/models/installation'
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
|
||||
// #region Props & Emits
|
||||
defineProps<{
|
||||
installation: Installation
|
||||
}>()
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DetailRow label="Kode">{{ installation.code || '-' }}</DetailRow>
|
||||
<DetailRow label="Nama">{{ installation.name || '-' }}</DetailRow>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { DivisionPosition } from '~/models/division-position'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: '#' },
|
||||
{ label: 'Kode Posisi' },
|
||||
{ label: 'Nama Posisi' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
division: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.division?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as DivisionPosition
|
||||
const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return fullName || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.headStatus ? 'Ya' : 'Tidak'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-2 flex justify-end border-t-slate-300 py-2">
|
||||
<PubMyUiNavFooterBa
|
||||
@click="
|
||||
navigateTo({
|
||||
name: 'org-src-installation',
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
+2
-9
@@ -3,19 +3,12 @@ import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Encounter Class' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]],
|
||||
|
||||
keys: ['code', 'name', 'encounterClass_code', 'action'],
|
||||
|
||||
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list-cfg'
|
||||
import { config } from './list.cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
<PaginationView
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</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: 'Nama' },
|
||||
{ label: 'Jenis' },
|
||||
{ label: 'Catatan' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['mcuSrc.name', 'mcuSrc.mcuSrcCategory.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,26 @@
|
||||
<script setup lang="ts">
|
||||
import { config } from './list-entry.cfg'
|
||||
import type { McuOrderItem } from '~/models/mcu-order-item';
|
||||
|
||||
defineProps<{
|
||||
data: McuOrderItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
requestItem: []
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable 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>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Jenis' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'mcuSrc.name', label: 'Nama' },
|
||||
],
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import type { McuOrderItem } from '~/models/mcu-order-item';
|
||||
import { config } from './list.cfg'
|
||||
|
||||
defineProps<{
|
||||
data: McuOrderItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
tambah: [mode: string]
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable class="border"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { McuOrder } from '~/models/mcu-order';
|
||||
|
||||
const props = defineProps<{
|
||||
data: McuOrder
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-sm 2xl:text-base font-semibold mb-3">
|
||||
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">
|
||||
<DE.Cell :col-span="2">
|
||||
<DE.Label class="font-semibold">DPJP</DE.Label>
|
||||
<DE.Field>
|
||||
{{ data?.doctor?.employee?.person?.name || '.........' }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell></DE.Cell>
|
||||
<DE.Cell :col-span="2">
|
||||
<DE.Label class="font-semibold">PPDS</DE.Label>
|
||||
<DE.Field>
|
||||
...........
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<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 McuOrderItems from '~/components/app/mcu-order-item/list.vue';
|
||||
|
||||
interface Props {
|
||||
data: McuOrder[]
|
||||
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-2' : '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>
|
||||
<McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<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 McuOrderItems from '~/components/app/mcu-order-item/list.vue';
|
||||
|
||||
interface Props {
|
||||
data: McuOrder[]
|
||||
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-2' : '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>
|
||||
<McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
|
||||
</template>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { McuSrcCategory } from '~/models/mcu-src-category';
|
||||
|
||||
const model = defineModel()
|
||||
const props = defineProps<{
|
||||
data: McuSrcCategory[]
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
pick: [category: McuSrcCategory]
|
||||
}>()
|
||||
|
||||
if (!model.value && props.data.length > 0) {
|
||||
model.value = props.data[0]?.code
|
||||
}
|
||||
|
||||
function pick(category: McuSrcCategory) {
|
||||
model.value = category.code
|
||||
emit('pick', category)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold mb-1.5">
|
||||
Kategori
|
||||
</div>
|
||||
<div class="-mx-1 [&_button]:mx-1 ">
|
||||
<Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
|
||||
{{ item.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import type { McuSrc } from '~/models/mcu-src';
|
||||
import type { McuOrderItem } from '~/models/mcu-order-item';
|
||||
|
||||
const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
|
||||
defineProps<{
|
||||
dataSource: McuSrc[]
|
||||
// data: number[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pick: [item: McuSrc]
|
||||
}>()
|
||||
|
||||
function pick(item: McuSrc) {
|
||||
emit('pick', item)
|
||||
// if (data.value.some(e => e.mcuSrc_id === item.id)) {
|
||||
// const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
|
||||
// data.value.splice(pos, 1)
|
||||
// } else {
|
||||
// data.value.push({
|
||||
// id: 0,
|
||||
// mcuOrder_id: 0,
|
||||
// mcuSrc_id: item.id,
|
||||
// createdAt: "",
|
||||
// updatedAt: "",
|
||||
// })
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5">
|
||||
<div class="font-semibold mb-1.5">
|
||||
Daftar Item
|
||||
</div>
|
||||
<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'"
|
||||
type="button"
|
||||
@click="pick(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
import type {
|
||||
Col,
|
||||
KeyLabel,
|
||||
RecComponent,
|
||||
RecStrFuncComponent,
|
||||
RecStrFuncUnknown,
|
||||
Th,
|
||||
} from '~/components/pub/my-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: "Dosis" },
|
||||
{ label: 'Satuan' },
|
||||
{ label: '' },
|
||||
],
|
||||
]
|
||||
|
||||
export const keys = ['name', 'dose', 'uom.name', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
]
|
||||
|
||||
export const funcParsed: RecStrFuncUnknown = {
|
||||
group: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineGroup_code || '-'
|
||||
},
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action: (rec: unknown, idx: number): RecComponent => {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: RecStrFuncUnknown = {}
|
||||
@@ -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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
:keys="keys"
|
||||
:func-parsed="funcParsed"
|
||||
:func-html="funcHtml"
|
||||
:func-component="funcComponent"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
|
||||
|
||||
export interface PatientData {
|
||||
id: string
|
||||
identity: string
|
||||
number: string
|
||||
bpjs: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{ width: 50 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
|
||||
|
||||
headers: [
|
||||
[{ label: '' }, { label: 'NO. KTP' }, { label: 'NO. RM' }, { label: 'NO. KARTU BPJS' }, { label: 'NAMA PASIEN' }],
|
||||
],
|
||||
|
||||
keys: ['check', 'identity', 'number', 'bpjs', 'name'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
check(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: { ...rec as object, menu: 'patient' },
|
||||
component: SelectedRadio,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PatientData } from './list-cfg.patient'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list-cfg.patient'
|
||||
|
||||
const props = defineProps<{
|
||||
data: PatientData[]
|
||||
selected?: string
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="props.data"
|
||||
:selected="props.selected"
|
||||
/>
|
||||
<PaginationView
|
||||
v-if="paginationMeta"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, provide, watch } from 'vue'
|
||||
|
||||
// Components
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import ListPatient from './list-patient.vue'
|
||||
|
||||
// Types
|
||||
import type { PatientData } from './list-cfg.patient'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Helpers
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
patients: Array<PatientData>
|
||||
selected: string
|
||||
paginationMeta: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'fetch', value: any): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
const debouncedSearch = refDebounced(search, 500) // 500ms debounce
|
||||
|
||||
// Provide for radio selection - use selected prop directly
|
||||
const recSelectId = ref<number>(Number(props.selected) || 0)
|
||||
const recSelectMenu = ref<string>('patient')
|
||||
|
||||
provide('rec_select_id', recSelectId)
|
||||
provide('rec_select_menu', recSelectMenu)
|
||||
|
||||
function saveSelection() {
|
||||
// Validate that a patient is selected
|
||||
if (!props.selected || props.selected === '') {
|
||||
console.warn('No patient selected')
|
||||
return
|
||||
}
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('fetch', { 'page-number': page })
|
||||
}
|
||||
|
||||
// Watch for changes in recSelectId and emit update:selected
|
||||
watch(recSelectId, (newValue) => {
|
||||
if (newValue > 0) {
|
||||
emit('update:selected', String(newValue))
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for changes in selected prop
|
||||
watch(() => props.selected, (newValue) => {
|
||||
recSelectId.value = Number(newValue) || 0
|
||||
})
|
||||
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
emit('fetch', { search: newValue })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
:open="props.open"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cari Pasien</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="max-w-[50%]">
|
||||
<Input
|
||||
v-model="search"
|
||||
placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<ListPatient
|
||||
:data="patients"
|
||||
:selected="props.selected"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="default"
|
||||
class="h-[40px] min-w-[120px] text-white"
|
||||
@click="saveSelection"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-save"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -1,14 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import type { PrescriptionItem } from '~/models/prescription-item';
|
||||
import { config } from './list-entry.cfg'
|
||||
|
||||
defineProps<{
|
||||
data: any[]
|
||||
data: PrescriptionItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [mode: 'mix' | 'non-mix']
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
<PubMyUiDataTable class="border mb-3 2xl:mb-4"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
<div class="-mx-1 [&_button]:mx-1">
|
||||
<Button @click="emit('add', 'mix')">
|
||||
<Icon name="i-lucide-plus" />
|
||||
Tambah Racikan
|
||||
</Button>
|
||||
<Button @click="emit('add', 'non-mix')">
|
||||
<Icon name="i-lucide-plus" />
|
||||
Tambah Non Racikan
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, {}],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Bentuk' },
|
||||
{ label: 'Freq' },
|
||||
{ label: 'Dosis' },
|
||||
{ label: 'Interval' },
|
||||
{ label: 'Total' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
cateogry: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineCategory?.name || '-'
|
||||
},
|
||||
group: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineGroup?.name || '-'
|
||||
},
|
||||
method: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineMethod?.name || '-'
|
||||
},
|
||||
unit: (rec: unknown): unknown => {
|
||||
return (rec as SmallDetailDto).medicineUnit?.name || '-'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import type { PrescriptionItem } from '~/models/prescription-item';
|
||||
import { config } from './list.cfg'
|
||||
|
||||
defineProps<{
|
||||
data: PrescriptionItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
tambah: [mode: string]
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable class="border mb-2 2xl:mb-3"
|
||||
v-bind="config"
|
||||
:rows="data"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { LucidePlus } from 'lucide-vue-next';
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import Separator from '~/components/pub/ui/separator/Separator.vue';
|
||||
import * as Table from '~/components/pub/ui/table'
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
|
||||
|
||||
|
||||
import { genBase } from '~/models/_base';
|
||||
import { genMedicine } from '~/models/medicine';
|
||||
import type { MedicinemixItem } from '~/models/medicinemix-item';
|
||||
import type { PrescriptionItem } from '~/models/prescription-item';
|
||||
|
||||
const props = defineProps<{
|
||||
data: PrescriptionItem
|
||||
items: MedicinemixItem[]
|
||||
}>()
|
||||
|
||||
type ClickType = 'close' | 'save'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [],
|
||||
save: [data: PrescriptionItem, items: MedicinemixItem[]],
|
||||
}>()
|
||||
|
||||
function navClick(type: ClickType) {
|
||||
if (type === 'close') {
|
||||
emit('close')
|
||||
} else if (type === 'save') {
|
||||
emit('save', props.data, props.items)
|
||||
}
|
||||
}
|
||||
|
||||
function addItem() {
|
||||
props.items.push({
|
||||
...genBase(),
|
||||
medicineMix_id: 0,
|
||||
medicine_id: 0,
|
||||
medicine: genMedicine(),
|
||||
dose: 0,
|
||||
uom_code: '',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :colCount="5" :cellFlex="false">
|
||||
<DE.Cell :colSpan="5">
|
||||
<DE.Label>Nama</DE.Label>
|
||||
<DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Frequensi</DE.Label>
|
||||
<DE.Field><Input v-model="data.frequency" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Dosis</DE.Label>
|
||||
<DE.Field><Input v-model="data.dose" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Sediaan</DE.Label>
|
||||
<DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Total</DE.Label>
|
||||
<DE.Field><Input /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell :colSpan="5">
|
||||
<DE.Label>Cara Pakai</DE.Label>
|
||||
<DE.Field><Input /></DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
|
||||
<Table.Table class="border mb-3 2xl:mb-4">
|
||||
<Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
|
||||
<Table.TableRow>
|
||||
<Table.TableHead>Nama</Table.TableHead>
|
||||
<Table.TableHead class="w-24">Dosis</Table.TableHead>
|
||||
<Table.TableHead class="w-24">Satuan</Table.TableHead>
|
||||
<Table.TableHead class="w-20">..</Table.TableHead>
|
||||
</Table.TableRow>
|
||||
</Table.TableHeader>
|
||||
<Table.TableBody class="[&_td]:p-0.6">
|
||||
<Table.TableRow v-if="items.length > 0" v-for="item in items">
|
||||
<Table.TableCell>
|
||||
<Input v-model="item.medicine.name" />
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
<Input v-model="item.dose" />
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
<Input />
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
<Table.TableRow v-else>
|
||||
<Table.TableCell colspan="4" class="!p-5 text-center">
|
||||
Belum ada data
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
</Table.TableBody>
|
||||
</Table.Table>
|
||||
<div>
|
||||
<Button @click="addItem">
|
||||
<LucidePlus />
|
||||
Tambah
|
||||
</Button>
|
||||
</div>
|
||||
<Separator class="my-5" />
|
||||
<div class="flex justify-center">
|
||||
<Nav @click="navClick" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import Separator from '~/components/pub/ui/separator/Separator.vue'
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
|
||||
|
||||
import { bigTimeUnitCodes } from '~/lib/constants'
|
||||
|
||||
import type { PrescriptionItem } from '~/models/prescription-item'
|
||||
|
||||
const props = defineProps<{
|
||||
data: PrescriptionItem
|
||||
}>()
|
||||
|
||||
type ClickType = 'close' | 'save'
|
||||
type Item = {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const bigTimeUnitCodeItems: Item[] = []
|
||||
|
||||
if(!props.data.intervalUnit_code) {
|
||||
props.data.intervalUnit_code = 'day'
|
||||
}
|
||||
|
||||
Object.keys(bigTimeUnitCodes).forEach((key) => {
|
||||
bigTimeUnitCodeItems.push({
|
||||
value: key,
|
||||
label: bigTimeUnitCodes[key] || '',
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [],
|
||||
save: [data: PrescriptionItem],
|
||||
}>()
|
||||
|
||||
function navClick(type: ClickType) {
|
||||
if (type === 'close') {
|
||||
emit('close')
|
||||
} else if (type === 'save') {
|
||||
emit('save', props.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :colCount="5" :cellFlex="false">
|
||||
<DE.Cell :colSpan="5">
|
||||
<DE.Label>Nama</DE.Label>
|
||||
<DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Frequensi</DE.Label>
|
||||
<DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Dosis</DE.Label>
|
||||
<DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Sediaan</DE.Label>
|
||||
<DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Interval</DE.Label>
|
||||
<DE.Field>
|
||||
<Select
|
||||
v-model="data.intervalUnit_code"
|
||||
:items="bigTimeUnitCodeItems"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Total</DE.Label>
|
||||
<DE.Field>
|
||||
<Input v-model="data.quantity" />
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell :colSpan="5">
|
||||
<DE.Label>Cara Pakai</DE.Label>
|
||||
<DE.Field><Input /></DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<Separator class="my-5" />
|
||||
<div class="flex justify-center">
|
||||
<Nav @click="navClick" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Prescription } from '~/models/prescription'
|
||||
|
||||
const props = defineProps<{
|
||||
data: Prescription
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-sm 2xl:text-base font-semibold mb-3">
|
||||
Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
|
||||
</div>
|
||||
<div class="max-w-[1000px]">
|
||||
<DE.Block mode="preview" :col-count=5 class="!mb-3">
|
||||
<DE.Cell :col-span="2">
|
||||
<DE.Label class="font-semibold">DPJP</DE.Label>
|
||||
<DE.Field>
|
||||
{{ data.doctor?.employee?.person?.name || '.........' }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell></DE.Cell>
|
||||
<DE.Cell :col-span="2">
|
||||
<DE.Label class="font-semibold">PPDS</DE.Label>
|
||||
<DE.Field>
|
||||
...........
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,32 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<PubMyUiDocEntryBlock mode="preview" :colCount=3>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell />
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell />
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
</PubMyUiDocEntryBlock>
|
||||
<div class="md:grid md:grid-cols-2 font-semibold">
|
||||
<div class="md:pe-10">
|
||||
<PubMyUiDocEntryBlock>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
</PubMyUiDocEntryBlock>
|
||||
</div>
|
||||
<div class="md:ps-10">
|
||||
<PubMyUiDocEntryBlock>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
</PubMyUiDocEntryBlock>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import type { Prescription } from '~/models/prescription'
|
||||
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry';
|
||||
import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';
|
||||
|
||||
interface Props {
|
||||
data: Prescription[]
|
||||
isLoading: boolean
|
||||
paginationMeta?: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isLoading" class="p-10 text-center">
|
||||
Memuat data..
|
||||
</div>
|
||||
<div v-else-if="data && data.length == 0" class="p-10 text-center">
|
||||
<div class="mb-4 xl:mb-5">Belum Ada Data</div>
|
||||
<!-- <div>
|
||||
<Button>
|
||||
<Icon name="i-lucide-plus" class="me-2 align-middle" />
|
||||
Tambah Order
|
||||
</Button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else v-for="(item, idx) in data">
|
||||
<Separator class="my-5" />
|
||||
<div class="md:grid md:grid-cols-2 font-semibold">
|
||||
<div>
|
||||
<DE.Block mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label>Order #{{ data.length - idx }}</DE.Label>
|
||||
<DE.Field>
|
||||
2025-01-01
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Status</DE.Label>
|
||||
<DE.Field>
|
||||
{{ item.status_code }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
<div>
|
||||
<DE.Block mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label>DPJP</DE.Label>
|
||||
<DE.Field>
|
||||
{{ item.doctor?.employee?.person.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>PPDS</DE.Label>
|
||||
<DE.Field>
|
||||
{{ item.specialistIntern?.person.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
</div>
|
||||
<PrescriptionItemList :data="item.items || []" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- <Separator class="my-4 xl:my-5" />
|
||||
<AppPrescriptionEntry />
|
||||
<div class="flex content-center mb-3">
|
||||
<div class="me-auto pt-2">
|
||||
<div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="addMedicine" class="me-2">
|
||||
<Icon name="i-lucide-plus" />
|
||||
Tambah Non Racikan
|
||||
</Button>
|
||||
<Button @click="addMedicineMix">
|
||||
<Icon name="i-lucide-plus" />
|
||||
Tambah Racikan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<PrescriptionItemListEntry :data=[] /> -->
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
|
||||
// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-10 text-center">
|
||||
<div class="mb-4 xl:mb-5">Belum Ada Data</div>
|
||||
<div>
|
||||
<Button>
|
||||
<Icon name="i-lucide-plus" class="me-2 align-middle" />
|
||||
Tambah Order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator class="my-5" />
|
||||
<div class="md:grid md:grid-cols-2 font-semibold">
|
||||
<div>
|
||||
<PubCustomUiDocEntryBlock mode="preview">
|
||||
<PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
|
||||
<PubCustomUiDocEntryColon />
|
||||
<PubCustomUiDocEntryField>
|
||||
2025-01-01
|
||||
</PubCustomUiDocEntryField>
|
||||
</PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
|
||||
<PubCustomUiDocEntryColon />
|
||||
<PubCustomUiDocEntryField>
|
||||
Status
|
||||
</PubCustomUiDocEntryField>
|
||||
</PubCustomUiDocEntryCell>
|
||||
</PubCustomUiDocEntryBlock>
|
||||
</div>
|
||||
<div>
|
||||
<PubCustomUiDocEntryBlock mode="preview">
|
||||
<PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
|
||||
<PubCustomUiDocEntryColon />
|
||||
<PubCustomUiDocEntryField>
|
||||
Nama Dokter
|
||||
</PubCustomUiDocEntryField>
|
||||
</PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryCell>
|
||||
<PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
|
||||
<PubCustomUiDocEntryColon />
|
||||
<PubCustomUiDocEntryField>
|
||||
Nama PPDS
|
||||
</PubCustomUiDocEntryField>
|
||||
</PubCustomUiDocEntryCell>
|
||||
</PubCustomUiDocEntryBlock>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +1,37 @@
|
||||
<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 { Prescription } from '~/models/prescription';
|
||||
import PrescriptionItem from '~/components/app/prescription-item/list.vue';
|
||||
import { add } from 'date-fns';
|
||||
|
||||
interface Props {
|
||||
data: Prescription[]
|
||||
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: Prescription): void {
|
||||
if (type === 'cancel') {
|
||||
emit('cancel', data)
|
||||
} else if (type === 'edit') {
|
||||
emit('edit', data)
|
||||
} else if (type === 'submit') {
|
||||
emit('submit', data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-10 text-center">
|
||||
<div v-if="data.length == 0" class="p-10 text-center">
|
||||
<div class="mb-4 xl:mb-5">Belum Ada Data</div>
|
||||
<div>
|
||||
<Button>
|
||||
@@ -8,35 +40,33 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator class="my-5" />
|
||||
<div>
|
||||
<PubMyUiDocEntryBlock mode="preview" :colCount=3>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell />
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryCell />
|
||||
<PubMyUiDocEntryCell>
|
||||
<PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
|
||||
<PubMyUiDocEntryField>
|
||||
<Input />
|
||||
</PubMyUiDocEntryField>
|
||||
</PubMyUiDocEntryCell>
|
||||
</PubMyUiDocEntryBlock>
|
||||
</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')">
|
||||
Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || 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>
|
||||
<PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
|
||||
<!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
|
||||
</template>
|
||||
</template>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 50 },
|
||||
{ width: 150 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 120 },
|
||||
{ width: 150 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: '' },
|
||||
{ label: 'NO. SURAT KONTROL' },
|
||||
{ label: 'TANGGAL SURAT KONTROL' },
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'NAMA PASIEN' },
|
||||
{ label: 'NO. KARTU BPJS' },
|
||||
{ label: 'KLINIK TUJUAN' },
|
||||
{ label: 'DOKTER' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic', 'doctor'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Code' },
|
||||
{ key: 'name', label: 'Name' },
|
||||
],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
check(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: { ...(rec as object), menu: 'letter' },
|
||||
component: SelectedRadio,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
export interface SepHistoryData {
|
||||
sepNumber: string
|
||||
sepDate: string
|
||||
referralNumber: string
|
||||
diagnosis: string
|
||||
serviceType: string
|
||||
careClass: string
|
||||
}
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'TGL. SEP' },
|
||||
{ label: 'NO. RUJUKAN' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'JENIS PELAYANAN' },
|
||||
{ label: 'KELAS RAWAT' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
|
||||
|
||||
delKeyNames: [{ key: 'code', label: 'Kode' }],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
|
||||
|
||||
export interface LetterData {
|
||||
letterNumber: string
|
||||
plannedDate: string
|
||||
sepNumber: string
|
||||
patientName: string
|
||||
bpjsCardNo: string
|
||||
clinic: string
|
||||
doctor?: string
|
||||
}
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{ width: 50 }, { width: 150 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: '' },
|
||||
{ label: 'NO. SURAT RUJUKAN' },
|
||||
{ label: 'TANGGAL SURAT RUJUKAN' },
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'NAMA PASIEN' },
|
||||
{ label: 'NO. KARTU BPJS' },
|
||||
{ label: 'KLINIK TUJUAN' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Code' },
|
||||
{ key: 'name', label: 'Name' },
|
||||
],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
check(rec, idx) {
|
||||
return {
|
||||
idx,
|
||||
rec: { ...(rec as object), menu: 'letter' },
|
||||
component: SelectedRadio,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -41,24 +41,24 @@ export const config: Config = {
|
||||
],
|
||||
|
||||
keys: [
|
||||
'tgl_sep',
|
||||
'no_sep',
|
||||
'pelayanan',
|
||||
'jalur',
|
||||
'no_rm',
|
||||
'nama_pasien',
|
||||
'no_kartu_bpjs',
|
||||
'no_surat_kontrol',
|
||||
'tgl_surat_kontrol',
|
||||
'klinik_tujuan',
|
||||
'dpjp',
|
||||
'diagnosis_awal',
|
||||
'letterDate',
|
||||
'letterNumber',
|
||||
'serviceType',
|
||||
'flow',
|
||||
'medicalRecordNumber',
|
||||
'patientName',
|
||||
'cardNumber',
|
||||
'controlLetterNumber',
|
||||
'controlLetterDate',
|
||||
'clinicDestination',
|
||||
'attendingDoctor',
|
||||
'diagnosis',
|
||||
'action',
|
||||
],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'no_sep', label: 'NO. SEP' },
|
||||
{ key: 'nama_pasien', label: 'Nama Pasien' },
|
||||
{ key: 'letterNumber', label: 'NO. SEP' },
|
||||
{ key: 'patientName', label: 'Nama Pasien' },
|
||||
],
|
||||
|
||||
parses: {},
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
export interface SepVisitData {
|
||||
letterNumber: string
|
||||
letterDate: string
|
||||
sepNumber: string
|
||||
patientName: string
|
||||
bpjsNumber: string
|
||||
poly: string
|
||||
diagnosis: string
|
||||
serviceType: string
|
||||
careClass: string
|
||||
}
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'NO. SURAT KONTROL' },
|
||||
{ label: 'TGL RENCANA KONTROL' },
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'NAMA PASIEN' },
|
||||
{ label: 'NO. KARTU BPJS' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'JENIS PELAYANAN' },
|
||||
{ label: 'KELAS RAWAT' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['letterNumber', 'letterDate', 'sepNumber', 'patientName', 'bpjsNumber', 'diagnosis', 'serviceType', 'careClass'],
|
||||
|
||||
delKeyNames: [{ key: 'code', label: 'Kode' }],
|
||||
|
||||
parses: {},
|
||||
|
||||
components: {},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
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'
|
||||
|
||||
const props = defineProps<{
|
||||
data: SepHistoryData[]
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="props.data"
|
||||
/>
|
||||
<PaginationView
|
||||
v-if="paginationMeta"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { LetterData } from './list-cfg.letter'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config as configControl } from './list-cfg.control'
|
||||
import { config as configLetter } from './list-cfg.letter'
|
||||
|
||||
const props = defineProps<{
|
||||
data: LetterData[]
|
||||
menu?: string
|
||||
selected?: string
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const menu = props.menu || 'control'
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="menu === 'control' ? configControl : configLetter"
|
||||
:rows="props.data"
|
||||
:selected="props.selected"
|
||||
/>
|
||||
<PaginationView
|
||||
v-if="paginationMeta"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { SepVisitData } from './list-cfg.visit'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list-cfg.history'
|
||||
|
||||
const props = defineProps<{
|
||||
data: SepVisitData[]
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
v-bind="config"
|
||||
:rows="props.data"
|
||||
/>
|
||||
<PaginationView
|
||||
v-if="paginationMeta"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,23 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { config } from './list-cfg'
|
||||
|
||||
interface SepData {
|
||||
tgl_sep: string
|
||||
no_sep: string
|
||||
pelayanan: string
|
||||
jalur: string
|
||||
no_rm: string
|
||||
nama_pasien: string
|
||||
no_kartu_bpjs: string
|
||||
no_surat_kontrol: string
|
||||
tgl_surat_kontrol: string
|
||||
klinik_tujuan: string
|
||||
dpjp: string
|
||||
diagnosis_awal: string
|
||||
}
|
||||
// Types
|
||||
import type { VclaimSepData } from '~/models/vclaim'
|
||||
|
||||
const props = defineProps<{
|
||||
data: SepData[]
|
||||
data: VclaimSepData[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { Card, CardContent } from "~/components/pub/ui/card"
|
||||
import { Separator } from "~/components/pub/ui/separator"
|
||||
|
||||
// Simulasi data dari API
|
||||
const route = useRoute()
|
||||
const sepData = ref<any>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
// contoh fetch data API (ganti dengan endpoint kamu)
|
||||
const id = route.params.id
|
||||
const res = await fetch(`/api/sep/${id}`)
|
||||
sepData.value = await res.json()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-lg font-semibold">Preview SEP</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card class="p-6">
|
||||
<CardContent class="space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="/bpjs-logo.png"
|
||||
alt="BPJS"
|
||||
class="h-10 w-auto"
|
||||
/>
|
||||
<div>
|
||||
<p class="font-semibold">SURAT ELIGIBILITAS PESERTA</p>
|
||||
<p>RSUD dr. Saiful Anwar</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-right">
|
||||
Peserta: {{ sepData?.peserta?.jenisPeserta || "-" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- Content -->
|
||||
<div class="grid grid-cols-2 gap-8 text-sm">
|
||||
<!-- Left -->
|
||||
<div class="space-y-1">
|
||||
<p>No. SEP : {{ sepData?.noSEP }}</p>
|
||||
<p>Tgl. SEP : {{ sepData?.tglSEP }}</p>
|
||||
<p>No. Kartu : {{ sepData?.noKartu }}</p>
|
||||
<p>Nama Peserta : {{ sepData?.nama }}</p>
|
||||
<p>Tgl. Lahir : {{ sepData?.tglLahir }} Kelamin: {{ sepData?.kelamin }}</p>
|
||||
<p>No. Telepon : {{ sepData?.telepon }}</p>
|
||||
<p>Sub/Spesialis : {{ sepData?.spesialis }}</p>
|
||||
<p>Dokter : {{ sepData?.dokter }}</p>
|
||||
<p>Faskes Perujuk : {{ sepData?.faskes }}</p>
|
||||
<p>Diagnosa Awal : {{ sepData?.diagnosa }}</p>
|
||||
<p>Catatan : {{ sepData?.catatan }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Right -->
|
||||
<div class="space-y-1">
|
||||
<p>Jns. Rawat : {{ sepData?.jenisRawat }}</p>
|
||||
<p>Jns. Kunjungan : {{ sepData?.jenisKunjungan }}</p>
|
||||
<p>Poli Perujuk : {{ sepData?.poliPerujuk }}</p>
|
||||
<p>Kls. Hak : {{ sepData?.kelasHak }}</p>
|
||||
<p>Kls. Rawat : {{ sepData?.kelasRawat }}</p>
|
||||
<p>Penjamin : {{ sepData?.penjamin }}</p>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<p class="font-semibold">Persetujuan</p>
|
||||
<p>Pasien/Keluarga Pasien</p>
|
||||
<img
|
||||
:src="sepData?.qrCodeUrl"
|
||||
alt="QR Code"
|
||||
class="h-24 mx-auto mt-2"
|
||||
/>
|
||||
<p class="font-semibold mt-2">{{ sepData?.nama }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-xs text-muted-foreground leading-snug space-y-1">
|
||||
<p>*Saya menyetujui BPJS Kesehatan untuk:</p>
|
||||
<ul class="list-disc pl-5">
|
||||
<li>membuka dan atau menggunakan informasi medis Pasien untuk keperluan administrasi dan pembiayaan</li>
|
||||
<li>memberikan akses informasi kepada tenaga medis di RSUD Dr. Saiful Anwar</li>
|
||||
<li>Penjaminan lainnya sesuai ketentuan yang berlaku</li>
|
||||
</ul>
|
||||
<p class="pt-2">
|
||||
Cetakan ke {{ sepData?.cetakanKe || 1 }} |
|
||||
{{ sepData?.tglCetak }}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,218 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/my-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
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 { Form } from '~/components/pub/ui/form'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const relationshipOpts = mapToComboboxOptList(relationshipCodes)
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
const doctorOpts = ref([
|
||||
{ label: 'Pilih', value: null },
|
||||
{ label: 'Dr. A', value: 1 },
|
||||
])
|
||||
const paymentOpts = ref([
|
||||
{ label: 'Umum', value: 'umum' },
|
||||
{ label: 'BPJS', value: 'bpjs' },
|
||||
])
|
||||
const sepOpts = ref([
|
||||
{ label: 'Rujukan Internal', value: 'ri' },
|
||||
{ label: 'SEP Rujukan', value: 'sr' },
|
||||
])
|
||||
|
||||
// file refs untuk tombol "Pilih Berkas"
|
||||
const sepFileInput = ref<HTMLInputElement | null>(null)
|
||||
const sippFileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
function pickSepFile() {
|
||||
sepFileInput.value?.click()
|
||||
}
|
||||
function pickSippFile() {
|
||||
sippFileInput.value?.click()
|
||||
}
|
||||
|
||||
function onSepFileChange(e: Event) {
|
||||
const f = (e.target as HTMLInputElement).files?.[0]
|
||||
// set ke form / emit / simpan di state sesuai form library-mu
|
||||
console.log('sep file', f)
|
||||
}
|
||||
|
||||
function onSippFileChange(e: Event) {
|
||||
const f = (e.target as HTMLInputElement).files?.[0]
|
||||
console.log('sipp file', f)
|
||||
}
|
||||
|
||||
function onAddSep() {
|
||||
// contoh handler tombol "+" di sebelah No. SEP
|
||||
console.log('open modal tambah SEP')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
: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-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="p-2">
|
||||
<h2 class="text-md font-semibold">Data Kunjungan</h2>
|
||||
</div>
|
||||
<Block>
|
||||
<!-- Tanggal Daftar (DatePicker) -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="register_date">Dengan Rujukan</Label>
|
||||
<Field id="register_date" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="register_date">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Jenis Pembayaran (Combobox) -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="payment_type">Rujukan</Label>
|
||||
<Field id="payment_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="payment_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
|
||||
<Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="bpjs_number">No. Rujukan</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="bpjs_number"
|
||||
v-bind="componentField"
|
||||
placeholder="Pilih jenis pembayaran terlebih dahulu"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- No. Kartu BPJS -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="bpjs_number">Tanggal Rujukan</Label>
|
||||
<Field id="bpjs_number" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="bpjs_number">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Jenis SEP -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="sep_type">Diagnosis</Label>
|
||||
<Field id="sep_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="sep_type" v-bind="componentField" :items="sepOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<!-- No. SEP (input + tombol +) -->
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="sep_type">Status Kecelakaan</Label>
|
||||
<Field id="sep_type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="sep_type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="sep_type" v-bind="componentField" :items="sepOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -1,81 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
histories: Array<{
|
||||
no_sep: string
|
||||
tgl_sep: string
|
||||
no_rujukan: string
|
||||
diagnosis: string
|
||||
pelayanan: string
|
||||
kelas: string
|
||||
}>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const filteredHistories = computed(() => {
|
||||
const histories = props.histories || []
|
||||
return histories.filter((p) => p.no_sep.includes(search.value))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-[50%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>History SEP</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2">NO. SEP</th>
|
||||
<th class="p-2">TGL. SEP</th>
|
||||
<th class="p-2">NO. RUJUKAN</th>
|
||||
<th class="p-2">DIAGNOSIS AWAL</th>
|
||||
<th class="p-2">JENIS PELAYANAN</th>
|
||||
<th class="p-2">KELAS RAWAT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">{{ p.no_sep }}</td>
|
||||
<td class="p-2">{{ p.tgl_sep }}</td>
|
||||
<td class="p-2">{{ p.no_rujukan }}</td>
|
||||
<td class="p-2">{{ p.diagnosis }}</td>
|
||||
<td class="p-2">{{ p.pelayanan }}</td>
|
||||
<td class="p-2">{{ p.kelas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -1,104 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
letters: Array<{
|
||||
noSurat: string
|
||||
tglRencana: string
|
||||
noSep: string
|
||||
namaPasien: string
|
||||
noBpjs: string
|
||||
klinik: string
|
||||
dokter: string
|
||||
}>
|
||||
selected: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const filteredLetters = computed(() => {
|
||||
const letters = props.letters || []
|
||||
return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
|
||||
})
|
||||
|
||||
function saveSelection() {
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-[50%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cari No. Surat Kontrol</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2"></th>
|
||||
<th class="p-2">NO. SURAT KONTROL</th>
|
||||
<th class="p-2">TGL RENCANA KONTROL</th>
|
||||
<th class="p-2">NO. SEP</th>
|
||||
<th class="p-2">NAMA PASIEN</th>
|
||||
<th class="p-2">NO. KARTU BPJS</th>
|
||||
<th class="p-2">KLINIK</th>
|
||||
<th class="p-2">DOKTER</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">
|
||||
<RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
|
||||
<RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
|
||||
</RadioGroup>
|
||||
</td>
|
||||
<td class="p-2">{{ p.noSurat }}</td>
|
||||
<td class="p-2">{{ p.tglRencana }}</td>
|
||||
<td class="p-2">{{ p.noSep }}</td>
|
||||
<td class="p-2">{{ p.namaPasien }}</td>
|
||||
<td class="p-2">{{ p.noBpjs }}</td>
|
||||
<td class="p-2">{{ p.klinik }}</td>
|
||||
<td class="p-2">{{ p.dokter }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
|
||||
<Icon name="i-lucide-save" class="h-5 w-5" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -1,100 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
patients: Array<{
|
||||
ktp: string
|
||||
rm: string
|
||||
bpjs: string
|
||||
nama: string
|
||||
}>
|
||||
selected: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
const filteredPatients = computed(() => {
|
||||
const patients = props.patients || []
|
||||
return patients.filter(
|
||||
(p) =>
|
||||
p.ktp.includes(search.value) ||
|
||||
p.rm.includes(search.value) ||
|
||||
p.bpjs.includes(search.value) ||
|
||||
p.nama.toLowerCase().includes(search.value.toLowerCase()),
|
||||
)
|
||||
})
|
||||
|
||||
function saveSelection() {
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cari Pasien</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2"></th>
|
||||
<th class="p-2">NO. KTP</th>
|
||||
<th class="p-2">NO. RM</th>
|
||||
<th class="p-2">NO. KARTU BPJS</th>
|
||||
<th class="p-2">NAMA PASIEN</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">
|
||||
<RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
|
||||
<RadioGroupItem :id="p.ktp" :value="p.ktp" />
|
||||
</RadioGroup>
|
||||
</td>
|
||||
<td class="p-2">{{ p.ktp }}</td>
|
||||
<td class="p-2">{{ p.rm }}</td>
|
||||
<td class="p-2">{{ p.bpjs }}</td>
|
||||
<td class="p-2">{{ p.nama }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
|
||||
<Icon name="i-lucide-save" class="h-5 w-5" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import ListHistory from './list-history.vue'
|
||||
|
||||
// Types
|
||||
import type { SepHistoryData } from './list-cfg.history'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
histories: Array<SepHistoryData>
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
:open="props.open"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-[50%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>History SEP</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<ListHistory :data="histories" :pagination-meta="paginationMeta" />
|
||||
</div>
|
||||
|
||||
<DialogFooter></DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, provide, watch } from 'vue'
|
||||
|
||||
// Components
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import ListLetter from './list-letter.vue'
|
||||
|
||||
// Types
|
||||
import type { LetterData } from './list-cfg.letter'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Helpers
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
menu?: string
|
||||
letters: Array<LetterData>
|
||||
selected: string
|
||||
paginationMeta?: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'fetch', value: any): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
const debouncedSearch = refDebounced(search, 500) // 500ms debounce
|
||||
|
||||
// Provide for radio selection - use selected prop directly
|
||||
const recSelectId = ref<string>(props.selected || '')
|
||||
const recSelectMenu = ref<string>('letter')
|
||||
|
||||
provide('rec_select_id', recSelectId)
|
||||
provide('rec_select_menu', recSelectMenu)
|
||||
|
||||
function saveSelection() {
|
||||
// Validate that a letter is selected
|
||||
if (!props.selected || props.selected === '') {
|
||||
console.warn('No letter selected')
|
||||
return
|
||||
}
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('fetch', { 'page-number': page })
|
||||
}
|
||||
|
||||
// Watch for changes in recSelectId and emit update:selected
|
||||
watch(recSelectId, (newValue) => {
|
||||
if (newValue && newValue !== '') {
|
||||
emit('update:selected', newValue)
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for changes in selected prop
|
||||
watch(() => props.selected, (newValue) => {
|
||||
recSelectId.value = newValue || ''
|
||||
})
|
||||
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
emit('fetch', { search: newValue })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
:open="props.open"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Search Control Letter</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="max-w-[50%]">
|
||||
<Input
|
||||
v-model="search"
|
||||
placeholder="Search by Control Letter No. / SEP No."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<ListLetter
|
||||
:data="letters"
|
||||
:menu="props.menu"
|
||||
:selected="props.selected"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="default"
|
||||
class="h-[40px] min-w-[120px] text-white"
|
||||
@click="saveSelection"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-save"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -4,24 +4,67 @@ 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'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any
|
||||
schema: z.ZodSchema<any>
|
||||
excludeFields?: string[]
|
||||
isReadonly?: boolean
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', val: any): void
|
||||
(e: 'submit', val: any): void
|
||||
}>()
|
||||
|
||||
const subject = ref({
|
||||
'prim-compl': '',
|
||||
'sec-compl': '',
|
||||
'cur-disea-hist': '',
|
||||
'pas-disea-hist': '',
|
||||
'fam-disea-hist': '',
|
||||
'alg-hist': '',
|
||||
'alg-react': '',
|
||||
'med-hist': '',
|
||||
'blood-type': '',
|
||||
// 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 })
|
||||
|
||||
const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
|
||||
const [curDiseaseHistory, curDiseaseHistoryAttrs] = defineField('cur-disea-hist')
|
||||
const [systolic, systolicAttrs] = defineField('syst-bp')
|
||||
const [diastolic, diastolicAttrs] = defineField('diast-bp')
|
||||
const [pulse, pulseAttrs] = defineField('pulse')
|
||||
const [respiratoryRate, respiratoryRateAttrs] = defineField('resp-rate')
|
||||
const [temperature, temperatureAttrs] = defineField('temp')
|
||||
const [weight, weightAttrs] = defineField('weight')
|
||||
const [height, heightAttrs] = defineField('height')
|
||||
const [bloodGroup, bloodGroupAttrs] = defineField('reflect-fisio')
|
||||
const [physicalExamination, physicalExaminationAttrs] = defineField('reflect-pato')
|
||||
const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('autonom-neuron')
|
||||
const [medicalPlan, medicalPlanAttrs] = defineField('medical-act')
|
||||
const [therapy, therapyAttrs] = defineField('therapy')
|
||||
|
||||
const validate = async () => {
|
||||
const result = await _validate()
|
||||
console.log('Component validate() result:', result)
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
data: result.values,
|
||||
errors: result.errors,
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
|
||||
@@ -34,11 +77,17 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Field>
|
||||
<RadioGroup class="flex gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="vaksin-yes" value="yes" />
|
||||
<RadioGroupItem
|
||||
id="vaksin-yes"
|
||||
value="yes"
|
||||
/>
|
||||
<Label for="vaksin-yes">Sudah</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="vaksin-no" value="no" />
|
||||
<RadioGroupItem
|
||||
id="vaksin-no"
|
||||
value="no"
|
||||
/>
|
||||
<Label for="vaksin-no">Belum</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
@@ -50,11 +99,17 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Field>
|
||||
<RadioGroup class="flex gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="kasus-baru" value="baru" />
|
||||
<RadioGroupItem
|
||||
id="kasus-baru"
|
||||
value="baru"
|
||||
/>
|
||||
<Label for="kasus-baru">Baru</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="kasus-lama" value="lama" />
|
||||
<RadioGroupItem
|
||||
id="kasus-lama"
|
||||
value="lama"
|
||||
/>
|
||||
<Label for="kasus-lama">Lama</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
@@ -66,11 +121,17 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Field>
|
||||
<RadioGroup class="flex gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="kunjungan-baru" value="baru" />
|
||||
<RadioGroupItem
|
||||
id="kunjungan-baru"
|
||||
value="baru"
|
||||
/>
|
||||
<Label for="kunjungan-baru">Baru</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="kunjungan-lama" value="lama" />
|
||||
<RadioGroupItem
|
||||
id="kunjungan-lama"
|
||||
value="lama"
|
||||
/>
|
||||
<Label for="kunjungan-lama">Lama</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
@@ -79,88 +140,141 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</Block>
|
||||
|
||||
<Block :colCount="2">
|
||||
<!-- Riwayat Penyakit -->
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan anamnesa pasien" />
|
||||
<Field :errMessage="errors['prim-compl']">
|
||||
<Textarea
|
||||
placeholder="Masukkan anamnesa pasien"
|
||||
v-model="primaryComplaint"
|
||||
v-bind="primaryComplaintAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Riwayat Penyakit</Label>
|
||||
<Field>
|
||||
<Textarea
|
||||
placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
|
||||
placeholder=".."
|
||||
v-model="curDiseaseHistory"
|
||||
v-bind="curDiseaseHistoryAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>SpO₂</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="%" />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="%"
|
||||
v-model="spo2"
|
||||
v-bind="spo2Attrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Sistol</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="mmHg" />
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="mmHg"
|
||||
v-model="systolic"
|
||||
v-bind="systolicAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Diastol</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="mmHg" />
|
||||
<Input
|
||||
v-model="diastolic"
|
||||
v-bind="diastolicAttrs"
|
||||
type="number"
|
||||
placeholder="mmHg"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Respirasi</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="kali/menit" />
|
||||
<Input
|
||||
v-model="respiratoryRate"
|
||||
v-bind="respiratoryRateAttrs"
|
||||
type="number"
|
||||
placeholder="kali/menit"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="kali/menit" />
|
||||
<Input
|
||||
v-model="pulse"
|
||||
v-bind="pulseAttrs"
|
||||
type="number"
|
||||
placeholder="kali/menit"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Temperatur</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="℃" />
|
||||
<Input
|
||||
v-model="temperature"
|
||||
v-bind="temperatureAttrs"
|
||||
type="number"
|
||||
placeholder="℃"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Berat Badan</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="Kg" />
|
||||
<Input
|
||||
v-model="weight"
|
||||
v-bind="weightAttrs"
|
||||
type="number"
|
||||
placeholder="Kg"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Tinggi Badan</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="Cm" />
|
||||
<Input
|
||||
v-model="height"
|
||||
v-bind="heightAttrs"
|
||||
type="number"
|
||||
placeholder="Cm"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Golongan Darah</Label>
|
||||
<Field>
|
||||
<Select :options="bloodGroups" />
|
||||
<Select
|
||||
:options="bloodGroups"
|
||||
v-model="bloodGroup"
|
||||
v-bind="bloodGroupAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan pemeriksaan fisik" />
|
||||
<Textarea
|
||||
placeholder="Masukkan pemeriksaan fisik"
|
||||
v-model="physicalExamination"
|
||||
v-bind="physicalExaminationAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
@@ -171,9 +285,10 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'diagnosa')"
|
||||
>+ Pilih Diagnosa</Button
|
||||
@click="emit('modal', 'diagnosa')"
|
||||
>
|
||||
+ Pilih Diagnosa
|
||||
</Button>
|
||||
</Field>
|
||||
</Cell>
|
||||
<!-- Diagnosa -->
|
||||
@@ -183,37 +298,47 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
>+ Pilih Prosedur</Button
|
||||
@click="emit('modal', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
<AppIcdPreview v-model="icdPreview.procedures" />
|
||||
</div>
|
||||
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Diagnosa Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="diagnosisMedical"
|
||||
v-bind="diagnosisMedicalAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Rencana Awal Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="medicalPlan"
|
||||
v-bind="medicalPlanAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Terapi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="therapy"
|
||||
v-bind="therapyAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
@@ -4,24 +4,89 @@ 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'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any
|
||||
schema: z.ZodSchema<any>
|
||||
excludeFields?: string[]
|
||||
isReadonly?: boolean
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', val: any): void
|
||||
(e: 'submit', val: any): void
|
||||
}>()
|
||||
|
||||
const subject = ref({
|
||||
'prim-compl': '',
|
||||
'sec-compl': '',
|
||||
'cur-disea-hist': '',
|
||||
'pas-disea-hist': '',
|
||||
'fam-disea-hist': '',
|
||||
'alg-hist': '',
|
||||
'alg-react': '',
|
||||
'med-hist': '',
|
||||
'blood-type': '',
|
||||
// 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 })
|
||||
|
||||
const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
|
||||
const [medicalPlan, medicalPlanAttrs] = defineField('medical-plan')
|
||||
const [diagnosisMedical, diagnosisMedicalAttrs] = defineField('diagnosis-medical')
|
||||
const [rehabTrouble, rehabTroubleAttrs] = defineField('rehab-trouble')
|
||||
const [medicalTrouble, medicalTroubleAttrs] = defineField('medical-trouble')
|
||||
const [physicModal, physicModalAttrs] = defineField('physic-modal')
|
||||
const [exercise, exerciseAttrs] = defineField('exercise')
|
||||
const [orthoPesa, orthoPesaAttrs] = defineField('ortho-pesa')
|
||||
const [education, educationAttrs] = defineField('education')
|
||||
const [other, otherAttrs] = defineField('other')
|
||||
const [cranialis, cranialisAttrs] = defineField('cranialis')
|
||||
const [sensoris, sensorisAttrs] = defineField('sensoris')
|
||||
const [reflectFisio, reflectFisioAttrs] = defineField('reflect-fisio')
|
||||
const [reflectPato, reflectPatoAttrs] = defineField('reflect-pato')
|
||||
const [otonom, otonomAttrs] = defineField('otonom')
|
||||
const [localis, localisAttrs] = defineField('localis')
|
||||
const [medicalTrial, medicalTrialAttrs] = defineField('medical-trial')
|
||||
const [therapy, therapyAttrs] = defineField('therapy')
|
||||
const [systolic, systolicAttrs] = defineField('syst-bp')
|
||||
const [diastolic, diastolicAttrs] = defineField('diast-bp')
|
||||
const [pulse, pulseAttrs] = defineField('pulse')
|
||||
const [gcs, gcsAttrs] = defineField('gcs')
|
||||
const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
|
||||
const [temperature, temperatureAttrs] = defineField('temperature')
|
||||
const [weight, weightAttrs] = defineField('weight')
|
||||
const [height, heightAttrs] = defineField('height')
|
||||
const [ambulance, ambulanceAttrs] = defineField('ambulance')
|
||||
const [gait, gaitAttrs] = defineField('gait')
|
||||
const [neckRom, neckRomAttrs] = defineField('neck-rom')
|
||||
const [bodyRom, bodyRomAttrs] = defineField('body-rom')
|
||||
const [agaRom, agaRomAttrs] = defineField('aga-rom')
|
||||
const [agbRom, agbRomAttrs] = defineField('agb-rom')
|
||||
const [neckMmt, neckMmtAttrs] = defineField('neck-mmt')
|
||||
const [bodyMmt, bodyMmtAttrs] = defineField('body-mmt')
|
||||
const [agaMmt, agaMmtAttrs] = defineField('aga-mmt')
|
||||
const [agbMmt, agbMmtAttrs] = defineField('agb-mmt')
|
||||
|
||||
const validate = async () => {
|
||||
const result = await _validate()
|
||||
console.log('Component validate() result:', result)
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
data: result.values,
|
||||
errors: result.errors,
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
|
||||
@@ -36,8 +101,11 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Field :errMessage="errors['prim-compl']">
|
||||
<Textarea
|
||||
v-model="primaryComplaint"
|
||||
v-bind="primaryComplaintAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -46,21 +114,30 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Diagnosa Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="diagnosisMedical"
|
||||
v-bind="diagnosisMedicalAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Rencana Awal Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="medicalPlan"
|
||||
v-bind="medicalPlanAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Terapi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="therapy"
|
||||
v-bind="therapyAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -77,22 +154,36 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah</Label>
|
||||
<Field>
|
||||
<Input placeholder="Sistolik" />
|
||||
<Input placeholder="Diastolik" />
|
||||
<Input
|
||||
placeholder="Sistolik"
|
||||
v-model="systolic"
|
||||
v-bind="systolicAttrs"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Diastolik"
|
||||
v-model="diastolic"
|
||||
v-bind="diastolicAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="pulse"
|
||||
v-bind="pulseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>GCS</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="gcs"
|
||||
v-bind="gcsAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -100,14 +191,21 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>RR</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="respiratoryRate"
|
||||
v-bind="respiratoryRateAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Ambulasi</Label>
|
||||
<Field>
|
||||
<RadioGroup class="flex gap-4">
|
||||
<RadioGroup
|
||||
class="flex gap-4"
|
||||
v-model="ambulance"
|
||||
v-bind="ambulanceAttrs"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="vaksin-yes"
|
||||
@@ -129,7 +227,10 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Gait</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="gait"
|
||||
v-bind="gaitAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -144,21 +245,30 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>N. Cranialis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="cranialis"
|
||||
v-bind="cranialisAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Sensoris</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="sensoris"
|
||||
v-bind="sensorisAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Reflek Fisilogis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="reflectFisio"
|
||||
v-bind="reflectFisioAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -166,13 +276,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Reflek Patologis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="reflectPato"
|
||||
v-bind="reflectPatoAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Saraf Otonom</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="otonom"
|
||||
v-bind="otonomAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -187,13 +303,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="neckRom"
|
||||
v-bind="neckRomAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Batang Tubuh</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="bodyRom"
|
||||
v-bind="bodyRomAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -201,13 +323,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>AGA</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="agaRom"
|
||||
v-bind="agaRomAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>AGB</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="agbRom"
|
||||
v-bind="agbRomAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -222,13 +350,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="neckMmt"
|
||||
v-bind="neckMmtAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Batang Tubuh</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="bodyMmt"
|
||||
v-bind="bodyMmtAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -236,13 +370,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>AGA</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="agaMmt"
|
||||
v-bind="agaMmtAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>AGB</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="agbMmt"
|
||||
v-bind="agbMmtAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -256,7 +396,10 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Deskripsi Temuan Fisik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="localis"
|
||||
v-bind="localisAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -271,7 +414,10 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Catatan Pemeriksaan Penunjang</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="medicalTrial"
|
||||
v-bind="medicalTrialAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -286,13 +432,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Masalah Medik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="medicalTrouble"
|
||||
v-bind="medicalTroubleAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Masalah Rehabilitasi Medik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="rehabTrouble"
|
||||
v-bind="rehabTroubleAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -301,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
|
||||
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emit('click', 'fungsional')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
@@ -316,21 +476,30 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Modalitas Fisik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="physicModal"
|
||||
v-bind="physicModalAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Latihan</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="exercise"
|
||||
v-bind="exerciseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Ortesa Protesa</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="orthoPesa"
|
||||
v-bind="orthoPesaAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -338,13 +507,19 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Cell>
|
||||
<Label dynamic>Edukasi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="education"
|
||||
v-bind="educationAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="other"
|
||||
v-bind="otherAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
@@ -1,28 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import EarlyEntry from './early-entry.vue'
|
||||
import EarlyRehabEntry from './early-rehab-entry.vue'
|
||||
import FunctionEntry from './function-entry.vue'
|
||||
|
||||
/**
|
||||
* Props:
|
||||
* - excludeFields: daftar nama field yang ingin disembunyikan
|
||||
*/
|
||||
const props = defineProps<{
|
||||
type: 'early' | 'early-rehab' | 'function'
|
||||
excludeFields?: string[]
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click', 'submit', 'cancel'])
|
||||
|
||||
const componentMap = {
|
||||
early: EarlyEntry,
|
||||
'early-rehab': EarlyRehabEntry,
|
||||
function: FunctionEntry,
|
||||
}
|
||||
|
||||
// Komponen aktif berdasarkan type
|
||||
const ActiveComponent = computed(() => componentMap[props.type])
|
||||
|
||||
const childRef = ref()
|
||||
|
||||
const validate = async () => {
|
||||
if (childRef.value?.validate) {
|
||||
const result = await childRef.value.validate()
|
||||
console.log('[Wrapper] Result from child validate:', result)
|
||||
return result
|
||||
} else {
|
||||
console.warn('validate() not found in child component')
|
||||
return { valid: false, data: null, errors: {} }
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="ActiveComponent" :exclude-fields="excludeFields" />
|
||||
<component
|
||||
ref="childRef"
|
||||
:is="ActiveComponent"
|
||||
:exclude-fields="excludeFields"
|
||||
@click="$emit('click', $event)"
|
||||
@submit="$emit('submit', $event)"
|
||||
@cancel="$emit('cancel', $event)"
|
||||
@modal="$emit('modal', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -4,24 +4,90 @@ 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'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any
|
||||
schema: z.ZodSchema<any>
|
||||
excludeFields?: string[]
|
||||
isReadonly?: boolean
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', val: any): void
|
||||
(e: 'submit', val: any): void
|
||||
}>()
|
||||
|
||||
const subject = ref({
|
||||
'prim-compl': '',
|
||||
'sec-compl': '',
|
||||
'cur-disea-hist': '',
|
||||
'pas-disea-hist': '',
|
||||
'fam-disea-hist': '',
|
||||
'alg-hist': '',
|
||||
'alg-react': '',
|
||||
'med-hist': '',
|
||||
'blood-type': '',
|
||||
// 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 })
|
||||
|
||||
const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
|
||||
const [pastDisease, pastDiseaseAttrs] = defineField('past-disease')
|
||||
const [currentDisease, currentDiseaseAttrs] = defineField('current-disease')
|
||||
const [gcs, gcsAttrs] = defineField('gcs')
|
||||
const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
|
||||
const [respiratoryRateType, respiratoryRateTypeAttrs] = defineField('respiratory-rate-type')
|
||||
const [pulse, pulseAttrs] = defineField('pulse')
|
||||
const [pulseType, pulseTypeAttrs] = defineField('pulse-type')
|
||||
const [rightArmBp, rightArmBpAttrs] = defineField('right-arm-bp')
|
||||
const [leftArmBp, leftArmBpAttrs] = defineField('left-arm-bp')
|
||||
const [axillaryTemp, axillaryTempAttrs] = defineField('axillary-temp')
|
||||
const [rektalTemp, rektalTempAttrs] = defineField('rektal-temp')
|
||||
const [skin, skinAttrs] = defineField('skin')
|
||||
const [head, headAttrs] = defineField('head')
|
||||
const [ear, earAttrs] = defineField('ear')
|
||||
const [nose, noseAttrs] = defineField('nose')
|
||||
const [oralCavity, oralCavityAttrs] = defineField('oral-cavity')
|
||||
const [eye, eyeAttrs] = defineField('eye')
|
||||
const [otherBodyPart, otherBodyPartAttrs] = defineField('other-body-part')
|
||||
const [neck, neckAttrs] = defineField('neck')
|
||||
const [thyroid, thyroidAttrs] = defineField('thyroid')
|
||||
const [thorax, thoraxAttrs] = defineField('thorax')
|
||||
const [heart, heartAttrs] = defineField('heart')
|
||||
const [lung, lungAttrs] = defineField('lung')
|
||||
const [abdomen, abdomenAttrs] = defineField('abdomen')
|
||||
const [heart2, heart2Attrs] = defineField('heart2')
|
||||
const [lien, lienAttrs] = defineField('lien')
|
||||
const [back, backAttrs] = defineField('back')
|
||||
const [extremity, extremityAttrs] = defineField('extremity')
|
||||
const [gender, genderAttrs] = defineField('gender')
|
||||
const [rectum, rectumAttrs] = defineField('rectum')
|
||||
const [systemSyaraf, systemSyarafAttrs] = defineField('system-syaraf')
|
||||
const [nervousSystem, nervousSystemAttrs] = defineField('nervous-system')
|
||||
const [cardioRespiratory, cardioRespiratoryAttrs] = defineField('cardio-respiratory')
|
||||
const [imaging, imagingAttrs] = defineField('imaging')
|
||||
const [laboratory, laboratoryAttrs] = defineField('laboratory')
|
||||
|
||||
const validate = async () => {
|
||||
const result = await _validate()
|
||||
console.log('Component validate() result:', result)
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
data: result.values,
|
||||
errors: result.errors,
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
const disorders = ref<string[]>([])
|
||||
const therapies = ref<string[]>([])
|
||||
@@ -55,8 +121,11 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Field :errMessage="errors['prim-compl']">
|
||||
<Textarea
|
||||
v-model="primaryComplaint"
|
||||
v-bind="primaryComplaintAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -65,14 +134,20 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Riwayat Penyakit Dahulu</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="pastDisease"
|
||||
v-bind="pastDiseaseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Riwayat Penyakit Sekarang</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="currentDisease"
|
||||
v-bind="currentDiseaseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -86,7 +161,7 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Umum</Label>
|
||||
<Field>
|
||||
<Input placeholder="Sistolik" />
|
||||
<Input placeholder="" />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -100,7 +175,10 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Kesadaran (GCS)</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="gcs"
|
||||
v-bind="gcsAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -108,14 +186,20 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Pernapasan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="respiratoryRate"
|
||||
v-bind="respiratoryRateAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Jenis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="respiratoryRateType"
|
||||
v-bind="respiratoryRateTypeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -123,13 +207,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="pulse"
|
||||
v-bind="pulseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Jenis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="pulseType"
|
||||
v-bind="pulseTypeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -137,13 +227,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Lengan Kanan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="rightArmBp"
|
||||
v-bind="rightArmBpAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Lengan Kiri</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="leftArmBp"
|
||||
v-bind="leftArmBpAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -151,13 +247,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Suhu Aksila</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="axillaryTemp"
|
||||
v-bind="axillaryTempAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Suhu Rektal</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="rektalTemp"
|
||||
v-bind="rektalTempAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -172,7 +274,10 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Kulit</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="skin"
|
||||
v-bind="skinAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -183,19 +288,28 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Kepala</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="head"
|
||||
v-bind="headAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Telinga</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="ear"
|
||||
v-bind="earAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Hidung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="nose"
|
||||
v-bind="noseAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -204,19 +318,28 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Rongga Mulut/Tenggorokan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="oralCavity"
|
||||
v-bind="oralCavityAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Mata</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="eye"
|
||||
v-bind="eyeAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="otherBodyPart"
|
||||
v-bind="otherBodyPartAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -227,13 +350,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="neck"
|
||||
v-bind="neckAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kelenjar Tiroid</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="thyroid"
|
||||
v-bind="thyroidAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
@@ -250,19 +379,28 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Thorax</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="thorax"
|
||||
v-bind="thoraxAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Jantung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="heart"
|
||||
v-bind="heartAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Paru-Paru</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="lung"
|
||||
v-bind="lungAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -281,19 +419,28 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Abdomen</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="abdomen"
|
||||
v-bind="abdomenAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Hati</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="heart2"
|
||||
v-bind="heart2Attrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lien</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="lien"
|
||||
v-bind="lienAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -312,19 +459,28 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Punggung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="back"
|
||||
v-bind="backAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Ekstremitas</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="extremity"
|
||||
v-bind="extremityAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kelamin</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="gender"
|
||||
v-bind="genderAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -332,13 +488,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Rectum</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="rectum"
|
||||
v-bind="rectumAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>System Syaraf</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
<Input
|
||||
v-model="nervousSystem"
|
||||
v-bind="nervousSystemAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -348,13 +510,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Neuromoskuloskeletal</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="neuromoskuloskeletal"
|
||||
v-bind="neuromoskuloskeletalAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kardiorespirasi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="cardioRespiratory"
|
||||
v-bind="cardioRespiratoryAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -369,13 +537,19 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Cell>
|
||||
<Label dynamic>Pencitraan</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="imaging"
|
||||
v-bind="imagingAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Laboratorium</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
<Textarea
|
||||
v-model="laboratory"
|
||||
v-bind="laboratoryAttrs"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
@@ -386,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
@click="emit('click', 'diagnosa')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Fungsional (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emit('click', 'fungsional')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview v-model="icdPreview.fungsional" />
|
||||
</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')"
|
||||
@click="emit('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 />
|
||||
<AppIcdPreview v-model="icdPreview.procedures" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,46 +6,21 @@ type SmallDetailDto = any
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 120 },
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{},
|
||||
{ width: 50 },
|
||||
],
|
||||
cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Rekam Medis' },
|
||||
{ label: 'KTP' },
|
||||
{ label: 'Tgl Lahir' },
|
||||
{ label: 'Umur' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'Pendidikan' },
|
||||
{ label: 'Tanggal' },
|
||||
{ label: 'DPJP' },
|
||||
{ label: 'Keluhan & Riwayat' },
|
||||
{ label: 'Pemeriksaan' },
|
||||
{ label: 'Diagnosa' },
|
||||
{ label: 'Status' },
|
||||
{ label: '' },
|
||||
{ label: 'Aksi' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'name',
|
||||
'medicalRecord_number',
|
||||
'identity_number',
|
||||
'birth_date',
|
||||
'patient_age',
|
||||
'gender',
|
||||
'education',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
@@ -53,45 +28,34 @@ export const config: Config = {
|
||||
],
|
||||
|
||||
parses: {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
|
||||
time(rec: any) {
|
||||
return rec.time ? new Date(rec.time).toLocaleDateString() : ''
|
||||
},
|
||||
identity_number: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
|
||||
return '(TANPA NIK)'
|
||||
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 '-'
|
||||
}
|
||||
return recX.identity_number
|
||||
},
|
||||
birth_date: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.birth_date === 'object' && recX.birth_date) {
|
||||
return (recX.birth_date as Date).toLocaleDateString()
|
||||
} else if (typeof recX.birth_date === 'string') {
|
||||
return recX.birth_date.substring(0, 10)
|
||||
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 '-'
|
||||
}
|
||||
return recX.birth_date
|
||||
},
|
||||
patient_age: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.birth_date?.split('T')[0]
|
||||
},
|
||||
gender: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
|
||||
return 'Tidak Diketahui'
|
||||
}
|
||||
return recX.gender_code
|
||||
},
|
||||
education: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
|
||||
return recX.education_code
|
||||
} else if (typeof recX.education_code !== 'undefined') {
|
||||
return recX.education_code
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { SpecialistPositionFormData } from '~/schemas/specialist-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genSpecialistPosition } from '~/models/specialist-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
specialistId: number
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: SpecialistPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: SpecialistPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
// readonly based on detail specialist
|
||||
specialist_id: props.specialistId,
|
||||
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-specialist-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode Jabatan</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Jabatan</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Pengisi Jabatan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { SpecialistPositionFormData } from '~/schemas/specialist-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genSpecialistPosition } from '~/models/specialist-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
specialists: any[]
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: SpecialistPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [specialist, specialistAttrs] = defineField('specialist_id')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.specialist_id !== undefined)
|
||||
specialist.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
specialist.value = null
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: SpecialistPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
specialist_id: specialist.value || null,
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-specialist-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama Posisi</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Spesialis</Label>
|
||||
<Field :errMessage="errors.specialist_id">
|
||||
<Combobox
|
||||
id="specialist"
|
||||
v-model="specialist"
|
||||
v-bind="specialistAttrs"
|
||||
:items="specialists"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Spesialis"
|
||||
search-placeholder="Cari Spesialis"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Karyawan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { DivisionPosition } from '~/models/division-position'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode Posisi' },
|
||||
{ label: 'Nama Posisi' },
|
||||
{ label: 'Nama Spesialis ' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['code', 'name', 'specialist.name', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as DivisionPosition
|
||||
const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.trim()
|
||||
|
||||
return fullName || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.headStatus ? 'Ya' : 'Tidak'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user