update komponen, data pasien, list pasien, screen
This commit is contained in:
bagus-arie05
307
pages/data-pasien/edit/[id].vue
Normal file
307
pages/data-pasien/edit/[id].vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="edit-pasien">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
|
||||
<h2>Edit Pasien</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<v-card class="pa-6" elevation="2">
|
||||
<v-form ref="form" v-model="valid">
|
||||
<v-row>
|
||||
<!-- Tanggal Daftar -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.tanggal_daftar"
|
||||
label="Tanggal Daftar"
|
||||
variant="outlined"
|
||||
readonly
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Tanggal Periksa -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.tanggal_periksa"
|
||||
label="Tanggal Periksa"
|
||||
variant="outlined"
|
||||
type="date"
|
||||
density="compact"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- No Barcode -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.no_barcode"
|
||||
label="No Barcode"
|
||||
variant="outlined"
|
||||
readonly
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- No Antrian -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.no_antrian"
|
||||
label="No Antrian"
|
||||
variant="outlined"
|
||||
readonly
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- No Klinik -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.no_klinik"
|
||||
label="No Klinik"
|
||||
variant="outlined"
|
||||
placeholder="Belum Mendapatkan Antrian Klinik"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- No Rekammedik -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formData.no_rekammedik"
|
||||
label="No Rekammedik"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Klinik -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="formData.klinik"
|
||||
label="Klinik"
|
||||
:items="klinikOptions"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[rules.required]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
|
||||
<!-- Shift -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="formData.shift"
|
||||
label="Shift"
|
||||
:items="shiftOptions"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[rules.required]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
|
||||
<!-- Keterangan -->
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="formData.keterangan"
|
||||
label="Keterangan"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<span class="text-red font-weight-bold">
|
||||
{{ formData.keterangan }}
|
||||
</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Pembayaran -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="formData.pembayaran"
|
||||
label="Pembayaran"
|
||||
:items="pembayaranOptions"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[rules.required]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex justify-end gap-4 mt-6">
|
||||
<v-btn variant="outlined" @click="cancel">
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="warning"
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
:loading="loading"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const route = useRoute();
|
||||
const pasienId = route.params.id;
|
||||
|
||||
// Form data
|
||||
const valid = ref(false);
|
||||
const loading = ref(false);
|
||||
const form = ref(null);
|
||||
|
||||
const formData = ref({
|
||||
tanggal_daftar: '',
|
||||
tanggal_periksa: '',
|
||||
no_barcode: '',
|
||||
no_antrian: '',
|
||||
no_klinik: '',
|
||||
no_rekammedik: '',
|
||||
klinik: '',
|
||||
shift: '',
|
||||
keterangan: '',
|
||||
pembayaran: ''
|
||||
});
|
||||
|
||||
// Options
|
||||
const klinikOptions = [
|
||||
'HOM',
|
||||
'KANDUNGAN',
|
||||
'ANAK',
|
||||
'IPD',
|
||||
'JIWA',
|
||||
'KUL KEL',
|
||||
'KOMPLEMENTER',
|
||||
'MATA',
|
||||
'SARAF',
|
||||
'ONKOLOGI',
|
||||
'PARU',
|
||||
'RADIOTERAPI',
|
||||
'REHAB MEDIK',
|
||||
'THT',
|
||||
'MCU',
|
||||
'KEMOTERAPI',
|
||||
'R. TINDAKAN',
|
||||
'ANESTESI',
|
||||
'BEDAH',
|
||||
'GIGI DAN MULUT',
|
||||
'GERIATRI',
|
||||
'GIZI',
|
||||
'JANTUNG'
|
||||
];
|
||||
|
||||
const shiftOptions = [
|
||||
'Shift 1 = Mulai Pukul 07:00',
|
||||
'Shift 2 = Mulai Pukul 13:00',
|
||||
'Shift 3 = Mulai Pukul 19:00'
|
||||
];
|
||||
|
||||
const pembayaranOptions = [
|
||||
'JKN',
|
||||
'UMUM',
|
||||
'ASURANSI',
|
||||
'KARYAWAN'
|
||||
];
|
||||
|
||||
// Validation rules
|
||||
const rules = {
|
||||
required: value => !!value || 'Field ini wajib diisi'
|
||||
};
|
||||
|
||||
// Mock data for editing
|
||||
const mockPasienData = {
|
||||
1: {
|
||||
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'
|
||||
},
|
||||
2: {
|
||||
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'
|
||||
}
|
||||
};
|
||||
|
||||
// Methods
|
||||
const loadPasienData = () => {
|
||||
const data = mockPasienData[pasienId];
|
||||
if (data) {
|
||||
formData.value = { ...data };
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!valid.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
console.log('Updating pasien data:', formData.value);
|
||||
|
||||
// Show success message (you can use a toast/snackbar here)
|
||||
alert('Data pasien berhasil diperbarui!');
|
||||
|
||||
// Navigate back to list
|
||||
goBack();
|
||||
} catch (error) {
|
||||
console.error('Error updating pasien:', error);
|
||||
alert('Gagal memperbarui data pasien!');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
goBack();
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
navigateTo('/data-pasien');
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
loadPasienData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-pasien {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #d32f2f;
|
||||
}
|
||||
</style>
|
||||
312
pages/data-pasien/index.vue
Normal file
312
pages/data-pasien/index.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<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">
|
||||
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
|
||||
:headers="headers"
|
||||
:items="pasienItems"
|
||||
:items-per-page="itemsPerPage"
|
||||
:search="search"
|
||||
class="elevation-1"
|
||||
item-value="id"
|
||||
>
|
||||
<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 }">
|
||||
<div class="d-flex gap-1">
|
||||
<v-btn
|
||||
icon="mdi-eye"
|
||||
size="small"
|
||||
color="primary"
|
||||
@click="viewPasien(item)"
|
||||
></v-btn>
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
size="small"
|
||||
color="warning"
|
||||
@click="editPasien(item)"
|
||||
></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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// Data
|
||||
const search = ref('');
|
||||
const itemsPerPage = ref(10);
|
||||
const currentPage = ref(1);
|
||||
|
||||
const headers = [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '60px' },
|
||||
{ title: 'Tgl Daftar', key: 'tgl_daftar', sortable: true, width: '140px' },
|
||||
{ title: 'No Barcode', key: 'no_barcode', sortable: true, width: '120px' },
|
||||
{ title: 'No Antrian', key: 'no_antrian', sortable: true, width: '100px' },
|
||||
{ title: 'No Klinik', key: 'no_klinik', sortable: true, width: '100px' },
|
||||
{ title: 'RM', key: 'rm', sortable: true, width: '100px' },
|
||||
{ title: 'Klinik', key: 'klinik', sortable: true, width: '120px' },
|
||||
{ title: 'Shift', key: 'shift', sortable: true, width: '80px' },
|
||||
{ title: 'Ket', key: 'keterangan', sortable: false, width: '150px' },
|
||||
{ title: 'Pembayaran', key: 'pembayaran', sortable: true, width: '100px' },
|
||||
{ title: 'Status', key: 'status', sortable: true, width: '120px' },
|
||||
{ title: 'Aksi', key: 'aksi', sortable: false, width: '100px' }
|
||||
];
|
||||
|
||||
const pasienItems = ref([
|
||||
{
|
||||
id: 1,
|
||||
tgl_daftar: '2025-07-15 13:47:33',
|
||||
no_barcode: '25027100001',
|
||||
no_antrian: 'HO1001',
|
||||
no_klinik: '',
|
||||
rm: '',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tgl_daftar: '2025-07-24 13:50:01',
|
||||
no_barcode: '25027100002',
|
||||
no_antrian: 'OB1001',
|
||||
no_klinik: '',
|
||||
rm: '',
|
||||
klinik: 'KANDUNGAN',
|
||||
shift: 'Shift 1',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tgl_daftar: '2025-07-24 13:50:37',
|
||||
no_barcode: '25027100003',
|
||||
no_antrian: 'OB1002',
|
||||
no_klinik: '',
|
||||
rm: '',
|
||||
klinik: 'KANDUNGAN',
|
||||
shift: 'Shift 1',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
tgl_daftar: '2025-07-28 08:18:20',
|
||||
no_barcode: '25027100004',
|
||||
no_antrian: 'AN1001',
|
||||
no_klinik: '',
|
||||
rm: '',
|
||||
klinik: 'ANAK',
|
||||
shift: 'Shift 1',
|
||||
keterangan: '',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Barcode',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
tgl_daftar: '2025-08-13 00:00:02',
|
||||
no_barcode: '25027100005',
|
||||
no_antrian: 'HO1002',
|
||||
no_klinik: '',
|
||||
rm: '11412684',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100005',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
tgl_daftar: '2025-08-13 00:00:03',
|
||||
no_barcode: '25027100006',
|
||||
no_antrian: 'HO1003',
|
||||
no_klinik: '',
|
||||
rm: '',
|
||||
klinik: 'HOM',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100006',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
tgl_daftar: '2025-08-13 00:00:03',
|
||||
no_barcode: '25027100007',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: '',
|
||||
rm: '11555500',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100007',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100008',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: '',
|
||||
rm: '11333855',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100008',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100009',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: '',
|
||||
rm: '11565554',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100009',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
tgl_daftar: '2025-08-13 00:00:04',
|
||||
no_barcode: '25027100010',
|
||||
no_antrian: 'IP1001',
|
||||
no_klinik: '',
|
||||
rm: '11627608',
|
||||
klinik: 'IPD',
|
||||
shift: 'Shift 1',
|
||||
keterangan: 'Online 25#27100010',
|
||||
pembayaran: 'JKN',
|
||||
status: 'Tunggu Daftar',
|
||||
aksi: ''
|
||||
}
|
||||
]);
|
||||
|
||||
// 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 viewPasien = (item) => {
|
||||
// Implement view functionality
|
||||
console.log('View pasien:', item);
|
||||
};
|
||||
|
||||
const editPasien = (item) => {
|
||||
navigateTo(`/data-pasien/edit/${item.id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-pasien {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #d32f2f;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user