Merge branch 'dev' into feat/surat-kontrol-135
This commit is contained in:
hasyim_kai
@@ -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: {},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import type { Specialist } from '~/models/specialist'
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
|
||||
// #region Props & Emits
|
||||
defineProps<{
|
||||
specialist: Specialist
|
||||
}>()
|
||||
|
||||
// #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">{{ specialist.code || '-' }}</DetailRow>
|
||||
<DetailRow label="Nama">{{ specialist.name || '-' }}</DetailRow>
|
||||
<DetailRow label="Unit">
|
||||
{{ [specialist.unit?.code, specialist.unit?.name].filter(Boolean).join(' / ') || '-' }}
|
||||
</DetailRow>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { UnitPosition } from '~/models/unit-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: {
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as UnitPosition
|
||||
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-specialist',
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Unit' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Nama Unit' }, { label: '' }]],
|
||||
|
||||
keys: ['code', 'name', 'unit', 'action'],
|
||||
keys: ['code', 'name', 'unit.name', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
@@ -29,10 +22,6 @@ export const config: Config = {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.name}`.trim()
|
||||
},
|
||||
unit: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.unit_id || '-'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
|
||||
@@ -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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
subspecialistId: 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: SubSpecialistPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
|
||||
})
|
||||
|
||||
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: SubSpecialistPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
// readonly based on detail specialist
|
||||
subspecialist_id: props.subspecialistId,
|
||||
|
||||
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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
subSpecialists: 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: SubSpecialistPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_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.subspecialist_id !== undefined)
|
||||
subSpecialist.value = props.values.subspecialist_id ? Number(props.values.subspecialist_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 = ''
|
||||
subSpecialist.value = null
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: SubSpecialistPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
subspecialist_id: subSpecialist.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">Sub Spesialis</Label>
|
||||
<Field :errMessage="errors.subspecialist_id">
|
||||
<Combobox
|
||||
id="specialist"
|
||||
v-model="subSpecialist"
|
||||
v-bind="subSpecialistAttrs"
|
||||
:items="subSpecialists"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Sub Spesialis"
|
||||
search-placeholder="Cari Sub 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,65 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { SubSpecialistPosition } from '~/models/subspecialist-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 Sub Spesialis ' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['code', 'name', 'subspecialist', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
subspecialist: (rec: unknown): unknown => {
|
||||
const recX = rec as SubSpecialistPosition
|
||||
return recX.subspecialist?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as SubSpecialistPosition
|
||||
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,49 @@
|
||||
<script setup lang="ts">
|
||||
import type { Subspecialist } from '~/models/subspecialist'
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
|
||||
// #region Props & Emits
|
||||
defineProps<{
|
||||
subspecialist: Subspecialist
|
||||
}>()
|
||||
|
||||
// #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">{{ subspecialist.code || '-' }}</DetailRow>
|
||||
<DetailRow label="Nama">{{ subspecialist.name || '-' }}</DetailRow>
|
||||
<DetailRow label="Spesialis">
|
||||
{{ [subspecialist.specialist?.code, subspecialist.specialist?.name].filter(Boolean).join(' / ') || '-' }}
|
||||
</DetailRow>
|
||||
<DetailRow label="Unit">
|
||||
{{
|
||||
[subspecialist.specialist?.unit?.code, subspecialist.specialist?.unit?.name].filter(Boolean).join(' / ') || '-'
|
||||
}}
|
||||
</DetailRow>
|
||||
<DetailRow label="Instalasi">
|
||||
{{
|
||||
[subspecialist.specialist?.unit?.installation?.code, subspecialist.specialist?.unit?.installation?.name]
|
||||
.filter(Boolean)
|
||||
.join(' / ') || '-'
|
||||
}}
|
||||
</DetailRow>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { UnitPosition } from '~/models/unit-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: {
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as UnitPosition
|
||||
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-subspecialist',
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Specialis' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]],
|
||||
|
||||
keys: ['code', 'name', 'specialist', 'action'],
|
||||
keys: ['code', 'name', 'specialist.name', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
|
||||
@@ -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,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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
unitId: 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: UnitPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
|
||||
})
|
||||
|
||||
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: UnitPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
// readonly based on detail unit
|
||||
unit_id: props.unitId,
|
||||
|
||||
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-unit-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,206 @@
|
||||
<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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
units: 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: UnitPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [unit, unitAttrs] = defineField('unit_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.unit_id !== undefined) unit.value = props.values.unit_id ? Number(props.values.unit_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 = ''
|
||||
unit.value = null
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: UnitPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
unit_id: unit.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-unit-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">Unit</Label>
|
||||
<Field :errMessage="errors.unit_id">
|
||||
<Combobox
|
||||
id="unit"
|
||||
v-model="unit"
|
||||
v-bind="unitAttrs"
|
||||
:items="units"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Unit"
|
||||
search-placeholder="Cari Unit"
|
||||
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 { UnitPosition } from '~/models/unit-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 Unit ' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: ['code', 'name', 'unit.name', 'employee', 'head', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as UnitPosition
|
||||
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,35 @@
|
||||
<script setup lang="ts">
|
||||
import type { Unit } from '~/models/unit'
|
||||
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
|
||||
|
||||
// #region Props & Emits
|
||||
defineProps<{
|
||||
unit: Unit
|
||||
}>()
|
||||
|
||||
// #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">{{ unit.code || '-' }}</DetailRow>
|
||||
<DetailRow label="Nama">{{ unit.name || '-' }}</DetailRow>
|
||||
<!-- <DetailRow label="Nama Instalasi">{{ unit.installation?.name || '-' }}</DetailRow> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user