78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { useKpiDataStore } from '@/modules/08_KPI/store'
|
||
|
|
|
||
|
|
import Assessment from '@/modules/08_KPI/components/Tab/01_Assessment.vue'
|
||
|
|
import CommanderAbove from '@/modules/08_KPI/components/Tab/02_CommanderAbove.vue'
|
||
|
|
import CommanderAboveOneStep from '@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue'
|
||
|
|
import File from '@/modules/08_KPI/components/Tab/04_File.vue'
|
||
|
|
|
||
|
|
const store = useKpiDataStore()
|
||
|
|
|
||
|
|
const itemsTab = ref<any>([
|
||
|
|
{
|
||
|
|
name: "1",
|
||
|
|
label: "ผู้ขอรับการประเมิน",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "2",
|
||
|
|
label: "ผู้บังคับบัญชาเหนือขึ้นไป",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "3",
|
||
|
|
label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "4",
|
||
|
|
label: "ไฟล์เอกสาร",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const splitterModel = ref<number>(15);
|
||
|
|
</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-tab-panel
|
||
|
|
v-for="(tab, index) in itemsTab"
|
||
|
|
:key="index"
|
||
|
|
:name="tab.name"
|
||
|
|
>
|
||
|
|
<Assessment v-if="store.tabMain === '1'" />
|
||
|
|
<CommanderAbove v-if="store.tabMain === '2'" />
|
||
|
|
<CommanderAboveOneStep v-if="store.tabMain === '3'" />
|
||
|
|
<File v-if="store.tabMain === '4'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
</q-tab-panels>
|
||
|
|
</template>
|
||
|
|
</q-splitter>
|
||
|
|
</template>
|
||
|
|
<style scoped>
|
||
|
|
.hover-tab:hover {
|
||
|
|
background-color: #0793f1;
|
||
|
|
color: white !important;
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
</style>
|