platform/io.sc.standard.frontend/src/views/Standard.vue

<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" :title="$t('standard.tab.industry')">{{ $t('standard.tab.industry') }}</div>
          </q-tab>
          <q-tab name="AdminDivision" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.adminDivision')">{{ $t('standard.tab.adminDivision') }}</div>
          </q-tab>
          <q-tab name="PerformanceStatus" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.performanceStatus')">
              {{ $t('standard.tab.performanceStatus') }}
            </div>
          </q-tab>
          <q-tab name="Counterparty" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.counterparty')">{{ $t('standard.tab.counterparty') }}</div>
          </q-tab>
          <q-tab name="Country" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.country')">{{ $t('standard.tab.country') }}</div>
          </q-tab>
          <q-tab name="Currency" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.currency')">{{ $t('standard.tab.currency') }}</div>
          </q-tab>
          <q-tab name="LoanProduct" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.loanProduct')">{{ $t('standard.tab.loanProduct') }}</div>
          </q-tab>
          <q-tab name="TradeFinanceProduct" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.tradeFinanceProduct')">{{ $t('standard.tab.tradeFinanceProduct') }}</div>
          </q-tab>
          <q-tab name="BussinessProduct" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.tradeFinanceProduct')">{{ $t('standard.tab.bussinessProduct') }}</div>
          </q-tab>
          <q-tab name="Collateral" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.collateral')">{{ $t('standard.tab.collateral') }}</div>
          </q-tab>
          <q-tab name="Bond" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.tab.bond')">{{ $t('standard.tab.bond') }}</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-panel name="LoanProduct" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <LoanProduct></LoanProduct>
            </q-tab-panel>
            <q-tab-panel name="TradeFinanceProduct" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <TradeFinanceProduct></TradeFinanceProduct>
            </q-tab-panel>
            <q-tab-panel name="BussinessProduct" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <BussinessProduct></BussinessProduct>
            </q-tab-panel>
            <q-tab-panel name="Collateral" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Collateral></Collateral>
            </q-tab-panel>
            <q-tab-panel name="Bond" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Bond></Bond>
            </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';
import LoanProduct from './standard/LoanProduct.vue';
import TradeFinanceProduct from './standard/TradeFinanceProduct.vue';
import BussinessProduct from './standard/BussinessProduct.vue';
import Collateral from './standard/Collateral.vue';
import Bond from './standard/Bond.vue';

const splitterModelRef = ref(15);
const selectedTabRef = ref('Industry');
</script>