update komponen, data pasien, list pasien, screen
This commit is contained in:
bagus-arie05
No files matched your search
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 font-weight-bold mb-6">List Pasien</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<v-card elevation="2">
|
||||
<v-card-text class="pa-6">
|
||||
<TabelListPasien
|
||||
:items="pasienData"
|
||||
@search="handleSearch"
|
||||
@export-laporan="handleExportLaporan"
|
||||
@export-laporan-per-klinik="handleExportLaporanPerKlinik"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<v-overlay v-model="loading" class="align-center justify-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
size="64"
|
||||
/>
|
||||
</v-overlay>
|
||||
|
||||
<!-- Success Snackbar -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
location="top right"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="snackbar.show = false"
|
||||
>
|
||||
Close
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import TabelListPasien from '~/components/TabelListPasien.vue'
|
||||
|
||||
// Meta untuk SEO
|
||||
definePageMeta({
|
||||
title: 'List Pasien',
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
// Reactive states
|
||||
const loading = ref(false)
|
||||
const snackbar = ref({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
// Sample data (replace with actual API call)
|
||||
const pasienData = ref([
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3507264104730004',
|
||||
rm: '11412584',
|
||||
barcode: '250627100001',
|
||||
noAntrian: 'HQ1001',
|
||||
klinik: 'HOM',
|
||||
fullName: 'Binti Almatul',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3504096063630001',
|
||||
rm: '',
|
||||
barcode: '250627100002',
|
||||
noAntrian: 'QB1001',
|
||||
klinik: 'KANDUNGAN',
|
||||
fullName: 'maret kumalal',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3507114102250002',
|
||||
rm: '11555560',
|
||||
barcode: '250627100003',
|
||||
noAntrian: 'QB1002',
|
||||
klinik: 'KANDUNGAN',
|
||||
fullName: 'ayu rafti lelu amanda',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3508185040150002',
|
||||
rm: '11333655',
|
||||
barcode: '250627100004',
|
||||
noAntrian: 'AN1001',
|
||||
klinik: 'ANAK',
|
||||
fullName: 'Erin Wahyuni',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3515085040110004',
|
||||
rm: '11585554',
|
||||
barcode: '250627100005',
|
||||
noAntrian: 'IP1001',
|
||||
klinik: 'IPD',
|
||||
fullName: 'Yohana Karina Pusplta Sari',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '3506246105750002',
|
||||
rm: '11527608',
|
||||
barcode: '250627100006',
|
||||
noAntrian: 'IP1001',
|
||||
klinik: 'IPD',
|
||||
fullName: 'Elok Suharsti',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Online',
|
||||
status: 'Tunggu Daftar'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '',
|
||||
rm: '',
|
||||
barcode: '250627100007',
|
||||
noAntrian: 'HQ1002',
|
||||
klinik: 'HOM',
|
||||
fullName: '',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Offline',
|
||||
status: 'Barcode'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '',
|
||||
rm: '',
|
||||
barcode: '250627100008',
|
||||
noAntrian: 'IP1002',
|
||||
klinik: 'IPD',
|
||||
fullName: '',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Offline',
|
||||
status: 'Barcode'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '',
|
||||
rm: '',
|
||||
barcode: '250627100009',
|
||||
noAntrian: 'IP1001',
|
||||
klinik: 'IPD',
|
||||
fullName: '',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Offline',
|
||||
status: 'Barcode'
|
||||
},
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
nik: '',
|
||||
rm: '',
|
||||
barcode: '250627100010',
|
||||
noAntrian: 'IP1001',
|
||||
klinik: 'IPD',
|
||||
fullName: '',
|
||||
shift: 'Shift 1',
|
||||
pembayaran: 'JKN',
|
||||
keterangan: 'Offline',
|
||||
status: 'Barcode'
|
||||
}
|
||||
])
|
||||
|
||||
// Methods
|
||||
const handleSearch = async (filters) => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Here you would typically call your API with filters
|
||||
console.log('Search filters:', filters)
|
||||
|
||||
showSnackbar('Data berhasil difilter', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error searching data:', error)
|
||||
showSnackbar('Gagal memfilter data', 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleExportLaporan = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate export process
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
// Here you would typically call your export API
|
||||
console.log('Exporting laporan pasien...')
|
||||
|
||||
showSnackbar('Laporan pasien berhasil diexport', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error exporting laporan:', error)
|
||||
showSnackbar('Gagal export laporan pasien', 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleExportLaporanPerKlinik = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate export process
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
// Here you would typically call your export API
|
||||
console.log('Exporting laporan pasien per klinik...')
|
||||
|
||||
showSnackbar('Laporan pasien per klinik berhasil diexport', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error exporting laporan per klinik:', error)
|
||||
showSnackbar('Gagal export laporan pasien per klinik', 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showSnackbar = (message, color = 'success') => {
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message,
|
||||
color
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPasienData = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate API call to fetch patient data
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Here you would typically call your API
|
||||
// const response = await $fetch('/api/pasien')
|
||||
// pasienData.value = response.data
|
||||
|
||||
console.log('Patient data loaded successfully')
|
||||
} catch (error) {
|
||||
console.error('Error fetching patient data:', error)
|
||||
showSnackbar('Gagal memuat data pasien', 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchPasienData()
|
||||
})
|
||||
|
||||
// Head untuk SEO
|
||||
useHead({
|
||||
title: 'List Pasien - Antrean RSSA',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Daftar master data seluruh pasien rumah sakit'
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styles if needed */
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="screen-edit">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
|
||||
<h2>Edit Screen</h2>
|
||||
</div>
|
||||
|
||||
<!-- Screen Selection Cards -->
|
||||
<div class="screen-cards mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="screen in screens" :key="screen.id">
|
||||
<v-card
|
||||
:class="['screen-card', { active: selectedScreen?.id === screen.id }]"
|
||||
@click="selectScreen(screen)"
|
||||
elevation="2"
|
||||
>
|
||||
<v-card-title class="text-center">
|
||||
{{ screen.nama }}
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- Selected Screen Display -->
|
||||
<div v-if="selectedScreen" class="mb-4">
|
||||
<v-chip color="primary" size="large">
|
||||
Selected: {{ selectedScreen.nama }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Clinic Selection Table -->
|
||||
<TabelLayanan
|
||||
v-if="selectedScreen"
|
||||
:headers="computedHeaders"
|
||||
:items="klinikItems"
|
||||
:selectedItems="selectedKlinik"
|
||||
@update:selectedItems="updateSelectedKlinik"
|
||||
/>
|
||||
|
||||
<!-- 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="!selectedScreen">
|
||||
Submit
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import TabelLayanan from '~/components/TabelLayanan.vue';
|
||||
|
||||
// Get route parameter
|
||||
const route = useRoute();
|
||||
const screenId = route.params.id;
|
||||
|
||||
// Data
|
||||
const selectedScreen = ref(null);
|
||||
const selectedKlinik = ref([]);
|
||||
|
||||
const screens = ref([
|
||||
{ id: 1, nama: 'Screen 1' },
|
||||
{ id: 2, nama: 'Screen 2' },
|
||||
{ id: 3, nama: 'Screen 3' }
|
||||
]);
|
||||
|
||||
const klinikItems = ref([
|
||||
{ id: 1, no: 1, nama_klinik: 'ANAK' },
|
||||
{ id: 2, no: 2, nama_klinik: 'ANESTESI' },
|
||||
{ id: 3, no: 3, nama_klinik: 'BEDAH' },
|
||||
{ id: 4, no: 4, nama_klinik: 'GIGI DAN MULUT' },
|
||||
{ id: 5, no: 5, nama_klinik: 'GERIATRI' },
|
||||
{ id: 6, no: 6, nama_klinik: 'GIZI' },
|
||||
{ id: 7, no: 7, nama_klinik: 'IPD' },
|
||||
{ id: 8, no: 8, nama_klinik: 'JANTUNG' },
|
||||
{ id: 9, no: 9, nama_klinik: 'JIWA' },
|
||||
{ id: 10, no: 10, nama_klinik: 'KUL KEL' },
|
||||
{ id: 11, no: 11, nama_klinik: 'KOMPLEMENTER' },
|
||||
{ id: 12, no: 12, nama_klinik: 'MATA' },
|
||||
{ id: 13, no: 13, nama_klinik: 'SARAF' },
|
||||
{ id: 14, no: 14, nama_klinik: 'KANDUNGAN' },
|
||||
{ id: 15, no: 15, nama_klinik: 'ONKOLOGI' },
|
||||
{ id: 16, no: 16, nama_klinik: 'PARU' },
|
||||
{ id: 17, no: 17, nama_klinik: 'RADIOTERAPI' },
|
||||
{ id: 18, no: 18, nama_klinik: 'REHAB MEDIK' },
|
||||
{ id: 19, no: 19, nama_klinik: 'THT' },
|
||||
{ id: 20, no: 20, nama_klinik: 'MCU' },
|
||||
{ id: 21, no: 21, nama_klinik: 'KEMOTERAPI' },
|
||||
{ id: 22, no: 22, nama_klinik: 'R. TINDAKAN' },
|
||||
{ id: 23, no: 23, nama_klinik: 'HOM' }
|
||||
]);
|
||||
|
||||
// Computed headers based on selected screen
|
||||
const computedHeaders = computed(() => {
|
||||
return [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '80px' },
|
||||
{ title: 'Nama Klinik', key: 'nama_klinik', sortable: true },
|
||||
{ title: 'Pilih', key: 'pilih', sortable: false, width: '100px' }
|
||||
];
|
||||
});
|
||||
|
||||
// Methods
|
||||
const selectScreen = (screen) => {
|
||||
selectedScreen.value = screen;
|
||||
loadScreenData(screen.id);
|
||||
};
|
||||
|
||||
const loadScreenData = (screenId) => {
|
||||
// Simulate loading existing selections for the screen
|
||||
switch(parseInt(screenId)) {
|
||||
case 1:
|
||||
selectedKlinik.value = [1, 2, 3, 4, 5, 6, 7, 8]; // ANAK, ANESTESI, etc.
|
||||
break;
|
||||
case 2:
|
||||
selectedKlinik.value = [9, 10, 11, 12, 13, 14, 15, 16]; // JIWA, KUL KEL, etc.
|
||||
break;
|
||||
case 3:
|
||||
selectedKlinik.value = [17, 18, 19, 20, 21, 22, 23]; // RADIOTERAPI, REHAB MEDIK, etc.
|
||||
break;
|
||||
default:
|
||||
selectedKlinik.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const updateSelectedKlinik = (newSelection) => {
|
||||
selectedKlinik.value = newSelection;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (!selectedScreen.value) {
|
||||
alert('Please select a screen first');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate API call to save the configuration
|
||||
const data = {
|
||||
screenId: selectedScreen.value.id,
|
||||
selectedKlinik: selectedKlinik.value
|
||||
};
|
||||
|
||||
console.log('Saving configuration:', data);
|
||||
alert('Configuration saved successfully!');
|
||||
goBack();
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
goBack();
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
navigateTo('/setting/screen');
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
// Auto-select screen based on route parameter
|
||||
if (screenId) {
|
||||
const screen = screens.value.find(s => s.id == screenId);
|
||||
if (screen) {
|
||||
selectScreen(screen);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screen-edit {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.screen-cards {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.screen-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.screen-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.screen-card.active {
|
||||
border-color: #1976d2;
|
||||
background-color: #f3f7ff;
|
||||
}
|
||||
|
||||
.screen-card .v-card-title {
|
||||
font-weight: 600;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="screen-list">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<h2>Screen</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
|
||||
View
|
||||
</v-btn>
|
||||
<v-btn color="warning" prepend-icon="mdi-pencil">
|
||||
Edit
|
||||
</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="screenItems"
|
||||
:items-per-page="itemsPerPage"
|
||||
:search="search"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:item.no="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.klinik="{ item }">
|
||||
<div class="klinik-tags">
|
||||
<v-chip
|
||||
v-for="klinik in item.klinik"
|
||||
:key="klinik"
|
||||
size="small"
|
||||
class="ma-1"
|
||||
color="red"
|
||||
text-color="white"
|
||||
>
|
||||
{{ klinik }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
size="small"
|
||||
color="primary"
|
||||
@click="editScreen(item)"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<!-- Footer -->
|
||||
<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="5"
|
||||
></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: 'Nama Screen', key: 'nama_screen', sortable: true },
|
||||
{ title: 'Klinik', key: 'klinik', sortable: false },
|
||||
{ title: 'Actions', key: 'actions', sortable: false, width: '100px' }
|
||||
];
|
||||
|
||||
const screenItems = ref([
|
||||
{
|
||||
id: 1,
|
||||
nama_screen: 'Layar Screen 1',
|
||||
klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_screen: 'Layar Screen 2',
|
||||
klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_screen: 'Layar Screen 3',
|
||||
klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
|
||||
}
|
||||
]);
|
||||
|
||||
// Computed
|
||||
const totalItems = computed(() => screenItems.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 editScreen = (item) => {
|
||||
navigateTo(`/setting/screen/edit/${item.id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screen-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.klinik-tags {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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