riefive
106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<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>
|