185 lines
6.4 KiB
Vue
185 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('02')"
|
|
class="font-weight-black text-mono"
|
|
style="background:#fff!important"
|
|
color="#3c70a4">
|
|
PEMERIKSAAN
|
|
</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 == '02'" 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('02')"
|
|
class="font-weight-black text-mono"
|
|
style="color:#fff!important"
|
|
color="#3c70a4">
|
|
PEMERIKSAAN
|
|
</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 == '03'" row>
|
|
<v-flex ml-1 mr-1 mb-1 xs12>
|
|
<v-card color="#ffeaa5">
|
|
<v-layout row>
|
|
<v-flex ml-2 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block
|
|
depressed
|
|
flat
|
|
style="background:#fff!important"
|
|
|
|
class="font-weight-black text-mono"
|
|
color="#9e9e9e">
|
|
DEMOGRAFI
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-1 mb-1 xs4>
|
|
<v-btn block
|
|
depressed
|
|
flat
|
|
style="background:#fff!important"
|
|
|
|
class="font-weight-black text-mono"
|
|
color="#9e9e9e">
|
|
PEMERIKSAAN
|
|
</v-btn>
|
|
</v-flex>
|
|
<v-flex ml-1 mt-1 mr-2 mb-1 xs4>
|
|
<v-btn block
|
|
depressed
|
|
@click="changeTab('03')"
|
|
style="color:#fff!important"
|
|
class="font-weight-black text-mono"
|
|
color="#e16262">
|
|
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> |