penambahan tabel pencarian, form tambah, form ubah
This commit is contained in:
180
pages/daftar.vue
Normal file
180
pages/daftar.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<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-icon small @click="addTutorial()">mdi-plus-circle</v-icon> -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<VBtn class="mx-2" @click="navigateTo('/formSurkon')">Tambah SURKON</VBtn>
|
||||
<VBtn class="mx-2" @click="navigateTo('/formSubspesialis')">Tambah SUBSPESIALIS</VBtn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field class="mt-5" 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">
|
||||
<!-- <template v-slot:[`item.actions`]="{ item }">
|
||||
<v-icon small class="mr-2" @click="editTutorial(item.id)">mdi-pencil</v-icon>
|
||||
<v-icon small @click="deleteTutorial(item.id)">mdi-delete</v-icon>
|
||||
</template> -->
|
||||
<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-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></v-text-field>
|
||||
</template>
|
||||
|
||||
<v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></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 dialog = reactive({
|
||||
dialog: false,
|
||||
});
|
||||
|
||||
const hapusData = ref(null);
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
|
||||
}
|
||||
|
||||
// const itemsPerPage= 5;
|
||||
const search = ref("");
|
||||
//let form = document.getElementById('search')
|
||||
// if(form) (form as HTMLFormElement).reset();
|
||||
// const { list } = storeToRefs(useSubspesialisStorePost());
|
||||
// const { proses_edit } = useSubspesialisStorePost();
|
||||
|
||||
|
||||
/*function editTutorial(data){
|
||||
// console.log(data)
|
||||
proses_edit()
|
||||
}
|
||||
|
||||
function deleteTutorial(data){
|
||||
console.log(data)
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
const proses_edit = (item)=>{
|
||||
//console.log(item)
|
||||
const { proses_edit } = useSubspesialisStorePost();
|
||||
proses_edit(item);
|
||||
// const {data_edit} = storeToRefs(useSubspesialisStorePost());
|
||||
// console.log(data_edit)
|
||||
// proses_edit(payload);
|
||||
navigateTo(`/formSubspesialis`)
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// console.log(search.value)
|
||||
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" },
|
||||
];
|
||||
const payload = {
|
||||
// no_rm: "",
|
||||
// no_sep: "",
|
||||
// poliklinik: "",
|
||||
// tanggal_awal: "2024-10-16",
|
||||
// tanggal_akhir: "2024-10-30",
|
||||
// offset: "0",
|
||||
// limit: "10",
|
||||
"idxdaftar":"1054782",
|
||||
"noSEP":"1323R0011024V000003",
|
||||
"kodeHFIS":"37092",
|
||||
"id_dokter":"d2014e7d-6bb2-4dcf-99d6-6b830c4adb9a",
|
||||
"kodePoli":"018",
|
||||
"subspesialis":"BEDAH DIGESTIF",
|
||||
"tglRencanaKontrol":"2024-11-26",
|
||||
"user":"dr.DWICHA RAHMAWANSA S.,Sp.B-KBD",
|
||||
"kode_diagnosa":"A02.0",
|
||||
"nama_diagnosa":"Salmonella enteritis",
|
||||
"tipe_surkon":"0",
|
||||
"tipe_rawat":"RJ"
|
||||
};
|
||||
const { subspesialis_ } = storeToRefs(useSubspesialisStore());
|
||||
const { loadSubspesialis } = useSubspesialisStore();
|
||||
|
||||
const { surkon } = storeToRefs(useSubspesialisStorePost());
|
||||
const { loadSurKon } = useSubspesialisStorePost();
|
||||
|
||||
// Call loadSurKon when the page loads
|
||||
onMounted(() => {
|
||||
loadSubspesialis();
|
||||
// loadSurKon(payload);
|
||||
});
|
||||
</script>
|
||||
129
pages/formSubspesialis.vue
Normal file
129
pages/formSubspesialis.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<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>
|
||||
<VContainer class="central">
|
||||
<v-alert
|
||||
class="mb-5"
|
||||
v-model="alert.alert"
|
||||
closable
|
||||
type="success"
|
||||
>
|
||||
This is a success alert that is closable.
|
||||
</v-alert>
|
||||
<VCard width="850" class="ma-auto">
|
||||
<VCardTitle class="text-center">
|
||||
{{ title }}
|
||||
</VCardTitle>
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="form"
|
||||
@submit.prevent="form_proses">
|
||||
<v-container>
|
||||
<v-row justify="space-around">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
name="Idx_daftar"
|
||||
v-model="payload.Idx_daftar"
|
||||
label="Idx daftar"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
name="Kode_dokter"
|
||||
v-model="payload.Kode_dokter"
|
||||
label="Kode dokter"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row justify="space-around">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
name="Kode_dpjp"
|
||||
v-model="payload.Kode_dpjp"
|
||||
label="Kode dpjp"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
name="Kode_poli"
|
||||
v-model="payload.Kode_poli"
|
||||
label="Kode poli"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
type="submit"
|
||||
block>
|
||||
U B A H
|
||||
</VBtn>
|
||||
</v-container>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watchEffect } from "vue";
|
||||
import { useTheme } from "vuetify";
|
||||
import { VForm } from 'vuetify/components';
|
||||
import { storeToRefs } from "pinia";
|
||||
import {useSubspesialisStorePost} from "@/stores/users"
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
|
||||
}
|
||||
|
||||
const {data_edit} = storeToRefs(useSubspesialisStorePost());
|
||||
console.log(data_edit.value)
|
||||
|
||||
const payload = reactive({
|
||||
Idx_daftar: '',
|
||||
Kode_dokter: '',
|
||||
Kode_dpjp: '',
|
||||
Kode_poli: '',
|
||||
})
|
||||
|
||||
const alert = reactive({
|
||||
alert:false
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (data_edit.value) {
|
||||
payload.Idx_daftar = data_edit.value.Idx_daftar || '';
|
||||
payload.Kode_dokter = data_edit.value.Kode_dokter || '';
|
||||
payload.Kode_dpjp = data_edit.value.Kode_dpjp || '';
|
||||
payload.Kode_poli = data_edit.value.Kode_poli || '';
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// console.log(form);
|
||||
const load = ref(false);
|
||||
// console.log(data_edit)
|
||||
|
||||
const form_proses = async() => {
|
||||
if(data_edit.value){
|
||||
alert.alert=true
|
||||
console.log("proses edit dijalankan")
|
||||
//navigateTo(`/`)
|
||||
}else{
|
||||
alert.alert=true
|
||||
console.log("proses tambah yang dijalankan")
|
||||
//navigateTo(`/`)
|
||||
}
|
||||
}
|
||||
const title = computed(()=>data_edit.value ? 'UBAH DATA' : "TAMBAH DATA")
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
257
pages/formSurkon.vue
Normal file
257
pages/formSurkon.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<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>
|
||||
<VContainer class="central">
|
||||
<v-alert
|
||||
class="mb-5"
|
||||
v-model="alert.alert"
|
||||
closable
|
||||
type="success"
|
||||
>
|
||||
This is a success alert that is closable.
|
||||
</v-alert>
|
||||
<VCard width="850" class="ma-auto">
|
||||
<VCardTitle class="text-center">
|
||||
{{ title }}
|
||||
</VCardTitle>
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="form"
|
||||
@submit.prevent="form_proses">
|
||||
<!-- <VTextField
|
||||
label="name"
|
||||
:counter="10"
|
||||
required
|
||||
/>
|
||||
<VTextField
|
||||
label="Description"
|
||||
/>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
type="submit"
|
||||
block>
|
||||
SAVE
|
||||
</VBtn> -->
|
||||
<v-container>
|
||||
<v-row justify="space-around">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*ID belum terisi']"
|
||||
name="idxdaftar"
|
||||
v-model="payload.idxdaftar"
|
||||
label="idx daftar"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*No SEP belum terisi']"
|
||||
name="noSEP"
|
||||
v-model="payload.noSEP"
|
||||
label="No.SEP"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*kode HFIS belum terisi']"
|
||||
name="kodeHFIS"
|
||||
v-model="payload.kodeHFIS"
|
||||
label="kode HFIS"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*ID dokter belum terisi']"
|
||||
name="id_dokter"
|
||||
v-model="payload.id_dokter"
|
||||
label="ID dokter"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*kode Poli belum terisi']"
|
||||
name="kodePoli"
|
||||
v-model="payload.kodePoli"
|
||||
label="kode Poli"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*Sub spesialis belum terisi']"
|
||||
name="subspesialis"
|
||||
v-model="payload.subspesialis"
|
||||
label="sub spesialis"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*tanggal rencana kontrol belum terisi']"
|
||||
name="tglRencanaKontrol"
|
||||
v-model="payload.tglRencanaKontrol"
|
||||
label="tanggal rencana kontrol"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*Nama Dokter belum terisi']"
|
||||
name="user"
|
||||
v-model="payload.user"
|
||||
label="Nama Dokter"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*kode diagnosa belum terisi']"
|
||||
name="kode_diagnosa"
|
||||
v-model="payload.kode_diagnosa"
|
||||
label="kode diagnosa"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*Nama diagnosa belum terisi']"
|
||||
name="nama_diagnosa"
|
||||
v-model="payload.nama_diagnosa"
|
||||
label="Nama Diagnosa"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*tipe surkon belum terisi']"
|
||||
name="tipe_surkon"
|
||||
v-model="payload.tipe_surkon"
|
||||
label="tipe surkon"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
:rules="[v => !!v || '*tipe rawat belum terisi']"
|
||||
name="tipe_rawat"
|
||||
v-model="payload.tipe_rawat"
|
||||
label="tipe rawat"
|
||||
v-if="aksi == true"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
type="submit"
|
||||
block>
|
||||
S I M P A N
|
||||
</VBtn>
|
||||
</v-container>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watchEffect } from "vue";
|
||||
import { useTheme } from "vuetify";
|
||||
import { VForm } from 'vuetify/components';
|
||||
import { storeToRefs } from "pinia";
|
||||
import {useSubspesialisStorePost} from "@/stores/users"
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
|
||||
}
|
||||
|
||||
// const {idxdaftar} = storeToRefs(useSubspesialisStore());
|
||||
// function handleSubmit() {
|
||||
|
||||
// }
|
||||
|
||||
const alert = reactive({
|
||||
alert:false
|
||||
})
|
||||
|
||||
|
||||
const payload = reactive({
|
||||
idxdaftar: '',
|
||||
noSEP: '',
|
||||
kodeHFIS: '',
|
||||
id_dokter: '',
|
||||
kodePoli: '',
|
||||
subspesialis: '',
|
||||
tglRencanaKontrol: '',
|
||||
user: '',
|
||||
kode_diagnosa: '',
|
||||
nama_diagnosa: '',
|
||||
tipe_surkon: '',
|
||||
tipe_rawat: '',
|
||||
})
|
||||
|
||||
|
||||
const load = ref(false);
|
||||
const { surkon } = storeToRefs(useSurkonStorePost());
|
||||
const { simpan_SurKon } = useSurkonStorePost();
|
||||
|
||||
|
||||
const {data_edit} = storeToRefs(useSurkonStorePost());
|
||||
console.log(data_edit.value)
|
||||
|
||||
var aksi = false;
|
||||
watchEffect(() => {
|
||||
if (data_edit.value) {
|
||||
aksi=true;
|
||||
payload.idxdaftar = data_edit.value.Idx_daftar || '';
|
||||
payload.noSEP = data_edit.value.Nomor_sep || '';
|
||||
payload.kodeHFIS = data_edit.value.kodeHFIS || '';//?
|
||||
payload.id_dokter = data_edit.value.id_dokter || '';
|
||||
payload.kodePoli = data_edit.value.Kode_poli || '';
|
||||
payload.subspesialis = data_edit.value.Subspesialis || '';
|
||||
payload.tglRencanaKontrol = data_edit.value.Tanggal_rencana_kontrol || '';
|
||||
payload.user = data_edit.value.user || '';//?
|
||||
payload.kode_diagnosa = data_edit.value.Kode_diagnosa || '';
|
||||
payload.nama_diagnosa = data_edit.value.Nama_diagnosa || '';
|
||||
payload.tipe_surkon = data_edit.value.Tipe_SurKon || '';
|
||||
payload.tipe_rawat = data_edit.value.tipe_rawat || '';//?
|
||||
}
|
||||
})
|
||||
|
||||
const form_proses = async() => {
|
||||
if(data_edit.value){
|
||||
//alert.alert=true
|
||||
console.log("proses edit dijalankan")
|
||||
//navigateTo(`/`)
|
||||
}else{
|
||||
console.log(payload.idxdaftar)
|
||||
simpan_SurKon(payload);
|
||||
//alert.alert=true
|
||||
console.log("proses tambah yang dijalankan")
|
||||
//navigateTo(`/`)
|
||||
}
|
||||
}
|
||||
const title = computed(()=>data_edit.value ? 'UBAH DATA' : "TAMBAH DATA")
|
||||
|
||||
/*const form_proses = async() => {
|
||||
if(payload.idxdaftar){
|
||||
console.log(payload.idxdaftar)
|
||||
loadSurKon(payload);
|
||||
navigateTo(`/`)
|
||||
}else{
|
||||
console.log("kosong")
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
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>
|
||||
77
pages/notif.vue
Normal file
77
pages/notif.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
|
||||
<div class="text-center pa-4">
|
||||
<v-dialog
|
||||
v-model="dialog.dialog"
|
||||
max-width="400"
|
||||
persistent
|
||||
>
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps">
|
||||
Open Dialog
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<!-- <v-card
|
||||
prepend-icon="mdi-map-marker"
|
||||
text="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
|
||||
title="Use Google's location service?"
|
||||
> -->
|
||||
<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="aksi()">
|
||||
Ya
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useTheme } from "vuetify";
|
||||
import { storeToRefs } from "pinia";
|
||||
const theme = useTheme();
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
|
||||
}
|
||||
|
||||
const dialog = reactive({
|
||||
dialog:false
|
||||
})
|
||||
|
||||
const aksi = () => {
|
||||
console.log("data berhasil di hapus")
|
||||
dialog.dialog=false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user