Files
westone-ui/registration/components/tabs.vue
2024-10-28 09:33:12 +07:00

79 lines
1.9 KiB
Vue

<template>
<div>
<v-card class="mb-0 pa-2 mt-0 pt-0">
<v-tabs v-model="tab" align-tabs="center" color="primary" grow>
<v-tab :value="1">DEMOGRAFI</v-tab>
<v-tab :value="2">PEMERIKSAAN</v-tab>
<v-tab :value="3">KIRIM HASIL</v-tab>
<v-tab disabled :value="4">PEMBAYARAN</v-tab>
</v-tabs>
</v-card>
<v-tabs-window v-model="tab">
<v-tabs-window-item v-for="n in 3" :key="n" :value="n">
<v-row class="no-gutters">
<v-col cols="12" md="6" sm="12" xs="12" class="mt-3 pr-1">
<datatable-patient v-if="tab === 1"></datatable-patient>
</v-col>
<v-col cols="12" md="6" sm="12" xs="12" class="pl-1 mt-3">
<form-patient v-if="tab === 1"></form-patient>
</v-col>
</v-row>
</v-tabs-window-item>
</v-tabs-window>
</div>
</template>
<script type="module">
import DatatablePatient from "./datatable_patient.vue";
import FormPatient from "./form_patient.vue";
export default {
name: "filtercomp",
components: {
"datatable-patient": DatatablePatient,
"form-patient": FormPatient,
},
mounted() {},
data() {
return {
menu: false,
visible: false,
tab: null,
};
},
computed: {
date: {
get() {
return this.$store.state.collection.date;
},
set(val) {
this.$store.commit("setDate", val);
},
},
temp_dropdown: {
get() {
return this.$store.state.collection.temp_dropdown;
},
},
},
methods: {
formatDate() {
if (!this.date) return null;
return moment(this.date).format("DD-MM-YYYY");
},
deFormatedDate(date) {
if (!date) return null;
const [day, month, year] = date.split("-");
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
},
},
};
</script>
<style scoped>
.pointer {
cursor: pointer;
}
</style>