Files
Web-Antrean/pages/Setting/Master-Loket.vue
2025-08-26 14:57:13 +07:00

61 lines
2.1 KiB
Vue

<template>
<v-container>
<v-card>
<v-card-title class="d-flex justify-space-between align-center">
<span>Master Loket</span>
<v-btn color="primary" @click="tambahLoket">Tambah Baru</v-btn>
</v-card-title>
<TabelData
:headers="loketHeaders"
:items="loketData"
title="Master Loket"
>
<template #actions="{ item }">
<v-btn small color="info" @click="editLoket(item)" class="mr-2">Edit</v-btn>
<v-btn small color="error" @click="deleteLoket(item)">Delete</v-btn>
</template>
</TabelData>
</v-card>
</v-container>
</template>
<script setup>
import { ref } from 'vue';
import TabelData from '../../components/TabelData.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const loketHeaders = ref([
{ title: 'No', value: 'no' },
{ title: 'Nama Loket', value: 'namaLoket' },
{ title: 'Kuota', value: 'kuota' },
{ title: 'Pelayanan', value: 'pelayanan' },
{ title: 'Pembayaran', value: 'pembayaran' },
{ title: 'Keterangan', value: 'keterangan' },
{ title: 'Aksi', value: 'aksi', sortable: false }, // 'value' harus 'actions'
]);
// Master-Loket.vue
const loketData = ref([
{ id: 1, no: 1, namaLoket: 'Loket 1', kuota: 500, pelayanan: ['RADIOTERAPI', 'REHAB MEDIK', 'TINDAKAN'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 2, no: 2, namaLoket: 'Loket 2', kuota: 666, pelayanan: ['JIWA', 'SARAF'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 3, no: 3, namaLoket: 'Loket 3', kuota: 666, pelayanan: ['ANESTESI', 'JANTUNG'], pembayaran: 'JKN', keterangan: 'ONLINE' },
{ id: 4, no: 4, namaLoket: 'Loket 4', kuota: 3676, pelayanan: ['KULIT KELAMIN', 'PARU'], pembayaran: 'JKN', keterangan: 'ONLINE' },
]);
const editLoket = (item) => {
router.push({ path: `/Setting/Edit-Loket/${item.id}` });
};
const deleteLoket = (item) => {
const index = loketData.value.findIndex(loket => loket.id === item.id);
if (index !== -1) {
loketData.value.splice(index, 1);
}
};
const tambahLoket = () => {
router.push({ path: '/Setting/Tambah-Loket' });
};
</script>