99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<v-card class="pa-4 rounded-lg" elevation="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 4" :key="n" :value="n">
|
|
<v-row no-gutters>
|
|
|
|
<!-- left side-->
|
|
<v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
|
|
<datatable-patient v-if="tab === 1"></datatable-patient>
|
|
<div v-else-if="tab === 2">
|
|
<form-agreement></form-agreement>
|
|
<form-pemeriksaan class="mt-4"></form-pemeriksaan>
|
|
</div>
|
|
<div v-else-if="tab === 3">KIRIM HASIL</div>
|
|
<div v-else>PEMBAYARAN</div>
|
|
</v-col>
|
|
|
|
<!-- right side -->
|
|
<v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
|
|
<form-patient v-if="tab === 1"></form-patient>
|
|
<form-pengirim class="mt-4" v-if="tab === 1"></form-pengirim>
|
|
<detail-order v-if="tab === 2"></detail-order>
|
|
</v-col>
|
|
</v-row>
|
|
</v-tabs-window-item>
|
|
</v-tabs-window>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="module">
|
|
import DatatablePatient from "./datatable_patient.vue";
|
|
import Detail_order from "./detail_order.vue";
|
|
import FormPatient from "./form_patient.vue";
|
|
import Form_pemeriksaan from "./form_pemeriksaan.vue";
|
|
import FormPengirim from "./form_pengirim.vue";
|
|
import Kelpelanggan_agreement from "./kelpelanggan_agreement.vue";
|
|
export default {
|
|
name: "filtercomp",
|
|
components: {
|
|
"datatable-patient": DatatablePatient,
|
|
"form-patient": FormPatient,
|
|
"form-pengirim": FormPengirim,
|
|
"form-agreement": Kelpelanggan_agreement,
|
|
"form-pemeriksaan": Form_pemeriksaan,
|
|
"detail-order": Detail_order,
|
|
},
|
|
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>
|