penambahan tabel pencarian, form tambah, form ubah
This commit is contained in:
270
pages/index.vue
Normal file
270
pages/index.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-app>
|
||||
<v-app-bar>
|
||||
<v-app-bar-title>Hello</v-app-bar-title>
|
||||
<v-spacer />
|
||||
<v-btn @click="toggleTheme">
|
||||
<v-icon>ph:sun</v-icon>
|
||||
toggle thema</v-btn>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<!-- <v-container>
|
||||
<v-card title="List Surat Kontrol" flat>
|
||||
<template v-slot:text>
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
|
||||
</template>
|
||||
|
||||
<v-data-table :headers="headers" :items="subspesialis" F :search="search"></v-data-table>
|
||||
</v-card>
|
||||
</v-container> -->
|
||||
<v-container>
|
||||
<v-card title="List Surat Kontrol" flat>
|
||||
<template v-slot:text>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<VForm v-model="valid"
|
||||
@submit.prevent="form_proses">
|
||||
<v-container >
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="tanggal_awal"
|
||||
label="Tanggal Awal"
|
||||
type="date"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="tanggal_akhir"
|
||||
label="Tanggal Akhir"
|
||||
type="date"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<!-- <v-select
|
||||
v-model="poliklinik"
|
||||
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
|
||||
label="Subspesialis"
|
||||
variant="outlined"
|
||||
/> -->
|
||||
<v-autocomplete
|
||||
label="Poliklinik"
|
||||
v-model="poliklinik"
|
||||
:items="subspesialis"
|
||||
item-title="Subspesialis"
|
||||
item-value="id"
|
||||
dense
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="firstname"
|
||||
:counter="10"
|
||||
:rules="nameRules"
|
||||
label="First name"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="lastname"
|
||||
:counter="10"
|
||||
:rules="nameRules"
|
||||
label="Last name"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:rules="emailRules"
|
||||
label="E-mail"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
type="submit">
|
||||
C A R I
|
||||
</VBtn>
|
||||
</v-container>
|
||||
</VForm>
|
||||
</template>
|
||||
<v-data-table :headers="headers" :items="surkon.list_data" F :search="search">
|
||||
<template v-slot:item.action="{ item }">
|
||||
<v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
|
||||
<v-icon small @click="modal_hapus(item)">mdi-delete</v-icon>
|
||||
<!-- <v-btn>OPEN</v-btn> -->
|
||||
</template>
|
||||
</v-data-table>
|
||||
<!-- <v-data-table :headers="headers2" :items="subspesialis" F :search="search">
|
||||
<template v-slot:item.action="{ item }">
|
||||
<v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
|
||||
<v-icon small @click="deleteTutorial(item)">mdi-delete</v-icon>
|
||||
</template>
|
||||
</v-data-table> -->
|
||||
</v-card>
|
||||
</v-container>
|
||||
<!-- Dialog Konfirmasi Hapus -->
|
||||
<v-dialog v-model="dialog.dialog" max-width="400" persistent>
|
||||
<!-- <template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" style="display: none;">Open Dialog</v-btn>
|
||||
</template> -->
|
||||
|
||||
<v-card>
|
||||
<v-toolbar dense flat class="body-2 font-weight-bold px-5">
|
||||
Konfirmasi
|
||||
</v-toolbar>
|
||||
<v-row class="ma-1">
|
||||
<v-col cols="12">
|
||||
Yakin akan dihapus?
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<template v-slot:actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="dialog.dialog = false">Tidak</v-btn>
|
||||
<v-btn @click="proses_hapus()">Ya</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ref, reactive } from "vue";
|
||||
import { useTheme } from "vuetify";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const theme = useTheme();
|
||||
const tanggal_awal = ref(null);
|
||||
const tanggal_akhir = ref(null);
|
||||
const poliklinik = ref(null);
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
|
||||
}
|
||||
|
||||
// const itemsPerPage= 5;
|
||||
const search = ref("");
|
||||
const headers = [
|
||||
{
|
||||
align: 'start',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
},
|
||||
{ key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
|
||||
{ key: 'Nomor_sep', title: 'Nomor sep' },
|
||||
{ key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
|
||||
{ key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
|
||||
{ key: 'No_rm', title: 'Nomor Rekam Medik' },
|
||||
{ key: 'NamaDokter', title: 'Nama Dokter' },
|
||||
{ text: "", value: "action", title:'Aksi' },
|
||||
];
|
||||
const payload = {
|
||||
// no_rm: "",
|
||||
// no_sep: "",
|
||||
// poliklinik: "",
|
||||
// tanggal_awal: "2024-10-16",
|
||||
// tanggal_akhir: "2024-11-30",
|
||||
// tipe_surkon : "0",
|
||||
// offset: "0",
|
||||
// limit: "10",
|
||||
no_rm: "",
|
||||
no_sep: "",
|
||||
poliklinik: "",
|
||||
tanggal_awal: "",
|
||||
tanggal_akhir: "",
|
||||
tipe_surkon : "1",
|
||||
offset: "0",
|
||||
limit: "10",
|
||||
};
|
||||
|
||||
const { surkon } = storeToRefs(useSurkonStorePost());
|
||||
const { loadSurKon } = useSurkonStorePost();
|
||||
|
||||
|
||||
const { subspesialis,loadSubspesialisData } = useSubspesialisStore();
|
||||
const headers2 = [
|
||||
{
|
||||
align: 'start',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
},
|
||||
{ key: 'id', title: 'ID' },
|
||||
{ key: 'Kode', title: 'Kode' },
|
||||
{ key: 'Subspesialis', title: 'Subspesialis' },
|
||||
{ key: 'FK_daftar_spesialis_ID', title: 'FK_daftar_spesialis_ID' },
|
||||
{ key: 'Spesialis', title: 'Spesialis' },
|
||||
{ text: "", value: "action" },
|
||||
];
|
||||
|
||||
// console.log(subspesialis)
|
||||
const form_proses = async() => {
|
||||
// console.log(payload.tanggal_awal, typeof payload.tanggal_awal);
|
||||
// loadSurKon(payload);
|
||||
payload.tanggal_awal = tanggal_awal._value;
|
||||
payload.tanggal_akhir = tanggal_akhir._value;
|
||||
payload.poliklinik = poliklinik._value.toString();
|
||||
console.log(payload)
|
||||
// console.log(subspesialis)
|
||||
loadSurKon(payload);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// console.log(subspesialis)
|
||||
|
||||
onMounted(() => {
|
||||
// loadSurKon(payload);
|
||||
loadSubspesialisData();
|
||||
});
|
||||
|
||||
|
||||
const proses_edit = (item)=>{
|
||||
// console.log(item)
|
||||
const { proses_edit } = useSurkonStorePost();
|
||||
proses_edit(item);
|
||||
navigateTo(`/formSurkon`)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const dialog = reactive({
|
||||
dialog: false,
|
||||
});
|
||||
const hapusData = ref(null);
|
||||
|
||||
const modal_hapus = (item) => {
|
||||
hapusData.value = item;
|
||||
dialog.dialog = true;
|
||||
}
|
||||
|
||||
const proses_hapus = () => {
|
||||
console.log("proses hapus")
|
||||
console.log(hapusData.value)
|
||||
// console.log(hapusData.value.id)
|
||||
dialog.dialog = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user