|
|
|
|
<template>
|
|
|
|
|
<div style="height: 100%">
|
|
|
|
|
<q-splitter v-model="splitterModelRef" style="height: 100%">
|
|
|
|
|
<template #before>
|
|
|
|
|
<q-tabs v-model="selectedTabRef" vertical>
|
|
|
|
|
<q-tab name="Industry" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.industry.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
<q-tab name="AdminDivision" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.adminDivision.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
<q-tab name="PerformanceStatus" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.performanceStatus.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
<q-tab name="Counterparty" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.counterparty.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
<q-tab name="Country" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.country.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
<q-tab name="Currency" no-caps>
|
|
|
|
|
<div class="text-left" style="width: 200px">{{ $t('standard.currency.grid.title') }}</div>
|
|
|
|
|
</q-tab>
|
|
|
|
|
</q-tabs>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template #after>
|
|
|
|
|
<div class="pl-1" style="height: 100%">
|
|
|
|
|
<q-tab-panels v-model="selectedTabRef" animated swipeable style="height: 100%">
|
|
|
|
|
<q-tab-panel name="Industry" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<Industry></Industry>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
<q-tab-panel name="AdminDivision" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<AdminDivision></AdminDivision>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
<q-tab-panel name="PerformanceStatus" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<PerformanceStatus></PerformanceStatus>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
<q-tab-panel name="Counterparty" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<Counterparty></Counterparty>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
<q-tab-panel name="Country" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<Country></Country>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
<q-tab-panel name="Currency" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
|
|
|
|
|
<Currency></Currency>
|
|
|
|
|
</q-tab-panel>
|
|
|
|
|
</q-tab-panels>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</q-splitter>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
import Industry from './standard/Industry.vue';
|
|
|
|
|
import AdminDivision from './standard/AdminDivision.vue';
|
|
|
|
|
import PerformanceStatus from './standard/PerformanceStatus.vue';
|
|
|
|
|
import Counterparty from './standard/Counterparty.vue';
|
|
|
|
|
import Country from './standard/Country.vue';
|
|
|
|
|
import Currency from './standard/Currency.vue';
|
|
|
|
|
|
|
|
|
|
const splitterModelRef = ref(15);
|
|
|
|
|
const selectedTabRef = ref('Industry');
|
|
|
|
|
</script>
|
