implementasi komponen ke data pasien
This commit is contained in:
bagus-arie05
@@ -1,112 +1,50 @@
|
||||
<!-- pages/data-pasien.vue -->
|
||||
<template>
|
||||
<div class="data-pasien">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<h2>Data Pasien</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn color="primary" prepend-icon="mdi-plus">
|
||||
<v-btn color="primary" prepend-icon="mdi-plus" @click="addPatient">
|
||||
Add Patient
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="width: 80px;"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-2">
|
||||
<span>Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
style="width: 200px;"
|
||||
></v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<v-data-table
|
||||
<!-- Menggunakan komponen TabelData -->
|
||||
<TabelData
|
||||
:headers="headers"
|
||||
:items="pasienItems"
|
||||
:items-per-page="itemsPerPage"
|
||||
:search="search"
|
||||
class="elevation-1"
|
||||
item-value="id"
|
||||
title="Daftar Data Pasien"
|
||||
:show-search="true"
|
||||
>
|
||||
<template v-slot:item.no="{ index }">
|
||||
{{ (currentPage - 1) * itemsPerPage + index + 1 }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip
|
||||
:color="getStatusColor(item.status)"
|
||||
size="small"
|
||||
text-color="white"
|
||||
>
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.keterangan="{ item }">
|
||||
<span v-if="item.keterangan" class="text-red font-weight-bold">
|
||||
{{ item.keterangan }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.aksi="{ item }">
|
||||
<template #actions="{ item }">
|
||||
<div class="d-flex gap-1">
|
||||
<v-btn
|
||||
icon="mdi-eye"
|
||||
|
||||
size="small"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
@click="viewPasien(item)"
|
||||
></v-btn>
|
||||
>VIEW</v-btn>
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
|
||||
size="small"
|
||||
color="warning"
|
||||
variant="flat"
|
||||
@click="editPasien(item)"
|
||||
></v-btn>
|
||||
>EDIT</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<!-- Footer Pagination -->
|
||||
<div class="d-flex justify-space-between align-center mt-4">
|
||||
<div>
|
||||
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
|
||||
</div>
|
||||
|
||||
<v-pagination
|
||||
v-model="currentPage"
|
||||
:length="totalPages"
|
||||
:total-visible="7"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</TabelData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import TabelData from '@/components/TabelData.vue';
|
||||
|
||||
// Data
|
||||
const search = ref('');
|
||||
const itemsPerPage = ref(10);
|
||||
const currentPage = ref(1);
|
||||
|
||||
// Headers untuk tabel
|
||||
const headers = [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '60px' },
|
||||
{ title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' },
|
||||
@@ -122,9 +60,11 @@ const headers = [
|
||||
{ title: 'Aksi', key: 'aksi', sortable: false, width: '100px' }
|
||||
];
|
||||
|
||||
// Data pasien dengan informasi lengkap untuk edit
|
||||
const pasienItems = ref([
|
||||
{
|
||||
id: 1,
|
||||
no: 1,
|
||||
tgl_daftar: '2025-07-15 13:47:33',
|
||||
no_barcode: '25027100001',
|
||||
no_antrian: 'HO1001',
|
||||
@@ -135,10 +75,23 @@ const pasienItems = ref([
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
// Data tambahan untuk form edit
|
||||
editData: {
|
||||
tanggal_daftar: '2025-07-15 13:47:33',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100001',
|
||||
no_antrian: 'HO1001',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
no: 2,
|
||||
tgl_daftar: '2025-07-24 13:50:01',
|
||||
no_barcode: '25027100002',
|
||||
no_antrian: 'OB1001',
|
||||
@@ -149,10 +102,22 @@ const pasienItems = ref([
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-07-24 13:50:01',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100002',
|
||||
no_antrian: 'OB1001',
|
||||
no_klinik: '',
|
||||
no_rekammedik: '',
|
||||
klinik: 'KANDUNGAN',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
no: 3,
|
||||
tgl_daftar: '2025-07-24 13:50:37',
|
||||
no_barcode: '25027100003',
|
||||
no_antrian: 'OB1002',
|
||||
@@ -163,10 +128,22 @@ const pasienItems = ref([
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-07-24 13:50:37',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100003',
|
||||
no_antrian: 'OB1002',
|
||||
no_klinik: '',
|
||||
no_rekammedik: '',
|
||||
klinik: 'KANDUNGAN',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
no: 4,
|
||||
tgl_daftar: '2025-07-28 08:18:20',
|
||||
no_barcode: '25027100004',
|
||||
no_antrian: 'AN1001',
|
||||
@@ -177,10 +154,22 @@ const pasienItems = ref([
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-07-28 08:18:20',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100004',
|
||||
no_antrian: 'AN1001',
|
||||
no_klinik: '',
|
||||
no_rekammedik: '',
|
||||
klinik: 'ANAK',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
no: 5,
|
||||
tgl_daftar: '2025-08-13 00:00:02',
|
||||
no_barcode: '25027100005',
|
||||
no_antrian: 'HO1002',
|
||||
@@ -191,10 +180,22 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100005',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:02',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100005',
|
||||
no_antrian: 'HO1002',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '11412684',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'Online 25#27100005',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
no: 6,
|
||||
tgl_daftar: '2025-08-13 00:00:03',
|
||||
no_barcode: '25027100006',
|
||||
no_antrian: 'HO1003',
|
||||
@@ -205,10 +206,22 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100006',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:03',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100006',
|
||||
no_antrian: 'HO1003',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'Online 25#27100006',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
no: 7,
|
||||
tgl_daftar: '2025-08-13 00:00:03',
|
||||
no_barcode: '25027100007',
|
||||
no_antrian: 'IP1001',
|
||||
@@ -219,10 +232,22 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100007',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:03',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100007',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '11555500',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'FINGATMANA ONLINE',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
no: 8,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100008',
|
||||
no_antrian: 'IP1001',
|
||||
@@ -233,10 +258,22 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100008',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:04',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100008',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '11333855',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'Online 25#27100008',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
no: 9,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100009',
|
||||
no_antrian: 'IP1001',
|
||||
@@ -247,10 +284,22 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100009',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:04',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100009',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '11565554',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'Online 25#27100009',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
no: 10,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100010',
|
||||
no_antrian: 'IP1001',
|
||||
@@ -261,36 +310,41 @@ const pasienItems = ref([
|
||||
keterangan: 'Online 25#27100010',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
editData: {
|
||||
tanggal_daftar: '2025-08-13 00:00:04',
|
||||
tanggal_periksa: '2025-08-27',
|
||||
no_barcode: '25027100010',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: 'Belum Mendapatkan Antrian Klinik',
|
||||
no_rekammedik: '11627608',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1 = Mulai Pukul 07:00',
|
||||
keterangan: 'Online 25#27100010',
|
||||
pembayaran: 'JKN'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
// Computed
|
||||
const totalItems = computed(() => pasienItems.value.length);
|
||||
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
|
||||
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
|
||||
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
|
||||
|
||||
// Methods
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'Tunggu Daftar':
|
||||
return 'orange';
|
||||
case 'Barcode':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'grey';
|
||||
}
|
||||
const addPatient = () => {
|
||||
// Navigate to add patient page
|
||||
navigateTo('/data-pasien/add');
|
||||
};
|
||||
|
||||
const viewPasien = (item) => {
|
||||
// Implement view functionality
|
||||
console.log('View pasien:', item);
|
||||
// You can navigate to a view page or open a modal
|
||||
// navigateTo(`/data-pasien/view/${item.id}`);
|
||||
};
|
||||
|
||||
const editPasien = (item) => {
|
||||
// Navigate to edit page
|
||||
navigateTo(`/data-pasien/edit/${item.id}`);
|
||||
};
|
||||
|
||||
// Provide data globally untuk diakses oleh halaman edit
|
||||
provide('pasienData', pasienItems);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -305,8 +359,4 @@ const editPasien = (item) => {
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #d32f2f;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user