109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-app>
|
|
<v-main>
|
|
<v-container>
|
|
<v-card title="List Kunjungan Pasien" elevation="2" flat class="mx-auto my-8">
|
|
<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="2">
|
|
<v-text-field
|
|
v-model="reqtanggalkunjungan.tanggalawal"
|
|
label="Tanggal Awal"
|
|
type="date"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="2">
|
|
|
|
<VueDatePicker v-model="reqtanggalkunjungan.tanggalakhir" :enable-time-picker="false" label="Tanggal Akhir"/>
|
|
|
|
</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" width="500px"></v-text-field>
|
|
</v-row>
|
|
</template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="dataKunjunganPasien"
|
|
:search="search">
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
|
import '@vuepic/vue-datepicker/dist/main.css'
|
|
|
|
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-17",
|
|
tanggalakhir : date,
|
|
})
|
|
|
|
|
|
const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
|
|
const { loadDataKunjunganPasien } = useDataKunjunganPasien();
|
|
|
|
const get_data = async() => {
|
|
console.log(reqtanggalkunjungan)
|
|
loadDataKunjunganPasien(reqtanggalkunjungan);
|
|
console.log("DATA", dataKunjunganPasien)
|
|
|
|
}
|
|
|
|
onMounted(() => {
|
|
|
|
loadDataKunjunganPasien(reqtanggalkunjungan);
|
|
("DATA", reqtanggalkunjungan)
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|