hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับข้อมูลทะเบียนประมาณแท็ปข้อมูลส่วนตัว

Browse source
This commit is contained in:
Tanyalak 2024-04-22 17:08:23 +07:00
parent 56c009cc8a
commit 8ffd88a469
6 changed files with 438 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/modules/04_registryNew/components/detail/TabMain.vue
View file

@ -43,44 +43,59 @@ const splitterModel = ref<number>(12);
</script>
<template>
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<q-tabs v-model="store.tabMain" vertical class="text-blue">
<q-tab
class="hover-tab"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/>
</q-tabs>
</template>
<template v-slot:after>
<q-tab-panels
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-px-md"
<q-splitter
v-model="splitterModel"
disable
class="split"
>
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
<template v-slot:before>
<div class=""><!-- bg-tab-regi -->
<q-tabs
v-model="store.tabMain"
vertical
class="text-grey-6 text-weight-light"
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
><!-- indicator-color="transparent" -->
<q-tab
class="q-py-sm"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/><!-- hover-tab -->
</q-tabs>
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-pa-none"
><!-- split -->
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
class="q-pa-none"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</template>
<style scoped>
@ -89,4 +104,10 @@ const splitterModel = ref<number>(12);
color: white !important;
opacity: 1 !important;
}
.bg-tab-regi{
background-color: #273238;
}
.split{
border-radius: 10px !important;
}
</style>