update komponen, data pasien, list pasien, screen
This commit is contained in:
bagus-arie05
@@ -9,8 +9,13 @@
|
||||
<v-checkbox
|
||||
:model-value="isSelected(item.id)"
|
||||
@change="toggleService(item.id)"
|
||||
color="primary"
|
||||
></v-checkbox>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.no="{ item }">
|
||||
{{ item.no }}
|
||||
</template>
|
||||
</v-data-table>
|
||||
</template>
|
||||
|
||||
@@ -34,4 +39,14 @@ const toggleService = (id) => {
|
||||
|
||||
emit('update:selectedItems', newSelection);
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-data-table {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.v-checkbox {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
318
components/TabelListPasien.vue
Normal file
318
components/TabelListPasien.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Filter Section -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="filterDate"
|
||||
type="date"
|
||||
label="Tanggal"
|
||||
density="compact"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="filterStatus"
|
||||
:items="statusOptions"
|
||||
label="Status"
|
||||
density="compact"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex align-center gap-2">
|
||||
<v-btn color="primary" @click="searchData">
|
||||
Search
|
||||
</v-btn>
|
||||
<v-btn color="success" variant="outlined" @click="exportLaporan">
|
||||
Laporan Pasien
|
||||
</v-btn>
|
||||
<v-btn color="info" variant="outlined" @click="exportLaporanPerKlinik">
|
||||
Laporan Pasien Per Klinik
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Table Controls -->
|
||||
<v-row class="mb-3">
|
||||
<v-col cols="12" md="6" class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
hide-details
|
||||
style="width: 80px"
|
||||
variant="outlined"
|
||||
/>
|
||||
<span class="ml-2">entries</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-end">
|
||||
<div class="d-flex align-center">
|
||||
<span class="mr-2">Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact"
|
||||
hide-details
|
||||
style="min-width: 200px"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Data Table -->
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="paginatedItems"
|
||||
:search="search"
|
||||
hide-default-footer
|
||||
class="elevation-1"
|
||||
>
|
||||
<!-- Custom Status Column -->
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip
|
||||
:color="getStatusColor(item.status)"
|
||||
size="small"
|
||||
variant="flat"
|
||||
>
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<!-- Custom Keterangan Column -->
|
||||
<template v-slot:item.keterangan="{ item }">
|
||||
<span :class="getKeteranganClass(item.keterangan)">
|
||||
{{ item.keterangan }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- No Data -->
|
||||
<template #no-data>
|
||||
<div class="text-center pa-4">
|
||||
No data available in table
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="d-flex justify-space-between align-center pa-4">
|
||||
<div class="text-body-2 text-grey-darken-1">
|
||||
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalFilteredItems }} entries
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<v-btn
|
||||
:disabled="currentPage === 1"
|
||||
@click="previousPage"
|
||||
variant="text"
|
||||
size="small"
|
||||
>
|
||||
Previous
|
||||
</v-btn>
|
||||
<template v-for="page in visiblePages" :key="page">
|
||||
<v-btn
|
||||
v-if="page !== '...'"
|
||||
:color="page === currentPage ? 'primary' : ''"
|
||||
:variant="page === currentPage ? 'flat' : 'text'"
|
||||
@click="goToPage(page)"
|
||||
size="small"
|
||||
class="mx-1"
|
||||
min-width="40"
|
||||
>
|
||||
{{ page }}
|
||||
</v-btn>
|
||||
<span v-else class="mx-1">...</span>
|
||||
</template>
|
||||
<v-btn
|
||||
:disabled="currentPage === totalPages"
|
||||
@click="nextPage"
|
||||
variant="text"
|
||||
size="small"
|
||||
>
|
||||
Next
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['search', 'export-laporan', 'export-laporan-per-klinik'])
|
||||
|
||||
// Filter states
|
||||
const filterDate = ref('')
|
||||
const filterStatus = ref('Semua')
|
||||
const search = ref('')
|
||||
|
||||
// Pagination states
|
||||
const itemsPerPage = ref(10)
|
||||
const currentPage = ref(1)
|
||||
|
||||
// Status options
|
||||
const statusOptions = ['Semua', 'Online', 'Offline', 'Tunggu Daftar', 'Barcode']
|
||||
|
||||
// Table headers
|
||||
const headers = [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '60px' },
|
||||
{ title: 'Tgl Periksa', key: 'tglPeriksa', sortable: true },
|
||||
{ title: 'NIK', key: 'nik', sortable: true },
|
||||
{ title: 'RM', key: 'rm', sortable: true },
|
||||
{ title: 'Barcode', key: 'barcode', sortable: true },
|
||||
{ title: 'No Antrian', key: 'noAntrian', sortable: true },
|
||||
{ title: 'Klinik', key: 'klinik', sortable: true },
|
||||
{ title: 'First Name Last Name', key: 'fullName', sortable: true },
|
||||
{ title: 'Shift', key: 'shift', sortable: true },
|
||||
{ title: 'Pembayaran', key: 'pembayaran', sortable: true },
|
||||
{ title: 'Keterangan', key: 'keterangan', sortable: true },
|
||||
{ title: 'Status', key: 'status', sortable: true }
|
||||
]
|
||||
|
||||
// Computed properties
|
||||
const filteredItems = computed(() => {
|
||||
let filtered = props.items
|
||||
|
||||
// Filter by date
|
||||
if (filterDate.value) {
|
||||
filtered = filtered.filter(item =>
|
||||
item.tglPeriksa === filterDate.value
|
||||
)
|
||||
}
|
||||
|
||||
// Filter by status
|
||||
if (filterStatus.value && filterStatus.value !== 'Semua') {
|
||||
filtered = filtered.filter(item =>
|
||||
item.status === filterStatus.value
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const totalFilteredItems = computed(() => filteredItems.value.length)
|
||||
const totalPages = computed(() => Math.ceil(totalFilteredItems.value / itemsPerPage.value))
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (currentPage.value - 1) * itemsPerPage.value
|
||||
const end = start + itemsPerPage.value
|
||||
return filteredItems.value.slice(start, end).map((item, index) => ({
|
||||
...item,
|
||||
no: start + index + 1
|
||||
}))
|
||||
})
|
||||
|
||||
const currentPageStart = computed(() =>
|
||||
totalFilteredItems.value === 0 ? 0 : (currentPage.value - 1) * itemsPerPage.value + 1
|
||||
)
|
||||
|
||||
const currentPageEnd = computed(() =>
|
||||
Math.min(currentPage.value * itemsPerPage.value, totalFilteredItems.value)
|
||||
)
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = []
|
||||
const total = totalPages.value
|
||||
const current = currentPage.value
|
||||
|
||||
if (total <= 7) {
|
||||
for (let i = 1; i <= total; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
} else {
|
||||
if (current <= 4) {
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
pages.push('...')
|
||||
pages.push(total)
|
||||
} else if (current >= total - 3) {
|
||||
pages.push(1)
|
||||
pages.push('...')
|
||||
for (let i = total - 4; i <= total; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
} else {
|
||||
pages.push(1)
|
||||
pages.push('...')
|
||||
for (let i = current - 1; i <= current + 1; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
pages.push('...')
|
||||
pages.push(total)
|
||||
}
|
||||
}
|
||||
return pages
|
||||
})
|
||||
|
||||
// Methods
|
||||
const searchData = () => {
|
||||
currentPage.value = 1
|
||||
emit('search', {
|
||||
date: filterDate.value,
|
||||
status: filterStatus.value
|
||||
})
|
||||
}
|
||||
|
||||
const exportLaporan = () => {
|
||||
emit('export-laporan')
|
||||
}
|
||||
|
||||
const exportLaporanPerKlinik = () => {
|
||||
emit('export-laporan-per-klinik')
|
||||
}
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
'Online': 'success',
|
||||
'Offline': 'error',
|
||||
'Tunggu Daftar': 'warning',
|
||||
'Barcode': 'info'
|
||||
}
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
const getKeteranganClass = (keterangan) => {
|
||||
return keterangan === 'Online' ? 'text-success' : ''
|
||||
}
|
||||
|
||||
const previousPage = () => {
|
||||
if (currentPage.value > 1) {
|
||||
currentPage.value--
|
||||
}
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
if (currentPage.value < totalPages.value) {
|
||||
currentPage.value++
|
||||
}
|
||||
}
|
||||
|
||||
const goToPage = (page) => {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
// Watchers
|
||||
watch(itemsPerPage, () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
|
||||
watch([filterDate, filterStatus], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-success {
|
||||
color: rgb(76, 175, 80) !important;
|
||||
}
|
||||
</style>
|
||||
310
pages/List-Pasien.vue
Normal file
310
pages/List-Pasien.vue
Normal file
@@ -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>
|
||||
204
pages/Setting/Screen/edit/[id].vue
Normal file
204
pages/Setting/Screen/edit/[id].vue
Normal file
@@ -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>
|
||||
151
pages/Setting/Screen/index.vue
Normal file
151
pages/Setting/Screen/index.vue
Normal file
@@ -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>
|
||||
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