283 lines
12 KiB
Vue
283 lines
12 KiB
Vue
<script setup lang="ts">
|
|
// helpers
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { useForm } from 'vee-validate'
|
|
import * as z from 'zod'
|
|
// components
|
|
import { Button } from '~/components/pub/ui/button'
|
|
import { Input } from '~/components/pub/ui/input'
|
|
import { Label } from '~/components/pub/ui/label'
|
|
import { Select } from '~/components/pub/ui/select'
|
|
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
|
import { Textarea } from '~/components/pub/ui/textarea'
|
|
import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'event', value: any): void
|
|
}>()
|
|
|
|
const items = [
|
|
{ value: 'item-1', label: 'Item 1' },
|
|
{ value: 'item-2', label: 'Item 2' },
|
|
{ value: 'item-3', label: 'Item 3' },
|
|
]
|
|
|
|
// Validation schema
|
|
const schema = z.object({
|
|
tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
|
|
jalur: z.string().min(1, 'Pilih jalur'),
|
|
noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
|
|
noKtp: z.string().min(1, 'No. KTP wajib diisi'),
|
|
noRm: z.string().min(1, 'No. RM wajib diisi'),
|
|
namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
|
|
noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
|
|
noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
|
|
tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
|
|
klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
|
|
dpjp: z.string().min(1, 'DPJP wajib diisi'),
|
|
diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
|
|
cob: z.string().min(1, 'COB wajib diisi'),
|
|
katarak: z.string().min(1, 'Katarak wajib diisi'),
|
|
jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
|
|
kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
|
|
})
|
|
|
|
const { handleSubmit, errors, defineField } = useForm({
|
|
validationSchema: toTypedSchema(schema),
|
|
})
|
|
|
|
// Bind fields
|
|
const [tanggalSep] = defineField('tanggalSep')
|
|
const [jalur] = defineField('jalur')
|
|
const [noBpjs] = defineField('noBpjs')
|
|
const [noKtp] = defineField('noKtp')
|
|
const [noRm] = defineField('noRm')
|
|
const [namaPasien] = defineField('namaPasien')
|
|
const [noTelp] = defineField('noTelp')
|
|
const [noSuratKontrol] = defineField('noSuratKontrol')
|
|
const [tglSuratKontrol] = defineField('tglSuratKontrol')
|
|
const [klinikTujuan] = defineField('klinikTujuan')
|
|
const [dpjp] = defineField('dpjp')
|
|
const [diagnosaAwal] = defineField('diagnosaAwal')
|
|
const [cob] = defineField('cob')
|
|
const [katarak] = defineField('katarak')
|
|
const [jenisProsedur] = defineField('jenisProsedur')
|
|
const [kodePenunjang] = defineField('kodePenunjang')
|
|
|
|
// Submit handler
|
|
const onSubmit = handleSubmit((values) => {
|
|
console.log('✅ Validated form values:', values)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto w-full">
|
|
<form @submit.prevent="onSubmit" class="grid gap-6 p-4">
|
|
<!-- Tanggal SEP & Jalur -->
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div class="flex flex-col gap-2">
|
|
<Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
|
|
<DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
|
|
<p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label for="jalur">Jalur</Label>
|
|
<Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
|
|
<p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<!-- Data Pasien -->
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-lg font-semibold">Data Pasien</h3>
|
|
<Button
|
|
variant="outline"
|
|
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
|
@click="emit('event', 'search-patient')"
|
|
>
|
|
<Icon name="i-lucide-search" class="h-5 w-5" />
|
|
Cari Pasien
|
|
</Button>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div class="flex flex-col gap-2">
|
|
<Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
|
|
<Input v-model="noBpjs" />
|
|
<p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>No. KTP<span class="text-red-500">*</span></Label>
|
|
<Input v-model="noKtp" />
|
|
<p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>No. RM<span class="text-red-500">*</span></Label>
|
|
<Input v-model="noRm" />
|
|
<p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Nama Pasien<span class="text-red-500">*</span></Label>
|
|
<Input v-model="namaPasien" />
|
|
<p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>No. Telepon<span class="text-red-500">*</span></Label>
|
|
<Input v-model="noTelp" />
|
|
<p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<!-- Data SEP -->
|
|
<h3 class="text-lg font-semibold">Data SEP</h3>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div class="flex flex-col gap-2">
|
|
<Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
|
|
<div class="flex gap-2">
|
|
<Input class="flex-1" v-model="noSuratKontrol" />
|
|
<Button
|
|
variant="outline"
|
|
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
|
@click="emit('event', 'search-letter')"
|
|
>
|
|
<Icon name="i-lucide-search" class="h-5 w-5" />
|
|
Cari Data
|
|
</Button>
|
|
</div>
|
|
<p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
|
|
<DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
|
|
<p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-2">
|
|
<div class="flex-1">
|
|
<Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
|
|
<Select
|
|
icon-name="i-lucide-chevron-down"
|
|
v-model="klinikTujuan"
|
|
:items="items"
|
|
placeholder="Pilih klinik"
|
|
></Select>
|
|
<p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
|
|
</div>
|
|
<div>
|
|
<Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
|
|
<RadioGroup v-model="cob" class="flex items-center gap-2">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Ya" id="cob-ya" />
|
|
<Label for="cob-ya">Ya</Label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Tidak" id="cob-tidak" />
|
|
<Label for="cob-tidak">Tidak</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>DPJP<span class="text-red-500">*</span></Label>
|
|
<Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
|
|
<p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
|
|
<Input v-model="diagnosaAwal" />
|
|
<p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Catatan -->
|
|
<div>
|
|
<Label>Catatan</Label>
|
|
<Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div>
|
|
<Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
|
|
<RadioGroup v-model="cob" class="flex items-center gap-2">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Ya" id="cob-ya" />
|
|
<Label for="cob-ya">Ya</Label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Tidak" id="cob-tidak" />
|
|
<Label for="cob-tidak">Tidak</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
<div>
|
|
<Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
|
|
<RadioGroup v-model="katarak" class="flex items-center gap-2">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Ya" id="katarak-ya" />
|
|
<Label for="katarak-ya">Ya</Label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="Tidak" id="katarak-tidak" />
|
|
<Label for="katarak-tidak">Tidak</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="flex flex-col gap-2">
|
|
<Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
|
|
<RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="procedure-one" id="procedure-one" />
|
|
<Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<RadioGroupItem value="procedure-two" id="procedure-two" />
|
|
<Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="flex flex-col gap-2">
|
|
<Label>Kode Penunjang<span class="text-red-500">*</span></Label>
|
|
<Select
|
|
icon-name="i-lucide-chevron-down"
|
|
v-model="kodePenunjang"
|
|
:items="items"
|
|
placeholder="Pilih Kode Penunjang"
|
|
></Select>
|
|
<p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
|
|
@click="emit('event', 'history-sep')"
|
|
>
|
|
<Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
|
|
>
|
|
<Icon name="i-lucide-eye" class="h-5 w-5" />Preview
|
|
</Button>
|
|
<Button type="submit" class="h-[40px] min-w-[120px] text-white">
|
|
<Icon name="i-lucide-save" class="h-5 w-5" />
|
|
Simpan
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|