ahdan15
131 lines
4.3 KiB
Vue
131 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-app>
|
|
<v-main>
|
|
<v-container>
|
|
<v-card title="List Kunjungan Pasien" flat>
|
|
<template v-slot:text>
|
|
<v-row>
|
|
<v-col>
|
|
<div class="border-thin">
|
|
<VForm
|
|
@submit.prevent="get_data">
|
|
<v-container >
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="reqtanggalkunjungan.tanggalawal"
|
|
label="Tanggal Awal"
|
|
type="date"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="reqtanggalkunjungan.tanggalakhir"
|
|
label="Tanggal Akhir"
|
|
type="date"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
|
|
</v-row>
|
|
<VBtn class="mb-5"
|
|
variant="tonal"
|
|
type="submit">
|
|
C A R I
|
|
</VBtn>
|
|
|
|
</v-container>
|
|
</VForm>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"></v-text-field>
|
|
</v-row>
|
|
<!-- </template>
|
|
<template> -->
|
|
</template>
|
|
<v-data-table :headers="headers" :items="dataKunjunganPasien" :search="search" hide-default-header>
|
|
|
|
<template v-slot:body="{items}">
|
|
<tr>
|
|
<th>Tanggal Masuk</th>
|
|
<th>Jam Masuk</th>
|
|
<th>No Rm</th>
|
|
<th>Nama</th>
|
|
<th>Umur</th>
|
|
<th>Jenis Kelamin</th>
|
|
<th> Ruang </th>
|
|
<th> DPJP </th>
|
|
</tr>
|
|
|
|
<tr v-for="(item,index) in items" :key="index">
|
|
<td v-if="index===0 || item.tanggalmasukkunjungan !== items[index-1].tanggalmasukkunjungan"> {{ item.tanggalmasukkunjungan }} </td>
|
|
<td v-else></td>
|
|
<td>{{ item.jammasukkunjungan }}</td>
|
|
<td>{{ item.nomr }}</td>
|
|
<td>{{ item.namalengkap }}</td>
|
|
<td>{{ item.umur }} Tahun</td>
|
|
<td>{{ item.jeniskelamin }}</td>
|
|
<td> {{ item.namaruang }} </td>
|
|
<td>{{ item.namalengkapdokter }}</td>
|
|
</tr>
|
|
</template>
|
|
|
|
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
|
|
const search = ref("");
|
|
const today = new Date();
|
|
const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
|
|
console.log("DATE : ", date)
|
|
const headers = [
|
|
{
|
|
align: 'start',
|
|
key: 'name',
|
|
sortable: false,
|
|
},
|
|
{ key: 'tanggalmasukkunjungan', title: 'Tanggal Masuk' },
|
|
{ key: 'jammasukkunjungan', title: 'Jam Masuk' },
|
|
{ key: 'nomr', title: 'Nomer Rekam Medik' },
|
|
{ key: 'namalengkap', title: 'Nama' },
|
|
{ key: 'umur', title: 'Umur' },
|
|
{ key: 'jeniskelamin', title: 'Jenis Kelamin' },
|
|
{ key: 'namaruang', title: 'Ruang' },
|
|
{ key: 'namalengkapdokter', title: 'Dpjp' },
|
|
];
|
|
const reqtanggalkunjungan = reactive({
|
|
tanggalawal : "2024-12-16",
|
|
tanggalakhir : date,
|
|
})
|
|
const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
|
|
const { loadDataKunjunganPasien } = useDataKunjunganPasien();
|
|
|
|
const get_data = async() => {
|
|
|
|
loadDataKunjunganPasien(reqtanggalkunjungan);
|
|
console.log("DATA", dataKunjunganPasien)
|
|
}
|
|
|
|
onMounted(() => {
|
|
|
|
loadDataKunjunganPasien(reqtanggalkunjungan);
|
|
("DATA", dataKunjunganPasien)
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|