152 lines
6.4 KiB
Vue
152 lines
6.4 KiB
Vue
<template>
|
|
<div>
|
|
<!--<v-layout>
|
|
<v-flex xs12 text-xs-center mb-2>
|
|
<v-card color="blue lighten-4">
|
|
<v-card-text class="pb-0 pt-1">
|
|
<v-btn
|
|
v-for="tab in tabs"
|
|
:color="tab.code == active ? 'black' : 'grey lighten-5'"
|
|
class="black--text ma-0 tab-btn"
|
|
:class="[tab.code == active ? 'active' : '']"
|
|
@click="changeTab(tab.code)"
|
|
flat
|
|
:key="tab.code"
|
|
:data="tab"
|
|
:disabled="!tab.enabled"
|
|
>
|
|
<h6 class="title">{{ tab.label }}</h6>
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>-->
|
|
<v-layout mt-0 v-if="active == '01'" row>
|
|
<v-flex ml-1 mr-1 mb-1 xs12>
|
|
<v-card color="teal lighten-3">
|
|
<v-layout row>
|
|
<v-flex ml-2 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block depressed @click="changeTab('01')" class="font-weight-black text-mono" style="color:#fff!important" color="teal lighten-2">
|
|
DEMOGRAFI
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block flat @click="changeTab('03')" class="font-weight-black text-mono" style="background:#fff!important" color="#3c70a4">
|
|
PEMERIKSAAN
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block flat @click="changeTab('04')" class="font-weight-black text-mono" style="background:#fff!important" color="#3c70a4">
|
|
REVIEW
|
|
</v-btn>
|
|
</v-flex>
|
|
<!-- <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
|
|
<v-btn block flat style="background:#fff!important" class="font-weight-black text-mono" color="#9e9e9e">
|
|
PEMBAYARAN
|
|
</v-btn>
|
|
</v-flex> -->
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout mt-0 v-if="active == '03'" row>
|
|
<v-flex ml-1 mr-1 mb-1 xs12>
|
|
<v-card color="#64b2cd">
|
|
<v-layout row>
|
|
<v-flex ml-2 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block depressed flat @click="changeTab('01')" style="background:#fff!important" class="font-weight-black text-mono"
|
|
color="teal">
|
|
DEMOGRAFI
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block depressed @click="changeTab('03')" class="font-weight-black text-mono" style="color:#fff!important" color="#3c70a4">
|
|
PEMERIKSAAN
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block flat @click="changeTab('04')" class="font-weight-black text-mono" style="background:#fff!important" color="teal">
|
|
REVIEW
|
|
</v-btn>
|
|
</v-flex>
|
|
<!-- <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
|
|
<v-btn block depressed flat style="background:#fff!important" class="font-weight-black text-mono" color="#9e9e9e">
|
|
PEMBAYARAN
|
|
</v-btn>
|
|
</v-flex> -->
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout mt-0 v-if="active == '04'" row>
|
|
<v-flex ml-1 mr-1 mb-1 xs12>
|
|
<v-card color="teal lighten-3">
|
|
<v-layout row>
|
|
<v-flex ml-2 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block flat @click="changeTab('01')" class="font-weight-black text-mono" style="background:#fff!important" color="#3c70a4">
|
|
DEMOGRAFI
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block flat @click="changeTab('03')" class="font-weight-black text-mono" style="background:#fff!important" color="#3c70a4">
|
|
PEMERIKSAAN
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block depressed @click="changeTab('04')" class="font-weight-black text-mono" style="color:#fff!important" color="teal lighten-2">
|
|
REVIEW
|
|
</v-btn>
|
|
</v-flex>
|
|
<!-- <v-flex ml-1 mt-1 mr-2 mb-1 xs4>
|
|
<v-btn block flat style="background:#fff!important" class="font-weight-black text-mono" color="#9e9e9e">
|
|
PEMBAYARAN
|
|
</v-btn>
|
|
</v-flex> -->
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.active {
|
|
border-bottom: solid 7px #000066 !important;
|
|
}
|
|
|
|
.tab-btn {
|
|
min-width: 400px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
changeTab(x) {
|
|
// this.active = x;
|
|
this.$store.commit('change_tab', x);
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
tabs: {
|
|
get() {
|
|
return this.$store.state.order.tabs
|
|
},
|
|
set(v) {
|
|
return
|
|
}
|
|
},
|
|
|
|
active() {
|
|
return this.$store.state.tab_active
|
|
}
|
|
}
|
|
}
|
|
</script> |