arie.bagus.2905/Web-Antrean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update komponen, data pasien, list pasien, screen

Browse Source
This commit is contained in:
bagus-arie05
2025-08-27 15:52:38 +07:00
parent 15c49262f1
commit 89b36b7d1f
7 changed files with 1618 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
pages/data-pasien/edit/[id].vue Normal file
View 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>