75 lines
1.8 KiB
Plaintext
75 lines
1.8 KiB
Plaintext
<template>
|
|
<div class="app-container financials">
|
|
<el-tabs v-model="activeTab" @tab-click="clickTab">
|
|
<el-tab-pane label="Monthly Payment" name="MonthlyPayment">
|
|
<monthly-payment v-if="activeTab=='MonthlyPayment'" />
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="Payment History" name="PaymentHistory">
|
|
<payment-history v-if="activeTab=='PaymentHistory'" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="Revenues" name="Revenues">
|
|
<Revenues v-if="activeTab=='Revenues'" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="Analysis" name="Analysis">
|
|
<keep-alive>
|
|
<Analysis v-if="activeTab=='Analysis'" />
|
|
</keep-alive>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import MonthlyPayment from './monthlyPayment/index'
|
|
import PaymentHistory from './paymentHistory/index'
|
|
import Revenues from './revenues/index'
|
|
import Analysis from './analysis/index'
|
|
import { mapGetters } from 'vuex'
|
|
import store from '@/store'
|
|
export default {
|
|
name: 'Financials',
|
|
components: {
|
|
MonthlyPayment,
|
|
PaymentHistory,
|
|
Revenues,
|
|
Analysis
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: 'MonthlyPayment'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['financialsActiveName'])
|
|
},
|
|
created() {
|
|
this.activeTab = this.financialsActiveName
|
|
},
|
|
|
|
methods: {
|
|
clickTab(tab, event) {
|
|
this.activeTab = tab.name
|
|
store.dispatch('financials/setActiveName', tab.name)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.financials{
|
|
.el-tabs{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.el-tabs__header {
|
|
height: 40px;
|
|
}
|
|
.el-tabs__content{
|
|
flex: 1;
|
|
.el-tab-pane{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|